Mỗi trang web cần một phần liên hệ, nhưng điều đó không có nghĩa là bạn phải có một thiết kế tiêu chuẩn. Với các hiệu ứng cuộn của Divi, bạn có thể tạo phần liên hệ nổi nổi bật. Nâng cao tương tác người dùng của bạn với 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 bạn Mẫu liên hệ. Trong bài viết này, chúng tôi sẽ chỉ cho 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 bằng 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 giới thiệ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
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
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
Chức vụ
Cuối cùng, đặt chỉ số Z của phần thành 10.
- Chỉ số Z: 10
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.
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%
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
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
Cài đặt cột 1
Tiểu sử
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
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
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
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ử
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
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
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.
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
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 Mẫu liên hệ. Đây là những lĩnh vực chúng tôi sử dụng:
- tên
- vật chất
- Tin nhắn
Bảo vệ thư rác
Trước khi tạo kiểu cho mô-đun của Mẫu liên hệ. kích hoạt tính năng chống thư rác 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
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
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
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%
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
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
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.
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
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
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
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.
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
kích thước
Sau đó điều chỉnh kích thước của mô-đun.
- Chiều rộng: 100%
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
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
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ệ]
bối cảnh
Thay đổi màu nền của mô-đun.
- Màu: Xanh đậm # 25274d
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
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
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.
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.
Tài nguyên bổ sung
Đây là ressources có thể bổ sung cho những gì bạn vừa đọc. Chúng có thể được sử dụng bổ sung hoặc bởi những người không có Chủ đề Divi.
- Làm thế nào để thêm một hình thức liên lạc cửa sổ bật lên trên WordPress
- Cách thêm biểu mẫu thả xuống trên tiêu đề chung trên Divi
- 5 plugin để tạo biểu mẫu liên hệ
để 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é!
