Cách sử dụng trình tạo bố cục cột, đầu trang và chân trang của Avada

Trình tạo trang riêng của chúng tôi, Avada Builder, hiện có sẵn ở hai giao diện: Avada Builder, là trình tạo trang wireframe back-end của chúng tôi và Avada Live, là trình tạo giao diện người dùng của chúng tôi, mới được giới thiệu gần đây với Avada 6.0 .

Sử dụng hệ thống Vùng chứa, Cột và Thành phần đơn giản của chúng tôi, cả hai phiên bản của Avada Builder đều cho phép bạn thiết kế bố cục trang đẹp mắt cho trang web của mình một cách dễ dàng. Avada Builder là một công cụ tuyệt vời dành cho các nhà thiết kế web hiện đại cũng như chủ sở hữu trang web, vì nó mang lại cho họ toàn quyền kiểm soát tất cả các khía cạnh của nội dung trang và Bố cục. Cả hai phiên bản Avada Builder cũng tạo ra cùng một mã. Chúng hoàn toàn có thể hoán đổi cho nhau, cho phép bạn tận dụng tối đa cả hai thế giới với Avada Builder hiện có sẵn.

Trang Trình tạo bố cục là nơi bạn sẽ tìm thấy tất cả Bố cục của mình và mọi Bố cục có điều kiện mà bạn có thể muốn xây dựng ngoài Bố cục chung được tạo theo mặc định. Cũng nằm ở đây là khu vực nơi bạn chỉ định Phần bố cục cho Bố cục của mình và chỉ định Điều kiện để Bố cục có điều kiện của bạn có hiệu lực.

Trình tạo bố cục có thể được truy cập từ Bảng điều khiển Avada bằng cách chọn Bố cục > Trình tạo bố cục từ menu thả xuống. Một trong những cách đơn giản nhất để mô tả Bố cục là nói rằng chúng là các Vùng chứa chứa bốn phần bố cục của một trang – Phần Tiêu đề, Phần Thanh Tiêu đề Trang, Phần Nội dung và Phần Chân trang. Bạn có thể tìm hiểu thêm về sự khác biệt giữa Phần Bố cục và Bố cục bằng cách đọc tài liệu này: Tìm hiểu Bố cục và Phần Bố cục (PDF). Tiếp tục đọc để tìm hiểu thêm về những điều bạn có thể làm trên trang này.

Hai phần nằm ở đầu trang Trình tạo bố cục. Kỹ thuật điền các Phần Bố cục trong Bố cục Toàn cục hoặc tạo Bố cục Có Điều kiện được nêu trong phần đầu tiên (gợi ý: bạn có thể đóng phần này bằng dấu X) và ở phía bên phải màn hình là khu vực mà bạn có thể trực tiếp tạo Bố cục mới (xem bên dưới). Nhập tên cho Bố cục mới của bạn rồi nhấp vào Tạo Bố cục Mới để hoàn tất quy trình. Bố cục trống được tạo khi sử dụng phương pháp này; không có Phần Bố cục hoặc điều kiện nào được chỉ định.

Khi bạn xây dựng Bố cục, chúng sẽ tự động được nhập vào trang Trình tạo bố cục. Bạn có thể đổi tên Bố cục bằng cách nhấp vào nút Đổi tên ở đầu trang. Bạn cũng có thể nhấp vào biểu tượng răng cưa để thiết lập các điều kiện cho Bố cục và bạn có thể xóa Bố cục bằng cách nhấp vào biểu tượng Thùng rác ở đầu trang. Bạn cũng có thể xem và chỉ định tiêu chí bằng cách nhấp vào cuối tất cả Bố cục, ngoại trừ Bố cục chung.

Trong mỗi Bố cục, bạn có thể thấy bốn Phần Bố cục được gán cho một Bố cục cụ thể, mỗi Phần cho một trong bốn bố cục. Trong mỗi Phần Bố cục, bạn sẽ thấy biểu tượng +, biểu tượng này cho phép bạn chỉ định Phần Bố cục cho phần đó của Bố cục khi bạn di chuột qua nó. Bạn có tùy chọn chỉ định Phần Bố cục hiện có cho phần này hoặc tạo một phần hoàn toàn mới từ đầu.

Sử dụng bố cục phần

Là một phần của Avada Layouts, giờ đây bạn có thể tạo các chân trang có thể tùy chỉnh hoàn toàn cho trang web của mình, tận dụng toàn bộ khả năng sáng tạo của Avada Builder để thực hiện điều này.

Bố cục chân trang là Phần bố cục được thêm vào Bố cục. Ví dụ: amp trang tùy chỉnh yêu cầu Phần bố cục chân trang, phần này có thể được thêm vào Bố cục chung hoặc Bố cục tùy chỉnh. Chúng ta sẽ xem xét việc xây dựng Phần Bố cục Chân trang Tùy chỉnh trong phần tiếp theo, nhưng trước tiên, hãy xem Giới thiệu Bố cục Avada.

Trong thanh bên WordPress hoặc Bảng điều khiển Avada, chọn Avada > Bố cục. Bố cục và Phần bố cục của Avada được tạo và quản lý tại đây. Như được hiển thị bên dưới, Bố cục Toàn cục ban đầu trống, không có Phần Bố cục được liên kết.

Tùy chỉnh bố cục

Phần này có thể được thêm vào Bố cục chung hoặc Bố cục có điều kiện, chỉ hiển thị trên một số loại bài đăng tùy chỉnh hoặc trang đơn lẻ. Bố cục chung đã có sẵn, nhưng trước tiên chúng ta cần phát triển Bố cục có điều kiện.

Trên trang Bố cục, thêm tên và nhấp vào Tạo Bố cục Mới, như hiển thị bên dưới.

Tạo Phần bố cục chân trang nếu bạn muốn thêm nó vào Bố cục hiện có hoặc Bố cục chung.

Trên màn hình Trình tạo phần bố cục, chọn loại Phần bố cục, nhập tên (trong amp dụ này là Chân trang, có thể là Chân trang chung) và nhấp vào Tạo Phần bố cục mới, như hiển thị bên dưới.

Hình ảnh sau đây cho thấy cách tạo Phần Bố cục trực tiếp từ Bố cục. Phần Bố cục trang web của bạn phải được thêm vào Bố cục. Ban đầu, chỉ đơn giản là có Bố cục Toàn cầu. Vì vậy, để tạo Chân trang tùy chỉnh toàn cầu, hãy thêm nó vào Bố cục này. Custom Footer Layout Mục, sau đó thêm điều kiện vào Custom Footer Layout Mục để Layout xuất hiện theo tiêu chí.

Không có gì sai với nó, nhưng điều quan trọng là phải xem xét tình hình. Nếu Bố cục hiện đang hoạt động (tức là có điều kiện hoặc là Bố cục chung), mọi Phần Bố cục mới sẽ hoạt động ngay lập tức và trống. Sẽ hợp lý hơn nếu thêm Chân trang tùy chỉnh vào Bố cục chung thông qua trang Trình tạo phần bố cục trước, sau đó thêm nó vào Bố cục chung.

Ngoài ra, chúng tôi có thể thêm Phần bố cục chân trang, tiêu đề hoặc cột vào Bố cục có điều kiện và sau đó tạo nó. Điều kiện không được sử dụng cho đến khi điều kiện được thêm vào. Như minh họa bên dưới, chúng ta có thể thay đổi Phần Bố cục Chân trang bằng cách di chuột qua phần đó và nhấp vào biểu tượng chỉnh sửa.

Chỉnh sửa bố cục tùy chỉnh

Trình chỉnh sửa WordPress mặc định xuất hiện khi chỉnh sửa Phần Bố cục mới; bạn có thể sử dụng Avada Builder hoặc Avada Live từ đây. Phần bố cục tùy chỉnh được tạo ở đây. Để biết thêm thông tin, hãy xem Tạo nội dung phần bố cục, nhưng tóm lại, bạn có thể xây dựng bất cứ thứ gì ở đây.

Chân trang tùy chỉnh của bạn có thể chứa bất kỳ thứ gì bạn có thể xây dựng trong Avada Builder. Bạn có thể có nhiều cột, ảnh, v.v.; Điều này cho phép sự linh hoạt to lớn. Phần Bố cục là nơi nội dung chân trang sẽ xuất hiện. Vật liệu đến từ Người xây dựng và khả năng sáng tạo của bạn là hạn chế duy nhất.

Xem Footer ban đầu được tạo cho Taxi Demo bên dưới; Điều này được thực hiện bằng cách thay đổi các tùy chọn chủ đề và tiện ích chân trang.

Phiên bản dành cho máy tính để bàn của Tiêu đề tùy chỉnh này được hiển thị ở đây, nhưng để nắm bắt chính xác phạm vi của Tiêu đề tùy chỉnh này, bạn phải truy cập trang web trực tiếp mà bạn có thể truy cập tại đây.

Thiết kế bố cục có điều kiện

Không có điều kiện trong bố cục chung. Việc thêm Phần Bố cục vào nó sẽ được sử dụng trên mọi trang vì nó mang tính toàn cầu. Nếu bạn chỉ cần Chân trang tùy chỉnh trên một số trang trên trang web của mình, chẳng hạn như các bài viết blog riêng lẻ, thì bạn cần sử dụng Bố cục có điều kiện.

Bố cục có điều kiện chỉ có thể chứa các Phần bố cục hiện có. Sau đó, trong tab Chọn chân trang của Bố cục, cuộn đến Hiện tại, nơi bạn có thể thêm Phần Bố cục, như minh họa bên dưới.

Bạn phải đặt các điều kiện cho bất kỳ Bố cục có điều kiện nào. Bố cục được kích hoạt ngay khi các điều kiện được chỉ định; do đó, nếu bạn thực hiện việc này trước khi thiết lập Phần Bố cục, các trang phù hợp với điều kiện sẽ trống.

Để thêm điều kiện, chọn Thêm điều kiện từ menu dưới cùng của Bố cục. Một hộp thoại xuất hiện như hình dưới đây. Để biết thêm thông tin về Bố cục có điều kiện, hãy xem Tìm hiểu bố cục có điều kiện, nhưng đối với amp dụ này, chúng tôi sẽ chọn Tất cả bài đăng trong tab Điều kiện bài đăng, như được thấy bên dưới.

Thêm cột từ Trình tạo bố cục Avada

Phần tử Cột, giống như Phần tử vùng chứa, là thành phần cấu trúc thiết yếu khi thiết kế trang web Avada.

Việc thêm cột tương đối dễ dàng với trình tạo Bố cục Avada.

  • Nhấp vào nút ' + Vùng chứa ' để thêm Vùng chứa vào trang. Khi chèn Vùng chứa, bạn sẽ được yêu cầu chọn cột hoặc bố cục cột. Bạn có thể tạo một Vùng chứa trống, nhưng thông thường bạn thêm Cột ở bước này.
  • Để thêm cột mới vào Vùng chứa hiện có, hãy di chuột qua Vùng chứa và nhấp vào nút ' + Cột '. Để thêm một cột mới, bấm vào đây.
  • Ở góc trên bên trái của cột, nhấp vào biểu tượng 'Thay đổi kích thước cột'. Bây giờ nó sẽ có cùng kích thước với Cột của bạn. Ví dụ amp cột 1/4 sẽ xuất hiện dưới dạng '1/4 ' trong tùy chọn Thay đổi kích thước Cột.
  • Kéo và thả các cột để sắp xếp lại chúng. Bạn cũng có thể kéo và thả các cột vào Vùng chứa.

Cột chỉ có thể được đặt bên trong phần tử vùng chứa có cùng chiều rộng; Đây thường là Chiều rộng trang web bạn đặt cho trang web. Do đó, nếu bạn đặt chiều rộng trang web thành 1200px thì cột 1/2 sẽ rộng 600px. Kích thước Cột đặt trước được hiển thị bên dưới khi được thêm vào một trang.

Trong Avada, bạn có thể đặt riêng độ rộng cột (và hơn thế nữa) trên các bố cục lớn, trung bình và nhỏ. Cách đặt thứ tự hiển thị và kích thước của cột trong bố cục đáp ứng giải thích cách sử dụng tính năng mới tuyệt vời này với các cột.

Chiều rộng tùy chỉnh nằm trong Cột > Thiết kế > Chiều rộng . Như được hiển thị bên dưới, việc sử dụng số phần trăm cho phép bạn chỉ định Chiều rộng tùy chỉnh. Do đó, vị trí không bị hạn chế

Tự động là một tùy chọn chiều rộng mới. Thay vì có chiều rộng cố định, Cột sẽ chiếm không gian của Phần tử quan trọng nhất bên trong nó. Vì vậy nó chỉ có tác dụng trong một số trường hợp. Bạn có thể thay đổi Cột gốc thành Tự động và Cột sẽ thay đổi kích thước theo chiều rộng của Phần tử.

Avada cũng bổ sung Bộ tùy chọn đáp ứng cho Vùng chứa và Cột. Ở phần cuối của Trình tạo, bạn có thể thấy Biểu tượng đáp ứng trên bất kỳ Cột nào, như trong hình bên dưới. Trình tạo giao diện người dùng hiển thị Biểu tượng đáp ứng trên các tùy chọn.

Chỉ các Bộ chứa Flex mới mới hiển thị Bộ tùy chọn đáp ứng. Các cột trong Vùng chứa cũ không có sẵn.

Phần kết luận

Nhờ Avada Layouts, khả năng tạo Chân trang, Tiêu đề tùy chỉnh và thêm cột giờ đây đã trở thành hiện thực và là một tùy chọn gần như vô hạn. Bạn không chỉ có thể tận dụng sức mạnh của Avada Builder để xây dựng bất kỳ Chân trang hoặc Đầu trang nào mà bạn có thể tưởng tượng mà còn có thể tận dụng sức mạnh của Bố cục có điều kiện để hiển thị hoặc ẩn chúng trên bất kỳ trang, danh mục, loại bài đăng tùy chỉnh hoặc bất kỳ sự kết hợp nào của tiêu chí bạn có thể nghĩ đến khi sử dụng Avada Builder.

Khi nói đến bố cục WordPress, Avada Layouts là một công cụ thay đổi cuộc chơi theo nghĩa đen nhất. Việc nó cho phép tự do thiết kế và triển khai linh hoạt có nghĩa là quá trình tạo Chân trang sẽ không bao giờ giống nhau.

Hanson F.

Bài viết gần đây

Cách sử dụng đầu trang và chân trang với Elementor

Đầu trang và chân trang của trang web là những yếu tố cần thiết. Trong hầu hết các trường hợp, Tiêu đề cung cấp điều hướng…

Ngày 6 tháng 1 năm 2022

So sánh chủ đề WordPress: Astra vs OceanWP

Hai trong số các chủ đề WordPress phổ biến nhất trên thị trường là Astra và OceanWP. Chuyên nghiệp…

Ngày 2 tháng 1 năm 2022

So sánh chủ đề tin tức WordPress: Báo chí và Astra

Tạo một trang web tin tức xuất sắc không nhất thiết bạn phải trở thành một nhà thiết kế web. Chúng tôi…

Ngày 25 tháng 10 năm 2021

Tạo một trang web liên quan đến tin tức với Chủ đề Báo chí

Chủ đề Báo chí là một trong những chủ đề WordPress quan trọng nhất được thiết kế bởi tagDiv, một…

Ngày 18 tháng 10 năm 2021

Cách xây dựng Thương mại điện tử với trình tạo Avada WooC Commerce

Khi nói đến việc thiết lập một cửa hàng trực tuyến, WooC Commerce là plugin phù hợp. Nó…

Ngày 4 tháng 10 năm 2021

Cách sử dụng hiệu ứng cuộn và tiêu đề cố định với Elementor

Tiêu đề thường là thứ đầu tiên một người nhìn thấy khi họ truy cập trang web của bạn,…

Ngày 21 tháng 9 năm 2021