Divi giúp bạn dễ dàng thêm hình ảnh ở mọi nơi trên blog của bạn. Tất cả hình ảnh đều hỗ trợ tải liên tục và đi kèm với 4 kiểu hoạt ảnh khác nhau giúp việc điều hướng trang web của bạn trở nê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.
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 chuyển sang Divi Builder. Một 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 trình chỉnh sửa bài đăng bất cứ khi nào 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 của Divi Builder. Sau đó bấm vào nút Sử dụng Visual Builder để khởi động trình tạo ở 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.
Khi bạn đã kích hoạt Trình tạo trực quan, 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. 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 hình ảnh 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ừ "hình ảnh" và sau đó nhấp vào enter để tự động tìm và 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 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 .
Ví dụ trường hợp sử dụng: Thêm hình ảnh chồng chéo để minh họa các dịch vụ trên trang dịch vụ
Có vô số cách để sử dụng mô-đun hình ảnh. Đối với 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 trang web doanh nghiệp nhỏ. Đây là nơi tôi sẽ thêm các hình ảnh. Mỗi vòng tròn màu đỏ đại diện cho một hình ảnh.
Vì thêm hình ảnh vào 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 chồng lên nhau, tạo ra hiệu ứng xếp chồng lên nhau.
Chúng ta hãy bắt đầu.
Sử dụng trình 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ô-đun văn bản vào cột bên phải 1/2 hàng của bạn. Nhập tiêu đề và mô tả cho dịch vụ.
Sau đó, thêm một mô-đun hình ảnh vào 1/4 cột ngoài cùng bên trái.
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 có 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
Lưu cài đặt
Thêm một mô-đun hình ảnh khác vào 1/4 cột thứ hai (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 có 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
Lưu cài đặt
Điều này sẽ quan tâm đến phần đầu tiên. Bây giờ đối với phần dịch vụ tiếp theo, chúng ta có thể sao chép phần mà chúng ta vừa tạo cho phần dịch vụ đầu tiên. Khi phần được nhân đôi, hãy thay đổi cấu trúc cột thành bố cục cột 1/2 1/4 1/4 (ngược lại với cấu trúc trước đó).
Sau đó, kéo mô-đun văn bản có tiêu đề và mô tả về dịch vụ vào cột 1/2 ở ngoài cùng bên trái. Đảm bảo trượt hai Mô-đun Hình ảnh để lấp đầy mỗi 1/4 cột (bây giờ ở bên phải).
Vì các mô-đun hình ảnh là bản sao, chúng tôi cần tải lên 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 giống 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 có 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ột 1/4 trung tâm 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 có 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!
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.
URL 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 qua thư viện phương tiện WordPress. Hình ảnh sẽ luôn xuất hiện că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ệ co của hình ảnh gốc của bạn.
Mở trong trình xem
Tại đây, bạn có thể chọn xem hình ảnh của mình có hiển thị trong trình xem hay không khi bạn nhấp vào hình ảnh đó. Nếu tùy chọn này được bật, hình ảnh của bạn sẽ "thu phóng" đến kích thước tối đa khi bạn nhấp vào cửa sổ phương thức. Đó là một tính năng tuyệt vời cho ví.
URL liên kết
Đặt một url web hợp lệ vào 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 liệu liên kết của bạn có mở trong một cửa sổ mới hay không.
Nhãn quản trị
Điều này sẽ thay đổi nhãn mô-đun trong hàm tạo để dễ dàng nhận biết. Khi bạn sử dụng dạng xem WireFrame trong Visual Builder, các nhãn này 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 tạo kiểu mô-đun, chẳng hạn như phông chữ, màu sắc, định cỡ và khoảng cách. Đây là tab bạn sẽ sử dụng để thay đổ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 để thay đổi bất kỳ điều gì.
Lớp phủ hình ảnh
Nếu tùy chọn này được bật, màu và biểu tượng lớp phủ sẽ hiển thị khi khách truy cập di chuột qua hình ảnh.
Lớp phủ 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 trong 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 được xóa bỏ, cho phép hình ảnh đóng khung trên đầu 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ể làm nổi hình ảnh sang trái, phải hoặc giữ nó ở giữa.
Luôn căn giữa hình ảnh trên thiết bị di động
Thông thường, các hình ảnh nhỏ sẽ dễ nhìn hơn trên thiết bị di động khi chúng được căn giữa. Khi các cột bị lỗi, các hình ảnh được căn chỉnh sang trái hoặc phải trong các cột nhỏ hơn sẽ bị tách biệt khi các cột bị lỗi và đạt đến 100% chiều rộng. Bật cột này với hình ảnh buộc phải căn chỉnh với tâm của cột trên thiết bị di động mà không ảnh hưởng đến việc căn chỉnh hình ảnh trên máy tính để bàn.
Sử dụng đường viền
Bậ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.
Màu của đường viền
Tùy chọn này ảnh hưởng đến màu của đường viền của bạn. Chọn một màu tùy chỉnh từ 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 1 pixel. 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 vào trường nhập ở bên phải thanh trượt. Đơ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 từ "px" thành một cái gì đó khác như em, vh, vw, v.v.
Kiểu đường viền
Các đường viền hỗ trợ tám kiểu khác nhau: đặc, chấm, chấm, kép, rãnh, rãnh, lớp phủ và bắt đầu. Chọn kiểu mong muốn của bạn từ menu thả xuống để áp dụng cho đường viền của bạn.
Chiều rộng hình ảnh tối đa
Theo mặc định, chiều rộng hình ảnh tối đa đượ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 mẹ, 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 thêm chiều rộng tối đa của hình ảnh, bạn có thể làm như vậ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 bằng 50% chiều rộng của cột mẹ.
Buộc toàn bộ chiều rộng
Theo mặc định, hình ảnh được hiển thị ở chiều rộng gốc 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 mẹ bằng cách bật tùy chọn này.
Lề tùy chỉnh
Lề 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à phần tử tiếp theo bên trên, bên dưới hoặc bên trái và bên phải của nó. Bạn có thể thêm các giá trị lề tùy chỉnh vào bất kỳ cạnh nào trong bốn cạnh của mô-đun. Để loại bỏ lề tùy chỉnh, hãy xóa giá trị gia tăng khỏi trường nhập. 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 vào các trường đầu vào.
Tùy chọn mô-đun hình ảnh nâng cao
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 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 để 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ằng dấu cách. 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 của mình hoặc vào trang web của bạn bằng cách sử dụng các 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ỳ nội dung 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 các biểu định kiểu CSS tùy chỉnh trực tiếp vào từng phần tử. Các mục nhập CSS trong các cài đặt này đã được bao 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 ảnh tải chậm cho hình ảnh của bạn. Bạn có thể chọn để hình ảnh của mình 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 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 loại bỏ một số yếu tố nhất định khỏi trang.
Văn bản Hình ảnh Thay thế
Văn bản thay thế cung cấp tất cả thông tin cần thiết nếu hình ảnh không tải, 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 các công cụ tìm kiếm đọc và nhận dạng hình ảnh.
[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]TẢI XUỐNG CHỦ ĐỀ DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]TẢI XUỐNG TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Hướng dẫn Divi khác
- trang web 5 để sử dụng hàng Divi chủ đề
- Cách thêm văn bản vào sản phẩm Divi WooCommerce
- Cách thay đổi màu menu giữa các trang Divi
- Cách cá nhân hóa lưới của blog với Divi
- Làm thế nào để sử dụng trình biên tập Divi vai trò trên WordPress
- Cách tạo thanh trượt Divi toàn màn hình
- Cách thay đổi màu của menu giữa các trang Divi
- Các tính năng có thể bạn chưa biết về Divi
- Cách sử dụng Divi Builder trên WordPress
- Cách sử dụng mô-đun cuộn video Divi
- Cách sử dụng mô-đun Divi Builder Flip
- Cách thêm mô-đun chứng thực trên Divi Builder
- Cách sử dụng mô-đun văn bản Divi
- Cách tạo thanh trượt trên Divi
- Cách chỉnh sửa vai trò người dùng Divi
- Cách sử dụng mô-đun Truyền thông xã hội Divi
- Cách sử dụng mô-đun cửa hàng trên chủ đề WordPress Divi
- Cách sử dụng mô-đun bên Divi
- Cách sử dụng mô-đun bảng giá Divi
- Cách sử dụng mô-đun tiêu đề của ấn phẩm Divi
- Cách thêm mô-đun video của Divi
- Cách sử dụng mô-đun điều hướng bài viết
- Cách sử dụng mô-đun tìm kiếm Divi
- Cách sử dụng mô-đun ví Divi
- Cách sử dụng mô-đun người trên Divi Builder
- Cách sử dụng mô-đun ví với bộ lọc Divi
- Cách sử dụng mô-đun trượt toàn bộ chiều rộng
- Cách sử dụng Mô-đun hình ảnh Divi Builder
- Cách sử dụng mô-đun điều hướng chiều rộng đầy đủ của Divi Builder
- Cách sử dụng mô-đun thư viện hình ảnh
- Cách sử dụng Mô-đun Thẻ Đa Năng Divi Builder
- Cách sử dụng Mô-đun danh mục đầu tư chiều rộng đầy đủ Divi
- Cách sử dụng mô đun tiêu đề toàn chiều rộng Divi
- Cách sử dụng Module Divi Counter
- Cách sử dụng thanh trượt bài viết trên Divi Builder
- Cách sử dụng mô-đun Optin Email Optin
