Bạn có muốn các thành viên trong nhóm của mình được trình bày dưới dạng băng chuyền với Divi ?
Khi thiết lập trang Giới thiệu, có thể bạn cũng sẽ muốn đưa các thành viên trong nhóm của mình vào đó. Bằng cách đó, bạn cho phép khách để kết nối với những người đứng sau doanh nghiệp của bạn.
Nếu bạn đang tìm kiếm một cách để tạo hiệu ứng cho phần của các thành viên trong nhóm của bạn trên cuộn, bạn sẽ thích hướng dẫn này.
Chúng tôi sẽ tạo lại một băng chuyền thành viên nhóm tự động cuộn đẹp mắt di chuyển theo ý muốn của bạn. khách cuộn trang.
Đi thôi.
khảo sát
Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem nhanh kết quả trên các kích thước màn hình khác nhau.
Máy tính desktop
Phiên bản điện thoại
Hãy bắt đầu thiết kế với Divi
Đọc cũng: Divi: Cách hiển thị nội dung khi di chuột qua thanh phân chia phần
Thêm một phần mới
Pháp sư nội bộ
Bắt đầu bằng cách thêm một phần thông thường mới vào trang bạn đang làm việc. Mở cài đặt phần và thêm phần đệm tùy chỉnh trên các kích thước màn hình khác nhau.
- Padding (Trên cùng và Dưới cùng): 200px (Máy tính để bàn), 100px (Máy tính bảng và Điện thoại)
tầm nhìn
Để đảm bảo rằng không có thanh cuộn ngang nào xuất hiện trong thiết kế của chúng tôi, chúng tôi sẽ ẩn phần tràn phần trong tab nâng cao.
- Tràn ngang: Ẩn
- Tràn dọc: Ẩn
Thêm dòng số 1
Cấu trúc của cột
Tiếp tục bằng cách thêm một hàng mới vào phần bằng cách sử dụng cấu trúc cột sau:
Chiều rộng
Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt dòng, chuyển sang tab Thiết kế và thay đổi chiều rộng và chiều rộng tối đa trong cài đặt định cỡ.
- Chiều rộng: 90%
- Chiều rộng tối đa: 1px
khoảng cách
Chúng tôi cũng thêm phần đệm trên và dưới tùy chỉnh.
- Đệm (Trên và Dưới): 100px
Thêm mô-đun Văn bản vào cột
Thêm nội dung kích thước H2
Đã đến lúc thêm mô-đun, bắt đầu với mô-đun Văn bản đầu tiên. Nhập nội dung Kích thước H2 theo lựa chọn của bạn.
Cài đặt văn bản H2
Chuyển tab mới Thiết kế của mô-đun và sửa đổi các tham số văn bản H2 như sau:
- Phông chữ: Quicksand
- Độ đậm phông chữ: Bán đậm
- Màu văn bản: # 000000
- Kích thước văn bản: 70px (Máy tính để bàn), 50px (Máy tính bảng), 40px (Điện thoại)
Thêm mô-đun "Dải phân cách" vào cột
tầm nhìn
Sau đó, thêm một mô-đun divider. Đảm bảo rằng tùy chọn “Hiển thị dải phân cách” được bật.
- Hiển thị dải phân cách: CÓ
Dòng
Sau đó, thực hiện một số thay đổi đối với cài đặt dòng.
- Màu đường kẻ: # edf000
- Phong cách: Rắn
- Vị trí dòng: Trên cùng
Sizing
Và hoàn thành các thông số mô-đun bằng cách sửa đổi các thông số định cỡ cho phù hợp:
- Trọng lượng dải phân cách: 20px
- Chiều rộng: 11%
- Mô-đun căn chỉnh: trái
- Chiều cao: 20px
Thêm dòng 2
Cấu trúc của cột
Hàng tiếp theo! Sử dụng cấu trúc cột sau:
Sizing
Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng và thay đổi cài đặt định cỡ như sau:
- Sử dụng chiều rộng máng xối tùy chỉnh: Có
- Chiều rộng máng xối: 2
- Chiều rộng: 100%
- Chiều rộng tối đa: 100%
Khoảng cách (chỉ dành cho máy tính bảng và điện thoại)
Tiếp theo, chỉ thêm phần đệm bên trái và bên phải trên kích thước màn hình nhỏ.
- Phần đệm (Trái và Phải): 5% (Chỉ dành cho Máy tính bảng và Điện thoại)
Thông số cột (5x)
Bây giờ, trong ba bước tiếp theo của hướng dẫn này, chúng tôi sẽ thực hiện một số thay đổi đối với các cột. Áp dụng ba bước cho mỗi cột trong hàng của bạn.
Nền Gradient
Đầu tiên, thêm một nền gradient cho mỗi cột.
- Điểm dừng Gradient (25%): rgba (255,255,255,0)
- Điểm dừng Gradient (86%): rgba (0,0,0,0.84)
- Loại: Tuyến tính
- Hình nền vuông phía trên Gradient: CÓ
Hình ảnh nền
Sau đó tải lên một hình nền mà bạn chọn. Hình nền này đại diện cho từng thành viên trong nhóm, vì vậy hãy sử dụng một hình ảnh khác nhau cho mỗi cột.
- Kích thước ảnh nền: Bìa
- Hình nền Vị trí: Trung tâm
Đã thêm CSS tùy chỉnh (Chỉ dành cho máy tính bảng)
Hoàn thành cài đặt cột bằng cách thêm CSS tùy chỉnh vào phần tử chính (Để xem Máy tính bảng duy nhất) của mỗi cột.
Những dòng mã CSS này sẽ giúp chúng ta đặt các cột này dưới cột kia trên máy tính bảng, thay vì đặt hai cột cạnh nhau.
width: 100% !important;
margin: 50px 0px 50px 0px !important;
Thêm mô-đun 'Người' vào cột
Thêm nội dung
Để chia sẻ thông tin thành viên trong nhóm, chúng tôi sẽ sử dụng một mô-đun Một người.
Thêm mô-đun Người đầu tiên vào cột 1 và sử dụng nội dung de Votere choix.
Xóa ảnh
Sau đó xóa hình ảnh. Thay vào đó, chúng tôi sử dụng hình nền của cột.
Hình ảnh nền
Tiếp theo, chúng tôi sẽ thêm lớp phủ hình ảnh làm hình nền của mô-đun.
- Kích thước ảnh nền: Bìa
- Vị trí hình nền: trung tâm
Cài đặt văn bản tiêu đề
Chuyển tab mới Thiết kế và thay đổi cài đặt văn bản tiêu đề như sau:
- Mức tiêu đề tiêu đề: H3
- Phông chữ tiêu đề: Quicksand
- Độ đậm phông chữ: Bold
- Màu văn bản tiêu đề: #ffffff
- Kích thước văn bản tiêu đề: 230%
Cài đặt văn bản
Cũng thay đổi cài đặt văn bản cơ thể.
- Phông chữ nội dung: Mở Sans
- Màu văn bản: #ffffff
- Chiều cao dòng: 2,2 em
Cài đặt văn bản bài đăng của thành viên trong nhóm
Tiếp theo, thực hiện một số thay đổi đối với cài đặt văn bản của vị trí do thành viên trong nhóm nắm giữ.
- Phông chữ vị trí: Mở mà không cần
- Màu văn bản vị trí: # edf000
khoảng cách
Và hoàn thành cài đặt mô-đun bằng cách thêm các giá trị đệm tùy chỉnh vào cài đặt khoảng cách.
- Phần đệm: 70% (Trên cùng), 10% (Dưới cùng, Trái và Phải)
Sao chép mô-đun “Người” bốn lần
Khi bạn đã hoàn thành mô-đun Person, bạn có thể sao chép toàn bộ mô-đun bốn lần.
Đặt các bản sao vào các cột còn lại
Đặt các mô-đun trùng lặp vào bốn cột còn lại của hàng.
Ngoài ra hãy đảm bảo thay đổi nội dung.
Biến một hàng thành băng chuyền tự động cuộn
Thay đổi kích thước hàng # 2
Bây giờ, để biến đường này thành băng chuyền tự động cuộn, chúng ta sẽ cần mở lại cài đặt đường và thay đổi chiều rộng và chiều rộng tối đa trong cài đặt định kích thước.
- Chiều rộng: 180%
- Chiều rộng tối đa: 220% (Máy tính để bàn), 100% (Máy tính bảng và Điện thoại)
Thêm chuyển động ngang vào dòng 2
Hoàn thành cài đặt đường bằng cách thêm chuyển động ngang vào cài đặt hiệu ứng cuộn trong tab Nâng cao theo tùy chọn Hiệu ứng cuộn và bạn đã hoàn thành!
- Bật chuyển động ngang: Có
- Bắt đầu bù đắp:
- Máy tính để bàn: 2,5
- Máy tính bảng & Điện thoại: 0
- Chênh lệch giữa: 0 (đến 40%)
- Kết thúc bù đắp:
- Máy tính để bàn: -25 (đến 62%)
- Máy tính bảng & Điện thoại: 0
- Kích hoạt hiệu ứng chuyển động: Giữa phần tử
khảo sát
Bây giờ chúng ta đã đi qua tất cả các bước, hãy xem xét lần cuối cùng xem nó trông như thế nào trên các kích thước màn hình khác nhau.
Máy tính desktop
Tải xuống DIVI ngay bây giờ !!!
Chế độ xem di động
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Trong bài viết này, chúng tôi đã chỉ cho bạn cách sáng tạo với các hiệu ứng cuộn tích hợp của Divi.
Cụ thể, chúng tôi đã tạo lại một băng chuyền đẹp mắt có các thành viên trong nhóm cuộn tự động. Khi mà khách cuộn trang, một phần khác của băng chuyền sẽ xuất hiện.
Chúng tôi hy vọng hướng dẫn này sẽ truyền cảm hứng cho bạn cho các dự án tiếp theo của bạn. Divi. 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ó.
Bạn cũng có thể tham khảo tài nguyên của chúng tôi, nếu bạn cần nhiều yếu tố hơn để thực hiện các dự án tạo trang web Internet của mình.
Đừng ngần ngại cũng tham khảo 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.
...
