Bỏ qua đến nội dung chính

Cách sử dụng mô-đun mã trên Divi Builder

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Mô-đun mã là một khung vẽ trống cho phép bạn thêm mã vào trang của mình, chẳng hạn như mã plugin ngắn hoặc mã HTML tĩnh. Nếu bạn muốn sử dụng plugin của bên thứ ba, chẳng hạn như plugin trượt của bên thứ ba, bạn chỉ cần đặt mã ngắn của plugin vào mô-đun mã tiêu chuẩn hoặc toàn chiều rộng để hiển thị phần tử mà không gặp trở ngại.

Cách thêm mô-đun mã vào trang của bạn

Trước khi bạn có thể thêm mô-đun mã vào trang của mình, trước tiên bạn phải truy cập Trình tạo Divi. Khi chủ đề Divi được cài đặt trên trang web của bạn, bạn sẽ thấy một nút Sử dụng Divi Builder phía trên nhà xuất bản mỗi khi bạn tạo trang mới.

Kích nút này sẽ kích hoạt Divi Builder, cho phép bạn truy cập vào tất cả các module Divi Builder. Sau đó bấm vào nút Sử dụng Visual Builder để khởi động trình tạo trong chế độ trực quan.

Bạn cũng có thể nhấp vào nút Sử dụng Visual Builder khi bạn đang duyệt trang web ngược dòng của mình nếu bạn đã đăng nhập vào trang tổng quan WordPress của mình.

nút divi builder module blog divi

Khi đã nhập vào Visual Builder, bạn có thể nhấp vào nút dấu cộng màu xám để thêm mô-đun mới vào trang của bạn. Các mô đun mới chỉ có thể được thêm vào bên trong các hàng. Nếu bạn bắt đầu một trang mới, trước tiên đừng quên thêm một dòng vào trang của bạn.

Tìm mô-đun mã trong danh sách mô-đun và nhấp vào mô-đun đó để thêm mô-đun đó vào trang của bạn. Danh sách các mô-đun có thể tìm kiếm được, có nghĩa là bạn cũng có thể nhập từ "mã" và sau đó nhấn Enter để tìm kiếm và tự động thêm mô-đun mã! Khi module được thêm vào, bạn sẽ được chào đón với danh sách các tùy chọn của module. Các tùy chọn này được chia thành ba nhóm chính: Nội dung , Conception et tiên tiến .

Trường hợp sử dụng bằng cách thêm một tờ kiểu ngu si đần độn để tạo hiệu ứng nội dung trên một trang riêng lẻ

Dans cet exemple, je vais ajouter un script de lien pour importer Animate.css afin d’ajouter des effets d’animation aux éléments de la page. Comme le fichier Animate.css contient beaucoup de code, il est logique de ne le charger que sur la page dont j’ai besoin.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả giá đắt cho những gì bạn có thể tự làm. [Miễn phí]

Chỉ cần thêm một phần thường xuyên và một dòng đầy đủ chiều rộng (cột 1) và thêm mô-đun mã.

Trong hộp văn bản nội dung, thêm đoạn mã.

Tất cả những gì bạn phải làm là thêm một vài lớp CSS để tạo hiệu ứng cho bất kỳ phần tử nào của trang lớp CSS trên trang của bạn. Trong ví dụ này, tôi sẽ trả lại nút khi trang tải.

Trong cài đặt mô-đun Nút, trên tab Nâng cao, nhập hai lớp "hoạt hình" và "thoát" trong hộp văn bản Lớp CSS.

Bạn đang tìm kiếm các chủ đề và plugin WordPress tốt nhất?

Tải xuống các plugin và chủ đề WordPress tốt nhất từ ​​Envato và dễ dàng tạo trang web của bạn. Đã có hơn 49.720.000 lượt tải xuống. [ĐỘC QUYỀN]

Bây giờ nút bị trả lại khi tải trang.

Mẹo: Đôi khi thêm mã có ngắt dòng sẽ ngăn mã hoạt động. Tốt nhất là tạo mã của bạn trong trình soạn thảo văn bản và dán mã đó vào mô-đun mã.

Tùy chọn nội dung mã

Trong tab nội dung, bạn sẽ tìm thấy tất cả các phần tử nội dung của mô-đun, chẳng hạn như văn bản, hình ảnh và biểu tượng. Tất cả các điều khiển đó cái gì xuất hiện trong mô-đun của bạn sẽ luôn nằm trong tab này.

Nội dung

Bạn có thể đặt bất kỳ mã HTML, CSS hoặc JavaScript nào mà bạn muốn hiển thị trên trang tại vị trí hiện tại. Chỉ người chỉnh sửa và quản trị viên mới được phép xuất bản HTML chưa được lọc, có nghĩa là mã có thể bị xóa khỏi mô-đun nếu mã được sử dụng bởi tác giả hoặc cộng tác viên. Bạn cũng có thể đặt các mã ngắn trong mô-đun. Các mã ngắn này sẽ được hiển thị bên trong cột cha mà không có bất kỳ trình bao bọc mô-đun Divi bổ sung nào.

Nhãn quản trị

Điều này sẽ thay đổi thẻ của mô-đun trong trình tạo để dễ nhận biết. Khi sử dụng khung nhìn WireFrame trong Visual Builder, các nhãn này sẽ xuất hiện trong khối mô-đun của giao diện Divi Builder.

Tùy chọn thiết kế mã

Trong tab Thiết kế, bạn sẽ tìm thấy tất cả các tùy chọn kiểu của mô-đun, chẳng hạn như phông chữ, màu sắc, kích thước và khoảng cách. Tab này cho phép bạn thay đổi giao diện của mô-đun. Mỗi mô-đun Divi có một danh sách dài các thông số thiết kế mà bạn có thể sử dụng để sửa đổi bất cứ thứ gì.

Chiều rộng tối đa

Bất kỳ giá trị nào được nhập vào đây đều giới hạn chiều rộng của bất kỳ nội dung nào được hiển thị trong mô-đun mã đến giá trị đã đặt. Ví dụ, nhập 50% vào trường nhập sẽ làm giảm nội dung của mô-đun mã thành 50% của cột chứa nó.

Mã tùy chọn nâng cao mã

Trong tab Advanced, bạn sẽ tìm thấy các tùy chọn mà các nhà thiết kế web có kinh nghiệm hơn có thể tìm thấy hữu ích, chẳng hạn như các thuộc tính CSS và HTML tùy chỉnh. Ở đây bạn có thể áp dụng một CSS tùy chỉnh cho một trong nhiều thành phần của mô-đun. Bạn cũng có thể áp dụng các lớp tùy chỉnh và ID CSS cho mô-đun, có thể được sử dụng để tùy chỉnh mô-đun trong tệp style.css của chủ đề con của bạn.

ID CSS

Nhập ID CSS dễ sử dụng cho mô-đun này. Mã định danh có thể được sử dụng để tạo kiểu CSS tùy chỉnh hoặc tạo liên kết đến các phần cụ thể trên trang của bạn.

Dễ dàng tạo cửa hàng trực tuyến của bạn

Tải xuống WooC Commerce miễn phí, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Khuyến nghị]

Lớp CSS

Nhập các lớp CSS tùy chọn để sử dụng cho mô-đun này. Một lớp CSS có thể được sử dụng để tạo một kiểu CSS tùy chỉnh. Bạn có thể thêm nhiều lớp, cách nhau bằng dấu cách. Các lớp này có thể được sử dụng trong chủ đề Divi Child của bạn hoặc trong CSS tùy chỉnh mà bạn thêm vào trang hoặc trang web của bạn bằng cách sử dụng các tùy chọn chủ đề Divi hoặc cài đặt trang Divi Builder.

CSS tùy chỉnh

Một CSS tùy chỉnh cũng có thể được áp dụng cho module và một trong các thành phần bên trong của module. Trong phần CSS tùy chỉnh, bạn sẽ tìm thấy một trường văn bản nơi bạn có thể thêm CSS trực tiếp vào từng phần tử. Các mục CSS trong các cài đặt này đã được nhúng trong các thẻ kiểu. Bạn chỉ cần nhập các quy tắc CSS được phân tách bằng dấu chấm phẩy.

tầm nhìn

Tùy chọn này cho phép bạn kiểm soát các thiết bị mà mô-đun của bạn xuất hiện. Bạn có thể chọn tắt mô-đun của mình trên máy tính bảng, điện thoại thông minh hoặc máy tính để bàn. Điều này rất hữu ích nếu bạn muốn sử dụng các mô-đun khác nhau trên các thiết bị khác nhau hoặc nếu bạn muốn đơn giản hóa thiết kế di động bằng cách loại bỏ các yếu tố nhất định của trang.

Đó là nó cho hướng dẫn này.

Bài viết này chứa comments 0

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được chỉ định bằng *

Trang web này sử dụng Akismet để giảm thư rác. Tìm hiểu thêm về cách sử dụng dữ liệu phản hồi của bạn.

Trở lại đầu trang
2 cổ phiếu
cổ phiếu2
tweet
Enregistrer