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 Divi Builder. Một khi Chủ đề Divi cài đặt trên của bạn Website, bạn sẽ nhận 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 duyệt qua Website ngược dòng nếu bạn đã đăng nhập vào bảng điều khiển WordPress của mình.
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.
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.
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ã.
Trong hộp văn bản của 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 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.
Bây giờ nút bị trả lại khi tải trang.
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 của nội dung, bạn sẽ tìm thấy tất cả các thành phần nội dung của mô-đun, chẳng hạn như văn bản, hình ảnh và biểu tượng. Mọi thứ kiểm soát cái gì xuất hiện trong mô-đun của bạn sẽ luôn ở trong tab này.
Nội dung
Tại đây, 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ỉ 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 khóa học nếu được tác giả hoặc cộng tác viên 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ì.
Chiề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.
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.
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ởi dấu cách. Các lớp này có thể được sử dụng trong Chủ đề Divi Con hoặc trong CSS tùy chỉnh mà bạn thêm vào trang của mình hoặc Website 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.
