Ở phần 1, chúng ta đã biết qua Elementor và biết được làm thế nào để có thể tạo 1 giao diện website.
Phần này chúng ta sẽ đi chi tiết về Elementor nhé!
Giao diện của Elementor
Giờ thì bạn tạo một page trống mới (Pages => Add New), đặt cho nó cái tiêu đề là được => Bấm “Edit with Elenmentor”
Bạn sẽ thấy giao diện nó trông như này
Trong đó:
- Cài đặt trang
- Thêm các section mới cho trang
- Lấy mẫu trang dựng sẵn từ thư việc của Elementor (template)
- Các widget để tạo các thành phần cho trang
- Thanh điều khiển
- Mở các thành phần dựng trang
Page settings – Cài đặt trang
Thêm section, thành phần mới
Bạn thử bấm dấu “+” chỗ mũi tên, nó sẽ hiện ra bảng như bên dưới
Bạn sẽ có được một section mới như thế này. Mình đã chọn layout 3 cột. Sau đó mình sẽ thấy 1 section được bao quanh bởi 1 viền xanh dương, và 3 ô nhỏ như hình dưới.
Giờ bạn sẽ có thể kéo thả các widget vào 3 cột này tùy theo layout mà bạn đã hình dung từ trước.
Lấy Template dựng sẵn trong thư viện
Với một trang trắng hoàn toàn như trên, bạn sẽ mất khá nhiều thời gian để làm một page hoàn chỉnh.
Rất may là Elementor có dựng sẵn các trang rất đẹp trong thư viện, nếu muốn tiết kiệm thời gian, hoặc mới bắt đầu làm quen thì bạn có thể sử dụng các template này; theo đánh giá của mình là nó khá đẹp và xịn xò, bạn có thể sử dụng các template này và tiếp tục edit trên nó tới khi nào ưng ý.
Để chọn template, bạn click vào button như mình đã đánh dấu trên hình nhé.
Bạn sẽ thấy giao diện như hình dưới, trong đó:
- Pages: Chèn các mẫu trang đã được dựng hoàn thiện
- Blocks: Chèn các khối thành phần lẻ tẻ vào trang
- My templates: Các mẫu trang bạn đã dựng trước đây và bạn đã lưu vào thư việc riêng của mình để dùng về sau
Thư viện này, có một số ít là miễn phí, còn hầu hết là bạn phải nâng cấp lên bản Elementor Pro mới sử dụng được.
Mẫu miễn phí bạn có thể sử dụng thì sẽ có chữ Insert như hình khi bạn rê chuột vào từng mẫu
Giờ mình bấm Insert để chèn hẳn một mẫu trang miễn phí hoàn thiện
Khi bạn tạo trang đầu tiên, Elementor sẽ yêu cầu bạn tạo tài khoản & kết nối với wordpress.
Bạn chỉ cần làm việc này một lần đầu tiên
Giờ thì bạn quay lại trang elementor đang tạo, refresh lại trang (bấm Publish/Save draft để lưu lại nếu bạn muốn trước khi refresh nhé)
Giờ thì bạn vào lại thư viện, và chèn một trang mẫu vào (click Pages)
Giờ thì bạn đã có 1 giao diện sẵn để chỉnh sửa lại theo ý bạn muốn.
Giới thiệu các Elements (thành phần)
Thành Phần Cơ Bản – Basic Elements
- Inner section: Thêm cột chứa các thành phần vào trang
- Headling: Thêm tiêu đề cho từng khối trên trang
- Image: Thêm hình ảnh
- Text editor: Thêm đoạn văn bản
- Video: Thêm video từ youtube, vimeo
- Button: Thêm nút kêu gọi hành động
- Divider: Các đoạn phân trang để có bố cục rõ ràng
- Spacer: Thêm các khoảng trắng phân cách các thành phần
- Google Map: Thêm Google Map vào trang
- Icon: Thêm các icon
- WPForms: Form điền thông tin
Thành Phẩn Tổng Quan – General Elements
- Image box
- Icon box
- Star rating
- Image Carousel
- Basic gallery
- Icon list
- Counter
- Progress bar
- Testimonial
- Tab
- Accordion
- Toogle
- Social icon
- Alert
- Soundcloud
- Shortcode
- HTML
- Menu anchor
- Sidebar
- Read more
Mỗi thành phần, bạn nhìn hình mô tả là hình dung được nó làm gì rồi.
Bạn cứ kéo vào và thử nghiệm xem, nó giúp bạn ứng dụng vào việc gì nhé.
Thành Phần Cơ Bản Trên Website – WordPress Elements
Tương tự 2 phần trên, tuy nhiên phần này ít dùng nên bạn có thể dành thời gian để test nếu muốn, mình thì hầu như không dùng phần này bao giờ.
Thành Phần Trên Elementor Pro
Nếu bạn đã mua/ cài đặt bản Elementor Pro, đây là những chức năng xịn xò bạn có được.
Nó đúng với cái tên Pro, vì có nhiều chức năng animation rất được. Nếu có ngân sách thì bạn nên mua bản Pro để có thể có thêm những hiệu ứng toẹt vời ông mặt trời.
Thêm và chỉnh sửa từng thành phần
Thêm Thành Phần Mới
Ví dụ bạn muốn thêm một tiêu đề cho một khối nội dung trên trang,
=> Click chuột vào Heading
=> Giữ chuột (không nhả ra), kéo tới chỗ bạn muốn nó ở đó (Drag)
=> Nhả việc nhấn chuột ra (Drop)
Bạn kéo thả tiếp một Text editor và một Image vào để xem nó trông thế nào nhé
Bạn trở lại khu vực lấy các thành phần ở ô bên dưới
Sau khi thêm Text editor & image, nó trông thế này
Chỉnh Sửa Từng Thành Phần
Giờ bạn muốn sửa thành phần nào, bạn click chuột vào thành phần đó.
Cột điều khiển bên trái sẽ hiển thị khung chỉnh sửa thành phần đó.
- Content: nơi bạn chỉnh sửa nội dung thành phần
- Style: Nơi bạn chỉnh sửa kiểu chữ, màu sắc, …
- Advanced: Chỉnh sửa nâng cao như căn chỉnh lề 4 phía, thêm hiệu ứng động, thêm màu/hình nền, thêm đường viền, …
Ví dụ với Heading ở trên, mình có thể thay đổi như thế này
Thay đổi font chữ, màu chữ, làm nổi chữ (text shadow) ở tab Style
- Text color: đổi màu chữ
- Typography: Đổi kiểu chữ
- Family: Đổi font chữ
- Size: Kích thước chữ
- Weight: Độ đậm chữ
- Transform: Viết hoa toàn bộ / Viết hoa chữ cái đầu / viết thường / bình thường
- Line Height: Khoảng trắng giữa các dòng
- Letter spacing: Độ dày của chữ
- …
Di Chuyển Các Thành Phần
Mình rê chuột vào thành phần cần di chuyển
=> Click và giữ chuột vào biểu tượng cây bút
=> Kéo nó tới chỗ cần tới
=> Thả chuột
Thêm Hiệu Ứng Chuyển Động
Bạn muốn thành phần nào có hiệu ứng chuyển động ngang dọc, nhấp nháy hoa lá
Chọn thành phần => Tab Advanced => Motion Affects => Chọn hiệu ứng
Thêm Màu/ Hình Nền
Bạn thêm màu nền / hình nền ở Tab Advanced => BackGround
Có thành phần thì mục BackGround này nó nằm ở Tab Style nhé. Bạn cứ lục lọi chút là thấy.
Chỉnh sửa trang theo từng thiết bị
Khi bạn thao tác trên máy tính, bạn thấy nó trông ổn rồi.
Nhưng khi trang hiển thị lên thiết bị di động hoặc máy tính bảng, nó lại không cân đối.
Bạn cần vào kiểm tra xem trang hiển thị trên các thiết bị khác ok chưa.
Cái hay là khi mình điều chỉnh layout bên Mode Mobile, thì giao diện bên Desktop vẫn như ban đầu. Như vậy bạn có thể customize giao diện theo thiết bị cực kì tiện lợi.
Xem trước trang
Bạn làm tiếp, vọc vạch hoàn thiện một trang hoàn chỉnh thử nhé.
Trong khi làm, bạn muốn xem trước xem nó có ổn không thì vào biểu tượng con mắt
Lưu nháp, đăng & cập nhật trang
Đăng trang để hiển thị công khai => Publish
Cập nhật để các thay đổi bạn vừa làm được lưu lại => Update
Trang mới tạo mới có nút Publish. Bạn đã bấm nó một lần rồi, thì nó đổi thành Update nhé.
Lưu mẫu trang vào thư viện để dùng về sau
Đây là 1 tính năng rất hay của Elementor, khi bạn đã tạo được 1 format ưng ý (ví dụ như ảnh bo viền + shadow như của mình, hoặc text với nền có màu, hoặc có thể format cho cả post), thì bạn có thể lưu lại để tải sử dụng.
Lời Kết
Okay tới đây thì bạn đã có thể tự tin mà bắt đầu tạo ra giao diện cho website của mình rồi.
Hy vọng hướng dẫn này sẽ giúp bạn dễ dàng tự tạo được các trang như homepage, landing page trên website wordpress đẹp & chuyên nghiệp.
Nếu có bất kì thắc mắc nào, bạn cứ comment ở bên dưới, hoặc gửi tin nhắn qua facebook của mình để mình có thể support bạn nhé.
3 thoughts on “Hướng dẫn sử dụng Elementor để tạo website (phần 2)”
Pingback: Hướng dẫn sử dụng Elementor để tạo website (phần 1) -
Pingback: Hướng dẫn Wordpress: Page và Post -
Pingback: Các bước để tạo 1 website với Wordpress và Elementor -