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 701.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 trống cho phép bạn thêm mã vào trang của mình, chẳng hạn như mã ngắn plugin 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 có thể chỉ cần đặt shortcode của plugin trong mô-đun mã tiêu chuẩn hoặc đầy đủ băng thông để hiển thị phần tử chưa được kiểm tra.

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 một trang mới.

Bằng cách nhấp vào nút này, bạn kích hoạt Divi Builder, cho phép bạn truy cập vào tất cả các mô-đun Divi Builder. Sau đó bấm vào nút Sử dụng Visual Builder để khởi động máy phát ở 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 bảng điều khiển WordPress của mình.

nút divi builder module blog divi

Sau khi 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 mình. Mô-đun mới chỉ có thể được thêm vào bên trong các hàng. Nếu bạn đang bắt đầu một trang mới, hãy nhớ thêm một hàng vào trang của bạn trước.

Chèn mô-đun mã divi

 

Tìm mô-đun mã trong danh sách mô-đun và nhấp vào mô-đun đó để thêm 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ự động tìm và thêm mô-đun mã! Sau khi mô-đun được thêm vào, bạn sẽ được chào đón với danh sách các tùy chọn mô-đun. 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 biểu định kiểu buồn tẻ để tạo hiệu ứng cho nội dung trên một trang riêng lẻ

Trong ví dụ này, tôi sẽ thêm một tập lệnh liên kết để nhập Animate.css để thêm hiệu ứng hoạt ảnh vào các phần tử trang. Vì tệp Animate.css chứa rất nhiều mã, nên chỉ tải nó trên trang mà tôi cần.

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ả tiền đắ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 thường và một dòng có chiều rộng đầy đủ (cột 1) và thêm mô-đun mã.

Mã trình tạo Divi

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

Thêm đoạn mã animate.css

Tất cả những gì bạn phải làm là thêm một vài lớp CSS để tạo hoạt ảnh 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 tải trang.

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

Thêm một lớp hoạt ảnh css

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

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

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

Hoạt ảnh của nút trình tạo divi

Mẹo: Đôi khi việc thêm mã bằng ngắt dòng sẽ khiến mã ngừng hoạt động. Tốt hơn là tạo mã của bạn trong trình soạn thảo văn bản và dán nó 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 yếu 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ả những điều đó cái gì xuất hiện trong mô-đun của bạn sẽ luôn ở trong tab này.

Tham số mã trình tạo DiviNộ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 ở vị trí hiện tại. Chỉ những người chỉnh sửa và quản trị viên mới được phép đăng HTML chưa được lọc, có nghĩa là mã có thể bị xóa khỏi mô-đun nếu được tác giả hoặc người đóng góp sử dụng. Bạn cũng có thể đặt các mã ngắn trong mô-đun. Các mã khóa học này (mã ngắn) sẽ được hiển thị bên trong cột mẹ mà không cần thêm bất kỳ trình bao bọc mô-đun Divi nào.

Nhãn quản trị

Điều này sẽ thay đổi nhãn mô-đun trong bộ tạo để dễ dàng nhận biết. Khi sử dụng dạng xem 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 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 sửa đổi giao diện của mô-đun của mình. Mỗi mô-đun Divi có một danh sách dài các cài đặt thiết kế mà bạn có thể sử dụng để điều chỉnh bất kỳ thứ gì.

Tùy chọn thiết kế mô-đun mã divi builderChiều rộng tối đa

Bất kỳ giá trị nào được nhập ở đâ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ã ở giá trị đã đặt. Ví dụ: nhập 50% vào trường đầu vào sẽ giảm nội dung của mô-đun mã xuống 50% cột chứa nó.

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

Trên tab Nâng cao, 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ể thấy hữu ích, chẳng hạn như các thuộc tính CSS và HTML tùy chỉnh. Tại đây, bạn có thể áp dụng CSS tùy chỉnh cho bất kỳ phần tử nào trong số nhiều phần tử của mô-đun. Bạn cũng có thể áp dụng các lớp CSS và ID tùy chỉnh 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.

Phần nâng cao mã mô-đun divi builder

ID CSS

Nhập một ID CSS dễ sử dụng cho mô-đun này. ID có thể được sử dụng để tạo kiểu CSS tùy chỉnh hoặc để 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 miễn phí WooCommerce, 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. [Đề xuất]

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 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 mình bằng cách sử dụng tùy chọn chủ đề Divi hoặc cài đặt trang Divi Builder.

CSS tùy chỉnh

CSS tùy chỉnh cũng có thể được áp dụng cho mô-đun và bất kỳ phần tử bên trong nào của mô-đun. 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 với các thẻ kiểu. Vì vậy, 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 trên đó. Bạn có thể chọn tắt từng 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 hữu ích nếu bạn muốn sử dụng các mod 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 xóa một số phần tử khỏi 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 đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

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