Divi chắc chắn là một trong những Chủ đề WordPress phổ biến nhất hiện nay. Một trong những yếu tố tạo nên sức mạnh của chủ đề này là trình tạo của nó (Divi Builder), nhắc nhở chúng ta rất nhiều về Trực quan Composer.

Divi Builder có hai dạng: "Back-end Builder" tiêu chuẩn và "Visual Builder". Cả hai giao diện đều cho phép bạn xây dựng chính xác các loại trang web giống nhau với các phần nội dung giống nhau và các thông số thiết kế giống nhau. Điểm khác biệt duy nhất là giao diện. Back-end Builder nằm bên trong bảng điều khiển WordPress và có thể truy cập được với tất cả các cài đặt WordPress tiêu chuẩn khác.

Nó nằm bên trong giao diện người dùng WordPress và thay thế trình chỉnh sửa bài đăng WordPress tiêu chuẩn. Nó tuyệt vời để thực hiện các thay đổi nhanh chóng khi bạn đang ở trong trang tổng quan, nhưng nó cũng bị giới hạn bởi trang tổng quan và được hiển thị dưới dạng đại diện khối cho trang web của bạn. Hướng dẫn này sẽ chỉ tập trung vào trình tạo trực quan.

Tải xuống chủ đề DIVI WordPress

Mặt khác, Visual Builder hoàn toàn mới cho phép bạn xây dựng các trang của mình trên giao diện người dùng của trang web! Đó là một trải nghiệm tuyệt vời và cho phép thiết kế nhanh hơn nhiều. Khi bạn thêm nội dung hoặc điều chỉnh cài đặt thiết kế bên trong trình tạo trực quan, các thay đổi của bạn sẽ xuất hiện ngay lập tức.

Bạn có thể nhấp vào trang và bắt đầu gõ. Bạn có thể làm nổi bật văn bản và điều chỉnh phông chữ và phong cách của nó. Bạn có thể thêm nội dung mới, xây dựng trang của bạn và xem mọi thứ đang diễn ra trước mắt bạn.

Cách bật Trình tạo hình ảnh

Khi bạn đã đăng nhập vào bảng điều khiển WordPress của mình, bạn có thể điều hướng đến bất kỳ trang nào trên giao diện người dùng của trang web và nhấp vào nút "Kích hoạt Trình tạo trực quan" trong thanh quản trị WordPress để khởi chạy trình tạo. trực quan.

Nếu bạn đang chỉnh sửa trang của mình trên bảng điều khiển, bạn có thể chuyển sang trình tạo trực quan bằng cách nhấp vào nút "Bật Trình tạo trực quan" ở trên cùng của giao diện back-end của Divi Builder (lưu ý rằng trước tiên bạn phải kích hoạt Trình tạo Divi trước khi nút trình tạo trực quan xuất hiện).

Những điều cơ bản của Visual Builder

Sức mạnh của Divi nằm ở Visual Builder, một trình tạo trang hoạt động với tính năng "Kéo và thả" cho phép bạn xây dựng bất kỳ loại trang web nào bằng cách kết hợp và sắp xếp các phần nội dung.

Trình xây dựng sử dụng ba khối xây dựng chính: phần, hàng và mô-đun. Sử dụng chúng đồng thời cho phép bạn tạo vô số bố cục. Các phần là khối xây dựng lớn nhất và chúng chứa các nhóm hàng. Các hàng nằm bên trong các phần và được sử dụng để chứa các mô-đun. Các mô-đun được đặt bên trong các hàng. Đây là cấu trúc của mỗi trang web Divi.

Mục

Các khối xây dựng cơ bản nhất và lớn nhất được sử dụng trong thiết kế bố cục với Divi là các phần. Chúng được sử dụng để tạo các nhóm nội dung lớn và đây là điều đầu tiên bạn thêm vào trang của mình. Có ba loại phần: Thông thường, Đặc biệt và Toàn bộ Chiều rộng.

Các phần thông thường được tạo thành từ các hàng cột trong khi các phần có chiều rộng đầy đủ được tạo thành từ các mô-đun chiều rộng đầy đủ giúp mở rộng toàn bộ chiều rộng của màn hình. Các phần đặc biệt cho phép bố trí bên nâng cao hơn.

hàng

Các hàng nằm bên trong các phần và bạn có thể đặt bất kỳ số hàng nào bên trong một phần. Có nhiều loại cột khác nhau để bạn lựa chọn. Khi bạn đã xác định cấu trúc cột cho hàng của mình, bạn có thể đặt mô-đun vào một cột mong muốn. Không có giới hạn về số lượng mô-đun bạn có thể đặt trong một cột.

Modules

Mô-đun là những phần nội dung tạo nên trang web của bạn. Mỗi mô-đun Divi có thể thích ứng với bất kỳ chiều rộng cột nào và chúng đều hoàn toàn đáp ứng.

Xây dựng trang đầu tiên của bạn

Ba khối xây dựng cơ bản (phần, đường và mô-đun) được sử dụng để xây dựng trang của bạn.

Thêm phần đầu tiên của bạn

Trước khi có thể thêm bất kỳ thứ gì vào trang của mình, trước tiên bạn cần thêm một phần. Có thể thêm các phần bằng cách nhấp vào nút (+) màu xanh lam. Khi bạn di chuột qua một phần đã tồn tại trên trang, nút (+) màu xanh lam sẽ xuất hiện bên dưới. Khi bạn nhấp vào, một phần mới sẽ được thêm vào bên dưới phần bạn hiện đang di chuột qua.

Nếu bạn bắt đầu một trang mới, phần đầu tiên của bạn sẽ được thêm tự động.

Thêm dòng đầu tiên của bạn

Sau khi thêm phần đầu tiên của mình, bạn có thể bắt đầu thêm các hàng cột bên trong. Một phần có thể chứa bất kỳ số lượng hàng nào và bạn có thể trộn và kết hợp các hàng từ các loại cột khác nhau để tạo nhiều bố cục khác nhau.

Để thêm hàng, hãy nhấp vào nút (+) màu xanh lục bên trong phần trống hoặc nhấp vào nút (+) màu xanh lục xuất hiện khi di chuột qua hàng hiện tại để thêm hàng mới bên dưới. Khi bạn đã nhấp vào nút (+) màu xanh lục, bạn sẽ được chào đón bằng danh sách các loại cột. Chọn cột bạn chọn và bạn đã sẵn sàng để thêm mô-đun đầu tiên của mình.

Thêm mô-đun đầu tiên của bạn

Mô-đun có thể được thêm vào bên trong các hàng và mỗi hàng có thể chứa bất kỳ số mô-đun nào. Mô-đun là các phần tử nội dung của trang của bạn và Divi đi kèm với hơn 40 phần tử khác nhau mà bạn có thể sử dụng để xây dựng.

Bạn có thể sử dụng các mô-đun cơ bản như Văn bản, Hình ảnh và Nút hoặc các mô-đun nâng cao hơn như Thanh trượt, Phòng trưng bày Danh mục đầu tư và Thương mại điện tử Các cửa hàng.

Để thêm mô-đun, hãy nhấp vào nút (+) màu xám tồn tại bên trong cột trống hoặc nhấp vào nút (+) màu xám tồn tại khi bạn di chuột qua mô-đun trên trang để thêm mô-đun mới bên dưới . Khi bạn nhấp vào nút, bạn sẽ được chào đón bằng một danh sách các mô-đun.

Chọn mô-đun bạn chọn và nó sẽ được thêm vào trang của bạn và bảng điều khiển của mô-đun sẽ xuất hiện. Sử dụng bảng điều khiển này, bạn có thể bắt đầu định cấu hình mô-đun của mình.

Đó là nó cho hướng dẫn này. Với những gì bạn đã học hôm nay, bạn sẽ có thể tạo một bố cục với Divi. Chúng tôi sẽ trở lại với các hướng dẫn nâng cao về chủ đề này. Bạn đã có thể tải xuống Chủ đề Divi.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] TẢI XUỐNG TRANG CHỦ [/ vcex_button] [/ width_column] [»vc_column] »1/2 ″] [vcex_button url =" https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials "target =" blank "layout =" expand "align =" center " font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] TẢI XUỐNG DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Hướng dẫn Divi khác

• trang web 5 để sử dụng hàng Divi chủ đề
• Cách thêm văn bản vào sản phẩm Divi WooCommerce
• Cách thay đổi màu menu giữa các trang Divi
• Cách cá nhân hóa lưới của blog với Divi
• Làm thế nào để sử dụng trình biên tập Divi vai trò trên WordPress
• Cách tạo thanh trượt Divi toàn màn hình
• Cách thay đổi màu của menu giữa các trang Divi
• Các tính năng có thể bạn chưa biết về Divi
• Cách sử dụng Divi Builder trên WordPress
• Cách sử dụng mô-đun cuộn video Divi
• Cách sử dụng mô-đun Divi Builder Flip
• Cách thêm mô-đun chứng thực trên Divi Builder
• Cách sử dụng mô-đun văn bản Divi
• Cách tạo thanh trượt trên Divi
• Cách chỉnh sửa vai trò người dùng Divi
• Cách sử dụng mô-đun Truyền thông xã hội Divi
• Cách sử dụng mô-đun cửa hàng trên chủ đề WordPress Divi
• Cách sử dụng mô-đun bên Divi
• Cách sử dụng mô-đun bảng giá Divi
• Cách sử dụng mô-đun tiêu đề của ấn phẩm Divi
• Cách thêm mô-đun video của Divi
• Cách sử dụng mô-đun điều hướng bài viết
• Cách sử dụng mô-đun tìm kiếm Divi
• Cách sử dụng mô-đun ví Divi
• Cách sử dụng mô-đun người trên Divi Builder
• Cách sử dụng mô-đun ví với bộ lọc Divi
• Cách sử dụng mô-đun trượt toàn bộ chiều rộng
• Cách sử dụng Mô-đun hình ảnh Divi Builder
• Cách sử dụng mô-đun điều hướng chiều rộng đầy đủ của Divi Builder
• Cách sử dụng mô-đun thư viện hình ảnh
• Cách sử dụng Mô-đun Thẻ Đa Năng Divi Builder
• Cách sử dụng Mô-đun danh mục đầu tư chiều rộng đầy đủ Divi
• Cách sử dụng mô đun tiêu đề toàn chiều rộng Divi
• Cách sử dụng Module Divi Counter
• Cách sử dụng thanh trượt bài viết trên Divi Builder
• Cách sử dụng mô-đun Optin Email Optin