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

Hướng dẫn Divi: Cách sử dụng Mô-đun hình ảnh 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ị]

Divi giúp dễ dàng thêm hình ảnh ở bất cứ đâu trên blog của bạn. Tất cả các hình ảnh đều hỗ trợ tải liên tục và đi kèm với các kiểu hoạt hình khác nhau của 4 giúp duyệt trang web của bạn thú vị và hấp dẫn. Các mô-đun hình ảnh có thể được đặt trong bất kỳ cột nào bạn tạo và kích thước của chúng sẽ được điều chỉnh cho phù hợp.

image module divi.png

Cách thêm mô-đun hình ảnh từ Divi

Trước khi bạn có thể thêm mô-đun hình ảnh vào trang của mình, trước tiên bạn phải nhảy vào Divi Builder. 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. Nhấp vào nút này để kích hoạt Divi Builder và truy cập 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 trang web của bạn ở phía trước nếu bạn được kết nối với bảng điều khiển WordPress của bạn.

divi builder

Khi bạn đã kích hoạt Trình xây dựng hình ảnh, bạn có thể nhấp vào nút màu xám (+) để thêm mô-đun mới vào trang của mình. Các mô-đun mới chỉ có thể được thêm vào bên trong các dòng. Nếu bạn bắt đầu một trang mới, đừng quên thêm một dòng vào trang của bạn trước.

divi module image.png

Xác định vị trí mô-đun hình ảnh trong danh sách các mô-đun và nhấp vào nó để thêm nó 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ừ "hình ảnh", sau đó nhấp vào để tìm kiếm và tự động thêm mô-đun hình ảnh! Sau khi mô-đun được thêm vào, bạn sẽ được chào đón bởi danh sách các tùy chọn của mô-đun. Các tùy chọn này được tách thành ba nhóm chính: Nội dung , Conception et tiên tiến .

Ví dụ về trường hợp sử dụng: Thêm chồng chéo hình ảnh để minh họa dịch vụ trên trang dịch vụ

Có vô số cách để sử dụng mô-đun hình ảnh. Trong ví dụ này, tôi sẽ chỉ cho bạn cách thêm hình ảnh vào trang dịch vụ cho một trang web doanh nghiệp nhỏ. Đây là nơi tôi sẽ thêm hình ảnh. Mỗi vòng tròn màu đỏ đại diện cho một hình ảnh.

thêm một hình ảnh mô-đun divi builder.jpg

Vì việc thêm hình ảnh vào một trang là một quá trình khá đơn giản và dễ hiểu, tôi sẽ thêm một số kiểu tùy chỉnh để định vị hình ảnh của mình sao cho chúng trùng nhau, tạo hiệu ứng xếp chồng.

Chúng ta hãy bắt đầu.

Sử dụng hàm tạo trực quan để thêm phần tiêu chuẩn với bố cục 1 / 4 1 / 4 1 / 2. Sau đó thêm một mô-đun văn bản vào cột 1 / 2 bên phải trong hàng của bạn. Nhập một tiêu đề và một mô tả của dịch vụ.

Sau đó thêm một mô-đun hình ảnh vào cột 1 / 4 ở phía bên trái.

thêm hình ảnh divi builder.png

Cập nhật cài đặt của mô-đun Hình ảnh như sau:

Tùy chọn nội dung

URL hình ảnh: [nhập URL hoặc tải xuống hình ảnh với kích thước 500 × 625]

Tùy chọn thiết kế

Ký hiệu tùy chỉnh: trái -60px

Tùy chọn avancées

Hoạt hình: Từ trái sang phải

hoạt hình divi image.png

Lưu cài đặt

Thêm một mô-đun hình ảnh khác trong cột thứ hai 1 / 4 (hoặc cột giữa) và cập nhật cài đặt hình ảnh như sau:

Tùy chọn nội dung

URL hình ảnh: [nhập URL hoặc tải xuống hình ảnh với kích thước 500 × 625]

Tùy chọn thiết kế

Ký hiệu tùy chỉnh: Hàng đầu 100px, -60px còn lại

Tùy chọn avancées

Hoạt hình: Từ phải sang trái

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í]

hình ảnh chồng chéo divi.png

Lưu cài đặt

Điều này chăm sóc phần đầu tiên. Bây giờ, đối với phần dịch vụ tiếp theo, chúng ta có thể nhân đôi phần chúng ta vừa tạo cho phần dịch vụ đầu tiên. Khi phần được sao chép, thay đổi cấu trúc của cột thành bố cục cột 1 / 2 1 / 4 1 / 4 (đối diện với cột trước đó).

chọn một phần divi.jpg

Sau đó kéo mô-đun văn bản với tiêu đề và mô tả dịch vụ trong cột 1 / 2 ở phía bên trái. Đảm bảo kéo cả hai mô-đun hình ảnh để điền vào mỗi cột 1 / 4 (bây giờ ở bên phải).

Vì các mô-đun hình ảnh là trùng lặp, chúng tôi phải tải xuống các hình ảnh mới cho phần dịch vụ cụ thể đó. Ngoài ra, các mô-đun luôn có cài đặt lề tùy chỉnh như hai mô-đun hình ảnh đầu tiên được tạo. Hãy thay đổi điều đó.

Bắt đầu với mô-đun Hình ảnh trong cột 1 / 4 bên phải, cập nhật các cài đặt hình ảnh sau:

Tùy chọn nội dung

URL hình ảnh: [nhập URL hoặc tải xuống hình ảnh với kích thước 500 × 625]

Tùy chọn thiết kế

Ký hiệu tùy chỉnh: -60px còn lại (chỉ)

Tab nâng cao

Hoạt hình: Từ phải sang trái

Cuối cùng, cập nhật cài đặt hình ảnh cho mô-đun hình ảnh của cột trung tâm 1 / 4 với các yếu tố sau:

Tùy chọn nội dung

URL hình ảnh: [nhập URL hoặc tải xuống hình ảnh với kích thước 500 × 625]

Tùy chọn thiết kế

Ký hiệu tùy chỉnh: 100px Up, -60px Phải

Tab nâng cao

Hoạt hình: Từ trái sang phải

Lưu cài đặt

Bây giờ hãy kiểm tra trang!

ví dụ về trang dịch vụ divi.jpg

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]

Tùy chọn nội dung mô-đun hình ảnh

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ả điều khiển cái gì xuất hiện trong mô-đun của bạn sẽ luôn được tìm thấy trong tab này.

phần image divi area contents.png

URL của hình ảnh

Đặt URL hình ảnh hợp lệ tại đây hoặc chọn / tải lên hình ảnh thông qua Thư viện phương tiện WordPress. Hình ảnh sẽ luôn xuất hiện bên trái trong các cột của chúng và bao phủ toàn bộ chiều rộng của cột của bạn. Tuy nhiên, hình ảnh của bạn sẽ không bao giờ lớn hơn kích thước ban đầu của nó. Chiều cao của hình ảnh được xác định bởi tỷ lệ khung hình của ảnh gốc của bạn.

Mở trong trình xem

Bạn có thể chọn ở đây xem hình ảnh của bạn có mở trong trình xem hay không khi bạn nhấp vào nó. Nếu tùy chọn này được bật, hình ảnh của bạn sẽ "phóng to" đến kích thước tối đa của nó khi bạn nhấp vào cửa sổ phương thức. Đây là một tính năng tuyệt vời cho danh mục đầu tư.

URL liên kết

Đặt một URL web hợp lệ trong trường này để biến hình ảnh của bạn thành một liên kết. Để trống trường này sẽ chỉ để lại hình ảnh của bạn dưới dạng phần tử tĩnh.

Mở URL

Bạn có thể chọn ở đây nếu liên kết của bạn mở trong một cửa sổ mới.

Nhãn quản trị

Điều này sẽ thay đổi nhãn mô-đun trong hàm tạo để dễ nhận biết. Khi bạn sử dụng chế độ 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ô-đun hình ảnh

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. Đây là tab bạn sẽ sử dụng để thay đổi giao diện của mô-đun. Mỗi mô-đun Divi có một danh sách dài các tham số thiết kế mà bạn có thể sử dụng để thay đổi bất cứ điều gì.

tùy chọn thiết kế mô-đun hình ảnh divi.png

Lớp phủ hình ảnh

Nếu tùy chọn này được bật, màu sắc và biểu tượng lớp phủ sẽ được hiển thị khi khách truy cập di chuyển qua hình ảnh.

Lớp phủ của biểu tượng màu

Tại đây bạn có thể đặt màu tùy chỉnh cho biểu tượng lớp phủ

Che phủ lớp phủ màu

Tại đây bạn có thể xác định màu tùy chỉnh cho lớp phủ.

Biểu tượng vượt mức

Tại đây bạn có thể xác định một biểu tượng tùy chỉnh cho lớp phủ.

Xóa không gian bên dưới hình ảnh

Tùy chọn này chỉ ảnh hưởng đến hình ảnh khi chúng là mô-đun cuối cùng của một cột. Khi tùy chọn này được bật, khoảng cách giữa phần dưới cùng của hình ảnh và phần tiếp theo sẽ bị xóa, cho phép hình ảnh đóng khung trên cùng của phần tiếp theo của trang.

Căn chỉnh hình ảnh

Ở đây bạn chọn hướng mà hình ảnh của bạn nổi trong cột. Bạn có thể nổi hình ảnh sang trái, phải hoặc giữ nó ở giữa.

Luôn tập trung hình ảnh trên thiết bị di động

Thông thường, hình ảnh nhỏ sẽ thú vị hơn khi xem trên thiết bị di động khi chúng được đặt ở giữa. Khi các cột không thành công, các hình ảnh được căn trái hoặc phải trong các cột nhỏ hơn sẽ trở thành mồ côi khi các cột không thành công và đạt chiều rộng 100%. Kích hoạt cột này với các hình ảnh bắt buộc để căn chỉnh vào giữa cột trên thiết bị di động mà không ảnh hưởng đến sự liên kết của hình ảnh trên máy tính để bàn.

Sử dụng đường viền

Kích hoạt tùy chọn này sẽ đặt một đường viền xung quanh mô-đun của bạn. Đường viền này có thể được tùy chỉnh bằng cách sử dụng các tham số điều kiện sau đây.

Màu của đường viền

Tùy chọn này ảnh hưởng đến màu sắc của đường viền của bạn. Chọn một màu tùy chỉnh trong bộ chọn màu để áp dụng nó cho đường viền của bạn.

Chiều rộng của đường viền

Theo mặc định, các đường viền có chiều rộng của pixel 1. Bạn có thể tăng giá trị này bằng cách kéo thanh trượt phạm vi hoặc nhập giá trị tùy chỉnh trong trường nhập vào bên phải thanh trượt. Các đơn vị đo lường tùy chỉnh được hỗ trợ, có nghĩa là bạn có thể thay đổi đơn vị mặc định của "px" thành một thứ khác, như em, vh, vw, v.v.

Kiểu đường viền

Biên giới hỗ trợ tám phong cách khác nhau: rắn, rải rác, tiêu tan, đôi, rãnh, sườn núi, inlay và bắt đầu. Chọn kiểu bạn muốn từ menu thả xuống để áp dụng nó cho đường viền của bạn.

Chiều rộng tối đa của hình ảnh

Theo mặc định, chiều rộng tối đa của hình ảnh được đặt thành 100%. Điều này có nghĩa là hình ảnh sẽ được hiển thị ở chiều rộng tự nhiên của nó trừ khi chiều rộng của hình ảnh vượt quá chiều rộng của cột cha, trong trường hợp đó, hình ảnh sẽ bị giới hạn ở 100% chiều rộng của cột. Nếu bạn muốn giới hạn hơn nữa chiều rộng tối đa của hình ảnh, bạn có thể thực hiện việc này bằng cách nhập giá trị chiều rộng tối đa mong muốn tại đây. Ví dụ: giá trị 50% sẽ giới hạn chiều rộng của hình ảnh thành 50% chiều rộng của cột cha.

Buộc toàn bộ chiều rộng

Theo mặc định, hình ảnh được hiển thị ở độ rộng tự nhiên của chúng. Tuy nhiên, bạn có thể chọn buộc hình ảnh mở rộng toàn bộ chiều rộng của cột cha bằng cách bật tùy chọn này.

Lề tùy chỉnh

Ký quỹ là khoảng trắng được thêm vào bên ngoài mô-đun của bạn, giữa mô-đun và mục tiếp theo ở trên, bên dưới hoặc bên trái và bên phải của mô-đun. Bạn có thể thêm các giá trị lề tùy chỉnh vào một trong bốn phía của mô-đun. Để loại bỏ lề tùy chỉnh, hãy xóa giá trị được thêm vào từ trường đầu vào. Theo mặc định, các giá trị này được đo bằng pixel, nhưng bạn có thể nhập các đơn vị đo lường tùy chỉnh trong các trường đầu vào.

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]

Tùy chọn mô-đun hình ảnh nâng cao

Trong 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 một trong nhiều yếu tố 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 bạn.

phần mô-đun nâng cao image.png

ID CSS

Nhập một định danh CSS tùy chọn để 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 để tạo 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 một khoảng trắng. Các lớp này có thể được sử dụng trong chủ đề con Divi của bạn hoặc trong biểu định kiểu 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à một trong các yếu tố bên trong của mô-đun. Trong phần Tùy chỉnh CSS bạn sẽ tìm thấy một trường văn bản nơi bạn có thể thêm tùy chỉnh CSS trực tiếp cho từng hạng mục. Các mục CSS trong các tham số này đã được bọc trong các thẻ kiểu. Vì vậy, chỉ cần nhập các quy tắc CSS được phân tách bằng dấu chấm phẩy.

Hoạt hình

Sử dụng menu thả xuống này để chỉ định hoạt hình tải lười biếng cho hình ảnh của bạn. Bạn có thể chọn xem hình ảnh của bạn xuất hiện từ bên phải, bên trái, dưới cùng hoặc trên cùng.

tầm nhìn

Tùy chọn này cho phép bạn điều khiển 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 riêng lẻ. Này rất hữu ích nếu bạn muốn sử dụng các module khác nhau trên các thiết bị khác nhau, hoặc muốn đơn giản hóa thiết kế điện thoại di động bằng cách loại bỏ các yếu tố trang nhất định.

Văn bản thay thế của hình ảnh

Văn bản thay thế cung cấp tất cả các thông tin cần thiết nếu hình ảnh không tải, không hiển thị chính xác hoặc trong bất kỳ tình huống nào khác mà người dùng không thể nhìn thấy hình ảnh. Nó cũng cho phép hình ảnh được đọc và nhận dạng bởi các công cụ tìm kiếm.

Hướng dẫn Divi khác

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
11 cổ phiếu
cổ phiếu4
tweet1
Enregistrer6