Sửa trang bằng Elementor

Elementor là công cụ dựng trang kéo thả: anh/chị bấm thẳng vào chữ, ảnh, nút trên trang để sửa và thấy kết quả ngay, không cần biết code. Nhiều trang chủ, trang giới thiệu, trang khuyến mãi do bên em làm được dựng bằng Elementor.

Bài này dùng trang mẫu “Khuyến mãi tháng 11” để minh hoạ. Trước khi sửa trang quan trọng như trang chủ, anh/chị nên đọc trước bước 9 để biết cách khôi phục bản cũ nếu sửa nhầm.

Bước 1: Mở trang bằng Elementor

Ở menu bên trái, bấm Trang rồi tìm trang cần sửa.

• 1 Trang dựng bằng Elementor có chữ Elementor sau tiêu đề.
• 2 Rê chuột vào dòng của trang rồi bấm Sửa với Elementor.

Nếu đang ở trình soạn thảo thường của trang, bấm nút Sửa với Elementor ở đầu trang. Trình sửa Elementor khá nặng, cần chờ vài giây để tải xong.

Bước 2: Làm quen giao diện trình sửa

• 1 Nút + (Thêm thành phần): mở danh sách tiện ích để thêm vào trang.
• 2 Bảng bên trái: danh sách tiện ích, hoặc các ô sửa của phần đang chọn trên trang.
• 3 Vùng trang ở giữa: trang hiển thị gần giống ngoài website. Rê chuột lên phần nào sẽ thấy khung viền, bấm vào để chọn và sửa.
• 4 Chuyển chế độ xem máy tính, máy tính bảng, điện thoại.
• 5 Xuất bản: lưu và đưa thay đổi lên website. Nút sáng màu khi có thay đổi chưa lưu.

Mọi thay đổi chỉ hiện ra ngoài website sau khi bấm Xuất bản.

Bước 3: Sửa chữ, tiêu đề

• 1 Bấm vào tiêu đề (hoặc đoạn chữ) trên trang. Khung viền hiện quanh phần được chọn, bảng bên trái chuyển sang Sửa Tiêu đề (hoặc Sửa Văn bản).
• 2 Sửa nội dung trong ô Tiêu đề. Trang ở giữa cập nhật ngay khi anh/chị gõ.

Với tiêu đề và đoạn chữ, có thể gõ thẳng trên trang: bấm vào chữ, đặt con trỏ rồi sửa như trong Word. Đoạn chữ dài có thanh công cụ để in đậm, nghiêng, chèn liên kết.

Bước 4: Đổi ảnh

• 1 Bấm vào ảnh cần đổi trên trang.
• 2 Bấm vào khung Chọn ảnh ở bảng bên trái. Cửa sổ thư viện ảnh mở ra: chọn ảnh có sẵn hoặc tải ảnh mới từ máy lên, rồi bấm nút chèn ở góc dưới bên phải.
• 3 Độ phân giải hình ảnh: chọn cỡ ảnh. Ảnh nhỏ trên trang nên chọn cỡ vừa (ví dụ Medium) để trang tải nhanh, chỉ chọn Full cho ảnh lớn kéo ngang trang.

Ảnh nên chuẩn bị đúng tỉ lệ với ảnh cũ để bố cục không bị xô lệch.

Bước 5: Sửa nút: chữ và đường dẫn

• 1 Bấm vào nút trên trang, ví dụ Mua ngay.
• 2 Văn bản: chữ hiển thị trên nút.
• 3 Liên kết: địa chỉ mở ra khi khách bấm nút. Có thể gõ địa chỉ đầy đủ (bắt đầu bằng https://), số điện thoại dạng tel:0901234567 hoặc gõ vài chữ để tìm trang, bài viết có sẵn trên website.

Bấm biểu tượng bánh răng cạnh ô Liên kết để chọn mở liên kết trong tab mới (nên dùng cho liên kết ra website khác).

Bước 6: Thẻ Nội dung, Kiểu hiển thị, Nâng cao

Mỗi phần đang chọn có 3 thẻ ở đầu bảng bên trái:

• 1 Nội dung: chữ, ảnh, liên kết (các bước trên).
• 2 Kiểu hiển thị: màu sắc, cỡ chữ, viền, bo góc…
• 3 Nâng cao: khoảng cách lề, ẩn/hiện theo thiết bị, hiệu ứng. Ít khi cần sửa.

Ví dụ ở thẻ Kiểu hiển thị của nút:

• 4 Kiểu chữ: bấm biểu tượng bút để chọn font, cỡ chữ, độ đậm.
• 5 Màu chữ: bấm ô màu bên phải để chọn màu mới.
• 6 Màu sắc: màu nền của nút. Thẻ Di chuột phía trên dùng để đặt màu khi khách rê chuột lên nút.

Ô màu có biểu tượng quả địa cầu tô màu là đang dùng màu chung của website. Nên giữ màu chung để toàn website đồng bộ, chỉ đổi khi thật cần.

Bước 7: Thêm tiện ích mới bằng kéo thả

Bấm nút + trên thanh công cụ để mở danh sách tiện ích.

• 1 Gõ tên tiện ích vào ô Tìm tiện ích…, ví dụ “tiêu đề”, “hình ảnh”, “nút”.
• 2 Nhóm Cơ bản có các tiện ích hay dùng: Tiêu đề, Hình ảnh, Văn bản, Video, Nút bấm, Khoảng cách, Google Maps…
• 3 Giữ chuột vào tiện ích, kéo sang trang và thả vào vị trí mong muốn. Đường kẻ xanh hiện ra cho biết chỗ sẽ thả. Kéo xuống khung Kéo tiện ích vào đây cuối trang để thêm một khối mới.

Thả xong, tiện ích mới được chọn sẵn để anh/chị nhập nội dung như các bước trên. Muốn xoá một phần, bấm chuột phải vào phần đó trên trang rồi chọn xoá (hoặc chọn rồi nhấn phím Delete). Các tiện ích có ổ khoá là bản trả phí (Elementor Pro), không dùng được.

Bước 8: Xem trước trên điện thoại, máy tính bảng

Hơn nửa số khách xem website bằng điện thoại, nên kiểm tra cả 3 chế độ trước khi xuất bản.

• 1 Máy tính: chế độ mặc định.
• 2 Máy tính bảng: khung trang thu lại rộng như máy tính bảng.
• 3 Di động: xem trang như trên điện thoại. Các cột tự xếp chồng thành một cột.

Chữ quá to hoặc ảnh lệch trên điện thoại thì sửa ngay khi đang ở chế độ Di động: các ô có biểu tượng màn hình nhỏ (ví dụ cỡ chữ, khoảng cách) chỉ áp dụng cho thiết bị đang xem, không làm thay đổi bản trên máy tính.

Bước 9: Xuất bản và khôi phục bản cũ

• 1 Sửa xong, bấm Xuất bản để lưu và cập nhật trang trên website. Mũi tên cạnh nút có thêm tuỳ chọn lưu bản nháp (chưa đưa lên website).
• 2 Bấm biểu tượng đồng hồ (Lịch sử). Thẻ Hành động liệt kê các thao tác vừa làm, bấm vào một dòng để quay lại thời điểm đó (hoặc nhấn Ctrl+Z để hoàn tác từng bước).
• 3 Thẻ Bản sửa đổi: mỗi lần xuất bản là một bản lưu, kèm ngày giờ và người sửa. Bấm vào bản cũ để xem trước trên trang (ảnh trên: bản “Khuyến mãi tháng 10”).
• 4 Đúng bản cần lấy lại thì bấm Áp dụng, rồi bấm Xuất bản để đưa lên website. Bấm Loại bỏ nếu chỉ xem rồi thôi.

Lưu ý

• Elementor không tự xuất bản thay đổi: đóng trình sửa khi chưa bấm Xuất bản thì thay đổi không lên website (Elementor chỉ lưu tạm một bản tự động trong Lịch sử).
• Phần đầu trang (logo, menu) và chân trang thường thuộc giao diện chung của website, không sửa trong trang này. Cần đổi menu xem bài Chỉnh sửa menu website.
• Các nút, mục có chữ Pro, Nâng cấp hoặc biểu tượng ổ khoá là tính năng trả phí, không cần dùng.
• Trang bị vỡ bố cục, trình sửa tải mãi không xong hoặc báo lỗi, anh/chị gửi yêu cầu hỗ trợ để bên em kiểm tra.