Khi tạo trang Giới thiệu, có thể bạn cũng sẽ muốn giới thiệu các thành viên trong nhóm của mình ở đó. Bằng cách đó, bạn cho phép khách tương tác với những người đứng sau doanh nghiệp của bạn. Nếu bạn đang tìm cách tạo hiệu ứng cho phần của các thành viên trong nhóm khi cuộn, bạn có thể thấy hướng dẫn này hữu ích. Chúng tôi sẽ tạo một băng chuyền thành viên nhóm tự động di chuyển khi bạn khách cuộn trang.
Trình diễn
Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem kết quả trên các kích thước màn hình khác nhau.
Bắt đầu thụ thai
Thêm một phần mới
khoảng cách
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.
- Phần đệm trên: 200px (bàn), 100px (máy tính bảng và điện thoại)
- Đệm dưới: 200px (bàn), 100px (máy tính bảng và điện thoại)
trà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ột
Tiếp tục thêm một dòng mới vào phần bằng cấu trúc cột sau:
kích thước
Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt hà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: 1580px
khoảng cách
Chúng tôi cũng thêm phần đệm trên và dưới tùy chỉnh.
- Phần đệm trên: 100px
- Đệm dưới: 100px
Thêm một mô-đun văn bản vào cột
Thêm nội dung H2
Đã đến lúc thêm mô-đun, bắt đầu bằng mô-đun văn bản đầu tiên. Nhập nó nội dung H2 tùy bạn chọn.
Cài đặt văn bản H2
Chuyển đến tab thiết kế mô-đun và thay đổi cài đặt văn bản H2 như sau:
- Tiêu đề phông chữ 2: Quicksand
- Tiêu đề phông chữ 2: bán đậm
- Màu văn bản của mục 2: # 000000
- Tiêu đề 2 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ột mô-đun tách vào cột
tầm nhìn
Sau đó, thêm một mô-đun tách. Đảm bảo rằng tùy chọn “Hiển thị dấu phân cách” được bật.
- Hiển thị dấu phân cách: Có
Dòng
Sau đó thực hiện một số thay đổi cho các cài đặt dòng.
- Màu đường kẻ: # edf000
- Kiểu dáng: chắc chắn
- Vị trí đường: Hàng đầu
kích thước
Và hoàn thành các tham số mô-đun bằng cách sửa đổi các tham số kích thước phù hợp:
- Trọng lượng bộ chia: 20px
- Chiều rộng: 11%
- Sắp xếp mô-đun: bên trái
- Chiều cao: 20px
Thêm một dòng # 2
Cấu trúc cột
Đến hàng tiếp theo! Sử dụng cấu trúc cột sau:
kích thước
Không thêm nhiều mô-đun, mở các tham số dòng và sửa đổi các tham số kích thước như sau:
- Sử dụng chiều rộng máng 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
Sau đó chỉ thêm phần đệm trái và phải trên màn hình nhỏ hơn.
- Đệm trái: 5% (chỉ máy tính bảng và điện thoại)
- Đệm bên phải: 5% (chỉ 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 ta 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.
- Màu 1: rgba (255,255,255,0)
- Màu 2: rgba (0,0,0,0,84)
- Kiểu gradient: tuyến tính
- Vị trí bắt đầu: 25%
- Vị trí cuối: 86%
- Đặt gradient phía trên hình nền: Có
Hì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
- Vị trí của hình nền: Trung tâm
Yếu tố chính
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ử máy tính bảng chính 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 lên trên cột kia trên máy tính bảng, thay vì đặt hai cột cạnh nhau.
chiều rộng: 100%! quan trọng; lề: 50px 0px 50px 0px! quan trọng;
Thêm một mô-đun người vào cột
Thêm nội dung
Để chia sẻ thông tin về các thành viên trong nhóm, chúng tôi sẽ sử dụng mô-đun 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 ảnh nền của cột.
Hình nền
Sau đó, chúng tôi sẽ thêm một lớp phủ hình ảnh làm hình nền của mô-đun. Bạn có thể tìm thấy cái mà chúng tôi đang sử dụng bằng cách tải xuống thư mục ở đầu hướng dẫn này.
- Kích thước ảnh nền: Bìa
- Vị trí của hình nền: Trung tâm
Cài đặt văn bản tiêu đề
Chuyển đến tab thiết kế mô-đun và thay đổi cài đặt văn bản tiêu đề như sau:
- Cấp độ tiêu đề: H3
- Phông chữ tiêu đề: Quicksand
- Trọng lượng phông chữ: đậm
- 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ể.
- Body Font: Open Sans
- Màu văn bản cơ thể: #ffffff
- Chiều cao cơ thể: 2,2 em
Cài đặt văn bản vị trí
Sau đó thực hiện một số thay đổi cho các cài đặt văn bản vị trí.
- Vị trí phông chữ: Mở Sans
- 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 trên: 70%
- Đệm dưới: 10%
- Đệm trái: 10%
- Đệm phải: 10%
Nhân đôi mô-đun Person 4 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. Đảm bảo cũng thay đổi nội dung.
Biến Row thành băng chuyền cuộn tự động
Thay đổi kích thước của dòng # 2
Bây giờ để biến hàng này thành băng chuyền thành viên nhóm tự động cuộn, chúng ta cần mở lại cài đặt hà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% (bàn), 100% (máy tính bảng và điện thoại)
Thêm chuyển động ngang của dòng # 2
Hoàn thành cài đặt đường thẳ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 và bạn đã hoàn tất!
- Kích hoạt chuyển động ngang: Có
- Bắt đầu bù:
- Văn phòng: 2,5
- Máy tính bảng và điện thoại: 0
- Độ lệch trung bình: 0 (ở mức 40%)
- Kết thúc bù:
- Văn phòng: -25 (ở mức 62%)
- Máy tính bảng và đ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.
Văn phòng
cuối cùng suy nghĩ
Trong hướng dẫn 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 tự động cuộn đẹp mắt của thành viên nhóm. Khi mà khách cuộn trang, một phần khác của băng chuyền sẽ xuất hiện.
