Chỉnh sửa trang chủ với Elementor: Thêm các mô-đun (văn bản, hình ảnh, nút bấm, v.v.)

Học cách thêm các mô-đun cơ bản là kỹ năng cốt lõi để thiết kế trang bằng Elementor. Chương này sẽ hướng dẫn bạn từng bước cách thêm các phần tử thông dụng như văn bản, hình ảnh, nút bấm và điều chỉnh kiểu dáng của chúng, giúp trang chủ của bạn bắt đầu định hình.

Chuẩn bị: Vào chế độ chỉnh sửa Elementor

1. Đăng nhập vào bảng quản trị WordPress, vào "Trang" → tìm "Trang chủ" (hoặc trang bạn muốn chỉnh sửa), nhấp "Chỉnh sửa".
2. Ở đầu trang, nhấp vào nút "Chỉnh sửa với Elementor" (màu xanh dương, có biểu tượng Elementor) để vào giao diện chỉnh sửa trực quan.

Sau khi vào, giao diện được chia thành ba phần:

• Bên trái: Bảng điều khiển mô-đun(chứa tất cả các phần tử có thể thêm)
• Ở giữa: Khu vực chỉnh sửa(Hiển thị hiệu ứng trang theo thời gian thực)
• Bên phải: Bảng điều khiển kiểu dáng(Sau khi chọn phần tử, có thể điều chỉnh kiểu dáng chi tiết)

Bước 1: Thêm mô-đun "Tiêu đề" (tiêu đề văn bản)

Tiêu đề là 'bộ khung' của trang, dùng để hướng dẫn người truy cập hiểu cấp độ nội dung.

1. Tìm mô-đun tiêu đềTrong bảng mô-đun bên trái, tìm mô-đun 'Tiêu đề' (biểu tượng là 'T') trong danh mục 'Cơ bản'.
2. Kéo và thêm vào trang.Nhấn giữ mô-đun "Tiêu đề" và kéo đến vị trí "+ Kéo phần tử vào đây" trong khu vực chỉnh sửa ở giữa, sau đó thả chuột. Lúc này, trang sẽ hiển thị một tiêu đề mặc định "Đây là tiêu đề".
3. Thay đổi nội dung tiêu đềChọn mô-đun tiêu đề vừa thêm, bảng chỉnh sửa sẽ hiện ra ở bên phải:
   • Trong "Nội dung" → "Văn bản tiêu đề", xóa văn bản mặc định và nhập tiêu đề của bạn (ví dụ: "Chào mừng đến với blog cá nhân của tôi").
   • Trong "Cấp độ tiêu đề", chọn cấp bậc (H1 lớn nhất, phù hợp cho tiêu đề chính; H2 nhỏ hơn một chút, phù hợp cho tiêu đề phụ, hãy chọn theo cấp bậc nội dung).
4. Điều chỉnh kiểu dáng tiêu đềNhấp vào tab "Kiểu dáng" trong bảng điều khiển bên phải để tùy chỉnh:
   • Phông chữ: Trong hộp thả xuống "Phông chữ", chọn phông chữ yêu thích (ví dụ: "Microsoft YaHei", "Arial").
   • Kích thước：Kéo thanh trượt 'Kích thước phông chữ' hoặc nhập trực tiếp giá trị (kích thước tiêu đề đề xuất trong khoảng 24-48px).
   • colors：Nhấp vào khối 'Màu văn bản' để chọn màu tiêu đề (ví dụ: đen, xanh đậm).
   • Căn chỉnh：Nhấp vào nút 'Căn chỉnh văn bản' để đặt tiêu đề căn trái, căn giữa hoặc căn phải (tiêu đề chính trang chủ đề xuất căn giữa).

Bước hai: Thêm mô-đun "Đoạn văn" (văn bản nội dung chính)

Đoạn văn được sử dụng để hiển thị nội dung chi tiết, như phần giới thiệu, hướng dẫn, v.v.

1. Thêm mô-đun đoạn vănTrong danh mục "Cơ bản" ở bên trái, tìm mô-đun "Đoạn văn" (biểu tượng là ký hiệu đoạn văn), kéo và thả xuống dưới mô-đun tiêu đề.
2. Chỉnh sửa nội dung đoạn vănChọn mô-đun đoạn văn, nhập nội dung vào phần "Văn bản" trong tab "Nội dung" ở bên phải (ví dụ: "Ở đây tôi chia sẻ những suy ngẫm về cuộc sống và ghi chú học tập, chào mừng thường xuyên ghé qua để giao lưu!").
3. Tối ưu hóa kiểu dáng đoạn vănChuyển sang tab "Kiểu dáng":
   • Kích thước phông chữ: Khuyến nghị đặt ở mức 16-18px (tiện cho việc đọc).
   • Chiều cao dòng: Điều chỉnh thành 1.5-1.8 lần (giúp khoảng cách chữ thoải mái hơn).
   • colors: Chọn màu sắc phân biệt với tiêu đề (ví dụ: xám đậm, tránh quá gần với màu nền)

Bước thứ ba: Thêm module 'Hình ảnh' (chèn ảnh)

Hình ảnh giúp trang trở nên sinh động hơn, nên chọn những bức ảnh rõ nét, có liên quan (ví dụ: ảnh cá nhân, ảnh sản phẩm, ảnh phong cảnh)

1. Tải lên hoặc chọn ảnhỞ danh mục 'Cơ bản' bên trái, tìm mô-đun 'Hình ảnh', kéo và thả xuống dưới đoạn văn. Chọn mô-đun hình ảnh, ở bên phải 'Nội dung' → 'Hình ảnh' nhấp vào 'Chọn hình':
   • Nếu hình ảnh đã có trong máy tính, nhấp vào 'Tải tệp lên' → chọn hình ảnh → nhấp vào 'Chọn'.
   • Nếu đã tải lên trước đó, chọn trực tiếp hình ảnh có sẵn trong 'Thư viện phương tiện'.
2. Điều chỉnh hiệu ứng hiển thị hình ảnhChuyển sang tab "Kiểu dáng":
   • Kích thước: Trong "Chiều rộng" thiết lập tỷ lệ ảnh chiếm trang (ví dụ: 100% biểu thị chiều rộng toàn màn hình, 80% biểu thị hẹp hơn một chút).
   • Góc bo tròn: Kéo thanh trượt "Bán kính viền" để làm cho góc ảnh tròn hơn (giá trị càng lớn, góc bo càng rõ).
   • Bóng đổ: Bật 'Bóng hộp' để thêm bóng nhẹ cho ảnh (giúp ảnh có chiều sâu hơn).
3. Thêm mô tả ảnh (tùy chọn)Nhập mô tả ảnh (ví dụ: 'Ảnh du lịch của tôi') trong 'Nội dung' → 'Văn bản thay thế' để giúp công cụ tìm kiếm hiểu nội dung ảnh và cải thiện SEO.

Bước thứ tư: Thêm mô-đun "Nút bấm" (hướng dẫn nhấp chuột)

Nút bấm thường được sử dụng để hướng dẫn khách truy cập thao tác, chẳng hạn như "Xem thêm", "Liên hệ với tôi", "Mua ngay", v.v.

1. Thêm mô-đun nút bấmTrong danh mục "Cơ bản" ở bên trái, tìm mô-đun "Nút bấm" và kéo thả xuống dưới hình ảnh.
2. Thiết lập nội dung và liên kết cho nútChọn mô-đun nút, trong phần "Nội dung" ở bên phải:
   • Văn bảnNhập văn bản cho nút (ví dụ: "Xem bài viết của tôi").
   • Liên kết: Nhấp vào ô nhập liệu bên cạnh "Động thái", nhập địa chỉ liên kết (ví dụ: địa chỉ trang danh sách blog của bạn hoặc liên kết bên ngoài).
     • Nếu liên kết đến trang trong trang web, bạn có thể nhấp vào biểu tượng "Chọn trang" ở bên phải ô nhập liệu để chọn trực tiếp trang mục tiêu.
3. Thiết kế kiểu dáng nút bấmChuyển sang tab "Kiểu dáng" để tạo nút bấm nổi bật:
   • colors：「Màu văn bản」 chọn màu trắng，「Màu nền」 chọn màu sắc rực rỡ (như xanh dương, cam, phối hợp với tông màu chính của trang).
   • Kích thước：「Kích thước nút」 chọn 「Trung bình」 hoặc 「Lớn」，để nút dễ nhấp hơn.
   • Hình dạng：「Bán kính viền」 đặt từ 5-10px (góc hơi bo tròn sẽ đẹp hơn).
   • *Hiệu ứng hover**: Nhấp vào tab "hover", thiết lập màu sắc khi di chuột qua (chẳng hạn như tối màu hơn), nâng cao cảm giác tương tác.

Bước 5：Điều chỉnh khoảng cách giữa các module (giúp trang gọn gàng hơn)

Sau khi thêm nhiều module, có thể xuất hiện vấn đề khoảng cách quá gần hoặc quá xa, cần điều chỉnh bố cục:

1. Chọn module：Nhấp vào cạnh của mô-đun (xuất hiện viền màu xanh).
2. Điều chỉnh lề ngoài：Trong bảng điều khiển bên phải 「Nâng cao」→「Lề ngoài」, thiết lập khoảng cách giữa mô-đun và các phần tử trên dưới (ví dụ: đặt 「Lề trên」 là 30px để tăng khoảng cách với mô-đun phía trên).
3. Căn chỉnh thống nhất：Nhấn giữ Ctrl phím (hoặc Command phím) đồng thời chọn nhiều mô-đun, nhấp vào nút "Căn chỉnh" trên thanh công cụ trên cùng (như "Căn giữa") để sắp xếp các phần tử gọn gàng hơn.

Bước sáu: Lưu và xem trước

1. Lưu thay đổi: Nhấp vào nút 「Cập nhật」 ở góc dưới bên trái trang (khuyến nghị lưu kịp thời sau mỗi lần sửa đổi).
2. Xem trước hiệu ứng: Nhấp vào nút 「Xem trước」 ở góc trên bên trái, chọn 「Xem trước trên máy tính」, 「Xem trước trên máy tính bảng」, 「Xem trước trên điện thoại」, kiểm tra hiệu ứng hiển thị trên các thiết bị khác nhau (đảm bảo văn bản không chồng chéo và hình ảnh không bị biến dạng trên điện thoại).

Mẹo cho người mới bắt đầu

• Mô-đun có thể thêm lặp lại: Nếu cần nhiều đoạn văn hoặc hình ảnh, chỉ cần kéo và thả mô-đun tương ứng nhiều lần.
• Xóa mô-đun: Sau khi chọn mô-đun, nhấn phím Delete hoặc nhấp vào biểu tượng «thùng rác» phía trên mô-đun.
• Sao chép mô-đun: Sau khi chọn mô-đun, nhấp vào biểu tượng "Sao chép" để nhanh chóng sao chép các phần tử có cùng kiểu dáng (chỉ cần sửa nội dung).

Thông qua các bước trên, bạn đã nắm được kỹ năng cốt lõi nhất của Elementor trong việc thêm mô-đun. Tiếp theo, hãy thử thêm các mô-đun như "Biểu tượng", "Đường phân cách", "Danh sách" để làm trang chủ phong phú hơn!