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

hơn Tải xuống 901.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í.

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 vào Divi Người xây dựng. 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 dùng Divi Xây dựng 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.

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 tạo Dễ dàng và Miễn phí bất kỳ trang web hoặc thiết kế blog với một cái nhìn chuyên nghiệp. Ngừng trả nhiều tiền cho một trang web mà bạn có thể tự làm.

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.

Bạn có muốn bán sản phẩm của mình trên internet?

Tải xuống WooCommerce 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 và dễ dàng tạo cửa hàng trực tuyến của bạn. Hoàn hảo cho người mới bắt đầu.

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

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

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ì.

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.

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 hoặc trang web của mình bằng Tùy chọn Chủ đề Divi hoặc Cài đặt Trang Trình tạo Divi.

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.

%d các blogger thích trang này: