Bạn có muốn tạo bố cục lưới hình ảnh đáp ứng với DIVI ?
Người xây dựng Divi có các mô-đun tích hợp tuyệt vời sử dụng chế độ xem lưới,
Nhưng đôi khi bạn có thể muốn tạo bố cục lưới hình ảnh tùy chỉnh của riêng mình bằng các liên kết CTA. Điều này cho phép bạn kiểm soát nhiều hơn về thiết kế và nội dung mà bạn muốn hiển thị cho từng mục lưới mà không cần phải dùng đến plugin.
Hôm nay chúng tôi sẽ chỉ cho bạn cách tạo bố cục lưới hình ảnh phản hồi với các liên kết CTA bằng cách sử dụng các tùy chọn thiết kế tích hợp của Divi.
Hãy bắt đầu!
khảo sát
Dưới đây là tổng quan ngắn gọn về kết quả mà chúng ta sẽ nhận được ở cuối hướng dẫn này.
Tạo trang bằng Trình tạo chủ đề Divi
Từ Bảng điều khiển WordPress, hãy tạo một trang web mới bằng cách truy cập Trang >> Thêm
Sau đó, đặt tiêu đề cho trang của bạn rồi nhấp vào " Sử dụng Divi Builder ".
Sau đó bấm vào " bắt đầu xây dựng«
Tạo bố cục phần đặc biệt
Thêm một phần mới " Chuyên môn ". bố cục thanh bên trái một phần ba hai phần ba.
Chọn bố cục của các cột như được hiển thị trong ảnh chụp màn hình bên dưới:
Xóa phần mặc định để chỉ còn lại phần chuyên ngành mới.
Mở cài đặt phần và thay đổi màu nền như sau:
- Nền: # 84dbda
Dưới tab Phong cách, cập nhật các tùy chọn sau:
- Cân bằng chiều cao cột: 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
- Chiều rộng bên trong: 100%
Đọc cũng: Làm cách nào để nổi các bài đăng trên blog trong DIVI?
- Chiều rộng bên trong tối đa: 1px (máy tính để bàn), 080px (máy tính bảng và điện thoại)
- Ký quỹ nội bộ (Trên và dưới): 12vh
- Phần đệm cột 1 (Trên cùng và Dưới cùng): 0px
Với các kiểu phần tại chỗ, hãy thêm một hàng một cột vào phần đó.
Cài đặt dòng
Cập nhật các thông số dòng như sau:
- Sử dụng chiều rộng máng xối tùy chỉnh: CÓ
- Khoảng cách cột: 1
- Hài hòa chiều cao cột: CÓ
- Lề nội bộ (Trên và dưới): 0px
Tạo dòng thứ hai bằng cách sao chép dòng đầu tiên.
Sau đó, thay đổi hàng trùng lặp thành bố cục hai cột.
Thêm hình ảnh làm hình nền cột
Bây giờ tất cả các hàng và cột đã sẵn sàng, chúng tôi đã sẵn sàng thêm hình ảnh của mình vào bố cục lưới của chúng tôi.
Để đảm bảo rằng hình ảnh đáp ứng trong bố cục lưới, chúng tôi sẽ thêm từng hình ảnh của chúng tôi làm hình nền cho mỗi cột trong số bốn cột trong phần.
Vì mỗi hình nền sẽ có kích thước nền là " trải ra ", hình ảnh sẽ luôn lấp đầy toàn bộ cột khi điều chỉnh kích thước trình duyệt.
Hình nền cột hàng trên cùng
Để bắt đầu, hãy mở cài đặt cột hàng trên cùng.
Sau đó, thêm hình nền vào cột.
Hình ảnh nền cột hàng dưới cùng
Tiếp theo, mở cài đặt cho cột 1 ở hàng thứ hai (dưới cùng) và cũng thêm hình nền vào cột này.
Tiếp theo, thêm ảnh nền vào cột 2 của cùng một hàng.
Hình nền phần cột 1
Và cuối cùng, mở cài đặt phần " chuyên môn " và thêm hình nền vào cột 1.
Bổ sung mô-đun "Kêu gọi Hành động" được chồng lên các hình ảnh vào mỗi cột
Bây giờ hình nền của chúng tôi đã được thêm vào mỗi cột của bố cục lưới, chúng tôi sẽ thêm mô-đun "Kêu gọi hành động" vào mỗi cột.
Việc sử dụng lớp phủ mô-đun "Kêu gọi hành động" trên hình nền cột sẽ cho phép bạn dễ dàng thêm các kiểu lớp phủ nền tùy chỉnh và hiệu ứng di chuột vào hình nền cột. 'Hình ảnh.
Trong ví dụ này, chúng tôi sẽ chỉ sử dụng thành phần nút từ mô-đun Cuộc gọi hành động nhưng bạn có thể dễ dàng thêm vào nội dung của tiêu đề hoặc nội dung phía trên nút.
Chúng tôi sẽ thêm mô-đun “Kêu gọi hành động” đầu tiên trong cột hàng trên cùng.
Nội dung
Cập nhật cài đặt mô-đun "Kêu gọi hành động" như sau:
- loại bỏ văn bản tiêu đề
- xóa nội dung
- URL liên kết nút: #
NHẬN XÉT : Việc thêm "#" cho URL liên kết của nút bây giờ chỉ là phần bổ sung để nút hiển thị. Thêm màu nền nửa trong suốt khi di chuột sẽ cung cấp cho bạn màu lớp phủ tùy chỉnh đẹp mắt khi bạn di chuột qua mô-đun (và hình ảnh đằng sau nó).
- Màu nền: trong suốt (máy tính để bàn), rgba (255,235,77,0.5) (di chuột)
Kiểu nút
Đi tới tab Phong cách và sửa đổi cài đặt nút của mô-đun "Kêu gọi hành động" như sau:
- Sử dụng các kiểu tùy chỉnh cho Nút: CÓ
- Kích thước văn bản nút: 22px
- Màu văn bản của nút: # ffeb4d
- Nút nền: # 000000 (máy tính để bàn), # ec5f00 (di chuột)
Xem thêm: Cách tạo menu trượt và đẩy trong DIVI
- Chiều rộng đường viền nút: 0 pixel
- Bán kính đường viền nút: 100 px
- Phông chữ nút: Quicksand
- Nút làm mờ ánh sáng: Bán đậm
- Nút đệm: 0,5em trên, 0,5em dưới, 2em trái, 2em phải
Kích thước, đệm và viền
Tiếp theo, chúng ta cần đảm bảo rằng mô-đun của chúng tôi có một chiều cao nhất định để hiển thị hình nền của cột đằng sau nó.
Để làm điều này, chúng tôi sẽ thêm các lề nội bộ (Trên và Dưới) vào mô-đun.
Chúng tôi cũng sẽ thêm một đường viền tinh tế vào mô-đun để tạo cho nó một chút tách biệt với các hình ảnh khác trong bố cục lưới.
Áp dụng các cài đặt sau:
- Chiều rộng: 100%
- Ký quỹ nội bộ (Trên và dưới): 15vh
- Chiều rộng đường viền dưới: 5px
- Chiều rộng đường viền bên trái: 5px
- Màu viền: rgba (255,255,255,0.5)
NHẬN XÉT : Việc sử dụng đơn vị chiều dài vh cho phần đệm sẽ làm cho giá trị phần đệm so với chiều cao của khung nhìn trình duyệt. Vì vậy, các phần tử lưới hình ảnh của bạn sẽ phát triển và thu nhỏ chiều cao tương ứng với cửa sổ trình duyệt.
Căn giữa theo chiều dọc của nội dung của mô-đun "Kêu gọi hành động"
Để đảm bảo rằng nội dung của mô-đun “Cuộc gọi hành động” vẫn được căn giữa theo chiều dọc, chúng ta có thể thêm một đoạn CSS tùy chỉnh nhỏ bằng thuộc tính flex.
Trong tab nâng cao, thêm CSS sau vào phần tử chính:
display:flex;
flex-direction:column;
justify-content:center;
Đã thêm lớp phủ gọi hành động vào các cột khác
Bây giờ mô-đun "Kêu gọi hành động" đầu tiên đã được tùy chỉnh, hãy sao chép và dán mô-đun vào 3 cột khác của bố cục, bao gồm 2 cột ở hàng dưới cùng và cột 1 trong phần.
Để đảm bảo rằng mô-đun "Kêu gọi Hành động" bao phủ toàn bộ chiều cao của cột 1 trong phần chuyên ngành, hãy đặt chiều cao tối thiểu thành 100%.
- Chiều cao tối thiểu: 100%
Đã hết ! Hãy xem kết quả cuối cùng.
Kết quả cuối cùng
Đây là kết quả cuối cùng của bố cục lưới hình ảnh đáp ứng trên trang web với các hiệu ứng di chuột.
Và đây là cách lưới phản ứng khi điều chỉnh kích thước trình duyệt.
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Bố cục lưới hình ảnh đáp ứng tiếp tục là một khía cạnh phổ biến của nhiều trang web. Sự hấp dẫn trực quan được cung cấp bởi hình nền kết hợp với lớp phủ gọi hành động thực sự có thể làm bật lên các liên kết điều hướng quan trọng đó.
Ngoài ra, tính chất đáp ứng của bố cục lưới hình ảnh sẽ trông tuyệt vời trên tất cả các thiết bị, điều này luôn luôn cần thiết.
Chúng tôi hy vọng rằng hướng dẫn này sẽ hữu ích cho bạn trong các dự án tạo Website. Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, hãy tìm chúng tôi trong phần bình luận để thảo luận về nó.
Tuy nhiên, bạn cũng có thể tham khảo ý kiến tài nguyên của chúng tôi nếu bạn cần thêm các yếu tố để hoàn thành các dự án tạo trang web của mình.
Bạn cũng có thể làm theo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
