Chuyển đổi mô-đun Divi Shop thành bản đồ sản phẩm động trên thiết bị di động

Chuyển đổi mô-đun Divi Shop thành bản đồ sản phẩm động trên thiết bị di động

Khi bạn tạo trang đích cho các sản phẩm cụ thể, cho dù đó là sản phẩm mới ra mắt hay chương trình giảm giá mà bạn đang chuẩn bị, khả năng cao là bạn sẽ sử dụng mô-đun Shop tại một số điểm. Mô-đun Divi's Shop cho phép bạn trích xuất động các sản phẩm từ plugin WooCommerce và tạo kiểu cho chúng bằng cách sử dụng các tùy chọn có sẵn của Divi. 

Bây giờ theo mặc định, mô-đun cửa hàng đi kèm với một số cấu trúc cột mà tất cả đều chuyển sang hai cột trên kích thước màn hình nhỏ hơn. Điều này có nghĩa là bạn càng chọn hiển thị nhiều sản phẩm, thì càng cần phải cuộn theo chiều dọc để đến phần tiếp theo của trang đích.

Trong thiết kế web hiện đại, một kỹ thuật thường được sử dụng để hạn chế các yếu tố cuộn dọc và hiển thị theo sở thích của khách truy cập là sử dụng thẻ từ. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách chuyển mô-đun cửa hàng Divi thành bản đồ sản phẩm động trên các kích thước màn hình nhỏ hơn mà không cần sử dụng plugin. 

Chúng tôi sẽ bắt đầu bằng cách chuẩn bị các yếu tố khác nhau trong phần sản phẩm của mình và sử dụng một lượng nhỏ mã CSS để kích hoạt hiệu ứng quét. Đó là một cách tuyệt vời để giới thiệu nhiều loại sản phẩm trên trang đích của bạn mà không làm choáng ngợp khách truy cập. 

Kết quả có thể

Trước khi đi sâu vào phần hướng dẫn, chúng ta hãy xem kết quả. Chúng tôi chỉ kích hoạt thẻ từ của sản phẩm trên máy tính bảng và điện thoại di động. Trên máy tính để bàn, chúng tôi giữ cấu trúc cột mà chúng tôi xác định trong mô-đun Shop.

Hoạt hình cửa hàng mô-đun sản phẩm Divi

1. Cấu hình trang sản phẩm và thương mại WooC

Trước khi vào phần Divi của hướng dẫn này, điều quan trọng là plugin WooCommerce phải được cài đặt và kích hoạt trên trang web của bạn. Nếu bạn chưa có, hãy thêm nhiều sản phẩm, tùy thuộc vào số lượng sản phẩm bạn muốn hiển thị trong mô-đun Shop của mình.

Tạo sản phẩm gỗ thương mại

2. Tạo một trang mới và tải về bố cục trang văn phòng phẩm

Tạo một trang mới

Khi các sản phẩm đã sẵn sàng, hãy thêm một trang mới vào phần phụ trợ WordPress của bạn. Đặt tiêu đề cho trang của bạn, xuất bản trang và kích hoạt Trình tạo trực quan Divi.

Tạo một trang divi
Tạo một trang divi mới

Tải xuống bố cục trang đích

Khi ở bên trong trang mới của bạn, hãy điều hướng đến bố cục đặt trước của bạn và tải xuống bố cục trang đích văn phòng phẩm. Mặc dù chúng tôi sử dụng bố cục cụ thể này, nhưng bạn có thể tự do sử dụng bất kỳ bố cục nào khác mà bạn muốn, miễn là bạn thêm hoặc định vị mô-đun cửa hàng bên trong bố cục này.

Chọn một bố cục divi

3. Sửa đổi phần cửa hàng

Xác định vị trí phần với mô-đun Cửa hàng

Nếu chúng ta cuộn xuống trang mới mà chúng ta đã tạo bằng cách sử dụng bố cục trang chủ văn phòng phẩm, chúng ta sẽ bắt gặp một phần có mô-đun cửa hàng. Chúng tôi sẽ sử dụng phần này trong suốt các bước tiếp theo của hướng dẫn này.

Tìm mô-đun cửa hàng

Cài đặt dòng

Kích thước đáp ứng

Bắt đầu bằng cách mở cài đặt hàng của hàng có chứa mô-đun Shop. Như đã đề cập trước đây, chúng tôi giữ nguyên thiết kế trên máy tính để bàn, chúng tôi sẽ chỉ kích hoạt thẻ quẹt của sản phẩm trên kích thước màn hình nhỏ hơn. 

Để tạo trải nghiệm dễ dàng, chúng tôi sẽ cho phép hàng chạm vào bên trái và bên phải màn hình của chúng tôi bằng cách thay đổi độ rộng trong cài đặt kích thước.

  • Sử dụng chiều rộng máng tùy chỉnh: 1
  • Chiều rộng: 80% (máy tính để bàn), 100% (máy tính bảng và điện thoại)
Sửa đổi thiết kế đáp ứng

tầm nhìn

Chúng tôi cũng sẽ đảm bảo rằng không có gì vượt quá vùng chứa hàng bằng cách đặt cài đặt hiển thị thành ẩn.

  • Tràn ngang: ẩn
  • Tràn dọc: ẩn
Cấu hình hiển thị Divi

Cài đặt mô-đun cửa hàng

Chọn số lượng sản phẩm và cấu trúc cột văn phòng bạn chọn

Tiếp theo, chúng ta sẽ mở cài đặt mô-đun Shop. Những thay đổi chúng tôi thực hiện đối với mã CSS của mình (chúng tôi sẽ bổ sung sau) tùy thuộc vào số lượng sản phẩm mà chúng tôi đang hiển thị. 

Chúng tôi sẽ bắt đầu bằng cách hướng dẫn bạn cách biến mô-đun cửa hàng có 8 sản phẩm thành thẻ sản phẩm. Bạn có thể chọn bất kỳ bố cục cột nào bạn muốn cho màn hình.

  • Số lượng sản phẩm: 8
  • Bố cục cột: 4 cột
Sửa đổi thiết kế cột divi

Kích thước đáp ứng

Để tăng kích thước của mô-đun cửa hàng của chúng tôi, chúng tôi sẽ thay đổi các thông số định cỡ trong tab thiết kế. Lưu ý rằng chúng tôi chỉ làm điều này cho máy tính bảng và điện thoại.

  • Chiều rộng: 100% (máy tính để bàn), 250% (máy tính bảng và điện thoại)
  • Chiều rộng tối đa: 100% (bàn), 250% (máy tính bảng và điện thoại)
Cấu hình thiết kế đáp ứng

Lớp CSS

Chúng tôi cũng sẽ thêm một lớp CSS vào mô-đun cửa hàng của chúng tôi. Sau đó, khi chúng ta thêm mã CSS, chúng ta có thể chuyển đổi mô-đun Shop vốn chỉ mang lớp CSS này. Nói cách khác, nếu bạn muốn một mô-đun Shop khác xuất hiện ở trạng thái bình thường, việc loại bỏ lớp CSS này sẽ cho phép bạn làm như vậy.

  • Lớp CSS: thẻ quẹt sản phẩm
Thay đổi thuộc tính module css divi shop

Phản ứng tràn

Chúng tôi sẽ bổ sung cài đặt dòng bằng cách thay đổi cài đặt hiển thị trên các kích thước màn hình khác nhau. Như bạn có thể thấy trong phần cài đặt, chúng tôi chỉ muốn hiệu ứng cuộn xảy ra trên các kích thước màn hình nhỏ hơn.

  • Tràn ngang: ẩn (bàn), cuộn (máy tính bảng và điện thoại)
  • Tràn dọc: ẩn
Cấu hình tràn

Thêm một mô-đun mã trong mô-đun Cửa hàng

Khi bạn đã sửa đổi mô-đun Cửa hàng, bạn có thể thêm mô-đun mã ngay bên dưới.

Thêm mô-đun mã dưới mô-đun cửa hàng divi

Thêm mã CSS vào mô-đun

Mã CSS sau đây sẽ tự động chuyển đổi mô-đun 8 cửa hàng của chúng tôi thành thẻ từ phản ứng:

<style> @media all and (max-width: 980px) { .product-swipe-cards ul.products {display: grid !important;grid-template-columns: repeat(8, 8.8%) !important;grid-column-gap: 0.7%;} .product-swipe-cards .woocommerce ul.products::before {content: none;display: block;} .product-swipe-cards.et_pb_shop ul.products li.product {width: 100% !important;} .product-swipe-cards .woocommerce {width: 255% !important;margin-left: 5%;} .product-swipe-cards::-webkit-scrollbar {display: none;} .product-swipe-cards {-ms-overflow-style: none;} } </style>

Thêm mã css divi

Khớp các tài khoản sản phẩm khác nhau

Bây giờ, nếu bạn đang muốn thêm ít (hoặc nhiều) sản phẩm hơn vào mô-đun cửa hàng của mình, thì mã sẽ thay đổi một chút ở hai vị trí. Cả hai vị trí này phải được thay đổi thủ công để phù hợp với kết quả mong muốn. Ví dụ: hãy thay đổi số lượng sản phẩm trong mô-đun cửa hàng của chúng tôi thành '4'.

  • Số lượng sản phẩm: 4
Khớp tài khoản sản phẩm khác nhau

Khi quay lại mã, chúng ta cần thực hiện hai thay đổi. Đầu tiên, chúng ta sẽ cần sửa đổi các cột của mẫu lưới. Thay vì 8, chúng tôi sử dụng 4 (cùng số với số sản phẩm của chúng tôi). Chúng tôi cũng đang tăng tỷ lệ phần trăm kích thước mà các sản phẩm này chiếm trong bảng sản phẩm của chúng tôi (càng nhiều sản phẩm, càng ít không gian).

lưới-mẫu-cột: lặp lại (4, 14%)! quan trọng;

Sau đó, chúng tôi cũng sẽ thay đổi chiều rộng của thùng chứa các sản phẩm được đặt. Đối với 4 sản phẩm, con số này bằng 150%. Các giá trị này không cố định, chúng có được bằng cách chơi và tìm sự hài hòa giữa các cột của mô hình lưới và chiều rộng của vùng chứa. 

Để tìm số dư phù hợp, hãy chuyển sang chế độ xem di động bên trong Visual Builder và cẩn thận điều chỉnh các giá trị trong khi xem kết quả của những thay đổi đó.

width: 150%!important;

Thêm mã css divi bổ sung

Thêm một snap vào cuộn

Nếu bạn muốn nâng cao trải nghiệm người dùng lên một bước nữa trong thiết kế thẻ quẹt của mình, bạn cũng có thể thêm một thao tác nhanh khi cuộn. Chụp cuộn cho phép khách truy cập của bạn cuộn bằng cách nhìn chằm chằm vào phần bắt đầu của sản phẩm mới.

 Điều này có nghĩa là quá trình quét của họ không cần phải chính xác, nút cuộn sẽ tiếp quản tại một số điểm và hiển thị điều chỉnh vị trí của nó bên trong cơ chế cuộn bên. 

Để bật tính năng chụp cuộn trên thẻ quẹt của sản phẩm, hãy thêm một dòng mã CSS cho từng sản phẩm riêng lẻ trong mã CSS (xem màn hình in bên dưới).

cuộn-snap-align: bắt đầu

Chúng tôi cũng sẽ kích hoạt tính năng chụp cuộn trên mô-đun cửa hàng của mình bằng cách thêm dòng mã CSS sau:

cuộn-snap-type: x bắt buộc

Tùy chỉnh mã css

Sử dụng lại mô-đun hội thảo để hiển thị các danh mục khác

Nhân bản toàn bộ một dòng

Khi bạn đã hoàn thành bộ thẻ từ đầu tiên, bạn có thể sao chép toàn bộ dòng một lần.

Sử dụng lại mô-đun xưởng divi

Xóa mô-đun mã trong dòng trùng lặp

Miễn là mô-đun cửa hàng của bạn chứa cùng lớp CSS với lớp trước đó, một mô-đun mã sẽ hoạt động. Hãy tiếp tục và xóa mô-đun mã trong dòng trùng lặp của bạn.

Nhân bản mô-đun mã divi

Sao chép dòng trùng lặp nhiều như bạn muốn

Và sao chép dòng trùng lặp bây giờ nhiều lần nếu cần, tùy thuộc vào số lượng bộ thẻ quẹt bạn muốn hiển thị trên trang đích của mình!

Sao chép mô-đun càng nhiều càng tốt
Mô-đun divi trùng lặp

4. Lưu thay đổi trang và xem kết quả trên thiết bị di động

Đảm bảo rằng sau khi hoàn tất việc thêm các thẻ quẹt của sản phẩm, bạn sẽ lưu trang của mình trước khi thoát khỏi Visual Builder và bạn đã hoàn tất!

Bản xem trước demo trên thiết bị di động

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.

Hoạt hình cửa hàng mô-đun sản phẩm Divi

cuối cùng suy nghĩ

Trong bài viết này, chúng tôi đã hướng dẫn bạn cách biến module Divi Shop tích hợp thành thẻ từ của sản phẩm trên kích thước màn hình nhỏ hơn. Trên máy tính để bàn, chúng tôi đã giữ cấu trúc cột ban đầu được gán cho mô-đun Shop. 

Sử dụng bản đồ vuốt sản phẩm cho phép bạn thêm vô số sản phẩm vào cơ chế vuốt ngang mà không làm choáng ngợp khách truy cập cuộn dọc của bạn.

Đây là xu hướng thường được sử dụng trong thiết kế trang web hiện đại vì nó tập trung vào hành vi của người dùng và giúp bạn dễ dàng truy cập vào nhiều loại yếu tố trên màn hình nhỏ hơn.

 Bạn có thể sử dụng các tờ sản phẩm này trên bất kỳ trang nào, nhưng nó đặc biệt hữu ích cho bất kỳ trang đích sản phẩm nào bạn tạo. Bạn cũng có thể tải xuống tệp JSON cho bố cục miễn phí! 

Nếu bạn có bất kỳ câu hỏi hoặc góp ý nào, đừng ngại để lại bình luận trong phần bình luận bên dưới.

Cách thêm bộ đếm hoạt hình để cuộn trên Divi

Cách thêm bộ đếm hoạt hình để cuộn trên Divi

Bộ đếm số hoạt hình phổ biến trên web như một cách hiển thị dữ liệu số để làm nổi bật giá trị của dịch vụ, nghiên cứu điển hình, v.v. Divi có một mô-đun bộ đếm số chuyên dụng có thể được sử dụng để dễ dàng tạo bộ đếm số động.

Tuy nhiên, trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo bộ đếm kỹ thuật số hoạt động khi cuộn bằng Divi. Sử dụng các tùy chọn vị trí và hiệu ứng cuộn của Divi, chúng tôi sẽ thiết kế một bố cục đơn giản để hiển thị ngày với các số cuộn.

Phần 1: Tạo phần tiêu đề

Trong phần đầu tiên này, chúng ta sẽ tạo một tiêu đề đơn giản cho bố cục.

Đầu tiên, thêm một hàng một cột vào phần.

Đăng ký mô-đun phần divi

Sau đó thêm một mô-đun văn bản mới vào dòng.

Cập nhật nội dung của mô-đun văn bản bằng cách sau:

Lưu ngày
Lưu ngày 1

Sau đó, cập nhật kiểu văn bản tiêu đề như sau:

  • Phông chữ 2: Prata
  • Mục 2 Kích thước văn bản: 130px (máy tính để bàn), 70px (máy tính bảng), 40px (điện thoại)
Sửa đổi tiêu đề Divi

Phần 2: Tạo quầy với hoạt hình cuộn

Trong phần tiếp theo này, chúng ta sẽ tạo ba bộ đếm sẽ làm hoạt hình các số cuộn cho đến khi chúng dừng hiển thị ngày (tháng, ngày và năm). Mỗi bộ đếm sẽ được xây dựng bằng cách sử dụng tổng cộng 5 mô-đun văn bản và một mô-đun phân tách. Mô-đun văn bản đầu tiên sẽ đóng vai trò là nhãn của bộ đếm (tức là tháng, ngày, năm). Bốn mô-đun văn bản tiếp theo, mỗi mô-đun sẽ chứa một số khác nhau (đang tiến hành) sẽ được làm động khi cuộn bằng cách sử dụng các hiệu số chuyển động dọc trong Divi. Mô-đun phân tách thấp hơn sẽ giúp ẩn các số bị tràn.

Đây là cách.

Thêm một dòng thứ hai

Bên dưới hàng hiện có, thêm một hàng khác vào cột.

Cài đặt dòng

Trước khi thêm một mô-đun, hãy cập nhật các thông số hàng như sau:

  • Chiều rộng máng xối: 1
  • Đệm: cao 0px, thấp 0px
Cấu hình đường viền Divi

Thông số cột

Sau đó mở cài đặt cột và cập nhật điền như sau:

  • Đệm (bàn): thấp 100px
  • Đệm (máy tính bảng và điện thoại): 0px thấp
Cấu hình giãn cách cột Divi

Thêm một mô-đun văn bản

Sau đó thêm một mô-đun văn bản vào cột.

Thêm một mô-đun văn bản divi

Nội dung / nhãn

Đối với nội dung của mô-đun văn bản, thêm từ "tháng".

Chỉ định divi tháng

Cài đặt thiết kế văn bản

Sau khi thêm nội dung, cập nhật cài đặt thiết kế như sau:

  • Màu nền: #ffffff
  • Phông chữ: Nói chuyện
  • Kích thước văn bản: 40px
  • Chiều cao của dòng văn bản: 2em
  • Chiều rộng: 100%
  • Đệm: 20 pixel ở trên cùng, 20 pixel ở dưới cùng, 20 pixel ở bên trái, 20 pixel ở bên phải
  • Chiều rộng đường viền dưới cùng: 5px
  • Màu của viền dưới: #eeeeee
Chức vụ

Sau đó, trong tab nâng cao, cập nhật các tùy chọn vị trí như sau:

  • Chức vụ: Tương đối
  • Chỉ số Z 1
Mô-đun wordpress Prata

Thêm một mô-đun văn bản cho vấn đề đầu tiên

Khi mô-đun văn bản đầu tiên đã có, chúng ta có thể bắt đầu thêm các số sẽ di chuyển trên cuộn. Để thêm số đầu tiên, hãy thêm một mô-đun văn bản mới trong mô-đun văn bản "Tháng" hiện có.

Thêm mô-đun văn bản người kể chuyện

Thêm số / nội dung

Sau đó cập nhật nhãn mô-đun văn bản để đọc Nhật ký num1 để tham khảo dễ dàng hơn. Sau đó cập nhật nội dung với số Số 01 XNUMX.

Thêm mô-đun số divi

Cài đặt thiết kế cho số

Trong tab thiết kế, cập nhật các thông tin sau:

  • Phông chữ: Prata
  • Màu văn bản văn bản: # 8ab2d3
  • Kích thước văn bản văn bản: 70px
  • Khoảng cách chữ văn bản: 4px
  • Chiều cao dòng văn bản: 1.5em
  • Đệm: trái 20px
Cấu hình màu Divi

GHI CHÚ: Các số có kích thước văn bản là 70px và chiều cao dòng là 1.5em, có nghĩa là tổng chiều cao của mô-đun văn bản sẽ gần bằng 100px. Điều này rất quan trọng để ghi nhớ bất cứ khi nào chúng ta bắt đầu thêm các độ lệch chuyển động dọc. Ví dụ, việc thêm phần bù dọc của 1 100 vào mô-đun văn bản sẽ di chuyển mô-đun văn bản chính xác XNUMXpx, chiều cao của mô-đun văn bản.

Hiệu ứng cuộn cho số đầu tiên

Thêm các hiệu ứng cuộn sau vào mô-đun văn bản.

Trong Tab Chuyển động dọc, cập nhật các thông tin sau:

  • Kích hoạt chuyển động dọc: CÓ
  • Bắt đầu bù: 1 (ở mức 10%)
  • Độ lệch trung bình: 0 (ở mức 20%)
  • Kết thúc bù: -1 (ở mức 30%)

Trên tab Làm mờ dần và Làm mờ dần, hãy cập nhật thông tin sau:

  • Kích hoạt mờ dần trong và ngoài: CÓ
  • Độ mờ ban đầu: 0% (ở mức 10%)
  • Độ mờ trung bình: 100% (ở mức 20%)
  • Độ mờ kết thúc: 0% (đến 30%)

Đảm bảo đặt trình kích hoạt cho hiệu ứng chuyển động ở đầu clip:

  • Kích hoạt hiệu ứng chuyển động: Phần tử đầu
Cấu hình của văn bản mô-đun hoạt hình divi

Tạo mô-đun văn bản cho số thứ hai

Nhân đôi số đầu tiên

Khi số đầu tiên được tạo, hãy nhân bản nó để tạo mô-đun văn bản số thứ hai. Sau đó, cập nhật nhãn trong chế độ xem lớp để tham khảo tốt hơn.

Nhân bản mô-đun văn bản divi 1

Cập nhật số / nội dung

Mở các tham số của mô-đun văn bản kỹ thuật số thứ hai và cập nhật nội dung với số "02".

Lưu số 2 divi

Cập nhật vị trí

Sau đó cập nhật các tùy chọn vị trí như sau:

  • Vị trí: Tuyệt đối
  • Độ lệch dọc: 126px
Sửa đổi vị trí của mô-đun văn bản divi

Cập nhật hiệu ứng cuộn

Sau đó cập nhật các hiệu ứng cuộn như sau:

Trên tab Chuyển động theo chiều dọc, cập nhật thông tin sau:

  • Bắt đầu bù: 1 (ở mức 20%)
  • Độ lệch trung bình: 0 (ở mức 30%)
  • Kết thúc bù: -1 (ở mức 40%)

Trên tab Làm mờ dần và Làm mờ dần, hãy cập nhật thông tin sau:

  • Độ mờ ban đầu: 0% (ở mức 20%)
  • Độ mờ trung bình: 100% (ở mức 30%)
  • Độ mờ kết thúc: 0% (đến 40%)
Hiệu ứng cuộn hoạt hình divi

Tạo một mô-đun văn bản cho vấn đề thứ ba

Nhân đôi số thứ hai

Để tạo mô-đun văn bản cho số thứ ba, sao chép mô-đun văn bản cho số thứ hai.

Bản sao mô-đun văn bản số 3

Cập nhật số / nội dung

Cập nhật nội dung với số "03".

Sửa đổi mô-đun văn bản divi

Cập nhật hiệu ứng cuộn

Sau đó cập nhật các hiệu ứng cuộn:

Trên tab Chuyển động theo chiều dọc, cập nhật thông tin sau:

  • Bắt đầu bù: 1 (ở mức 30%)
  • Độ lệch trung bình: 0 (ở mức 40%)
  • Kết thúc bù: -1 (ở mức 50%)

Trên tab Làm mờ dần và Làm mờ dần, hãy cập nhật thông tin sau:

  • Độ mờ ban đầu: 0% (ở mức 30%)
  • Độ mờ trung bình: 100% (ở mức 40%)
  • Độ mờ kết thúc: 0% (đến 50%)
Chỉnh sửa hoạt ảnh mô-đun văn bản

Tạo một mô-đun văn bản cho vấn đề thứ tư

Vấn đề trùng lặp thứ ba

Để tạo số thứ tư cho bộ đếm cuộn, nhân đôi mô-đun văn bản cho số thứ ba.

Bản sao mô-đun văn bản divi số 4

Cập nhật số / nội dung

Cập nhật nội dung với số "04".

Định cấu hình giá trị mô-đun văn bản divi

Cập nhật hiệu ứng cuộn

Sau đó cập nhật các hiệu ứng cuộn:

Trên tab Chuyển động theo chiều dọc, cập nhật thông tin sau:

  • Bắt đầu bù: 1 (ở mức 40%)
  • Độ lệch trung bình: 0 (ở mức 50%)
  • Kết thúc bù: 0 (ở mức 60%)

Trên tab Làm mờ dần và Làm mờ dần, hãy cập nhật thông tin sau:

  • Độ mờ ban đầu: 0% (ở mức 40%)
  • Độ mờ trung bình: 100% (ở mức 50%)
  • Độ mờ kết thúc: 100% (đến 60%)
Mô-đun cấu hình hoạt ảnh 4 divi

Thêm một dấu phân cách thấp hơn

Trong mô-đun văn bản cuối cùng, hãy thêm một mô-đun phân tách mới. Điều này sẽ được sử dụng để ẩn phần tràn dưới cùng của văn bản cuộn trong chế độ xem.

Thêm mô-đun phân tách divi

Sau đó chọn KHÔNG để hiển thị dải phân cách.

Không hiển thị dấu phân cách divi

Cài đặt kiểu và vị trí

Cập nhật thiết kế dải phân cách như sau:

  • Màu nền: #ffffff
  • Chiều rộng: 100%
  • Chiều cao: 100px
  • Độ rộng đường viền trên cùng: 5px

Trên tab Nâng cao, cập nhật những điều sau:

  • Vô hiệu hóa trên: điện thoại và máy tính bảng
  • Vị trí: Tuyệt đối
  • Vị trí: phía dưới bên trái

QUAN TRỌNG: Khoảng trống mà dấu phân tách sẽ chiếm trước đó đã được tạo trước đó bằng cách thêm phần lấp đầy dưới cùng 100 pixel vào cột. Nếu bạn không thêm phần đệm này, dấu phân cách sẽ chồng lên các chữ số.

Tạo các quầy và cột bổ sung

Nhân đôi cột 1 và cập nhật nội dung

Để tạo bộ đếm mới, sao chép cột 1. Điều này sẽ tạo một cột thứ hai với tất cả các yếu tố được đặt tự động.

Sau đó, tất cả những gì bạn cần làm là cập nhật nội dung của tất cả các mô-đun văn bản với các văn bản và số mới.

Sao chép toàn bộ cột divi

Nhân đôi cột 2 và cập nhật nội dung

Sau khi nội dung của tất cả các mô-đun văn bản được cập nhật trong cột 2, hãy sao chép cột 2 để tạo bộ đếm thứ ba trong năm. Sau đó cập nhật nội dung của từng mô-đun văn bản khi cần thiết.

Kết quả cuối cùng

Đây là kết quả cuối cùng.

Tài nguyên khác

cuối cùng suy nghĩ

Bố cục đơn giản này với các bộ đếm số cuộn hoạt hình sẽ hữu ích để hiển thị dữ liệu kỹ thuật số theo cách mới và độc đáo. Hãy bỏ qua khái niệm ngày tháng và sử dụng bộ đếm cho bất cứ điều gì bạn có thể mơ ước!

Cách tạo ngăn kéo hoạt hình trên Divi

Cách tạo ngăn kéo hoạt hình trên Divi

Ngăn kéo chân trang là phần bổ sung hữu ích cho bất kỳ trang web nào vì chúng lưu trữ nội dung bổ sung mà người dùng có thể dễ dàng truy cập. Ngăn kéo chân trang là nơi chứa nội dung web (như phần Divi) có thể được mở và đóng bằng cách nhấp vào một nút hoặc di chuột qua nó. Nó giống như có một ít dự trữ cho nội dung cao cấp.

Trong hướng dẫn này, chúng ta sẽ thiết kế một ngăn kéo chân trang nổi trong Divi. Chúng tôi sẽ thêm ngăn chân trang vào khu vực chân trang tổng thể của mẫu trang web để ngăn chân trang có thể truy cập trên toàn trang với nội dung chân trang bình thường.

Với quy trình chúng tôi sẽ sử dụng, bất kỳ phần Divi nào (và nội dung của nó) đều có thể được chuyển đổi thành ngăn kéo chân trang trong vài phút.

Cách thêm mẫu ngăn kéo chân trang vào trang web Divi của bạn

Việc thêm mẫu này sẽ thay thế mẫu trang web mặc định (nếu bạn có) trên trang Divi của bạn. Chúng tôi khuyên bạn nên thêm nó vào một trang web thử nghiệm để bạn không làm rối tung bất cứ thứ gì trên một trang đang hoạt động.

Để nhập mô hình ngăn kéo chân cố định vào trang web của riêng bạn, hãy giải nén tệp zip tải xuống để truy cập tệp JSON.

Sau đó, chuyển đến bảng điều khiển WordPress và đi tới Divi> Theme Builder.

Sau đó nhấp vào biểu tượng tính di động ở trên cùng bên phải của trang.

Trong cửa sổ tính di động, hãy chọn tệp JSON bạn vừa giải nén và chọn tùy chọn 'Tải xuống bản sao lưu trước khi nhập', đề phòng trường hợp trước đó bạn đã có thứ gì đó trong mẫu trang web mặc định mà bạn chưa có. không muốn thay thế.

Sau đó bấm vào nút Nhập.

Nhập mô hình divi

Cuối cùng, lưu các thay đổi vào trình tạo chủ đề và hiển thị trang trực tiếp để xem thanh chân trang cố định.

Lưu các thay đổi bố cục divi

Bây giờ đến phần hướng dẫn, được không?

Phần 1: Thêm chân trang toàn cục

Trình tạo chủ đề Divi cho phép bạn thay thế chân trang mặc định bằng chân trang mới bằng cách cập nhật mẫu trang web mặc định.

Để tạo chân trang toàn cục, hãy chuyển đến bảng điều khiển WordPress và đi tới Divi> Trình tạo chủ đề. Sau đó nhấp vào không gian “Thêm chân trang chung” bên trong Mẫu trang web mặc định.

Lựa chọn trình chỉnh sửa Divi

Sau đó, chọn tùy chọn "Build Global Footer" từ danh sách thả xuống.

Thêm chân trang mô hình divi

Thêm bố cục được xác định trước vào bố cục chân trang toàn cầu

Thao tác này sẽ triển khai Trình chỉnh sửa bố cục mô hình, nơi bạn sẽ ngay lập tức được nhắc với ba lựa chọn về cách bạn muốn bắt đầu xây dựng. Chọn tùy chọn "Chọn một bố cục xác định trước".

Chọn divi mô hình cấu trúc sẵn

Trong cửa sổ bật lên Tải từ Thư viện, hãy tìm bố cục trang đích văn phòng phẩm. Sau đó nhấp vào "Sử dụng bố cục này".

Sử dụng mô hình divi

Xóa nội dung không mong muốn khỏi bố cục

Khi bố cục được tải trong trình chỉnh sửa, hãy mở hộp bật lên Lớp bằng cách nhấp vào biểu tượng lớp trong menu cài đặt. Sau đó, xóa tất cả các phần của bố cục ngoại trừ hai phần cuối cùng.

Xóa phần không cần thiết

Di chuyển và dán nhãn hai phần

Sau khi các phần được xóa, bạn sẽ có hai phần, một phần có tiêu đề "Chân trang" và phần còn lại có tiêu đề "Cách hoạt động". Di chuyển phần "Chân trang" lên đầu bố cục.

Chân trang Divi

Thay đổi từ ngữ trong phần dưới để đọc “Ngăn kéo chân trang”. Đây sẽ là phần chúng tôi sẽ sử dụng làm nội dung của ngăn kéo chân trang của chúng tôi.

Sửa đổi nhãn chân trang divi

Phần 2: Tạo ngăn kéo chân cố định

Bây giờ chúng ta đã chỉ định một trong các phần làm footer và phần kia làm ngăn footer, chúng ta đã sẵn sàng để bắt đầu xây dựng ngăn footer cố định của mình. Hãy bắt đầu bằng cách tạo biểu tượng blurb mà chúng ta sẽ sử dụng để chuyển đổi ngăn chân trang.

Tạo nút ngăn kéo chân trang

Thêm một dòng mới

Trong phần chân trang dưới cùng, thêm một hàng mới vào một cột.

ngăn kéo chân cố định

Gắn nhãn cho hàng mới là "Nút ngăn kéo" vì đây là hàng sẽ chứa nút được sử dụng để chuyển đổi mở và đóng ngăn kéo. Sau đó di chuyển dòng lên đầu phần.

Lựa chọn bố cục divi

Hàng đệm

Trước khi thêm một mô-đun, hãy mở cài đặt hàng và cập nhật phần đệm như sau:

  • Đệm: cao 0px, thấp 0px
Khoảng cách divi confiuration

Phần đệm

Sau đó mở cài đặt trong phần "Ngăn kéo chân trang" và cập nhật phần đệm như sau:

Cấu hình giãn cách phần Divi

Để tạo nút có thể nhấp để chuyển đổi ngăn chân trang, chúng tôi sẽ sử dụng mô-đun làm nổi bật với một biểu tượng. Và, chúng tôi sẽ tạo cho nó một hình giọt nước độc đáo bằng cách kết hợp hình vuông của thùng chứa Blurb pod với biểu tượng hình tròn.

Đây là cách.

Thêm một mô-đun Blurb

Thêm một mô-đun văn bản trình bày vào dòng "Nút ngăn kéo" ở đầu phần.

Ngăn kéo footer divi
Nội dung / biểu tượng Blurb

Tiếp theo, xóa nội dung tiêu đề và nội dung mặc định và chọn biểu tượng mũi tên trỏ đến góc trên cùng bên trái (xem ảnh chụp màn hình). Chúng tôi đang sử dụng biểu tượng xoay một phần vì chúng tôi sẽ xoay nó sau.

Chọn biểu tượng ngăn kéo chân trang divi
Thiết kế Blurb

Sau đó đưa ra văn bản trình bày như sau:

  • Màu nền: # 081540
Sửa đổi nền divi

Sau đó cập nhật các thông số thiết kế như sau:

  • Màu biểu tượng: #eeeeee
  • Biểu tượng hình tròn: CÓ
  • Màu vòng tròn: # 081540
  • Sử dụng kích thước phông chữ biểu tượng: CÓ
  • Kích thước phông chữ biểu tượng: 17 pixel
Tùy chỉnh nút blurb divi
Kích thước văn bản trình bày

Bây giờ cung cấp cho mô-đun chiều cao và chiều rộng như sau:

  • Chiều rộng: 30px
  • Chiều cao: 30px

Điều này sẽ làm cho biểu tượng hình tròn tràn vào vùng chứa văn bản để tạo ra hình giọt nước.

Chỉnh sửa thiết kế nút divi
Vị trí Blurb

Sau đó cung cấp cho văn bản trình bày một vị trí tuyệt đối ở trung tâm trên cùng của phần.

  • Vị trí: Tuyệt đối
  • Địa điểm: Trung tâm hàng đầu
Sửa đổi vị trí nút divi
Cài đặt chuyển đổi Blurb

Bây giờ chúng ta có thể sử dụng các tùy chọn biến đổi để xoay blurb / icon lên và đặt nó ngay trên vùng chứa phần. Bây giờ khi chúng ta ẩn phần đó trong cửa sổ trình duyệt, biểu tượng sẽ vẫn hiển thị / có thể nhấp được.

Cập nhật các mục sau:

  • Chuyển đổi Dịch trục X: -50%
  • Chuyển đổi phép tịnh tiến trục Y: -250%
  • Biến đổi trục quay Z: -45 độ

Sau đó, xóa hoạt ảnh biểu tượng mặc định:

  • Hình ảnh / Biểu tượng Hoạt hình: Không có Hoạt hình
Nút quay lại divi

Chúng tôi sẽ sử dụng JQuery để chuyển đổi ngăn kéo, vì vậy chúng tôi cần nhắm mục tiêu văn bản / biểu tượng như một phần tử có thể nhấp với một lớp CSS mà chúng tôi sẽ sử dụng sau này trong mã. Thêm lớp CSS sau:

  • Lớp CSS: ngăn kéo mục tiêu
Xác định một bộ chọn divi

Cài đặt phần ngăn kéo chân trang

Bây giờ chúng ta sẽ ẩn phần "Ngăn kéo chân trang" bằng cách sử dụng tùy chọn chuyển đổi dịch. Mở cài đặt phần và cập nhật phần sau:

  • Chuyển đổi Dịch trục Y: 100%

Cái hay của việc sử dụng phép biến đổi ở đây là các giá trị phần trăm dựa trên kích thước thực của mục. Do đó, 100% trên trục Y sẽ tương đối trực tiếp với chiều cao của phần (cho biết nó là gì tại bất kỳ thời điểm nào). Nói cách khác, phần tử sẽ được di chuyển xuống khoảng cách chính xác như chiều cao của chính nó.

Biến đổi phần divi

Để đưa "Ngăn kéo chân trang" trở lại chế độ xem, chúng tôi sẽ cần đảo ngược bản dịch chuyển đổi mà chúng tôi vừa thêm vào phần. Để làm điều này, chúng tôi sẽ cần nhắm mục tiêu phần tử có lớp CSS và vô hiệu hóa chuyển đổi bản dịch bằng cách nhấp vào biểu tượng (đưa toàn bộ phần trở lại vị trí ban đầu).

Thêm một lớp CSS vào phần ngăn kéo chân trang

Trong tab nâng cao, thêm lớp CSS sau:

  • Lớp CSS: has-Transform
Thêm lớp có divi chuyển đổi

Phần ngăn kéo chân cố định vị trí

Bước cuối cùng, chúng ta cần cố định ngăn footer để nó (có biểu tượng) nổi ở cuối cửa sổ trình duyệt.

Cập nhật vị trí của phần "Ngăn kéo chân trang" như sau:

  • Vị trí: cố định
  • Vị trí: phía dưới bên trái
  • Chỉ số Z: 13
Sửa đổi vị trí trên góc divi

Tắt nội dung di động

Bởi vì bạn sẽ có một số lượng hạn chế nội dung ngăn kéo chân trang phù hợp với cả máy tính bảng và điện thoại (do chiều cao màn hình hạn chế), bạn sẽ cần phải tắt / ẩn các mục không cần thiết khỏi màn hình. Trong ví dụ này, chúng ta sẽ ẩn hàng giữa của bố cục phần.

Ẩn phần trên thiết bị di động

Mở cài đặt từ hàng thứ hai đến hàng cuối cùng trong phần “Ngăn kéo chân trang”. Trong tab nâng cao, hãy cập nhật tùy chọn hiển thị để tắt dòng trên điện thoại và máy tính bảng.

Kiểm soát phần divi khả năng hiển thị

Thêm mã tùy chỉnh

Để thêm chức năng nhấp và chuyển đổi trong ngăn chân trang, chúng ta cần thêm CSS và JQuery tùy chỉnh vào trang. Để thực hiện việc này, hãy tạo một mô-đun mã mới trong mô-đun Blurb được sử dụng cho nút.

Thêm mã mô-đun

Sau đó dán đoạn mã sau vào vùng mã:

.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;}  .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation');      $('.has-transform').toggleClass('toggle-drawer-animation');   });    });})( jQuery );   
Thêm mô-đun mã divi

Lưu thay đổi

Hãy nhớ lưu bố cục trước khi thoát khỏi trình chỉnh sửa.

Lưu sửa đổi divi

Cũng lưu các thay đổi trong trình tạo chủ đề.

Lưu thay đổi

Kết quả cuối cùng

Bây giờ chúng ta có thể vào bất kỳ trang nào trên trang web của bạn để xem kết quả cuối cùng.

cuối cùng suy nghĩ

Hy vọng ngăn kéo chân trang nổi giúp bạn quảng cáo nội dung một cách thú vị và dễ tiếp cận. Giống như bất kỳ ngăn kéo nào, bạn có thể lấp đầy nó với bất cứ thứ gì bạn có thể nghĩ ra.

Tài nguyên khác

Dưới đây là danh sách các hướng dẫn có thể giúp bạn hoàn thành nhiều hơn với các tính năng bên trong của Divi.

Dịch từ: Elegant Themes

Tạo một phần liên lạc nổi với các hiệu ứng cuộn trên Divi

Tạo một phần liên lạc nổi với các hiệu ứng cuộn trên Divi

Mọi trang web đều cần phần liên hệ, nhưng điều đó không có nghĩa là bạn phải thiết kế chuẩn. Với các hiệu ứng cuộn của Divi, bạn có thể tạo một phần liên hệ nổi sẽ nổi bật. Cải thiện sự tương tác với người dùng của bạn bằng bố cục phần liên hệ cuộn dọc sẽ mời khách truy cập tương tác với biểu mẫu liên hệ của bạn. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo phần liên hệ nổi có chiều rộng đầy đủ mà bạn có thể thêm vào bất kỳ trang nào. Bạn thậm chí có thể thêm nó vào đầu chân trang trên toàn trang web với Trình tạo chủ đề Divi.

Dưới đây, bạn sẽ tìm thấy một tệp có thể tải xuống miễn phí với bố cục JSON để tải xuống trong thư viện Divi của riêng bạn. Chúng tôi cũng đã bao gồm một mẫu PSD để giúp bạn tạo lại nền bản đồ, cũng như SVG ghim bản đồ để bạn có thể tùy chỉnh nó với màu sắc của riêng mình.

Tạo cấu trúc phần tử

Trong thiết kế này, chúng tôi sẽ sử dụng hình nền là hình ảnh đại diện trên Bản đồ Google của vị trí bạn muốn đánh dấu. Bạn có thể làm điều này với Photoshop hoặc bất kỳ trình chỉnh sửa hình ảnh nào khác.

Thêm một phần mới

Bây giờ là lúc bắt đầu tạo phần liên hệ nổi với Divi Builder! Điều đầu tiên chúng tôi sẽ làm là mở một trang mới hoặc trang hiện có và thêm một phần mới.

Trong tab nội dung, thêm nền của bản đồ mà bạn đã tạo trong Photoshop.

  • Hình nền: bản đồ đã sửa đổi của bạn
Divi hình nền

khoảng cách

Tiếp theo, tùy chỉnh cài đặt giãn cách phần trên tab thiết kế.

  • Lề trên và dưới: 50vh
  • Đệm đáy: 0vw
Cấu hình giãn cách phần Divi 1

tầm nhìn

Sau đó thiết lập các tràn để hiển thị.

  • Tràn ngang và dọc: có thể nhìn thấy
phần tiếp xúc nổi

Chức vụ

Cuối cùng, đặt chỉ số Z của phần thành 10.

  • Chỉ số Z: 10
Vị trí phần Divi

Thêm một dòng mới

Cấu trúc cột

Bây giờ là lúc để thêm một vài thứ. Đầu tiên, hãy thêm một hàng có 2 cột.

Hàng có hai cột divi

kích thước

Mở các tham số dòng và điều chỉnh kích thước như sau.

  • Chiều rộng
    • Văn phòng: 90%
    • Máy tính bảng và điện thoại: 80%
  • Chiều rộng tối đa: 90%
Tham số dòng Divi

tầm nhìn

Nhấp vào tab nâng cao và sau đó điều chỉnh phần tràn.

  • Tràn ngang và dọc: có thể nhìn thấy
Cấu hình tràn dòng Divi

Chức vụ

Hoàn thành cài đặt hàng bằng cách sửa đổi cài đặt vị trí.

  • Chức vụ: Tương đối
  • Xuất xứ Offset: Trên cùng bên trái
  • Độ lệch dọc
    • Máy tính để bàn: -8vw
Định cấu hình vị trí dòng divi

Cài đặt cột 1

Bối cảnh

Trước khi thêm các mô-đun, chúng ta cần tạo kiểu cho các cột riêng lẻ. Thêm màu nền cho cột 1.

  • Màu đơn sắc: # 25274d
Màu cột 1 divi

Khoảng cách

Điều chỉnh cài đặt khoảng cách tiếp theo.

  • Đệm trên và dưới
    • Máy tính để bàn và máy tính bảng: 7vw
  • Đệm trái và phải
    • Máy tính để bàn: 3vw
    • Máy tính bảng và điện thoại: 6vw
Cấu hình giãn cách phần hai cột

Biên giới

Sau đó, thêm một số góc tròn vào cài đặt viền.

  • Góc làm tròn: 10px cả bốn góc
Phần divi cạnh tròn

Hiệu ứng cuộn

Cuối cùng nhưng không kém phần quan trọng, sử dụng một số chuyển động dọc trong cài đặt hiệu ứng cuộn. Điều này sẽ giúp chúng ta tạo ra một hiệu ứng nổi.

  • Hiệu ứng chuyển đổi cuộn: Chuyển động dọc
  • Chuyển động dọc / Bộ máy tính để bàn
    • Bắt đầu bù đắp: 4
    • Bù đắp giữa: 0 (ở mức 50%)
    • Kết thúc bù đắp: -4
  • Chuyển động dọc / Máy tính bảng và điện thoại
    • Bắt đầu bù đắp: 4
    • Bù đắp giữa: 0 (ở mức 40% và 60%)
    • Kết thúc bù: -3
  • Kích hoạt hiệu ứng chuyển động: giữa phần tử
Tùy chỉnh hiệu ứng cuộn phần divi

Cài đặt cột 2

Chức vụ

Bây giờ chúng ta hãy chuyển sang các tham số của cột thứ hai. Điều chỉnh cài đặt vị trí cho phù hợp.

  • Chức vụ: Tương đối
  • Nguồn gốc của phần bù: trên cùng bên trái
  • Bù dọc
    • Văn phòng: 25vw
Tùy chỉnh cột Divi

Hiệu ứng cuộn

Chúng tôi cũng thêm một chuyển động dọc cho cột này.

  • Hiệu ứng chuyển đổi cuộn: chuyển động dọc
  • Xác định chuyển động dọc / máy tính để bàn
    • Bắt đầu bù: 2
    • Độ lệch trung bình: 0 (ở mức 50%)
    • Kết thúc bù: -2
  • Xác định chuyển động dọc / máy tính bảng và điện thoại
    • Bắt đầu bù: 0
    • Độ lệch trung bình: 0 (ở mức 50%)
    • Kết thúc bù: -2
  • Kích hoạt hiệu ứng chuyển động: Phần tử đầu
Hiệu ứng cuộn Divi

Thêm một mô-đun văn bản vào cột 1

Nội dung

Đã đến lúc thêm mô-đun, bắt đầu với mô-đun văn bản trong cột 1. Thêm bất kỳ nội dung H2 nào bạn muốn.

Mô-đun nội dung cột 1

Tiêu đề văn bản

Chuyển đến tab thiết kế và tạo kiểu cho văn bản H2 như sau.

  • Cấp độ tiêu đề: H2
  • Phông chữ: Palanquin Dark
  • Trọng lượng phông chữ: đậm
  • Kiểu chữ: TT
  • Màu: vàng # ffd868
  • Kích thước
    • Văn phòng: 5vw
    • Máy tính bảng: 10vw
    • Điện thoại: 12vw
  • Khoảng cách chữ: 4px
Tùy chỉnh phông chữ Divi ở trên cùng

Thêm một mô-đun mẫu liên hệ vào cột 1

Nội dung

Trong mô-đun văn bản, hãy thêm một biểu mẫu liên hệ. Đây là những trường chúng tôi sử dụng:

  • tên
  • E-mail
  • vật chất
  • Câu Hỏi/Nội Dung “*”
Thêm biểu mẫu liên hệ divi

Bảo vệ thư rác

Trước khi tạo kiểu mô-đun biểu mẫu liên hệ. kích hoạt bảo vệ chống spam và kết nối tài khoản ReCaptcha của bạn.

  • Sử dụng dịch vụ chống thư rác: Có
  • Nhà cung cấp dịch vụ: ReCaptcha
  • Chọn một tài khoản
Divi contact form chống spam

Lĩnh vực

Chuyển sang tab thiết kế và tạo kiểu cho các trường như sau.

  • Màu nền: Xanh đậm # 25274d
  • Màu văn bản: xám nhạt # d1d1d1
  • Màu nền tiêu điểm: Xanh lam đậm # 25274d
  • Màu văn bản tiêu điểm: xám nhạt # d1d1d1
  • Phông chữ: Palanquin
  • Phong cách: TT
  • Cỡ chữ
    • Văn phòng: 0.9vw
    • Máy tính bảng: 2vw
    • Điện thoại: 3vw
  • Khoảng cách chữ: 1px
Tùy chỉnh các trường màu 1

Bouton

Sau đó, cách điệu nút.

  • Phong cách tùy chỉnh: Có
  • Kích thước văn bản: 20px
  • Màu văn bản: xanh đậm # 25274d
  • Màu nền: Màu vàng # ffd868
  • Bán kính viền: 7px
  • Màu biểu tượng: Xanh lam đậm # 25274d
  • Lề trên: 5px
Tùy chỉnh kiểu nút divi 1
Cấu hình màu nút Divi

kích thước

Sau đó chúng tôi sửa đổi các tham số kích thước.

  • Chiều rộng: 100%
  • Chiều rộng tối đa: 100%
Cấu hình định cỡ Divi

khoảng cách

Chúng tôi cũng sẽ thêm phần đệm hàng đầu.

  • Phần đệm trên: 4vw
Khoảng cách Divi

biên giới

Hoàn thành các tham số mô-đun bằng cách tùy chỉnh các tham số viền.

  • Lối vào với các góc được làm tròn: 6px ở bốn góc
  • Entries Kiểu viền: tất cả bốn phía
  • Chiều rộng đường viền lối vào: 2px
  • Mục nhập Màu viền: vàng # ffd868
Cấu hình đường viền Divi

Thêm mô-đun theo dõi phương tiện truyền thông xã hội vào cột 2

Nội dung

Chuyển đến cột 2 và thêm một mô-đun truyền thông xã hội. Sử dụng tất cả các mạng xã hội bạn cần.

  • Facebook
  • Twitter
  • Linkedin
Mô-đun theo dõi chúng tôi trên mạng xã hội

Liên

Trước khi tạo kiểu, thêm liên kết đến các mạng tương ứng.

Bối cảnh của bài báo

Bây giờ hãy mở mạng xã hội đầu tiên và thay đổi màu nền.

  • Màu: Xanh đậm # 25274d
Sửa đổi nền divi 1

Biểu tượng yếu tố

Trong tab thiết kế của cùng một phần tử, hãy thay đổi cài đặt biểu tượng như sau.

  • Màu: vàng # ffd868
  • Kích thước phông chữ biểu tượng
    • Bàn và máy tính bảng: 31 px
    • Điện thoại: 26 px
Tùy chỉnh divi màu

Khoảng cách mục

Sau đó thêm một lề nhỏ để tách các biểu tượng với nhau.

  • Lề phải: 1vw
Cấu hình khoảng cách chia sẻ xã hội

Sao chép và dán các kiểu mục

Để tạo kiểu cho các mạng xã hội còn lại, hãy quay lại cửa sổ nội dung chính và sao chép các kiểu phần tử từ biểu tượng đầu tiên. Sau đó dán các kiểu phần tử trên các mạng xã hội còn lại.

Sao chép phần tử kiểu
Dán phần tử phong cách divi

sự liên kết

Chuyển sang tab thiết kế chính và đảm bảo mô-đun được căn trái.

  • Sắp xếp mô-đun: bên trái
Chọn căn chỉnh

kích thước

Sau đó điều chỉnh kích thước của mô-đun.

  • Chiều rộng: 100%
Định cấu hình định cỡ divi

khoảng cách

Cũng xóa tất cả các điền mặc định.

  • Phần đệm trên, dưới, trái và phải: 0vw
Định cấu hình khoảng cách divi

biên giới

Cuối cùng, thêm các góc tròn trong cài đặt đường viền. Thao tác này sẽ điều chỉnh đường viền của tất cả các biểu tượng cùng một lúc.

  • góc tròn
    • Trên cùng bên trái và bên phải: 7 pixel
    • Dưới cùng bên trái và bên phải: 0px
Cấu hình đường viền mô-đun Divi

Thêm một mô-đun văn bản vào cột 2

Nội dung

Trong mô-đun truyền thông xã hội, hãy thêm một mô-đun văn bản khác. Thêm nội dung bạn chọn. Chúng tôi đã thêm hai địa chỉ, một số điện thoại và một email. Sử dụng chữ in đậm trên tiêu đề của mỗi mục bằng chữ in hoa.

  • Trụ sở chính: 1587 Sukhumvit Soi 21, Bangkok, Thái Lan.
  • Điểm bán hàng : Trung tâm thương mại Emporium, tầng 2
  • điện thoại: (321) 564 2398
  • Email: [email được bảo vệ]
Cấu hình địa chỉ mô-đun văn bản Divi

bối cảnh

Thay đổi màu nền của mô-đun.

  • Màu: Xanh đậm # 25274d
Cấu hình nền mô-đun văn bản

Văn bản

Chuyển sang tab thiết kế và tạo kiểu cho văn bản.

  • Phông chữ: Palanquin
  • Màu: vàng # ffd868
  • Kích thước: 18px
Phông chữ văn bản mô-đun Divi

khoảng cách

Đồng thời thêm các giá trị khoảng cách tùy chỉnh.

  • Lề trên
    • Văn phòng: -60px
    • Máy tính bảng và điện thoại: -50 pixel
  • Lớp đệm trên, dưới, trái và phải
    • Văn phòng: 3vw
    • Máy tính bảng: 6vw
    • Điện thoại: 8vw
Lề giãn cách Divi

biên giới

Và hoàn thành mô-đun bằng cách thêm các góc tròn trong cài đặt đường viền. Đó là nó!

  • Các góc được làm tròn: 10 pixel ở trên cùng bên phải, dưới cùng bên trái và dưới cùng bên phải.
Mô-đun văn bản divi viền tròn

khảo sát

Bây giờ chúng ta đã hoàn thành việc tạo lại phần danh bạ nổi, hãy xem lại kết quả cuối cùng trên các kích thước màn hình khác nhau.

phần tiếp xúc nổi

Tài nguyên bổ sung

Tài nguyên của nó có thể bổ sung cho những gì bạn vừa đọc. Chúng phải được sử dụng bổ sung hoặc bởi những người không có chủ đề Divi.

để thúc

Việc sử dụng các hiệu ứng cuộn Divi mới biến bất kỳ bố cục tiêu chuẩn nào thành một thiết kế đẹp. Bằng cách tạo nền của riêng bạn, bạn có nhiều quyền kiểm soát hơn đối với diện mạo của thiết kế đã hoàn thiện. Nếu bạn có bất kỳ câu hỏi hoặc góp ý nào, hãy để lại bình luận trong phần bình luận bên dưới nhé!

Cách tạo hoạt ảnh cuộn nền văn bản đầy màu sắc với Divi

Cách tạo hoạt ảnh cuộn nền văn bản đầy màu sắc với Divi

Tạo hoạt ảnh cuộn trên nền văn bản là một cách độc đáo để thêm họa tiết hoạt hình nhiều màu sắc vào văn bản trang web của bạn trong khi người dùng đang cuộn trang. Với Divi, quá trình này dễ dàng một cách đáng ngạc nhiên khi bạn đã học được một số kỹ thuật chính.

Trong hướng dẫn này, chúng tôi sẽ chỉ sử dụng sức mạnh của cài đặt có sẵn của Divi để tạo ra 3 thiết kế độc đáo có hoạt ảnh cuộn nền văn bản đầy màu sắc. Chúng tôi thậm chí sẽ chỉ cho bạn cách tạo phiên bản tối của mỗi thiết kế để có một giao diện hoàn toàn mới.

Hãy bắt đầu!

Kết quả có thể

Đây là một cái nhìn về các thiết kế mà chúng tôi sẽ xây dựng ngày hôm nay.

Thiết kế 1: Đổ dốc nền văn bản với hiệu ứng cuộn ngang

Thiết kế đầu tiên này sẽ có hiệu ứng cuộn ngang làm hoạt ảnh mô-đun phân tách màu đằng sau mô-đun văn bản với bộ lọc màn hình.

Thêm một cột

Để bắt đầu, hãy thêm hàng một cột vào phần mặc định.

Chọn bố cục cột divi

Thêm một mô-đun văn bản

Sau đó thêm một mô-đun văn bản mới vào cột.

Thêm mô-đun văn bản divi

Nội dung

Đối với nội dung của cột, dán mã HTML sau vào vùng nội dung:

Lưu mã phân mảnh

Định dạng văn bản

Sau đó cập nhật thiết kế văn bản như sau:

  • Màu nền: #ffffff
  • Kiểu chữ văn bản: TT
  • Màu văn bản: # 000000
  • Kích thước văn bản: 100 px (máy tính để bàn), 40 px (điện thoại)
  • Khoảng cách chữ văn bản: 0.15em
  • Chiều cao của dòng văn bản: 1em
  • Sắp xếp văn bản: trung tâm
  • Phông chữ: Merriweather
  • Trọng lượng phông chữ: đậm
  • Kiểu chữ tiêu đề: TT
  • Căn chỉnh văn bản tiêu đề: Căn giữa
  • Màu văn bản tiêu đề: # 000000
  • Kích thước văn bản tiêu đề: 200px (Máy tính để bàn), 80px (Điện thoại)
  • Khoảng cách tiêu đề thư: 0.15em
  • Chiều cao của dòng tiêu đề: 1em

Đệm và bộ lọc

Bây giờ chúng ta cần thêm một số đệm và bộ lọc màn hình vào mô-đun văn bản. Bộ lọc là cần thiết để thiết kế này hoạt động vì nó là thứ cho phép màu nền / mod hiển thị phía sau văn bản.

Để thêm điền và lọc, cập nhật như sau:

  • đệm: cao 15px, thấp 20px
  • Chế độ hòa trộn: Màn hình

Lưu ý: Chế độ hòa trộn màn hình hoạt động tốt nhất với văn bản màu đen trên nền trắng. Nếu chúng ta muốn sử dụng văn bản màu trắng trên nền đen, chúng ta sẽ sử dụng chế độ hòa trộn Multiply.

Cấu hình giãn cách mô-đun văn bản Divi

Dải phân cách trên và dưới

Khi mô-đun văn bản của chúng tôi hoàn tất, hãy thêm một số dấu phân cách (bên trên và một bên dưới mô-đun văn bản) cho một thành phần thiết kế bổ sung.

Thêm một dấu phân cách thấp hơn

Thêm một mô-đun tách mới dưới mô-đun văn bản.

Thêm mô-đun phân tách divi
Cài đặt tách cao hơn

Mở cài đặt dải phân cách và chọn KHÔNG để hiển thị dải phân cách.

hiệu ứng cuộn nền văn bản divi

Sau đó, cập nhật nền và cung cấp cho bộ chia cùng chế độ hòa trộn như mô-đun văn bản như sau:

  • Màu nền bên trái: # 000000
  • Màu nền gradient bên phải: #ffffff
  • Hướng Gradient: 90deg
  • Vị trí bắt đầu: 48%
  • Vị trí cuối: 0%
  • Chế độ hòa trộn: Màn hình
Cấu hình bộ tách màu

Sau đó cập nhật chiều cao của dải phân cách trên màn hình điện thoại như sau:

  • Chiều cao: 15px (điện thoại)
Cấu hình bộ phân tách Divi

Thêm dải phân cách trên

Để tạo dải phân cách trên cùng, hãy nhân đôi dải phân cách dưới cùng trước đó và kéo nó lên trên mô-đun văn bản bằng cách sử dụng vùng hiển thị lớp.

Chèn dải phân cách

Sau đó đảo ngược màu sắc trên nền gradient.

Chèn nền gradient

Cập nhật thông số dòng

Khi các dấu phân cách trên và dưới của chúng tôi được đặt đúng chỗ, hãy cập nhật các tham số dòng như sau:

  • Độ rộng máng xối: 1 (để loại bỏ lề dưới giữa các mô-đun)
  • Chiều rộng tối đa: 600 pixel (để giữ thiết kế mạch lạc trên máy tính để bàn và máy tính bảng)
  • Căn chỉnh đường: trung tâm
  • Đệm: cao 0px, thấp 0px
  • Tràn ngang: ẩn
  • Tràn dọc: ẩn
Tùy chỉnh thông số dòng divi

Tạo dấu phân cách cho màu nền của văn bản động

Yếu tố cuối cùng của thiết kế đầu tiên này là dải phân cách mà chúng ta sẽ sử dụng để làm sinh động màu nền của văn bản trên cuộn. Để thực hiện việc này, hãy thêm một mô-đun tách mới bên dưới dải phân cách dưới cùng.

Chèn Seperator

Sau đó chọn KHÔNG để hiển thị dải phân cách.

Hiển thị trình phân chia divi

Cài đặt dải phân cách nền

Cập nhật dấu phân cách với nền gradient như sau:

  • Màu nền bên trái: # e02b20
  • Màu gradient nền bên phải: # 8300e9
  • Hướng Gradient: 90deg
  • Vị trí bắt đầu: 30%
  • Vị trí cuối: 70%
Divi phân chia phía sau

Chúng tôi muốn chiều cao của dấu phân cách đủ cao để tô màu cho tất cả văn bản của chúng ta trong mô-đun văn bản và các dấu phân cách trên và dưới. Đối với thiết kế này, hãy đặt chiều cao thành 400px.

  • Chiều cao: 400px
Chiều cao dải phân cách

Sau đó, cung cấp cho bộ chia một vị trí tuyệt đối để định vị nó ngay trên các mô-đun khác. Sử dụng chỉ số Z để đặt dải phân cách phía sau các mô-đun khác.

  • Vị trí: Tuyệt đối
  • Chỉ số Z: -1
Dấu phân tách chỉ mục
Hiệu ứng cuộn của dải phân cách nền

Với dấu phân cách ở vị trí, tất cả những gì chúng ta phải làm là di chuyển dấu phân cách phía sau văn bản bằng cách sử dụng các hiệu ứng cuộn của Divi. Đối với thiết kế này, chúng tôi sẽ thêm chuyển động ngang vào cuộn.

Cập nhật các mục sau:

Trong tab Di chuyển ngang ...

Văn phòng

  • Kích hoạt chuyển động ngang: CÓ
  • Bắt đầu bù: 6 (ở mức 20%)
  • Độ lệch trung bình: 0 (ở mức 40% -60%)
  • Kết thúc bù: -6 (ở mức 80%)

Điện thoại

  • Bắt đầu bù: 3
  • Kết thúc bù: -3

Ngoài ra, hãy đảm bảo đặt trình kích hoạt cho hiệu ứng chuyển động ở giữa clip:

  • Kích hoạt hiệu ứng chuyển động: giữa phần tử
Cấu hình hoạt ảnh

Thêm khoảng cách phần

Để tạo một không gian cuộn tạm thời để kiểm tra thiết kế, hãy thêm phần sau vào phần:

  • Ký quỹ: 80vh ở trên, 80vh dưới
Phần kích thước cấu hình divi

cuối cùng suy nghĩ

Các thiết kế hoạt hình nền văn bản được hiển thị trong bài viết này thực sự sẽ hoạt động tốt như một thiết kế tĩnh mà không cần thêm chuyển động trên cuộn. Tuy nhiên, các hiệu ứng cuộn bổ sung thực sự đưa thiết kế lên một tầm cao mới. Hãy thử nghiệm với nhiều màu sắc và hiệu ứng hơn!

Tôi mong muốn được nghe từ bạn trong các ý kiến.

Để sức khỏe của bạn!

Cách tạo thanh chân trang cố định với Divi

Cách tạo thanh chân trang cố định với Divi

Thanh chân trang cố định có thể là một cách tiện dụng để giữ thông tin quan trọng về mặt trước và trung tâm trang web của bạn khi người dùng đang tương tác với nội dung trang của bạn trên bất kỳ thiết bị nào. 

Như với Divi, thanh chân trang thường tồn tại dưới dạng phần tử tĩnh ở cuối trang sau nội dung chân trang chính. Chúng bao gồm những thứ như văn bản bản quyền và các biểu tượng truyền thông xã hội. 

Tuy nhiên, nếu bạn không ẩn nội dung của thanh chân trang ở cuối trang, bạn có thể tạo thanh chân trang tùy chỉnh nổi ở cuối màn hình trong khi người dùng cuộn.

Trong hướng dẫn này, chúng tôi sẽ thiết kế một thanh chân trang cố định được cá nhân hóa hoàn toàn bằng cách sử dụng trình tạo chủ đề Divi. Điều này sẽ hữu ích cho bạn để giữ cho những phần nội dung nhỏ nhưng quan trọng đó luôn trong tầm mắt.

Kết quả có thể

Dưới đây là tổng quan về thanh chân trang cố định mà chúng tôi sẽ thiết kế.

Cách thêm mẫu thanh chân trang cố định để tải xuống trên trang Divi của bạn

CẢNH BÁO !: Thêm mẫu này sẽ thay thế mẫu trang web mặc định (nếu bạn có) trên trang Divi của bạn. Chúng tôi khuyên bạn nên thêm nó vào một trang web thử nghiệm để bạn không làm rối tung bất cứ thứ gì trên một trang đang hoạt động.

Để nhập mẫu thanh chân trang cố định vào trang web của riêng bạn, hãy giải nén tệp zip tải xuống để truy cập tệp JSON.

Sau đó, chuyển đến bảng điều khiển WordPress và đi tới Divi> Theme Builder.

Sau đó nhấp vào biểu tượng tính di động ở trên cùng bên phải của trang.

Trong cửa sổ tính di động, hãy chọn tệp JSON bạn vừa giải nén và chọn tùy chọn 'Tải xuống bản sao lưu trước khi nhập', đề phòng trường hợp trước đó bạn đã có thứ gì đó trong mẫu trang web mặc định mà bạn chưa có. không muốn thay thế.

Sau đó bấm vào nút Nhập.

Cuối cùng, lưu các thay đổi vào trình tạo chủ đề và hiển thị trang trực tiếp để xem thanh chân trang cố định.

Lưu thay đổi divi

Bây giờ đến phần hướng dẫn, được không?

Phần 1: Thêm chân trang toàn cục

Trình tạo chủ đề Divi cho phép bạn thay thế chân trang mặc định bằng chân trang mới bằng cách cập nhật mẫu trang web mặc định.

Để tạo chân trang toàn cục, hãy chuyển đến bảng điều khiển WordPress và đi tới Divi> Trình tạo chủ đề. Sau đó nhấp vào không gian “Thêm chân trang chung” bên trong Mẫu trang web mặc định.

Sau đó, chọn tùy chọn “Tạo chân trang tùy chỉnh” từ danh sách thả xuống.

Thao tác này sẽ triển khai Trình chỉnh sửa bố cục mô hình, nơi bạn sẽ ngay lập tức được nhắc với ba lựa chọn về cách bạn muốn bắt đầu xây dựng. Chọn "Build From Scratch".

Phần 2: Tạo thanh chân trang cố định

Bây giờ chúng ta đang chỉnh sửa từ trình chỉnh sửa bố cục mẫu, chúng ta có thể bắt đầu thiết kế thanh chân trang cố định. Sau khi hoàn tất, bạn sẽ có một thanh chân trang cố định với ba cột là nội dung đã sẵn sàng.

Thêm bố cục ba cột vào dòng

Đầu tiên, thêm bố cục ba cột vào hàng.

Phần 3 hàng

Chiều cao phần

Khi ba cột được thêm vào, hãy cung cấp chiều cao xác định cho phần. Điều này rất quan trọng để tạo khoảng trống ở cuối trang nơi điện thoại cố định cuối cùng sẽ kết thúc. Chúng tôi cũng sẽ xóa phần đệm trên và dưới mặc định.

Để đặt chiều cao và phần đệm, hãy mở cài đặt phần và cập nhật các mục sau:

  • Chiều cao: 85px
  • Đệm: cao 0px, thấp 0px
Cấu hình chiều cao phần Divi 1

Cài đặt dòng

Bây giờ phần của chúng tôi đã sẵn sàng, chúng tôi đã sẵn sàng tùy chỉnh hàng để phục vụ như một thanh chân trang cố định. Mở cài đặt hàng, sau đó cập nhật thông tin sau:

bối cảnh

  • Màu nền: # 1a1e36
Truy cập vào cài đặt dòng

Kích thước và khoảng cách

  • Chiều rộng máng xối: 1
  • Chiều rộng: 100%
  • Chiều rộng tối đa: 100%
  • Đệm: 0px lên, 0px xuống, 3% trái, 3% phải
Tùy chỉnh phần divi

CSS tùy chỉnh

Mặc dù hàng được cố định, chúng tôi muốn chiều cao của hàng khớp với chiều cao của phần mẹ để khoảng trống ở cuối trang chứa hàng đúng cách. Và, chúng tôi muốn đảm bảo rằng nội dung của hàng luôn được căn chỉnh theo chiều dọc. Để thực hiện việc này, hãy thêm CSS tùy chỉnh sau vào phần tử chính của hàng:

Văn phòng

chiều cao: kế thừa! quan trọng; hiển thị: flex; align-items: centre;

Điện thoại

chiều cao: kế thừa! quan trọng; hiển thị: khối;
Thêm mã css

Định vị cố định

Để làm cho đường thẳng cố định sao cho nó nổi ở cuối màn hình, chúng ta cần tạo cho nó một vị trí cố định ở vị trí trung tâm phía dưới như sau:

  • Vị trí: cố định
  • Vị trí: trung tâm thấp hơn
Vị trí chân trang

Phần 2: Tạo nội dung của thanh chân trang cố định

Tại thời điểm này, chúng ta có một thanh chân trang ở vị trí cố định đã sẵn sàng cho nội dung. Chúng tôi có thể thêm bất kỳ nội dung nào chúng tôi muốn vào mỗi cột trong số ba cột. Nhưng vì đây là "thanh" chân trang được giới hạn chiều cao 85 pixel nên chúng ta cần giới hạn số lượng nội dung. Vì lý do này, chúng tôi sẽ thêm một menu nhỏ có biểu tượng động và 4 mục menu trong cột 1. Trong cột 2, chúng tôi sẽ thêm văn bản bản quyền với năm hiện tại động. Trong cột 3, chúng tôi sẽ thêm ba biểu tượng theo dõi mạng xã hội.

Thêm một menu vào cột 1

Trong cột 1, thêm một mô-đun menu.

Lựa chọn menu Wordpress

Chọn menu

Sau đó chọn một trong các menu bạn đã tạo trên trang web của mình. Đảm bảo giữ các mục trong menu ở mức 4 hoặc ít hơn.

Menu lựa chọn mô-đun wordpress

Thêm logo trang web dưới dạng nội dung động

Đối với menu biểu trưng, ​​chúng tôi sẽ thêm biểu trưng của trang web một cách tự động. Nhấp vào biểu tượng “Sử dụng nội dung động” trong khi di chuột qua khu vực xem trước biểu trưng. Sau đó chọn Biểu trưng của trang web từ danh sách thả xuống.

Thêm logo

Gỡ bỏ nền

Sau đó, xóa nền menu mặc định để nó trong suốt.

Xóa nền

Thiết kế thực đơn

Tại thời điểm này, chúng tôi đã sẵn sàng thêm một số thiết kế vào menu. Đối với thiết kế này, chúng tôi sẽ giữ cho nó đơn giản và nhỏ gọn. Cập nhật các thông số thiết kế sau:

  • Menu phông chữ: Cầu vượt
  • Màu văn bản menu: # b59c61
  • Hình ảnh màu nâu đỏ: 100%
  • Chiều cao logo tối đa: 50px
Thay đổi màu phông chữ

Thêm văn bản bản quyền vào cột 2

Khi menu đã được đặt, hãy chuyển đến cột 2 để thêm văn bản bản quyền.

Thêm một mô-đun văn bản

Thêm một mô-đun văn bản mới vào cột 2.

Văn bản mô-đun lựa chọn divi

Tự động thêm ngày hiện tại với trước và sau văn bản

Ở đây, chúng ta sẽ sáng tạo với nội dung động để hiển thị năm hiện tại trong văn bản bản quyền. Điều này sẽ đảm bảo rằng năm sẽ được cập nhật tự động cho vòng đời của trang web.

Để thực hiện việc này, hãy nhấp vào biểu tượng “Sử dụng nội dung động” và chọn “Ngày hiện tại” từ danh sách.

Ngày tuyển chọn

Trong cửa sổ bật lên Ngày hiện tại, cập nhật các thông tin sau:

  • Trước:
  • 01Copyright &copy;
  • Sau:
  • 01| Tous Droits Reservés
  • Định dạng ngày : tùy chỉnh
  • Định dạng ngày tùy chỉnh : 20 năm
Tùy chỉnh ngày

Định dạng văn bản

Cập nhật thiết kế văn bản và lề như sau:

  • Phông chữ: Cầu vượt
  • Màu văn bản: # b59c61
  • Sắp xếp văn bản: trung tâm
  • Lề (chỉ dành cho điện thoại): 10 pixel ở trên cùng, 10 pixel ở dưới cùng
Mô-đun văn bản lựa chọn phông chữ Divi

Điều này hỗ trợ văn bản bản quyền.

Thêm các biểu tượng theo dõi phương tiện truyền thông xã hội vào cột 3

Trong cột 3, thêm một mô-đun theo dõi phương tiện truyền thông xã hội.

Thêm mạng xã hội

Trên tab Nội dung, thêm các mạng xã hội cần thiết vào trang web. Đối với thiết kế này, chúng tôi sử dụng ba trong số chúng.

Thêm mô-đun giám sát mạng xã hội

Cài đặt theo dõi phương tiện truyền thông xã hội

Tiếp theo, cập nhật cài đặt thiết kế cho tất cả các biểu tượng theo dõi phương tiện truyền thông xã hội như sau:

  • Căn chỉnh mô-đun: thẳng (máy tính để bàn và máy tính bảng), trung tâm (điện thoại)
  • Màu biểu tượng: # 1a1e36
  • Sử dụng kích thước biểu tượng tùy chỉnh: CÓ
  • Kích thước phông chữ biểu tượng: 16px (máy tính để bàn và máy tính bảng), 14px (điện thoại)
Nhân sự cảnh sát divi

Cập nhật cài đặt phương tiện truyền thông xã hội

Để cập nhật thiết kế của biểu tượng mạng xã hội riêng lẻ, hãy mở cài đặt cho mạng đầu tiên và cập nhật những điều sau:

  • Màu nền: #ffffff
  • Đệm: 8 pixel ở bên phải, 8 pixel ở bên trái
  • Các góc được làm tròn: 8px
chân cố định divi

Mở rộng cài đặt phương tiện truyền thông xã hội cho mọi người

Sau đó mở menu cài đặt bổ sung cho mạng đầu tiên và chọn " Mở rộng kiểu mặt hàng " trong danh sách. Trong cửa sổ bật lên Mở rộng Kiểu, chọn Mở rộng Kiểu trong " Cột này "Và bấm vào Mở rộng .

Điều này sẽ mở rộng thiết kế đến phần còn lại của các biểu tượng trong cột.

cuối cùng suy nghĩ

Thêm một thanh chân trang cố định có ý nghĩa trong một số trường hợp. Chiều cao của quầy bar đủ nhỏ để không làm rối mắt hoặc chiếm quá nhiều diện tích trên thiết bị di động. Và nó cung cấp cho bạn khả năng thêm các CTA quan trọng để có chuyển đổi tốt hơn và trải nghiệm người dùng mượt mà hơn.

Đối với thiết kế này, khoảng trống ở cuối trang được tạo bằng cách đặt chiều cao cố định cho phần và sau đó cho phép dòng cố định kế thừa chiều cao của phần (mặc dù nó được cố định). 

Các nguồn lực khác

Dưới đây là danh sách các tài nguyên bổ sung có thể giúp bạn tạo thiết kế trang web của mình với Divi.