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

Hướng dẫn Divi: Cách sử dụng mô-đun Thư viện hình ảnh

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

Chia sẻ bộ sưu tập hình ảnh trên Divi luôn là một cách tuyệt vời để thu hút người dùng trực quan vào nội dung của bạn. Mô-đun Divi Gallery cho phép bạn tạo và sắp xếp các phòng trưng bày ở bất cứ đâu trên trang web của bạn. Mô-đun bộ sưu tập trên Divi Builder có sẵn ở định dạng lưới và thanh trượt và hỗ trợ các phòng trưng bày lớn với phân trang.

ví dụ thư viện divi.png

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

Trước khi bạn có thể thêm mô-đun thư viện vào trang của mình, trước tiên bạn phải chuyển sang 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. 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 đã nhập Visual Builder, bạn có thể nhấp vào nút cộng 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. Chúng tôi có hướng dẫn tuyệt vời về việc sử dụng các yếu tố của dòng et de phần của Divi.

bộ sưu tập hình ảnh divi.png

Xác định vị trí mô-đun bộ sưu tập 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ừ "thư viện", sau đó nhấp vào để tìm kiếm và tự động thêm mô-đun thư viện! 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 .

Trường hợp sử dụng ví dụ: Thêm thư viện hình ảnh có chiều rộng đầy đủ để giới thiệu bức ảnh.

Thêm một bộ sưu tập vào trang ảnh của bạn là một cách tuyệt vời để quảng bá công việc của bạn và tăng uy tín của bạn với khách hàng. Trong ví dụ này, tôi sẽ chỉ cho bạn cách bạn có thể sử dụng mô-đun bộ sưu tập để thêm một bộ sưu tập hình ảnh với bố cục dạng lưới chạy toàn bộ chiều rộng của trang. Các hình ảnh không có không gian giữa chúng mang lại cho nó một bài thuyết trình thiết thực và thẩm mỹ.

tạo một bộ sưu tập hình ảnh divi.jpg

Và đừng quên rằng mỗi hình ảnh sẽ mở một cửa sổ bật lên để chuyển qua các phiên bản lớn hơn của hình ảnh trong thư viện.

lightbox divi gallery.gif

Sử dụng Visual Builder, thêm một phần mới bên dưới phần tiêu đề với hàng có chiều rộng đầy đủ hoặc chiều rộng đầy đủ (1 cột). Sau đó, thêm mô-đun Thư viện vào hàng.

Cập nhật cài đặt mô-đun Thư viện như sau:

Tùy chọn nội dung

Hình ảnh Thư viện: Nhấp vào thư viện cập nhật và chọn hình ảnh bạn muốn đưa vào thư viện. Số lượng hình ảnh: 12 Tiêu đề hiển thị và chú thích: KHÔNG Phân trang hiển thị: KHÔNG

Tùy chọn thiết kế

Bố cục: Lưới Hướng hình thu nhỏ: Biểu tượng Thu phóng theo chiều ngang Màu: #ffffff Màu của di chuột khi di chuột: rgba (0,0,0,0.48) Bộ chọn Biểu tượng Di chuột: mặc định

divi wordpress nội dung hướng dẫn section.png

Lưu cài đặt

Bây giờ tất cả những gì còn lại cần làm là loại bỏ tất cả không gian xung quanh hình ảnh. Quay lại và chọn cài đặt hàng. Trên tab Thiết kế, cập nhật những điều sau:

Làm cho hàng này có chiều rộng đầy đủ: CÓ
Sử dụng chiều rộng máng xối tùy chỉnh: CÓ
Chiều rộng máng xối: 1

Điều quan trọng cần nhớ là giá trị số "1" cho chiều rộng máng xối thực sự là XNUMX (không có chiều rộng nào cả).

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

cấu hình khoảng cách của goutière.png

Lưu cài đặt

Vậy là xong!

Tùy chọn nội dung mô-đun thư viện

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.

divi module galery content.png

Hình ảnh thư viện

Nhấp vào nút Cập nhật ngày trưng bày để khởi chạy thư viện phương tiện WordPress, nơi bạn có thể chọn hình ảnh bạn muốn hiển thị trong thư viện của mình.

Số lượng hình ảnh

Đặt số lượng hình ảnh hiển thị trên mỗi trang. Khi nhiều hình ảnh hơn những gì được phép trên mỗi trang được đưa vào thư viện của bạn, phân trang sẽ xuất hiện bên dưới hình ảnh.

Tiêu đề và chú thích hiển thị:

Nếu tiêu đề hình ảnh hoặc chú thích đã được thêm vào, chúng sẽ xuất hiện bên dưới hình ảnh trong thư viện. Nếu bạn muốn tắt các phần tử văn bản này, bạn có thể làm như vậy bằng cách sử dụng tùy chọn này.

Xem phân trang

Khi nhiều hình ảnh hơn những gì được phép trên mỗi trang được đưa vào thư viện của bạn, phân trang sẽ xuất hiện bên dưới hình ảnh. Nếu bạn muốn xóa phân trang, bạn có thể tắt cài đặt này.

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 thư viện

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

gallery module zone design.png

Bố trí

Theo mặc định, các phòng trưng bày được hiển thị dưới dạng lưới hình ảnh. Bạn cũng có thể chọn hiển thị thư viện của mình dưới dạng thanh trượt hình ảnh.

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]

Hướng hình thu nhỏ

Bạn có thể chọn để có các hình ảnh từ thư viện của mình ở định dạng dọc hoặc ngang. Nếu bạn thay đổi chế độ, bạn có thể cần phải tạo lại hình thu nhỏ của bạn .

Biểu tượng màu phóng to

Khi bạn di chuột qua một mục trong nhóm Thư viện, biểu tượng lớp phủ sẽ xuất hiện. Bạn có thể điều chỉnh màu được sử dụng từ biểu tượng này bằng công cụ chọn màu trong cài đặt này.

Di chuột màu lớp phủ

Khi bạn di chuột qua một mục trong mô-đun Thư viện, màu lớp phủ sẽ xuất hiện ở đầu hình ảnh và bên dưới biểu tượng văn bản và tiêu đề của danh mục đầu tư. Theo mặc định, một màu trắng bán trong suốt được sử dụng. Nếu bạn muốn sử dụng một màu khác, bạn có thể điều chỉnh màu bằng cách sử dụng bộ chọn màu trong cài đặt này

Biểu tượng bộ chọn di chuột

Tại đây, bạn có thể chọn một biểu tượng tùy chỉnh để hiển thị khi khách truy cập di chuột qua các mục thư viện trong mô-đun.

Màu văn bản

Ở đây bạn có thể chọn xem văn bản của bạn nên sáng hay tối. Nếu bạn đang làm việc trên một nền tối, văn bản của bạn sẽ rõ ràng. Nếu nền của bạn rõ ràng, văn bản của bạn phải tối.

Phông chữ tiêu đề

Bạn có thể thay đổi phông chữ của văn bản tiêu đề bằng cách chọn phông chữ mong muốn từ menu thả xuống. Divi đi kèm với hàng tá phông chữ lớn được cung cấp bởi Google Fonts. Theo mặc định, Divi sử dụng phông chữ Open Sans cho tất cả văn bản trên trang của bạn. Bạn cũng có thể tùy chỉnh kiểu văn bản của mình bằng cách sử dụng các tùy chọn in đậm, in nghiêng, viết hoa và gạch chân.

Kích thước phông chữ tiêu đề

Ở đây bạn có thể điều chỉnh kích thước của văn bản tiêu đề của bạn. Bạn có thể kéo thanh trượt phạm vi để tăng hoặc giảm kích thước văn bản của mình hoặc nhập giá trị của kích thước văn bản mong muốn trực tiếp vào trường nhập vào bên phải của thanh trượt. Các trường đầu vào hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" tùy thuộc vào giá trị kích thước của bạn để thay đổi loại đơn vị.

Màu văn bản tiêu đề

Theo mặc định, tất cả các màu văn bản Divi xuất hiện với màu trắng hoặc xám đen. Nếu bạn muốn thay đổi màu của văn bản tiêu đề của bạn, hãy chọn màu mong muốn trong bộ chọn màu bằng tùy chọn này.

Khoảng cách của các chữ cái đầu

Khoảng cách của các chữ cái ảnh hưởng đến khoảng cách giữa mỗi chữ cái. Nếu bạn muốn tăng khoảng trắng giữa mỗi chữ cái trong văn bản tiêu đề của mình, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng trắng hoặc nhập kích thước khoảng cách mong muốn trong trường nhập vào bên phải của thanh trượt. Các trường đầu vào hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" tùy thuộc vào giá trị kích thước của bạn để thay đổi loại đơn vị.

Chiều cao của dòng tiêu đề

Chiều cao của dòng ảnh hưởng đến khoảng trắng giữa mỗi dòng của văn bản tiêu đề của bạn Nếu bạn muốn tăng khoảng trắng giữa mỗi dòng, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng trắng hoặc nhập kích thước khoảng cách mong muốn trong trường nhập liệu nằm bên phải con trỏ Các trường đầu vào hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" tùy thuộc vào giá trị kích thước của bạn để thay đổi loại đơn vị.

Phông chữ chú giải

Bạn có thể thay đổi phông chữ của văn bản phụ đề bằng cách chọn phông chữ mong muốn từ menu thả xuống. Divi đi kèm với hàng tá phông chữ lớn được cung cấp bởi Google Fonts. Theo mặc định, Divi sử dụng phông chữ Open Sans cho tất cả văn bản trên trang của bạn. Bạn cũng có thể tùy chỉnh kiểu văn bản của mình bằng cách sử dụng các tùy chọn in đậm, in nghiêng, viết hoa và gạch chân.

Kích thước phông chữ phụ đề

Tại đây, bạn có thể điều chỉnh kích thước của văn bản phụ đề của mình. Bạn có thể kéo thanh trượt phạm vi để tăng hoặc giảm kích thước văn bản của mình hoặc nhập trực tiếp giá trị kích thước văn bản mong muốn vào trường nhập ở bên phải thanh trượt. Các trường đầu vào hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" tùy thuộc vào giá trị kích thước của bạn để thay đổi loại đơn vị của nó.

Màu văn bản chú giải

Theo mặc định, tất cả các màu văn bản trong Divi đều có màu trắng hoặc xám đậm. Nếu bạn muốn thay đổi màu của văn bản phụ đề, hãy chọn màu mong muốn từ bộ chọn màu bằng cách sử dụng tùy chọn này.

khoảng cách các chữ cái huyền thoại divi.png

Dấu cách chữ chú giải

Khoảng cách của các chữ cái ảnh hưởng đến khoảng cách giữa mỗi chữ cái. Nếu bạn muốn tăng khoảng trắng giữa mỗi chữ cái trong văn bản chú thích của mình, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng trắng hoặc nhập kích thước khoảng cách mong muốn trong trường nhập vào bên phải của thanh trượt. Các trường đầu vào hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" tùy thuộc vào giá trị kích thước của bạn để thay đổi loại đơn vị.

Chiều cao hàng chú giải

Chiều cao hàng ảnh hưởng đến khoảng cách giữa mỗi dòng văn bản phụ đề Nếu bạn muốn tăng khoảng cách giữa mỗi dòng, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng cách hoặc nhập kích thước khoảng cách mong muốn vào trường nhập liệu. ở bên phải con trỏ. Các trường đầu vào hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" tùy thuộc vào giá trị kích thước của bạn để thay đổi loại đơn vị của 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.

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]

Kiểu 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.

Các tùy chọn nâng cao của mô-đun thư viện

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.

tùy chọn nâng cao của mô-đun bộ sưu tập divi.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.

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.

Hướng dẫn Divi khác

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

  1. Xin chào, tôi thấy bài viết của bạn rất thú vị.
    Tôi đã tạo một thư viện dưới Divi bằng cách làm theo lời khuyên của bạn và mọi thứ đều hoạt động tốt, ngoại trừ tôi không biết cách loại bỏ nhấp chuột phải để ngăn lưu hình ảnh của mình. Bạn có giải pháp không, cảm ơn trước. chân thành

    1. Chào buổi tối Bernard,

      Để chặn nhấp chuột phải, bạn cần cài đặt một plugin. Tôi mời bạn thực hiện tìm kiếm trên thư mục WordPress.

Để 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
6 cổ phiếu
cổ phiếu2
tweet
Enregistrer4