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

Tạo một phần liên lạc nổi với các hiệu ứng cuộn trên 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ị]

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.

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

  • Đệ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.

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

  • 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.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

  • 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é!

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