Sau khi xem qua bài Giới thiệu về Elementor cùng với các thao tác cơ bản, mình tin là bạn đã hiểu được phần nào tính tiện lợi nhưng không kém phần mạnh mẽ, linh hoạt của nó trong việc thiết kế giao diện website WordPress cho riêng mình.
Để ứng dụng Elementor thực tế hơn, tiếp tục bài này mình sẽ từng bước hướng dẫn bạn ứng dụng Elementor trong việc tự thiết kế một giao diện WordPress theo ý muốn của mình.
Thay vì thiết kế một website phức tạp vì thời lượng bài viết không đủ, thì mình sẽ hướng dẫn các bạn xây dựng một website giống như ảnh phía dưới (được lấy từ giao diện Landing Page 02 của WP Astra), nhấp vào ảnh để xem rõ hơn.
Sau khi bạn biết cách dùng Elementor để làm một giao diện đơn giản, thì bạn có thể sử dụng những theme hỗ trợ riêng dành cho Elementor (mình sẽ liệt kê cuối bài) để ứng dụng cho một giao diện phức tạp hơn.
Thiết lập Site Settings cơ bản cho dự án
Bây giờ bạn vào một trang bất kỳ và truy cập giao diện chỉnh sửa của Elementor để thiết lập Site Settings, phần này ở đâu bạn xem lại hướng dẫn của mình ở bài trước.
Trước tiên về thiết lập Global Colors là các màu sắc sử dụng trong theme, ở đây sẽ khai báo trước các màu mà mình sẽ sử dụng lại nhiều lần. Với thiết kế của giao diện mẫu, thì chúng ta chỉ có một ít màu sắc, nên mình sẽ thiết lập như sau:
- Primary (màu chính) – Những thành phần trên website cần nó nổi bần bật lên thì sẽ dùng màu này, mã màu #116dff
- Secondary (màu phụ) – Ở đây mình sẽ thiết lập màu sẽ hiển thị ra khi rê chuột vào các nút mà nó sử dụng màu primary ở trên, nên cho nó màu đậm xíu, dùng mã màu #0055db
- Text (màu chữ) – Màu chữ trên website ở trường hợp này là nên dùng màu đen, nhưng đừng dùng màu đen kịch trần thấy ghê, mình dùng mã #3a3a3a
- Accent (màu điểm nhấn) – Màu này mình sẽ sử dụng để thiết lập màu nền cho một số khu vực cần làm nổi bật ở trang chủ, mã màu là #F0F6FF.
Kế tiếp là thiết lập font chữ mặc định, theo như bản thiết kế gốc thì họ dùng kiểu font chữ có chân (serif) mà cụ thể là Noto Serif cho tiêu đề lớn, và font chữ không chân (sans-serif) mà cụ thể là Roboto. Đáng mừng là cả hai font này đều hỗ trợ Tiếng Việt nên chúng ta dùng y chang luôn. Ở cấu hình Global Fonts chúng ta thiết lập như sau.
- Primary: Dùng font Noto Serif, không cài đặt size chữ, weight 400.
- Text: Dùng font Roboto, size 16px, weight 400, line height 28px.
Sau khi cài đặt các thông số trên xong, chúng ta sẽ qua phần thiết lập Theme Style để áp dụng một số thông số này lên.
Đầu tiên là mục Typography là thiết lập kiểu chữ cho theme, trong phần này có các mục khác nhau như Body, Link, H1, H2,…mà ở mỗi mục sẽ có cái biểu tượng quả địa cầu, bạn nhấp vào và chọn màu sắc và font chữ mà ta đã vừa thiết lập. Ở phần Body, text color bạn chọn màu text, Link thì Color chọn màu Primary, Hover thì chọn Color là Secondary. Tương tự bạn làm với phần H1, H2, h3, H4, H5, các phần này bạn chỉ nên chọn font là Primary, và size chữ nên thiết lập thủ công cho từng phần nhé để hiển thị độ lớn của chữ phù hợp.
Kế tiếp là thông số màu mặc định cho các nút bấm, bạn vào mục Button và thiết lập Color là màu Primary, Text Color màu trắng.
Dưới đây là video toàn bộ thao tác của phần Site Settings.
Thiết kế Header và Footer
Cài plugin quản lý Header và Footer
Elementor mặc định sẽ hiển thị cái header của theme trên đầu trang, bạn chỉ có thể tuỳ biến lại một số tuỳ chỉnh cơ bản cho phần này, tương tự với phần chân trang (Footer). Khi tạo page, Elementor có hỗ trợ bạn sử dụng loại template Elementor Canvas để bạn có một trang trống hoàn toàn để tự thiết kế header và footer. Lúc này bạn sẽ phát sinh một vấn đề, hoặc là phần header/footer được thiết kế lại tốt hơn, hoặc là ở mỗi trang bạn sử dụng template Canvas và thiết kế lại các phần này từ đầu.
Cả hai phương án trên đều không thích hợp cho lắm, nhưng rất may mắn đó là Elementor có hỗ trợ tính năng bạn thiết kế các mẫu template cho header và footer riêng, nhưng tin buồn là tính năng này chỉ hỗ trợ trên phiên bản Elementor trả phí.
Thông tin hay ho: Nếu bạn sử dụng hosting của AZDIGI thì hãy gửi ticket để yêu cầu kích hoạt Elementor Pro miễn phí. Hoàn toàn an toàn và tự cập nhật phiên bản mới.
Chúng ta có một cách khác để có thể thiết kế lại header và footer hoàn toàn bằng Elementor, và sau đó áp dụng chúng cho toàn bộ website, thông qua plugin Elementor Header & Footer Builder do BrainStorm sản xuất. Bạn nhấp vào liên kết của mình để tải plugin về và cài vào website nhé, sau đó kích hoạt lên.
Sau khi kích hoạt xong, bạn truy cập vào Appearance => Elementor Header & Footer Builder để bắt đầu tạo template.
Thiết kế header
Phần header tức là đầu trang mà nó sẽ hiển thị trên toàn bộ các trang, thực ra là ta đang thiết kế landing page nhưng bạn cũng cần hiểu để áp dụng sau này thiết kế các trang khác.
Giờ thì ta hãy xem phần header mà giao diện mẫu chúng ta làm nó trông thế nào.
Đây là một cái header đơn giản, nhìn sơ thì ta có thể tưởng tượng ra là nó sẽ gồm một cái container, trong đó sẽ có 3 cột để hiển thị logo hoặc tên website bên trái, cột giữa hiển thị menu và cột phải hiển thị một cái nút. Tiến hành thôi.
Appearance => Elementor Header & Footer Builder chọn Add New để bắt đầu tạo template cho Header. Ta đặt tên gì đó tuỳ thích, hét-đơ cũng là cái tên. Type of Template thì chọn là Header.
Display On thì ta sẽ chọn Entrie Website để nó hiển thị toàn bộ trang. User Role chọn All để hiển thị trên mọi đối tượng truy cập.
Nếu bạn muốn áp dụng header này vẫn hiển thị trên cả các trang dùng template Elementor Canvas, mình thấy vẫn nên áp dụng tuỳ chọn này.
Phần cuối cùng là quan trọng nhất, cái header này bạn phải dùng template Elementor Canvas. Thiết lập xong thì ấn Publish để đăng lên.
Trang ta đã tạo xong, bây giờ bạn ấn nút Edit with Elementor để bắt đầu thiết kế.
Trước tiên ta tạo một container chính, đây sẽ là một container bao quát toàn bộ header. Chúng ta sẽ đặt Direction của container này Row – horizontal để xếp các container bên trong nó thành hàng ngang.
Kế đến, ta chèn thêm vào trong đó 3 cái container với kích thước tương ứng 30%, 55% và 15%. Trong thiết lập mỗi cột, bạn chọn Justify Center là Center để nó hiển thị ra giữa đều nhau.
Bây giờ chúng ta sẽ chèn widget tương ứng theo tên vào các cột như sau:
- Cột 1: Chèn widget HFB Site Title để hiển thị tên website, hoặc sử dụng HFB Site Logo để chèn logo. Mình dùng title cho giống với demo.
- Cột 2: Chèn widget HFB Navigation Menu.
- Cột 3: Chèn widget Button.
Khi chèn xong ta sẽ có kết quả như hình dưới, rồi từ từ từng bước ta sẽ căn chỉnh lại sau.
Cái menu nó chưa hiển thị ra do ta chưa có tạo bất kỳ cái menu nào. Tạm bấm Publish để lưu lại nhé, ta quay trở lại trang quản trị, truy cập vào Appearance => Menu để tạo menu. Chúng ta đặt tên menu rồi ấn nút Create Menu.
Bây giờ bạn có thể thêm các trang hoặc bài viết nào đó bên cột trái vào menu bằng cách chọn nó rồi ấn nút Add to Menu, nhưng chúng ta đang tạo landing page nên sẽ không thêm trang vào menu, mà sẽ tạo menu sử dụng công cụ Custom Link bên tay trái, phần URL bạn nhập là # và Link Text là nhập các liên kết tương ứng với giao diện mẫu, bao gồm Home, About Event, Schedule, Speakers, Organisers, Sponsors. Sau đó thì nhớ lưu lại.
Oke bây giờ quay lại trang chỉnh sửa header khi nãy, nhấp vào widget menu và chọn menu vừa tạo, nó đã hiển thị ra rồi.
Bây giờ việc chúng ta làm là trang trí lại các widget cho nó hiển thị giống mẫu nhé.
Trước tiên là cột đầu tiên hiển thị tên website, chúng ta sẽ cho nó thành màu đen, font bạn muốn nó thành cái gì cũng được vì là tên website mà cho nó nổi tí. Bạn nhấp vào widget đó và chọn Styles, sau đó chỉnh Color thành màu của Text, hoặc tự gán màu bất kỳ cho nó bạn thích. Mình muốn nó giống demo nên sẽ để màu đen, font chữ Roboto, weight 600, size chữ 30px.
Kế tiếp là cột thứ hai, chỉnh font của menu về lại Roboto với weight cỡ 400, size chữ cân đối sao cho nó hài hoà, và đặc biệt là màu rê chuột sẽ hiển thị màu Primary.
Cuối cùng là cái nút bấm, ta sẽ cho nó màu xanh Primary, chữ màu trắng, bỏ line height của chữ đi, giảm size chữ xuống cỡ 16px. Thêm padding vào mục Styles của nó theo thứ tự 15 25 15 25.
Kết quả sau khi căn chỉnh ta có như sau:
Bên dưới là video toàn bộ thao tác trong phần thiết kế header.
Thiết kế footer
Giống như phần header mà ta đã làm ở trên, footer là phần sẽ hiển thị ở mọi trang được cố định nên chúng ta cũng sẽ làm nó trước. Dưới đây là hình ảnh mô tả phần footer mà ta sẽ thiết kế bằng Elementor.
Bây giờ ta vào lại phần Appeanrace => Elementor Header & Footer Builder và tạo ra một cái footer, thiết lập giống như thao tác tạo header nhưng Type of Template thì chọn là Footer nhé.
Tạo xong thì vào sửa trang bằng Elementor. Đầu tiên ta cũng sẽ chèn một cái container để bao quát toàn bộ Footer, sau đó ta sẽ chèn một widget Heading vào để hiển thị dòng chữ Design & Experience, ở bên dưới nó là một cái container khác với Direction là horizontal và tạo 4 cột bên trong (chiều rộng cột theo thứ tự từ trái qua phải là 40%, 20%, 20%, 20%), cuối cùng là một cái container khác để hiển thị dòng chữ copyright, container này bạn cho Justify Content là Center và Align là Center để hiển thị cho đẹp mắt.
Nhìn chung nó sẽ như thế này
Bây giờ ta sẽ thấy màu nền của footer sẽ là một màu đen, nên ta chọn container lớn nhất bao quát bên ngoài và thiết lập background là màu đen.
Xem lại ảnh footer, bạn để ý bao quang footer sẽ có một khoảng trống, hai bên cạnh thì đã có sẵn rồi nếu xem ở trình duyệt lớn, ở trên và ở dưới chưa có.
Cái này trong thiết kế web người ta gọi là Padding, là khoảng trống tính từ nội dung đến viền của khung nội dung đó, bây giờ ta sẽ có padding của container mẹ theo thứ tự là 100px ở trên, 20px bên phải, 50px phía dưới và 20px bên trái. Chuyển qua tab Advanced, phần padding bỏ liên kết giá trị đi và nhập như hình dưới.
Cũng dễ nhìn hơn rồi đó.
Bây giờ quay lại widget Heading có dòng chữ Design & Experience, nếu chưa có thì bạn viết vào nhé, sau đó vào phần Style của widget này đổi màu chữ thành trắng, có thể tăng kích thước chữ lên một chút là được, ở đây mình cho thành 37px.
Tiếp tục là nội dung ở 4 ô phía dưới, trong đó có 3 ô hiển thị một Heading (cấp thấp hơn, ví dụ như h3) và widget Text Editor hiển thị chữ nhỏ phía dưới, ô cuối cùng hiển thị cái nút. Bạn thêm vào và thiết lập màu chữ của các widget đó thành màu trắng, thu nhỏ kích thước chữ hiển thị lại 25px với heading và 16px với chữ hiển thị bên dưới. Cột cuối cùng hiển thị nút bấm nhớ chọn Align item là Center để nó căn ra giữa.
Lưu ý là container chia 4 cột, ta cho nó cách ra xa cái tiêu đề Design & Experience phía trên và dòng chữ copyright phía dưới, nên sẽ vào mục Advanced của container này thiết lập margin là 70px 0 70px 0.
Cuối cùng là hiển thị phần Copyright phía dưới bằng một widget Text Editor, thiết lập chữ trắng (có thể hơi trắng mờ một chút), cỡ chữ 14px. Kết quả hoàn tất như hình dưới, nhớ ấn nút Publish để lưu lại chứ không thì móm.
Dưới đây là video toàn bộ quá trình làm footer.
Thiết kế trang chủ landing page
Chúng ta đã có header và footer rồi, website dần đã lộ ra nên bây giờ chúng ta bắt tay vào thiết kế nội dung của trang chủ. Trong trang chủ sẽ có rất nhiều thành phần nên phần này sẽ khá dài đây, uống miếng bánh ăn miếng nước để lấy sức nào.
Tạo page Trang chủ và thiết lập hiển thị ra trang chủ
Mặc định bây giờ ngoài trang chủ của ta sẽ hiển thị danh sách các bài viết, và không thể tuỳ biến lại phần này được nên sẽ xử lý bằng cách tạo một page mới đặt tên là Trang chủ, sử dụng template Elementor Full Width.
Sau đó bạn vào Settings => Reading và thiết lập Homepage là page mà bạn vừa tạo ra, tức Trang chủ.
Bây giơ trang chủ của website sẽ hiển thị ra một trang trống rồi và ta có thể bắt đầu sử dụng Elementor để thiết kế nó, vào Pages chọn trang vừa tạo sau đó ấn Edit with Elementor để bắt đầu.
Thiết kế phần hiển thị banner
Chúng ta sẽ bắt đầu làm phần hiển thị thông tin đầu tiên ở trang chủ, theo mẫu thì phần này sẽ hiển thị thông tin về sự kiện và một cái ảnh đại diện cỡ lớn hiển thị lên.
Theo mình, phần này ta sẽ có một cái container bao quát toàn bộ, trong đó sẽ có 2 container khác. Container đầu tiên ở trên sẽ được chia thành 2 cột, có khoảng trống ở giữa để hiển thị thông tin, container phía dưới chỉ để hiển thị bức ảnh.
Như vậy ta sẽ tạo một container bao quát, thiết lập margin cho nó là 100px ở trên và 100px ở dưới để nó cách xa cái header và khu vực phía dưới ra.
Sau đó chèn thêm một container bên trong với Direction là horizontal để hiển thị theo phương ngang để chia cột, Justify Content là Space Between vì cột cuối cùng ta muốn nó nhỏ hơn nhưng cột đầu tiên vẫn 50%, nên phần dư nó sẽ tạo một khoảng cách giữa các cột. Cuối cùng là tạo hai container bên trong để chia cột, cột đầu tiên 50%, cột thứ hai 35% và Align Items là End để nội dung canh sát lề phải.
Cuối cùng là chèn một cái container khác với thông số mặc định hiển thị bên dưới container chứa cột để hiển thị hình ảnh.
Bây giờ ta sẽ điền nội dung vào các container. Theo như hình mẫu thì ở container chia cột đầu tiên, ta sẽ chèn hai cái widget Heading để hiển thị tiêu đề Design & Experience (h1) và The Challenges of Web Innovation (h4), cột bên phải cũng là hai cái heading nhưng cấp nhỏ hơn (có thể cho h5) để hiển thị ngày tháng và địa chỉ.
Sau đó điều chỉnh lại màu sắc và kích cỡ chữ phù hợp. Bạn để ý ở mỗi hàng chữ heading sẽ có khoảng trống với nhau, nên ở hàng chữ phía dưới bạn nên cho nó thêm cái margin top để tạo khoảng trống phía trên.
Cuối cùng là chèn widget Image để hiển thị ảnh phía dưới, nhớ chọn size ảnh là full nhé.
Kết quả cũng tương đối rồi đó.
Thiết kế phần About Event
Phần này thì cũng trông khá đơn giản, chỉ là chia cột (mỗi cột chiều rộng 50%), hiển thị tiêu đề kèm chữ rồi một cái nút bấm, bạn thao tác như trong video dưới nhé.
Cũng lưu ý cho container phần này cái margin bottom khoảng 100px để nó cách ra so với container bên dưới.
Thiết kế phần Event Schedule
Trong phần này thì ta sẽ thấy có một phần hơi đặc biệt là nó có 4 cột, mỗi cột 2 hàng. Ở đây ta vẫn sẽ sử dụng cách chia cột quen thuộc để tạo 4 cột mỗi cột 25% chiều rộng. Các bạn lưu ý trong phần này, ta sẽ có một container mặc định bao quát toàn bộ khu vực, trong đó sẽ chứa một container chia 2 cột và bên trong nó sẽ gồm 2 cái container chiều rộng 50%, bên dưới nó sẽ là 2 cái container khác nữa, trong mỗi container đó sẽ có 4 cột chiều rộng 25%. Tổng quan khi chia cột xong sẽ có hình bên dưới.
Thông tin thêm: Thực tế khi tạo xong container chia 2 cột ở đầu, sau đó bạn có thể duplicate ra và chia thành 4 cột để tiết kiệm thời gian, xem clip mình thao tác ở trên để rõ hơn.
Một đặc điểm khác trong phần này nữa đó là có sử dụng một màu nền với mã màu #F0F6FF, và có padding phía trên khá lớn cũng như là padding phía dưới, nên giá trị padding của container cho cả khu vực này sẽ là 100px 0 50px 0.
Khi chia cột xong hết rồi, chúng ta chỉ còn làm việc đơn giản còn lại là thêm các widget hiển thị thông tin vào từng cột, bao gồm kết hợp các widget Heading và Text Editor nhé. Còn lại bạn tham khảo video của mình.
Thiết kế phần Meet the Speakers
Phần này thì chúng ta cũng thao tác như phần Event Schedule, chỉ khác là ở các cột sẽ có thêm widget Image để chèn ảnh vào thôi.
Thiết kế phần About the Organisers
Trong phần này thì chỉ bao gồm 2 cột, cột bên trái chỉ hiển thị một tấm ảnh và cột bên phải vẫn là hiển thị heading chữ và một cái nút bấm. Toàn bộ phần này sẽ có màu nền #F0F6FF. Vẫn cho margin top là 100px và padding là 100px 0px 50px 0px nhé.
Mình nghĩ phần này chắc không cần video nhỉ vì nó thao tác tương tự như các phần trên, nên khi nào có video full cho cả bài thì mình sẽ thao tác trong đó nhé.
Thiết kế phần Our Sponsors
Trong phần này nếu bạn nhìn qua thì sẽ dễ dàng thấy là ngoài chia 2 cột ở trên, thì ở dưới ta sẽ chia 4 cột, mỗi cột một tấm ảnh. Tuy nhiên trong hướng dẫn này, phần hiển thị các logo mình sẽ không chia cột mà sẽ sử dụng một container duy nhất rồi sử dụng widget Image Carousel để hiển thị các logo đẹp mắt hơn.
Chúng ta đã hoàn tất xong thiết kế trang chủ rồi đó, giờ bạn ấn nút Publish và kiểm tra lại giao diện website bên ngoài nhé. Ở phần kế tiếp chúng ta sẽ làm tính năng nhấp chuột vào menu sẽ tự cuộn đến thành phần phù hợp giống như giao diện mẫu.
Thêm chức năng nhảy đến phần trên trang ở menu
Trên các giao diên landing page dạng chỉ có một trang duy nhất (one-page landing page), chúng ta thường xuyên bắt gặp kiểu menu mà khi nhấp vào nó sẽ cuộn trang đến khu vực mong muốn, dùng để truy cập nhanh nội dung trên trang.
Với một menu bình thường, chúng ta không muốn cuộn trang mà mở ra một trang khác thì ở phần liên kết của từng phần trong menu thì chỉ cần trỏ đến trang cần liên kết đến là được.
Nhưng menu dạng cuộn thế này, thì liên kết của từng phần trong menu nó sẽ có dạng #sectionID, trong đó sectionID tượng trưng cho tên ID của thành phần muốn nhảy đến. Nếu bạn đã làm việc với Elemetor thì đã rất quen thuộc đến khái niệm Container rồi đúng không? Như vậy với trường hợp này, sectionID là tên ID của container bao quát của thành phần đó. Trong lúc thực hành theo hướng dẫn, chúng ta chỉ việc tạo container thôi chứ chưa thiết lập tên ID cho nó, vậy nên bây giờ chúng ta sẽ thực hiện thiết lập tên ID cho container của từng phần (ví dụ như thiết kế hiện tại là các phần như About the Event, Event Schedule….).
Trước tiên bạn tìm cái container bao quát của phần Event Schedule, nhâp vào tuỳ chọn thiết lập của container chính và chọn Advanced. Trong phần Advanced, bạn tìm mục Layout và tìm tuỳ chọn CSS ID, đây chính là nơi mà ta sẽ thiết lập tên ID cho thành phần này, rồi đặt tên ví dụ như event-schedule.
Lưu ý là khi đặt tên ID thì không nên chứa khoảng trắng và các ký tự đặc biệt nhé, nên đặt tên trùng với thành phần để dễ nhận biết.
Sau khi đặt tên xong thì bạn vào lại phần quản lý menu trong Appearance => Menus và sửa lại liên kết của menu tương ứng thành #sectionID, ví dụ mình vừa đặt tên cho phần Event Schedule thì mình sẽ sửa lên kết tương ứng trên menu là mục Schedule, và thiết lập liên kết trỏ tới là #event-schedule.
Bây giờ hãy lưu lại và thử trải ngiệm trên trang nhé.
Thông tin thêm: Nếu bạn lưu lại rồi mà menu vẫn chưa có liên kết thì khả năng là do bộ nhớ đệm của Elementor, bạn tiến hành xoá cache bằng cách vào trang quản trị => Elementor => Tools => General và ấn nút Regenerate Files & Data
Bây giờ bạn có thể thực hiện tương tự với các thành phần khác trong menu nhé.
Như vậy thì chúng ta đã vừa hoàn tất việc thiết kế một giao diện landing page trên Elementor để bạn làm quen với Elementor rồi. Ở phần cuối cùng trong bài này mình sẽ nói qua về một số hạn chế của theme Hello Elementor trong việc thiết kế và các phương án xử lý khi sử dụng thực tế.
Các hạn chế của Hello Elementor và phương án
Sau khi thực hành xong, bạn đã có một giao diện landing page tương đối đơn giản nhưng cũng không kém phần đẹp mắt. Nếu như bạn thấy vẫn còn thiếu một số tính năng đẹp mắt hay chuyên nghiệp khác thì cũng không nên vội thất vọng vì chuỗi bài viết học WordPress 2024 của mình bạn chỉ mới đi được nửa phần, còn rất nhiều thứ hay ho mà bạn sẽ khám phá sau.
Tuy nhiên nếu bạn có tinh tế nhận ra, thì chúng ta chỉ đang đi thiết kế một giao diện landing page thông thường, không có khu vực hiển thị bài viết đẹp mắt, hay không có các trang bên trong. Thực tế phần hạn chế này là do chúng ta đang sử dụng theme Hello Elementor để tự thiết kế, hãy nên nhớ rằng Elementor có phiên bản trả phí và tác giả cũng nên làm sao đó để hướng người dùng mua bản trả phí của plugin này.
Trong Elementor có một tính năng quan trọng giúp bạn thiết kế các template khác như tuỳ biến lại trang hiển thị chi tiết của bài viết, trang hiển thị danh sách bài mới nhất,…được gọi là Theme Builder nhưng tính năng này chỉ sử dụng được trên Elementor Pro.
Do vậy trong khuôn khổ bài này có thể bạn thực hành trên Hello Elementor nhưng khi sử dụng thực tế thì nên mua các theme chuyên nghiệp hỗ trợ Elementor để sử dụng được tối ưu hơn, trong nhữn phần sau mình sẽ có một bài hướng dẫn bạn sử dụng một theme trả phí chi tiế.
Do đó đúc kết lại, Hello Elementor chỉ phù hợp khi:
- Bạn cần tự thiết kế một landing page đơn giản, nhẹ nhất có thể.
- Nếu muốn tự thiết kế một trang hoàn chỉnh, bạn có thể cần phải mua Elementor Pro cùng với các addon khác để bổ sung thư viện Widget đẹp mắt.
Còn gì nữa nhỉ? à, dĩ nhiên là còn rồi. Ở bài sau mình sẽ nói thêm về một số thao tác mẹo có ích khác trong khi sử dụng Elementor, cũng như giới thiệu bạn qua một số thư viện widget đẹp cho nó nhưng miễn phí để bạn cải thiện lại thiết kế của mình, và bài cuối cung của chuỗi hướng dẫn Elementor là giới thiệu qua những thao tác khi sử dụng Elementor Pro.
