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

Cách tạo băng chuyền cuộn thành viên trong nhóm với Divi

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

Khi tạo trang Giới thiệu, bạn có thể cũng muốn giới thiệu các thành viên trong nhóm của mình. Khi làm như vậy, bạn cho phép khách truy cập 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 làm sống động phần thành viên trong nhóm của mình trên cuộn, hướng dẫn này có thể dành cho bạn. Chúng tôi sẽ tạo băng chuyền tự động cuộn thành viên trong nhóm di chuyển khi khách truy cập của bạn 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.

Cuộn divi thành viên nhóm

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)
Cấu hình tham số

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
Cấu hình trà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:

Chọn bố cục divi

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
Tham số dòng Divi

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
Cấu hình divi giãn cách dòng

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 các mô-đun, bắt đầu với một mô-đun văn bản đầu tiên. Nhập hàm lượng H2 mà bạn chọn.

Gặp gỡ đội

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)
Giãn cách văn bản Divi

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.

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

  • Hiển thị dấu phân cách: Có
Hiển thị dấu phân tách divi

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
Kiểu giãn cách Divi

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
Định cỡ mô-đun dòng divi

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:

Cấu hình cột Divi

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%
Cấu hình chiều rộng máng xối

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)
Cấu hình kiểu giãn cách dòng

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.

Cấu hình dòng tham số Divi

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ó
Cấu hình cột sau Divi

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
Thêm hình nền cột divi

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;
Cột mã css divi

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 bất kỳ nội dung nào bạn muốn.

Tên người divi

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.

Xóa hình ảnh divi

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ấu hình nền mô-đun người

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%
Tùy chỉnh tiêu đề mô-đun Divi

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
Tùy chỉnh cơ thể Divi

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
Vị trí Divi

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%
Khoảng cách giữa mô-đun người Divi

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 chỉnh sửa 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)
Khoảng cách sửa đổi dòng divi

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ử
Cấu hình hoạt ảnh cuộn Divi

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ộn divi thành viên nhóm

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 thành viên trong nhóm tự động cuộn, đẹp mắt. Khi khách truy cập cuộn xuống trang, một phần khác của băng chuyền sẽ xuất hiện.

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

Để 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
0 cổ phiếu
cổ phiếu
tweet
Enregistrer