Hướng Dẫn Sử Dụng Tính Năng Layout Của Elementor

Tính năng Layout của Elementor giúp tạo Layout từ đơn giản đến phức tạp trên Website. Hãy cùng tìm hiểu về cách sử dụng nhóm tính năng này

Elementor là Plugin được cài đặt trên WordPress, giúp tạo Layout mà không cần phải hiểu ngôn ngữ lập trình. Tôi thường sử dụng nó để thiết kế Website nhanh chóng và dễ dàng chỉnh sửa sau này. Phần lớn các Website của tôi đều sử dụng Plugin Elementor này. Elementor phát triển vô cùng nhanh chóng. Bằng chừng là từ năm 2017 Plugin này đã tăng từ 20k lượt cài đặt lên đến 400k lượt kích hoạt. Đến tháng 2 năm 2020 đã đạt hơn 4 triệu lượt kích hoạt và hiện Elementor nằm trong Top 10 Plugin được sử dụng nhiều nhất trên WordPress.

Tuy Plugin này rất dễ sử dụng, nhưng bạn cần phải có vài kiến thức cơ bản về sắp xếp bố cục và thẩm mỹ. Như vậy, bạn mới có thể thiết kế cho mình một trang Web đẹp và thu hút người dùng. Để hiểu rõ tính năng Layout của Elementor, mời bạn xem các thông tin mà tôi đã tổng hợp dưới đây.

Có thể bạn quan tâm:

Tổng quan tất cả các tính năng của Elementor

Hướng dẫn sử dụng tính năng Editor của Elementor

Sử dụng mẫu Canvas của Elementor

Các mẫu trang Canvas là tính năng của Elementor, nó sẽ loại bỏ phần Header, Footer cùng Sidebars của bạn. Trang Canvas sẽ phù hợp cho các mục đích như: dùng làm trang ra mắt sản phẩm mới, Landing Page, trang thông báo chế độ bảo trì,…

Để tạo được trang Canvas, bạn thực hiện theo các bước dưới đây:

• Bước 1: Tạo một trang mới và chỉnh sửa bằng Elementor.
• Bước 2: Click vào biểu tượng cài đặt ở phía bên trái, tại phần Page Layout bạn chọn mục Elementor Canvas.

Một trong những tính năng Layout của Elementor là đặt bố cục trang mặc định trên toàn bộ trang Web. Để cài đặt bố cục mặc định cho Website của mình, bạn hãy làm như sau nhé:

• Trong phần Widget Panel, bạn chọn mục Menu Hamburger.
• Tiếp theo, bạn Click vào mục Site Settings.
• Sau đó, bạn tiếp tục Click vào mục Layout.
• Tại mục Default Page Layout, bạn tiếp tục chọn bố cục mà bạn muốn mặc định trên toàn bộ Website.

Cách di chuyển các thành phần trong Elementor

Với Elementor, bạn có thể dễ dàng để di chuyển một phần lên trên hoặc xuống dưới. Trong hai cách mà tôi liệt kê bên dưới đây, bạn có thể chọn một trong số chúng để thực hiện nhé.

Kéo và thả Section bằng Navigator

Dùng Navigator là cách nhanh nhất và dễ nhất để di chuyển các Section. Cách này thường được nhiều người sử dụng vì bạn sẽ không cần phải kéo chuột lên hoặc xuống một trang. Để truy cập vào Navigator, bạn có thể thực hiện theo một trong ba cách sau:

• Nhấp vào nút Navigator ở phần chân trang của bảng điều khiển hoặc dùng phím tắt Ctrl + I hoặc Cmd.
• Ngoài ra, bạn có thể Click chuột phải vào bất kỳ phần tử nào rồi bấm vào Navigator. Nó sẽ được chuyển hướng tự động đến Element cụ thể trong cây Navigation.
• Khi Navigator đang mở, hãy Click chuột trái và giữ chuột trên thành phần mà bạn muốn di chuyển. Sau đó, bạn kéo nó lên hoặc xuống, thả nó trước hoặc sau bất kỳ phần tử nào bạn muốn.

Kéo và thả Section qua Section Handle

Đây cũng là cách giúp bạn di chuyển dễ dàng giữa các Section với nhau. Để hiểu rõ tính năng Layout của Elementor và di chuyển các Layout, bạn thực hiện các bước như sau:

• Click và giữ nút chuột trái của bạn trên Section mà bạn muốn di chuyển. 
• Trong khi đó, bạn tiếp tục giữ chuột và hãy kéo Section đó đến vị trí mới.
• Khi bạn thấy đường màu xanh lam xuất hiện ở đúng vị trí, hãy thả chuột. Điều này có nghĩa bạn sẽ đặt Section tại vùng xanh lam, việc di chuyển đến đây là hoàn tất.

Hiệu ứng cuộn ( PRO )

Một tính năng Layout của Elementor khác là hiệu ứng cuộn, nó giúp bạn đặt Section/ Widget ở dạng Sticky. Nó sẽ không mất đi kể cả khi người dùng cuộn xem nội dung trang Web của bạn. Bạn có thể đặt Sticky ở ở đầu hoặc ở cuối màn hình, để cài đặt bạn hãy tham khảo các mục sau:

• Click chỉnh sửa Section hoặc Widget.
• Nhấp vào Tab Advanced trong bảng điều khiển.
• Mở Section Motion Effects.
• Sticky: Chọn đặt Section của bạn thành “Stick” vào đầu hoặc cuối màn hình khi cuộn.
• Sticky On: Chọn thiết bị mà Section của bạn sẽ cố định như máy tính để bàn, máy tính bảng hoặc di động.
• Offset: Đẩy phần tử Sticky lên hoặc xuống theo Pixel.
• Effects Offset: Là số lượng Pixel người dùng phải cuộn trước khi hiệu ứng Sticky bắt đầu.

Lưu ý: Hiệu ứng Offset chỉ ảnh hưởng nếu CSS được thêm vào phần tử Sticky. Dưới đây là một ví dụ về một bộ quy tắc CSS điển hình bạn có thể được áp dụng:

selector.elementor-sticky--effects {background-color: rgba(133,130,255,0.5)!important;}
selector {transition: background-color 4s ease !important;}
selector.elementor-sticky--effects >.elementor-container {min-height: 80px;}
selector > .elementor-container {transition: min-height 1s ease !important;}

Cách tạo trang có chiều rộng đầy đủ bằng Elementor

Ngoài nội dung chính thì mỗi trang Web còn hiển thị các thành phần khác như Background, Sidebar,… Các thành phần này sẽ được cài đặt theo Theme trên Customize của Dashboard.

Trang có chiều rộng đầy đủ là trang có độ bao phủ 100% chiều rộng của màn hình. Full Width có thiết kế hiện đại, với tiêu chí là không gian rộng cùng nội dung hiển thị ít. Lợi thế của nó là tạo sự thông thoáng, không gò ép nhiều thông tin đến khách hàng. Thiết kế Full Width rất thích hợp cho trang chủ, giúp phô diễn thiết kế của cả Website.

Tính năng Layout của Elementor còn cho phép bạn thiết kế trang theo dạng trang Full Width này. Bạn có thể thực hiện theo 3 cách như sau:

• Sử dụng mẫu trang Full Width.
• Sử dụng mẫu trang Canvas.
• Kéo dài các Sections.

Sử dụng mẫu trang có chiều rộng đầy đủ của Elementor

Mẫu trang có chiều rộng đầy đủ cho phép bạn ghi đè chiều rộng trang mặc định. Sau đó, bạn có thể sử dụng thiết kế này trên bất kỳ chủ đề nào.

Để điều chỉnh và cài đặt các Layout theo thiết kế trang Full Width, bạn thực hiện theo các bước: 

• Đầu tiên bạn hãy tạo trang mới và chỉnh sửa bằng cách Click vào Edit With Elementor. 
• Tiếp theo, bạn chọn Settings ở bảng công cụ Widget Panel ở bên trái.
• Sau đó, bạn chọn Layout là Elementor Full Width là hoàn thành.

Ngoài ra, với các tính năng Layout của Elementor bạn có thể đặt bố cục trang mặc định cho Website. Để đặt bố cục trang mặc định trên toàn bộ Website của mình, bạn hãy thực hiện như sau:

• Đầu tiên, bạn hãy Click vào Menu Hamburger trong bảng Widget Panel.
• Sau đó, bạn Click Tiếp tục vào mục Site Settings.
• Tiếp theo hãy Click vào mục Layout.
• Cuối cùng, bạn Click vào Default Page Layout mà bạn muốn đặt làm bố cục mặc định trên toàn bộ Website của mình.

Sau khi đã chọn Full Width cho trang của mình, thì bạn phải thiết kế Layout cho từng Section trước. Bạn hãy thực hiện bằng cách Click chuột vào Section bất kỳ, tại Tab Layout sẽ hiển thị tùy chỉnh:

• Stretch Section: Tại đây bạn sẽ điều chỉnh chiều rộng của Section bằng với chiều rộng của trang.
• Chiều rộng nội dung: Bạn có thể lựa chọn giữa Boxed và Full Width. Nếu bạn chọn Boxed, thì ở dưới sẽ có thanh trượt để bạn chọn chiều rộng nội dung theo Pixel.
• Cấu trúc Layout: Dựa vào phần này, bạn sẽ chia các Column bên trong theo tỷ lệ phù hợp.
• Một số tùy chỉnh khác gồm: Khoảng cách cột, căn lề, chiều cao, Overflow, chọn loại thẻ HTML.

Có thể bạn quan tâm:

Đăng ký Hosting WordPress Matbao – gói Hosting tối ưu nhất cho Website WordPress

Trang hỏi đáp kiến thức tổng hợp ASKWHAT

Qua bài viết về các tính năng Layout của Elementor, chắc hẳn bạn đã biết được lợi ích mà Plugin này mang lại. Tôi chắc chắn rằng, nó sẽ giúp ích cho bạn rất nhiều trong công đoạn thiết kế Website. Đặc biệt là đối với những bạn không rành về Code Web vẫn có thể thiết kế Website dễ dàng. Tôi nghĩ, bạn nên bắt đầu sử dụng Plugin này cho trang Web của bạn ngay bây giờ.