Divi: Cách tạo trang blog bằng mô-đun Blog

mệnh Gaetan Taffo | Divi, Hướng dẫn Divi

Bạn có muốn tạo một trang blog với mô-đun Blog de Divi?

Thông thường, mọi gói bố cục Divi được xuất bản trên Elegant Themes cung cấp một bố cục blog, giúp bạn tạo blog của mình khá nhanh chóng. Nhưng bạn đã bao giờ muốn tự mình tạo một trong những trang blog này chưa? 

Trong bài viết này, chúng ta sẽ xem cách tạo một trang blog với mô-đun Divi's Blog. Chúng tôi sẽ đi qua từng bước cài đặt.

Hãy bắt đầu nào!

khảo sát

Trước khi bắt đầu, trước tiên chúng ta hãy xem tổng quan về những gì chúng ta sẽ tạo.

Tạo một trang blog mới

Tạo một trang mới

Đầu tiên, chúng tôi sẽ tạo trang của mình. Trong bảng điều khiển WordPress, hãy nhấp vào trang > Thêm On.

Đặt cho trang một tiêu đề có ý nghĩa đối với bạn.

• Tiêu đề của trang: Blog trên Divi

Chuyển sang Divi Builder

Nhấp vào nút màu tím ở giữa trang: Sử dụng Divi Builder .

Thêm một phần cho tiêu đề trang blog

Tùy chỉnh phần

Chúng ta sẽ bắt đầu với phần đầu tiên. Mở chúng thông số phần .

Di chuyển đến Nền và đổi màu thành # f9f3fd. Nhập Blog làm nhãn quản trị. Đóng cài đặt phần.

• Nền: # f9f3fd
• Nhãn quản trị: Blog

Tạo tiêu đề trang blog

Sau đó, chúng tôi sẽ thêm một dòng cho tiêu đề. Chọn biểu tượng màu xanh lá cây và chọn hàng cột đơn.

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

Tùy chỉnh mô-đun Văn bản Tiêu đề Blog

Mở chúng ra Cài đặt mô-đun văn bản và chọn H1. Thêm tiêu đề Blog của chúng tôi.

• Phông chữ: Tiêu đề 1
• Văn bản: Blog của chúng tôi

Sau đó đi đếnTab phong cách và đặt căn chỉnh thành Căn giữa. Đối với văn bản tiêu đề H1, chọn Cormorant Infant cho phông chữ và tô đậm.

• Căn chỉnh văn bản: Căn giữa
• Văn bản tiêu đề: H1
• Phông chữ tiêu đề: Trẻ sơ sinh bằng chim cốc
• Tiêu đề ánh sáng dịu: Văn bản in đậm

Đặt Màu thành # 442854, Kích thước thành 130px và Chiều cao dòng thành 0,8em.

• Màu: #442854
• Kích thước văn bản trên màn hình: 130px
• Chiều cao dòng: 0,8em

Tạo Bài báo Mới nhất và Phần Kêu gọi Hành động

Phần của chúng tôi bao gồm bài viết mới nhất và một email chọn tham gia. 

Thêm một dòng mới dưới hàng đầu tiên của chúng tôi và chọn thiết kế cột 2/3 bên trái và 1/3 bên phải.

Mở chúng ra thông số dòng bằng cách nhấp vào biểu tượng bánh răng.

ChọnTab phong cách, cuộn đến khoảng cách và thêm 0px vào Lề bên trong dưới cùng. Đóng Cài đặt.

• Lề nội bộ dưới cùng: 0px

Thêm và tùy chỉnh mô-đun bài đăng blog nổi bật

Sau đó, chúng tôi sẽ thêm một blog-mô-đun . Điều này sẽ chứa bài viết cuối cùng của chúng tôi. Nhấp vào biểu tượng dấu cộng màu xám ở cột bên trái của hàng mới của chúng tôi và thêm mô-đun Blog.

Nội dung

Dưới Nội dung , nhập 1 cho số lượng bài viết.

• Số vị trí: 1

Các yếu tố

Di chuyển đến Các yếu tố và bỏ chọn Tác giả và Phân trang. Chúng tôi sẽ để phần còn lại ở chế độ mặc định của họ.

• Hiển thị tác giả: không
• Hiển thị phân trang: Không

Bố trí

Sau đó, chọn Tab phong cách và chọn Toàn màn hình cho bố cục và tắt lớp phủ hình ảnh nổi bật.

• Mô hình: Toàn màn hình
• Lớp phủ Hình ảnh đã Chọn: Đã tắt

Văn bản tiêu đề

Di chuyển đến Văn bản tiêu đề . Chọn H2 và chọn Cormoran Infant. Chọn Bold và đổi màu thành # 442854.

• Chèn tiêu đề ba: H2
• Tiêu đề phông chữ: Trẻ sơ sinh bằng chim cốc
• Tiêu đề ánh sáng dịu: Văn bản in đậm
• Màu văn bản tiêu đề: # 442854

Đặt kích thước phông chữ thành 30 pixel. Thay đổi chiều cao dòng thành 1.1em.

• Kích thước: 30 pixel cho máy tính để bàn, 20 pixel cho máy tính bảng, 18 pixel cho điện thoại
• Chiều cao dòng tiêu đề: 1,1 em

Phần thân của văn bản

Sau đó cuộn xuống bài kiểm tra cơ thể . Chọn Cabin cho phông chữ, thay đổi màu thành # 442854 và thay đổi chiều cao dòng thành 1,8em.

• Quân đoàn cảnh sát: Cabin
• Màu văn bản nội dung: # 442854
• Chiều cao đường thân: 1,8 em

Siêu dữ liệu văn bản

Sau đó cuộn xuống Siêu dữ liệu văn bản . Đặt các thông số như sau:

• Phông chữ siêu dữ liệu: Trẻ sơ sinh bằng chim cốc
• Metadata Dim Light: Thường xuyên
• Kiểu sao chép siêu dữ liệu: Không có
• Màu văn bản siêu dữ liệu: # 442854
• Kích thước văn bản siêu dữ liệu: Máy tính để bàn 16px, Máy tính bảng 15px, Điện thoại 14px
• Chiều cao hàng siêu dữ liệu: 1,8 em

khoảng cách

Sau đó cuộn xuống khoảng cách và thay đổi lề trên thành 0vw.

• Ký quỹ hàng đầu: 0vw

Hộp bóng

Cuối cùng, cuộn xuống Hộp bóng và vô hiệu hóa nó.

• Hộp bóng: Tắt

Thêm và tùy chỉnh mô-đun văn bản email blog

Bây giờ chúng ta sẽ chuyển sang cột bên phải và tạo Lời kêu gọi hành động qua email . Đầu tiên, hãy thêm một mô-đun Văn bản vào cột bên phải. Nhấp vào biểu tượng dấu cộng màu xám và tìm kiếm Văn bản.

Nội dung

Chọn Tiêu đề 2 và nhập văn bản Đăng ký nhận ưu đãi của chúng tôi.

• Phông chữ: Tiêu đề 2
• Văn bản: Đăng ký nhận ưu đãi của chúng tôi

Văn bản tiêu đề

vì văn bản của tiêu đề, chọn Căn giữa, chọn H2, chọn Cormorant cho trẻ sơ sinh và đặt nó thành Bold.

• Căn chỉnh văn bản: Căn giữa
• Văn bản tiêu đề: H2
• Phông chữ tiêu đề: Trẻ sơ sinh bằng chim cốc
• Tiêu đề ánh sáng dịu: In đậm

Thay đổi màu thành # 442854, kích thước thành 32px và chiều cao dòng thành 0,95em.

• Màu văn bản tiêu đề: # 442854
• Kích thước văn bản tiêu đề: 32 pixel
• Chiều cao dòng tiêu đề: 0,95 em

khoảng cách

Cuối cùng, cuộn xuống khoảng cách và thêm 10 pixel vào lề dưới cùng. Đóng cài đặt mô-đun Văn bản.

• Lề dưới cùng: 10px

Thêm và tùy chỉnh mô-đun Blog Email Optin

Sau đó chúng tôi đi tạo mẫu email . Thêm mô-đun Email Optin bên dưới mô-đun Văn bản ở cột bên phải.

Nội dung

Đầu tiên, xóa tiêu đề và nội dung.

• Tiêu đề: Không có
• Nội dung văn bản: không có

Di chuyển đến Tài khoản email và thêm nhà cung cấp dịch vụ của bạn.

Sau đó cuộn xuống Nền và bỏ chọn màu nền.

• Sử dụng màu nền: không

Lĩnh vực

Đi vào Tab phong cách và thay đổi Màu nền của trường thành rgba (255,255,255,0) và Màu văn bản thành # 442854.

• Trường màu nền: rgba (255,255,255,0)
• Trường màu văn bản: # 442854

Cuộn xuống tùy chọn phông chữ và thay đổi phông chữ thành cabin, kích thước thành 16px và chiều cao dòng thành 1,8em.

• Trường Phông chữ: Cabin
• Các trường Kích thước Văn bản: 16 pixel
• Chiều cao hàng trường: 1,8 em

Tiếp theo, điều chỉnh góc làm tròn của các trường thành 32px, chiều rộng đường viền thành 2px và thay đổi màu đường viền thành # 442854.

• Điều khiển hình chữ nhật tròn: 32px
• Các trường chiều rộng đường viền: 2px
• Các trường Màu viền: # 442854

Bouton

Di chuyển đến Nút và chọn Sử dụng kiểu nút tùy chỉnh . Thay đổi kích thước thành 18 giây, màu nút thành trắng và màu nền nút thành # 442854.

• Sử dụng các kiểu tùy chỉnh cho nút: Có
• Kích thước văn bản nút: 18 pixel
• Màu văn bản nút: #ffffff
• Nút nền: # 442854

Thay đổi bán kính đường viền thành 50 pixel, phông chữ thành Cormorant Infant và làm đậm trọng lượng.

• Nút bán kính đường viền: 50px
• Nút phông chữ: Trẻ sơ sinh bằng chim cốc
• Nút Soft Light: Chữ in đậm

Cuối cùng, hãy thêm một số lợi nhuận. Nhập 20px cho lề Trên, 12px cho đệm Trên và Dưới, và 32px cho đệm Trái và Phải. Đóng cài đặt Email Optin.

• Nút Lề trên cùng: 20 px
• Nút đệm trên và dưới: 12 px
• Nút đệm trái và phải: 32px

Thêm dòng mới cho danh sách bài đăng trên blog

Chúng tôi sẽ bây giờ tạo danh sách các mặt hàng của trang. Đầu tiên, hãy thêm một hàng cột đơn mới bên dưới phần trước của chúng tôi.

Cài đặt dòng

Đi đến Tab phong cách và thêm 0px vào lề trong của Vertex. Đóng Cài đặt Dòng.

• Đỉnh lề bên trong: 0px

Thêm mô-đun Blog vào dòng của bạn

Thêm một blog-mô-đun sang dòng mới của bạn bằng cách nhấp vào biểu tượng dấu cộng màu xám và nhấp vào Blog.

Tạo kiểu cho nguồn cấp dữ liệu bài đăng trên blog

Hãy thay đổi nguồn cấp dữ liệu Trang Blog.

Nội dung nguồn cấp dữ liệu blog

Mở chúng ra Cài đặt mô-đun blog và nhập 3 cho số lượng bài viết. Điều này cho phép bạn chọn số lượng bài viết hiển thị trên màn hình.

Số thấp hơn, chẳng hạn như 3, cho phép chúng tôi tập trung vào các bài đăng gần đây và giảm kích thước trang. Đây là một lựa chọn tốt nếu bạn không đăng bài thường xuyên hoặc muốn giữ trang sạch sẽ hơn. Hiển thị nhiều bài đăng hơn, chẳng hạn như 6-9, là một ý tưởng hay nếu bạn muốn tập trung vào luồng blog.

• Số lượng bài viết: 3

Nhập 1 cho phần bù. Điều này yêu cầu Divi bắt đầu với bài đăng blog thứ hai, điều này ngăn chúng tôi hiển thị cùng một bài viết đã được hiển thị trong bài đăng blog được hiển thị ở trên nó.

• Số hiệu bài viết: 1

Các yếu tố

Di chuyển đến Các yếu tố . Bật hình ảnh nổi bật, ngày tháng, đoạn mã danh mục và phân trang. Tắt phần còn lại.

• Hiển thị hình ảnh nổi bật: Có
• Dữ liệu: Có
• Thể loại: Có
• Trích: Vâng
• Phân trang: Có

Tiểu sử

Truy cập vào Nền và đặt màu nền ô lưới thành rgba (255,255,255,0)

• Màu nền của ô lưới lưới: rgba (255,255,255,0)

Bố cục và lớp phủ

Sau đó đi đến Tab phong cách . Để bố cục được đặt thành Grid. Chúng tôi đã chọn bố cục toàn chiều rộng cho bài đăng trên blog được giới thiệu ở trên bài đăng này. Chúng tôi sẽ sử dụng bố cục lưới cho nguồn cấp dữ liệu blog này, đây là tùy chọn mặc định. Tắt lớp phủ hình ảnh nổi bật.

• Bố trí: Lưới
• Lớp phủ Hình ảnh đã Chọn: Đã tắt

Văn bản tiêu đề

vì tiêu đề văn bản , chọn H2. Chọn Cormorant Infant, đặt nó thành Bold và nhập màu # 442854.

• Chèn tiêu đề ba: H2
• Tiêu đề phông chữ: Trẻ sơ sinh bằng chim cốc
• Tiêu đề ánh sáng dịu: Văn bản in đậm
• Màu văn bản tiêu đề: # 442854

Chọn 20px cho kích thước văn bản. Đặt chiều cao dòng thành 1,1 em.

• Kích thước văn bản tiêu đề: Màn hình 20px
• Chiều cao dòng tiêu đề: 1,1 em

Phần thân của văn bản

Di chuyển đến Bài kiểm tra cơ thể và chọn Cabin. Đặt màu thành # 442854.

• Quân đoàn cảnh sát: cabin
• Màu văn bản nội dung: # 442854

Đặt chiều cao dòng thành 1,8 em.

• Chiều cao dòng: 1,8 em

Siêu dữ liệu văn bản

Di chuyển đến Siêu dữ liệu văn bản và chọn Cormorant Infant. Đặt trọng lượng thành bình thường, kiểu thành không và màu thành # 442854.

• Phông chữ siêu dữ liệu: Trẻ sơ sinh bằng chim cốc
• Metadata Dim Light: Thường xuyên
• Kiểu sao chép siêu dữ liệu: Không có
• Màu văn bản siêu dữ liệu: # 442854

• Kích thước văn bản siêu dữ liệu: máy tính để bàn 16px, máy tính bảng 15px, điện thoại 14px
• Chiều cao hàng siêu dữ liệu: 1,8 em

Phân trang văn bản

Bây giờ chúng ta hãy đi đến Sự đánh số trang . Đối với phông chữ, chọn Cormorant Infant, chọn Bold và đổi màu thành # 442854.

• Phông chữ Hiển thị phân trang: Trẻ sơ sinh bằng chim cốc
• Hiển thị ánh sáng dịu phân trang: In đậm
• Màu văn bản Hiển thị phân trang: # 442854

khoảng cách

Sau đó, chúng tôi sẽ chuyển sang khoảng cách và thêm lề 0vw ở trên cùng. Điều này ngăn mô-đun của chúng tôi chồng chéo mô-đun trước đó.

• Ký quỹ hàng đầu: 0vw

Biên giới

Di chuyển đến Biên giới và nhập 0px cho tất cả bốn góc. Điều này cho chúng tôi hình vuông của chúng tôi cho bản đồ.

• Bố cục lưới hình chữ nhật tròn: 0px

Hộp bóng

Cuối cùng, cuộn xuống Hộp bóng và vô hiệu hóa nó. Đóng cài đặt blog. Phần blog đã hoàn thành.

• Hộp bóng: không có

Thêm phần "Kêu gọi hành động" mới vào trang blog

Sau đó chúng tôi đi tạo phần "Kêu gọi hành động" của trang. Phần này bao gồm hình nền toàn màn hình thị sai, thông tin liên hệ và các liên kết theo dõi trên mạng xã hội.

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

Nhấp vào biểu tượng màu xanh lam để thêm một phần thông thường mới ở cuối trang.

• Phần: Thường xuyên

Tạo kiểu cho phần Kêu gọi Hành động

Mở chúng ra thông số phần bằng cách nhấp vào biểu tượng bánh răng của nó.

Tiểu sử

Di chuyển đến Nền và chọn tab Hình ảnh. Nhấp vào biểu tượng màu xám có nhãn Hình nền.

Chọn một hình ảnh toàn màn hình từ thư viện phương tiện của bạn. Chọn Sử dụng hiệu ứng thị sai, sau đó chọn CSS cho phương thức thị sai.

• Hình nền
• Sử dụng hiệu ứng thị sai: Có
• Phương pháp thị sai: CSS

Cuộn xuống Nhãn quản trị và nhập "Chân trang" vào trường. Điều này sẽ giúp bạn theo dõi các phần.

• Tag quản trị: Chân trang

Sau đó đi đến Tab phong cách.

• Ký quỹ nội bộ: 10vw (Trên và dưới)

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

Nhấp vào biểu tượng dấu cộng màu xanh lá cây và thêm một hàng vào một cột duy nhất cho nội dung của chúng tôi.

kích thước

Mở chúng ra thông số dòng và chuyển đến tab Kiểu.

• Chiều rộng tối đa: 320 pixel

Mô-đun văn bản tiêu đề

Phần Kêu gọi Hành động của chúng tôi được trình bày với một tiêu đề. Để tạo điều này, thêm một mô-đun văn bản tại dòng.

Tùy chỉnh văn bản tiêu đề

Thêm tiêu đề của bạn và thay đổi phông chữ thành Tiêu đề 3.

• Phông chữ: Tiêu đề 3
• Văn bản: Tất cả về Divi

Văn bản tiêu đề

Đi đến Tab phong cách và cuộn đến Văn bản phụ đề . Chọn trung tâm để căn chỉnh, chọn H3, chọn Cormorant Infant, đặt nó thành Bold và chọn màu trắng cho màu sắc.

• Căn chỉnh văn bản: Căn giữa
• Văn bản tiêu đề: H3
• Phông chữ tiêu đề: Trẻ sơ sinh bằng chim cốc
• Tiêu đề ánh sáng dịu: In đậm
• Màu văn bản tiêu đề: #ffffff

• Kích thước văn bản tiêu đề: 42 pixel cho máy tính để bàn, 20 pixel cho máy tính bảng, 16 pixel cho điện thoại
• Chiều cao dòng tiêu đề: 1,1 em

khoảng cách

Cuối cùng, cuộn xuống khoảng cách và thêm 10 pixel vào lề dưới cùng. Đóng cài đặt mô-đun.

• Lề dưới cùng: 10px

Mô-đun văn bản cho địa chỉ

Thêm một mô-đun Văn bản khác cho địa chỉ thực của bạn.

Tạo kiểu cho mô-đun Văn bản địa chỉ thực

Văn bản địa chỉ

Thêm địa chỉ của bạn dưới dạng văn bản đoạn văn.

• Phong cách: Đoạn văn
• Văn bản: địa chỉ của bạn

Đoạn văn bản

Sau đó, chuyển đến Văn bản trong Tab phong cách và chọn Cormorant Infant, bán đậm, và đặt nó thành màu trắng.

• Phông chữ: Trẻ sơ sinh bằng chim cốc
• Văn bản nhẹ nhàng: nửa đậm
• Màu văn bản Văn bản: #ffffff

• Văn bản Kích thước văn bản: 28px cho máy tính để bàn, 20px cho máy tính bảng, 16px cho điện thoại
• Chiều cao dòng văn bản: 1,2 em

Thêm mô-đun theo dõi chúng tôi trên mạng xã hội

Mô-đun cuối cùng của chúng tôi là mô-đun Theo dõi chúng tôi trên mạng xã hội . Thêm nó vào cuối dòng.

Tạo kiểu Theo dõi chúng tôi trên mô-đun truyền thông xã hội

Chúng tôi sẽ bắt đầu với Tab phong cách thời gian này. Chọn Center for Module Alignment và thay đổi màu biểu tượng thành # 442854.

• Căn chỉnh mô-đun: Trung tâm
• Màu biểu tượng: # 442854

Di chuyển đến Giápurê và thêm 23 pixel cho các góc tròn.

• Hình chữ nhật tròn: 32px

Thêm và tùy chỉnh các mạng xã hội của bạn

Bây giờ quay trở lại Tab nội dung và thêm bất kỳ mạng xã hội nào bạn muốn đưa vào. Nhấp vào biểu tượng dấu cộng màu xám.

Mở chúng ra cài đặt cho từng mạng xã hội của bạn , chọn mạng và thêm liên kết vào tài khoản của bạn. Đặt màu nền thành # f9f3fd. Đóng cài đặt mô-đun con.

• Mạng xã hội: sự lựa chọn của bạn
• URL liên kết tài khoản: liên kết của bạn
• Màu nền: # f9f3fd

Lưu trang blog và thoát khỏi trình tạo trực quan

Enfin, lưu trang ở góc dưới bên phải và chọn Thoát khỏi Visual Builder trên đầu của trang. Bạn đã sẵn sàng để xem tác phẩm của mình.

Xem trước trang blog

Đây là kết quả của chúng tôi.

Tải xuống DIVI ngay bây giờ !!!

Kết luận

Vì thế ! Đây là cái nhìn của chúng tôi về cách tạo một trang blog với Divi. 

Divi Builder giúp bạn dễ dàng tạo các bố cục thú vị và có nhiều cách để sử dụng từng mô-đun. Như hướng dẫn này đã khám phá, có thể sử dụng nhiều phiên bản của mô-đun Blog trên cùng một trang để hiển thị nguồn cấp dữ liệu blog theo những cách khác nhau.

Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, hãy tìm chúng tôi trong phần bình luận để thảo luận về nó.

Tuy nhiên, bạn cũng có thể tham khảo ý kiến tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.

Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.

...

Divi: Cách tạo menu bên trượt và đáp ứng

mệnh Gaetan Taffo | Divi, Hướng dẫn Divi

Bạn muốn tạo menu bên trượt và đáp ứng trong Divi?

Khi tạo một trang web, bạn thường băn khoăn không biết nên tạo loại tiêu đề nào. Được sử dụng nhiều nhất trên web là thanh menu ngang ở trên cùng, nhưng cũng có các tùy chọn khác, chẳng hạn như menu trượt. 

Menu trượt thường giúp bạn hạn chế không gian bị tiêu đề chung chiếm dụng. Vì vậy, bạn có thể để menu trượt xuất hiện khi khách truy cập nhấp vào biểu tượng bánh hamburger ở góc trên cùng bên phải. 

Do đó, việc sử dụng menu dạng trượt giúp bạn thêm tương tác vào trang web của mình.

Do đó, trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo một cái bằng cách sử dụng Trình tạo chủ đề của Divi.

Hãy bắt đầu nào!

khảo sát

Trước khi đi sâu vào hướng dẫn này, trước tiên chúng ta hãy xem kết quả mà chúng ta sẽ nhận được.

Đi tới Trình tạo chủ đề và tạo tiêu đề chung

Đi tới Trình tạo chủ đề

Để bắt đầu, hãy chuyển đến Trình tạo chủ đề từ menu Divi trong bảng điều khiển WordPress của bạn và nhấp vào “Thêm tiêu đề chung”.

Tạo tiêu đề chung

Tiếp tục bằng cách chọn 'Tạo tiêu đề chung'.

Tạo kiểu tiêu đề

Cài đặt phần

Màu nền

Khi ở trong trình chỉnh sửa mẫu, bạn sẽ thấy một phần. Mở phần này và làm cho màu nền trong suốt.

• Nền: rgba (255,255,255,0)

khoảng cách

Chuyển sang tab Kiểu và xóa tất cả các lề dưới cùng và trên cùng.

• Đỉnh lề bên trong: 0px
• Lề nội bộ dưới cùng: 0px

Poste

Tiếp theo, chúng tôi sẽ thay đổi vị trí của phần bằng cách chuyển đến tab nâng cao và thay đổi cài đặt vị trí.

• Chức vụ: Cố định
• Vị trí: Trung tâm hàng đầu

Thêm dòng đầu tiên

Cấu trúc của cột

Khi bạn đã hoàn tất cài đặt phần, hãy thêm một hàng mới bằng cách sử dụ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 và thay đổi cài đặt định cỡ như sau:

• Chiều rộng tối đa: 97%
• Chiều rộng tối đa: 100%

khoảng cách

Thay đổi cài đặt giãn cách.

• Ký quỹ nội bộ cao nhất: 1%
• Lề nội bộ dưới cùng: 0px

yếu tố chính

Tiếp theo, chuyển đến tab nâng cao và thêm hai dòng mã CSS vào phần tử hàng chính. Điều này sẽ giúp chúng tôi căn chỉnh theo chiều dọc nội dung cột trong hàng của chúng tôi.

display: flex;

align-items: center;

Thêm mô-đun Hình ảnh vào cột 1

Tải logo

Đã đến lúc thêm mô-đun, bắt đầu với mô-đun Hình ảnh trong cột 1. Tải lên biểu trưng của bạn.

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

Thêm 3 khoảng trắng vào khu vực nội dung

<spanclass="line line-1"></span>

<spanclass="line line-2"></span>

<spanclass="line line-3"></span>

Màu nền

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

• Nền: rgba (0,0,0,0.04)

Cài đặt văn bản

Tiếp theo, chuyển sang tab Style và loại bỏ chiều cao dòng văn bản. Điều này sẽ giúp chúng tôi có toàn quyền kiểm soát các phạm vi mà chúng tôi đã thêm.

• Chiều cao dòng văn bản: 0em

kích thước

Chúng tôi sẽ sửa đổi các thông số định cỡ mô-đun.

• Chiều rộng tối đa: 120 pixel
• Căn chỉnh văn bản: phải

khoảng cách

Và chúng tôi sẽ hoàn thành các tham số của mô-đun bằng cách biến mô-đun thành một hình vuông. Đối với điều này, chúng tôi sẽ sử dụng các giá trị đệm tùy chỉnh trong cài đặt khoảng cách.

• Đỉnh lề bên trong: 40px
• Lề nội bộ dưới cùng: 60px
• Lề bên trong bên trái: 40px
• Lề trong bên phải: 40px

Thêm dòng thứ hai

Cấu trúc của cột

Hàng tiếp theo! Chúng tôi sẽ sử dụng dòng này để thiết kế toàn bộ menu trượt của chúng tôi. Sử dụng cấu trúc cột sau:

Màu nền

Không cần thêm mô-đun, hãy mở cài đặt hàng và thay đổi màu nền như sau:

• Nền: # e7e0e2

Hình nền

Chúng tôi cũng sử dụng một hình nền có hoa văn. Bạn có thể sử dụng một mẫu nền mà bạn chọn.

• Kích thước hình nền: kích thước thực tế
• Vị trí hình nền: trung tâm
• Lặp lại hình nền: Lặp lại

kích thước

Tiếp theo, chuyển sang tab Kiểu và thay đổi cài đặt kích thước cho phù hợp:

• Sử dụng chiều rộng máng xối tùy chỉnh: Có
• Khoảng cách cột: 1
• Chiều rộng tối đa: 20% (máy tính để bàn), 40% (máy tính bảng), 60% (điện thoại)
• Chiều cao: 100vh

khoảng cách

Đồng thời thay đổi cài đặt giãn cách trên các kích thước màn hình khác nhau.

• Lợi nhuận nội bộ của hội nghị thượng đỉnh: 10 vw (máy tính để bàn), 30 vw (máy tính bảng), 40 vw (điện thoại)

Biên giới

Và hoàn thành các thông số đường bằng cách thêm một đường viền bên trái.

• Chiều rộng đường viền bên trái: 10px
• Màu viền trái: # 24394a
• Kiểu viền trái: Đôi

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

Thêm nội dung

Đã đến lúc thêm mục menu Mô-đun Văn bản đầu tiên! Thêm bản sao vào vùng nội dung.

Thêm một liên kết

Tiếp tục bằng cách thêm một liên kết có liên quan vào mục menu.

• URL liên kết mô-đun: #

Màu nền

Sau đó, thay đổi màu nền.

• Nền: rgba (216,210,212,0.35)

Cài đặt văn bản

Tiếp theo, chuyển sang tab Style'3 và thay đổi cài đặt văn bản như sau:

• Phông chữ văn bản: Domine
• Văn bản nhẹ nhàng: Văn bản in đậm
• Văn bản Màu Văn bản: # 000000
• Văn bản Kích thước văn bản: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
• Căn chỉnh văn bản: Căn giữa

khoảng cách

Hoàn thành cài đặt mô-đun bằng cách thêm các giá trị khoảng cách tùy chỉnh trên các kích thước màn hình khác nhau.

• Biên dưới cùng: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
• Lợi nhuận nội bộ cao nhất: 1vw
• Lề nội bộ dưới cùng: 1vw

Sao chép mô-đun văn bản (1 mô-đun cho mỗi mục menu)

Khi bạn đã hoàn thành mô-đun văn bản mục menu đầu tiên, bạn có thể sao chép nó nhiều lần nếu cần. Chỉ cần đảm bảo rằng các mô-đun của bạn không vượt quá chiều cao của cửa sổ.

Chỉnh sửa nội dung mô-đun Văn bản trùng lặp và liên kết

Chỉnh sửa nội dung và liên kết của từng mô-đun Văn bản trùng lặp.

Thêm mô-đun nút vào cột

Thêm một bản sao

Mô-đun cuối cùng chúng ta cần trong hàng này là mô-đun Nút. Thêm một bản sao của sự lựa chọn của bạn.

Thêm một liên kết

Cũng thêm một liên kết.

• URL liên kết nút: #

sự liên kết

Chuyển sang tab Kiểu và thay đổi căn chỉnh nút.

• Căn chỉnh nút: căn giữa

Cài đặt nút

Tiếp tục bằng cách tùy chỉnh mô-đun Nút như sau:

• Sử dụng các kiểu tùy chỉnh cho nút: Có
• Kích thước văn bản nút: 0,7 vw (máy tính để bàn), 1,5 vw (máy tính bảng), 2,5 vw (điện thoại)
• Màu văn bản của nút: # 000000
• Nút nền: rgba (0,0,0,0)
• Màu viền nút: # 24394a
• Nút Border Radius: 0 pixel
• Khoảng cách chữ cái nút: 4px

• Nút Phông chữ: Mở Không có
• Nút Soft Light: Chữ in đậm
• Sao chép nút kiểu: TT

khoảng cách

Và hoàn thành cài đặt mô-đun bằng cách thêm các giá trị khoảng cách tùy chỉnh trên các kích thước màn hình khác nhau.

• Lợi nhuận trên cùng: 5vw
• Lề nội bộ cao nhất: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
• Lề bên trong đáy: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
• Lề bên trong bên trái: 1,8 vw (máy tính để bàn), 3 vw (máy tính bảng), 4 vw (điện thoại)
• Lề trong bên phải: 1,8 vw (máy tính để bàn), 3 vw (máy tính bảng), 4 vw (điện thoại)

Thêm chức năng trượt

Thêm CSS ID vào mô-đun văn bản biểu tượng menu

Bây giờ chúng ta đã có tất cả các yếu tố, đã đến lúc tạo hiệu ứng menu trượt đáp ứng! Đầu tiên, mở mô-đun Văn bản (chứa phạm vi) trong cột thứ ba của hàng đầu tiên của bạn và sử dụng ID CSS tùy chỉnh trong tab nâng cao. Chúng tôi sẽ sử dụng CSS ID này để tạo một hàm nhấp chuột trong mã của chúng tôi.

• ID CSS: slide-in-open

Thêm lớp CSS vào dòng số 2

Sau đó, mở dòng thứ hai, chuyển đến tab nâng cao và thêm một lớp CSS tùy chỉnh. Khi nhấp vào, dòng sẽ trượt.

• Lớp CSS: slide-in-menu-container

Thay đổi vị trí của dòng số 2

Chúng tôi cũng sẽ đặt lại vị trí dòng này. Lưu ý cách độ lệch ngang khớp với chiều rộng dòng trên các kích thước màn hình khác nhau trong cài đặt định cỡ.

• Chức vụ: Tuyệt đối
• Vị trí: Trên cùng bên phải
• Độ lệch ngang: -20% (máy tính để bàn), -40% (máy tính bảng), -60% (điện thoại)

Thay đổi độ mờ của dòng 2

Và đưa độ mờ về 0 ở trạng thái mặc định.

opacity: 0;

Thêm mô-đun Mã vào cột thứ hai của hàng đầu tiên

Chèn mã CSS

Để tạo hiệu ứng hàm nhấp chuột và tạo kiểu cho biểu tượng bánh hamburger, chúng tôi sẽ cần một số mã CSS. Thêm mô-đun mã vào cột thứ hai của hàng đầu tiên của bạn và đặt các dòng mã CSS sau giữa các thẻ kiểu, như bạn có thể thấy trong màn hình in bên dưới:

#slide-in-open{

cursor: pointer;

}

.line{

display: block;

position: absolute;

height: 4px;

width: 100%;

background: #24394A;

border-radius: 9px;

opacity: 1;

-webkit-transition: .1s ease-in-out;

-moz-transition: .1s ease-in-out;

-o-transition: .1s ease-in-out;

transition: .1s ease-in-out;

}

.line-2{

top: 10px;

}

.line-3{

top: 20px;

}

#slide-in-open.open .line-1{

top: 10px;

-webkit-transform: rotate(135deg);

-moz-transform: rotate(135deg);

-o-transform: rotate(135deg);

transform: rotate(135deg);

}

#slide-in-open.open .line-2{

display: none;

}

#slide-in-open.open .line-3{

top: 10px;

-webkit-transform: rotate(-135deg);

-moz-transform: rotate(-135deg);

-o-transform: rotate(-135deg);

transform: rotate(-135deg);

}

.slide-in-menu {

right: 0!important;

opacity: 1!important;

}

.slide-in-menu-container {

-webkit-transition: all0.5s ease !important;

-moz-transition: all0.5s ease !important;

-o-transition: all0.5s ease !important;

-ms-transition: all0.5s ease !important;

transition: all0.5s ease !important;

}

Chèn mã JQuery

Chúng tôi cũng sẽ cần thêm một số JQuery cho chức năng nhấp chuột. Hãy chắc chắn rằng bạn đặt mã giữa các thẻ tập lệnh , như bạn có thể thấy trong màn hình in bên dưới:

jQuery (function ($) {$ ('# slide-in-open'). click (function () {$ (this) .toggleClass ('open'); $ ('. slide-in-menu-container') .toggleClass ('slide-in-menu');});});

Lưu các thay đổi của trình tạo chủ đề và hiển thị kết quả trên trang web

Khi bạn đã hoàn thành tất cả các yếu tố của tiêu đề chung, tất cả những gì bạn phải làm là lưu tất cả các thay đổi và hiển thị kết quả trên trang web của bạn!

khảo sát

Bây giờ chúng ta đã đi qua tất cả các bước, chúng ta hãy xem lại kết quả lần cuối.

Kết luận

Kết luận, trong bài viết này, chúng tôi đã hướng dẫn bạn cách sử dụng trình tạo chủ đề của Divi để tạo menu trượt đáp ứng. Đối với điều này, chúng tôi đã kết hợp các yếu tố và tùy chọn tốt nhất được tích hợp sẵn của Divi với mã chức năng nhấp tùy chỉnh. Vì vậy, nó cho phép bạn tập trung vào việc thiết kế menu trượt ra và để mã quản lý phần chức năng của tiêu đề chung! 

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.

Divi: Cách thêm biểu mẫu liên hệ vào tiêu đề chung

mệnh Gaetan Taffo | Divi, Hướng dẫn Divi

Cần thêm biểu mẫu liên hệ vào tiêu đề chung?

Khi bạn tạo tiêu đề tùy chỉnh cho trang web của mình bằng Trình tạo chủ đề của Divi, bạn thấy mình đang tìm cách hoàn hảo để thêm CTA (Kêu gọi hành động). Một cách để làm điều này là thêm một biểu mẫu liên hệ thả xuống. 

Điều này sẽ giúp giữ cho giao diện tổng thể của tiêu đề của bạn sạch sẽ trong khi cung cấp khả năng liên lạc mà không cần cuộn. 

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo biểu mẫu liên hệ thả xuống bằng Divi và một số mã JQuery & CSS.

Hãy bắt đầu nào!

khảo sát

Trước khi đi sâu vào hướng dẫn này, chúng ta hãy xem bản xem trước kết quả mà chúng ta sẽ nhận được.

Tạo một tiêu đề toàn cầu

Đi tới Trình tạo chủ đề

Đi tới Trình tạo chủ đề từ menu Divi có trong trang tổng quan WordPress của bạn và nhấp vào "Thêm tiêu đề chung".

Chọn 'Tạo tiêu đề chung'.

Tạo kiểu tiêu đề

Cài đặt phần

Màu nền

Khi ở trong trình chỉnh sửa mẫu, bạn sẽ thấy một phần. Mở phần này và thay đổi màu nền.

• Nền: #FFFFFF

khoảng cách

Sau đó, xóa Lề trong trên và Dưới cùng mặc định khỏi phần.

• Đỉnh lề bên trong: 0px
• Lề nội bộ dưới cùng: 0px

Hộp bóng

Cũng áp dụng một bóng hộp tinh tế.

• Box Shadow Blue Cường độ: 50px
• Màu phông chữ phụ đề: rgba (0,0,0,0.15)

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

Cấu trúc của cột

Thêm một hàng mới vào phần bằng cách sử dụng cấu trúc cột sau:

kích thước

Không thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng và thay đổi cài đặt định cỡ như sau:

• Sử dụng chiều rộng máng xối tùy chỉnh: Có
• Khoảng cách cột: 1
• Hài hòa chiều cao cột: Có
• Chiều rộng tối đa: 95%
• Chiều rộng tối đa: 100%

khoảng cách

Sau đó thêm phần đệm trên và dưới tùy chỉnh.

• Lợi nhuận nội bộ cao nhất: 1vw
• Lề nội bộ dưới cùng: 1vw

yếu tố chính

Căn chỉnh tất cả nội dung cột bằng cách thêm một dòng mã CSS vào phần tử hàng chính.

align-items: center;

Chỉ số Z của cột 2

Chúng tôi cũng đảm bảo cột thứ hai có giá trị z-index cao hơn cho thiết kế đáp ứng.

• Chỉ số Z: 12

Thêm mô-đun hình ảnh vào cột 1

Tải logo

Đã đến lúc bắt đầu thêm các mô-đun! Bắt đầu với mô-đun Hình ảnh trong cột 1. Tải lên biểu trưng.

sự liên kết

Sau đó, thay đổi căn chỉnh của mô-đun.

• Căn chỉnh hình ảnh: Căn giữa

kích thước

Cũng thay đổi chiều rộng.

• Chiều rộng tối đa: 3vw (máy tính để bàn), 5vw (máy tính bảng), 7vw (điện thoại)

Thêm mô-đun Menu vào cột 2

Chọn Menu

Trong cột thứ hai, chúng tôi sẽ thêm một mô-đun Menu.

Bố trí

Chuyển sang tab Kiểu mô-đun và thay đổi kiểu bố cục.

• Phong cách: Căn giữa

Cài đặt văn bản menu

Sau đó thay đổi cài đặt văn bản trong menu mô-đun.

• Menu Phông chữ: Mở Không có
• Menu ánh sáng mờ: nửa đậm
• Màu văn bản menu: # 000000
• Kích thước văn bản menu: 0,8 vw (máy tính để bàn), 2 vw (máy tính bảng), 3 vw (điện thoại)
• Khoảng cách giữa các chữ cái trong menu: 1px

Cài đặt văn bản menu thả xuống

Tiếp theo, thay đổi màu đường kẻ từ menu thả xuống.

• Màu dòng menu thả xuống: # 007dff

biểu tượng

Thay đổi màu biểu tượng menu bánh hamburger.

• Màu biểu tượng menu bánh hamburger: # 007dff

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

Thêm thông điệp

Chuyển sang mô-đun thứ ba! Thêm mô-đun Văn bản với tin nhắn bạn chọn.

Màu nền

Thêm màu nền.

• Màu nền: # 007dff

Cài đặt văn bản

Chuyển sang tab thiết kế mô-đun và thay đổi cài đặt văn bản cho phù hợp:

• Phông chữ văn bản: Mở Sans
• Văn bản nhẹ nhàng: In đậm
• Màu văn bản Văn bản: #ffffff
• Văn bản Kích thước văn bản: 0,8 vw (máy tính để bàn), 2 vw (máy tính bảng), 3 vw (điện thoại)
• Căn chỉnh văn bản: Căn giữa

kích thước

Sau đó sửa đổi các tham số kích thước mô-đun.

• Chiều rộng tối đa: 33%
• Căn chỉnh mô-đun: Trung tâm

khoảng cách

Tiếp theo, thêm đệm trên và dưới tùy chỉnh.

• Lề nội bộ cao nhất: 0,8 vw (máy tính để bàn), 2 vw (máy tính bảng và điện thoại)
• Ký quỹ nội bộ thấp: 0,8 vw (máy tính để bàn), 2 vw (máy tính bảng và điện thoại)

Biên giới

Và hoàn thành các tham số mô-đun bằng cách thêm một bán kính đường viền.

• Hình chữ nhật tròn: 100px

Thêm một mô-đun Văn bản khác vào cột 3

Thêm một biểu tượng cho khu vực nội dung

Hãy chuyển sang mô-đun tiếp theo, là một mô-đun văn bản khác. Thêm biểu tượng mũi tên sau vào vùng nội dung: '▼'.

Cài đặt văn bản

Chuyển sang tab thiết kế mô-đun và thay đổi cài đặt văn bản cho phù hợp:

• Phông chữ văn bản: Mở Sans
• Màu văn bản: # 007fff
• Văn bản Kích thước văn bản: 3vw
• Chiều cao dòng văn bản: 0em
• Căn chỉnh văn bản: Căn giữa

Chỉ số Z

Hãy cũng tăng chỉ số z của mô-đun.

• Chỉ số Z: 11

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

Thêm các trường có chiều rộng đầy đủ mà bạn chọn

Mô-đun tiếp theo và cuối cùng chúng ta cần trong cột thứ ba là mô-đun biểu mẫu liên hệ. Thêm bất kỳ trường chiều rộng đầy đủ nào bạn cần.

Thêm một tiêu đề

Cũng sử dụng một tiêu đề.

Màu nền

Tiếp theo, hãy thay đổi màu nền.

• Màu nền: # e7f2ff

Cài đặt trường

Hãy chuyển đến tab Kiểu của mô-đun và thay đổi cài đặt trường.

• Các trường Màu nền: #ffffff
• Màu văn bản trường: #dddddd
• Màu văn bản tiêu điểm: # 007dff
• Trường đệm Vertex: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
• Trường đệm dưới cùng: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
• Trường Phông chữ: Mở Không có

• Trường Kích thước văn bản: 0,7 vw (máy tính để bàn), 1,8 vw (máy tính bảng), 3 vw (điện thoại)

Cài đặt văn bản tiêu đề

Chỉnh sửa cài đặt văn bản tiêu đề.

• Chèn tiêu đề ba: H3
• Tiêu đề ánh sáng dịu: Văn bản in đậm
• Căn chỉnh văn bản: căn giữa
• Màu văn bản tiêu đề: # 007dff
• Tiêu đề Kích thước văn bản: 1 vw (máy tính để bàn), 2,5 vw (máy tính bảng), 3,5 vw (điện thoại)
• Chiều cao dòng tiêu đề: 1,6 em

Cài đặt văn bản Captcha

Với cài đặt văn bản captcha.

• Phông chữ Captcha: Mở Sans
• Màu văn bản Captcha: # 007dff

Cài đặt nút

Tiếp tục bằng cách tùy chỉnh nút.

• Sử dụng các kiểu tùy chỉnh cho Nút: Có
• Kích thước văn bản nút: 0,8 vw (máy tính để bàn), 2 vw (máy tính bảng), 3 vw (điện thoại)
• Màu văn bản của nút: #ffffff
• Nút Backgound: # 007dff
• Nút chiều rộng đường viền: 0 pixel
• Bán kính đường viền nút: 100 px

• Nút Phông chữ: Mở Không có
• Nút Soft Light: Chữ in đậm

• Lề nút: 1vw
• Nút đệm trên cùng: 1vw (máy tính để bàn), 2vw (máy tính bảng và điện thoại)
• Nút đệm dưới cùng: 1vw (máy tính để bàn), 2vw (máy tính bảng và điện thoại)
• Nút bàn phím trái: 2vw (máy tính để bàn), 7vw (máy tính bảng và điện thoại)
• Nút bàn phím phải: 2vw (máy tính để bàn), 7vw (máy tính bảng và điện thoại)

khoảng cách

Sử dụng các giá trị đệm tùy chỉnh trên các kích thước màn hình khác nhau.

• Khoảng không bên trong cao nhất: 4vw (máy tính để bàn), 6vw (máy tính bảng và điện thoại)
• Biên lợi nhuận nội bộ dưới cùng: 4vw (máy tính để bàn), 6vw (máy tính bảng và điện thoại)
• Lề trong bên trái: 2vw (máy tính để bàn), 6vw (máy tính bảng và điện thoại)
• Lề nội bộ bên phải: 2vw (máy tính để bàn), 6vw (máy tính bảng và điện thoại)

Biên giới

Sau đó, thay đổi cài đặt đường viền.

• Nhập hình chữ nhật tròn: 10px

Thành phần chính, Tiêu đề liên hệ và CSS Captcha

Hoàn thành cài đặt mô-đun bằng cách thêm một số thay đổi CSS nhỏ vào tab nâng cao.

Yếu tố chính:

Thông tin liên lạc:

Mã ngẫu nhiên:

Tùy chỉnh các phần tử để tạo biểu mẫu liên hệ chỉ bằng một cú nhấp chuột

Thêm chiều cao của cột 3

Khi bạn đã có tất cả các mô-đun tại chỗ, đã đến lúc tạo hiệu ứng. Bước đầu tiên để có được kết quả mong muốn là mở cài đặt 3 cột và thêm chiều cao đáp ứng tùy chỉnh trong tab nâng cao.

Bàn làm việc :

máy tính bảng:

Gọi:

Thêm một lớp CSS vào nút và mũi tên

Tiếp theo, chúng ta sẽ thêm cùng một lớp CSS vào hai mô-đun văn bản đầu tiên trong cột 3.

• Lớp CSS: show-contact

Thêm một lớp CSS vào biểu mẫu liên hệ

Chúng tôi cũng sẽ cần một lớp CSS tùy chỉnh cho mô-đun biểu mẫu liên hệ.

• Lớp CSS: contact-form-module

Ẩn mô-đun biểu mẫu liên hệ

Tiếp tục bằng cách thêm một dòng mã CSS bổ sung vào phần tử chính của mô-đun biểu mẫu liên hệ. Điều này sẽ cho phép chúng tôi ẩn mô-đun trước khi nhấp vào.

Thêm mô-đun mã vào cột 3 bằng mã JQuery và CSS

Và để tạo hàm nhấp chuột, chúng ta sẽ cần mã JQuery. Chúng tôi cũng sẽ sử dụng mã CSS tùy chỉnh. Thêm mô-đun mã mới vào cột 2 với mã. Đảm bảo đặt mã JQuery giữa các thẻ script và mã CSS giữa các thẻ kiểu.

jQuery(function($){

$(".show-contact").click(function() {

$('.contact-form-module').slideToggle();

});

});

.show-contact {

cursor: pointer;

}

.et-menu>li {

padding-left: 0.7vw !important;

padding-right: 0.7vw !important;

}

khảo sát

Bây giờ chúng ta đã đi qua tất cả các bước, chúng ta hãy xem lại kết quả lần cuối.

Kết luận

Trong bài viết này, chúng tôi đã hướng dẫn bạn cách thêm biểu mẫu liên hệ thả xuống vào tiêu đề tùy chỉnh của bạn.

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.

Divi: Cách tạo tiêu đề chung với mô-đun Menu Toàn màn hình

mệnh Gaetan Taffo | Divi, Hướng dẫn Divi

Bạn có muốn tạo tiêu đề chung bằng mô-đun Menu Toàn màn hình trong Divi không?

Tiêu đề là một trong những yếu tố quan trọng nhất của bất kỳ trang web nào và là trung tâm của trải nghiệm người dùng. Menu điều hướng cung cấp cho người dùng của bạn ý tưởng về những gì họ có thể mong đợi tìm thấy trên trang web của bạn và giúp họ định vị thông tin họ cần. 

Ngoài ra, thanh menu phụ có thể là không gian tuyệt vời để làm nổi bật lời kêu gọi hành động hoặc quảng cáo ưu đãi. Chưa kể rằng tiêu đề là một trong những phần quan trọng nhất của trang web của bạn vì nó thường xuất hiện trên mọi trang. Đây là cơ hội tuyệt vời để giới thiệu thương hiệu của bạn và tạo tiêu đề nhất quán với thiết kế của phần còn lại trên trang web của bạn.

Các tùy chọn Trình tạo chủ đề của Divi cho phép bạn tạo tiêu đề chung tùy chỉnh và tùy chỉnh giao diện của mô-đun tiêu đề và menu trên toàn bộ trang web của bạn. 

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo tiêu đề chung bằng cách sử dụng mô-đun menu toàn màn hình của Divi.

Hãy bắt đầu!

khảo sát

Đây là bản xem trước của tiêu đề chung mà chúng tôi sẽ thiết kế.

Mở trình tạo chủ đề

Vì chúng tôi đang xây dựng tiêu đề chung trong ví dụ này, hãy điều hướng đến "Trình tạo chủ đề", bạn có thể tìm thấy phần này trong menu Divi của WordPress. Chọn Thêm tiêu đề chung, sau đó chọn Tạo tiêu đề chung.

Tạo thanh menu phụ

Khi bạn lần đầu tiên mở bố cục tiêu đề chung, nó được tải sẵn một phần thông thường. Chúng tôi sẽ sửa đổi đây thành thanh menu phụ của chúng tôi, sẽ nằm phía trên menu toàn chiều rộng của chúng tôi và bao gồm văn bản gọi hành động và một nút.
Đầu tiên, mở cài đặt phần và thêm màu nền.

• Nền: # 92A8A1

Tiếp theo, phần lề.

• Đỉnh lề bên trong: 0px
• Lề nội bộ dưới cùng: 0px

Bây giờ hãy chèn một hàng. Đối với ví dụ này, chúng tôi sẽ sử dụng bố cục được hiển thị bên dưới.

Trong cài đặt hàng, dưới Định cỡ của tab Kiểu, hãy điều chỉnh độ cao của cột.

• Hài hòa độ cao của cột: CÓ

Tiếp theo, đặt lề Trên và dưới như sau:

• Lề bên trong trên cùng: 5px
• Lề bên trong dưới cùng: 5px

Vì chúng tôi muốn các phần tử tiêu đề phụ được căn chỉnh theo chiều dọc, chúng tôi sẽ thêm một số CSS tùy chỉnh vào phần tử hàng chính.

1. align-items:center;

Bây giờ dòng của chúng tôi đã được thiết lập, chúng tôi có thể chèn các mô-đun cho nội dung của chúng tôi. Đầu tiên hãy chèn một mô-đun văn bản ở phía bên trái.

Chỉnh sửa nội dung văn bản. Đây là nơi hoàn hảo để bao gồm Kêu gọi hành động hoặc quảng cáo ưu đãi.

• Văn bản: "Tham gia danh sách gửi thư của chúng tôi để nhận được giảm giá 10% cho đơn hàng của bạn!" »

Truy cập tab Kiểu của mô-đun Văn bản và sửa đổi các tham số như sau:

• Phông chữ “Văn bản”: Poppins
• “Văn bản” Dim Light: Trung bình
• Màu văn bản "Text": #FFFFFF

Tiếp theo, thêm mô-đun Nút ở bên phải.

Thêm văn bản nút.

• Văn bản: "Nhận báo giá miễn phí"

Trong tab Kiểu, căn chỉnh nút ở giữa.

• Căn chỉnh nút: Trung tâm

Bây giờ chúng ta hãy tùy chỉnh sự xuất hiện của nút.

• Sử dụng kiểu tùy chỉnh cho "Nút": Có
• Kích thước văn bản nút: 14px
• Màu văn bản của nút: #FFFFFF
• Nút nền: # 2F5349

• Chiều rộng đường viền nút: 0px
• Nút bán kính đường viền: 50px
• Khoảng cách chữ cái nút: 1px
• Phông chữ nút: Poppins

Thêm mô-đun Menu Toàn màn hình

Bây giờ menu phụ đã được thiết kế, chúng ta có thể chuyển sang menu chính. Chúng tôi sẽ xây dựng menu bằng cách sử dụng mô-đun Menu Toàn màn hình. Thêm phần Toàn màn hình mới vào tiêu đề chung.

Chọn và chèn mô-đun Menu Toàn màn hình

Tiếp theo, chúng tôi sẽ tùy chỉnh cài đặt Menu Toàn màn hình.

• Màu liên kết hoạt động: # 2F5349
• Menu phông chữ: Poppins
• Menu Dim Light: Semi Bold
• Sao chép menu kiểu: TT
• Màu văn bản menu: # 000000

• Màu văn bản của Menu Di chuột: # 2F5349
• Kích thước văn bản trên menu: 15px
• Khoảng cách giữa các chữ cái trong menu: 2px

Thay đổi màu biểu tượng menu bánh hamburger thành màu đen.

• Màu biểu tượng menu bánh hamburger: # 000000

Trước khi thêm logo vào menu, hãy thay đổi các tùy chọn định cỡ. Chúng tôi sẽ sử dụng các tùy chọn đáp ứng tích hợp của Divi để đặt chiều cao tối đa khác cho PC và thiết bị di động.

• Chiều cao logo tối đa trên PC: 3vw

• Chiều cao logo tối đa trên thiết bị di động: 6vw

Bây giờ, hãy thêm logo của bạn vào Menu Toàn màn hình.

Cuối cùng, chúng tôi muốn menu chính vẫn ở đầu màn hình khi người dùng cuộn qua trang web, vì vậy chúng tôi sẽ sử dụng cài đặt dính dính tích hợp của Divi cho việc này.

• Vị trí cố định: Dán trên đầu

Với điều đó, thiết kế tiêu đề toàn cầu của chúng tôi đã hoàn thành.

Tạo một trang mới với bố cục được xác định trước

Để xem trình đơn và tiêu đề có chiều rộng đầy đủ đang hoạt động, hãy tạo một trang mới với bố cục được xác định trước từ thư viện Divi. Đối với ví dụ này, chúng tôi sẽ sử dụng Trang chủ Sàn từ gói cách bố trí tầng.

Thêm một trang mới vào trang web của bạn và đặt tiêu đề cho nó, sau đó chọn tùy chọn Use Divi Builder.

Chúng tôi đang sử dụng bố cục tạo sẵn từ Thư viện Divi cho ví dụ này, vì vậy hãy chọn Chọn bố cục.

Tìm và chọn bố cục “Trang chủ Sàn”.

Chọn "Chọn bố cục" để thêm bố cục vào trang của bạn.

Bây giờ thiết kế đã hoàn thành!

Kết quả cuối cùng

Kết luận

Như chúng tôi đã nói ở trên, tiêu đề và menu điều hướng là trọng tâm của trải nghiệm người dùng trên trang web của bạn. Bây giờ bạn đã thấy việc thiết kế một tiêu đề tổng thể tuyệt đẹp dễ dàng như thế nào với mô-đun "Menu Toàn màn hình" của Divi. 

May mắn thay, trình tạo chủ đề của Divi cho phép bạn kiểm soát mọi khía cạnh của menu và tiêu đề trang web của bạn, đồng thời bạn có thể tạo các thiết kế hoàn toàn tùy chỉnh và độc đáo chỉ với một vài cú nhấp chuột.

Bạn đã sử dụng các tùy chọn tiêu đề chung của Divi để tùy chỉnh tiêu đề và menu điều hướng của mình chưa? Hãy cho chúng tôi biết suy nghĩ của bạn trong các bình luận!