Ở 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
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
Template có thể sử dụng
Template cần upgrade Pro
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
Bấm "Get Started"
Nhập thông tin account muốn tạo
Bấm "Connect"
WordPress báo connect thành công
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.
Mình click vào tiêu đề => Vào Tab Style => Đổi lại cỡ chữ
Sau khi điều chỉnh lại cho cân đối
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é.
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 -