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

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

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 với mô-đun Divi Blog

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
tạo một trang blog với mô-đun Divi Blog

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
tạo một trang blog với mô-đun Divi Blog

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.

tạo một trang blog với mô-đun Divi Blog

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
tạo một trang blog với mô-đun Divi Blog

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ạo một trang blog với mô-đun Divi Blog

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

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

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.

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

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)
tạo menu bên trượt và đáp ứng trong Divi

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
tạo menu bên trượt và đáp ứng trong Divi

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)
tạo menu bên trượt và đáp ứng trong Divi

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

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

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.

thêm biểu mẫu liên hệ vào tiêu đề chung trong divi

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 biểu mẫu liên hệ vào tiêu đề chung trong divi

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
thêm biểu mẫu liên hệ vào tiêu đề chung

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
thêm biểu mẫu liên hệ vào tiêu đề chung

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
thêm biểu mẫu liên hệ vào tiêu đề chung

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)
thêm biểu mẫu liên hệ vào tiêu đề chung

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: '▼'.

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

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
thêm biểu mẫu liên hệ vào tiêu đề chung

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:

01border-radius: 20px;

Thông tin liên lạc:

01margin-bottom: 1vw;

Mã ngẫu nhiên:

01margin-top: 1.5vw;

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 :

01height: 3vw;

máy tính bảng:

01height: 5vw;

Gọi:

01height: 6vw;

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.

01display: none;

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.

thêm biểu mẫu liên hệ vào tiêu đề chung trong divi

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 hiển thị đoạn trích bài viết khi di chuột

Divi: Cách hiển thị đoạn trích bài viết khi di chuột

Bạn muốn biết cách hiển thị đoạn trích bài viết khi di chuột trong Divi?

Xem trước các đoạn trích của bài đăng trên blog khi di chuột có thể là một cách hiệu quả để giữ bố cục lưới nhỏ gọn cho các bài đăng trên blog của bạn mà không phải bỏ hoàn toàn các đoạn đó. 

Vì vậy, ý tưởng ban đầu là ẩn các đoạn mã và sau đó hiển thị chúng khi bạn di chuột qua một bài đăng trong lưới. Do đó, nó cho phép người đọc xem nhiều bài đăng hơn đồng thời cung cấp cho họ khả năng xem các đoạn trích của bài đăng mà họ quan tâm.

Vì vậy, trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo đoạn trích bài đăng blog này bằng hiệu ứng chuyển đổi khi di chuột trong Divi. 

Hãy bắt đầu!

khảo sát

Đầu tiên, đây là tổng quan về những gì chúng tôi sẽ tạo trong hướng dẫn này.

hiển thị đoạn trích của các bài báo khi di chuột trong Divi

Tạo bố cục mô-đun blog

Đầu tiên, chúng ta cần tạo một bố cục cơ bản cho các bài đăng trên blog của mình. Đối với hướng dẫn này, chúng tôi sẽ thêm một hàng vào một cột và chèn một mô-đun Blog vào đó.

Tạo một dòng

Để bắt đầu, hãy chèn một hàng một cột vào phần

chiều rộng dòng

Sau đó vào cài đặt dòng. sau đó, trong tab Kiểu, bên dưới Định cỡ, sửa đổi độ rộng như sau:

  • Chiều rộng tối đa: 90%
  • Chiều rộng tối đa: 1200px
hiển thị đoạn trích của các bài báo khi di chuột trong Divi

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

Sau đó, chèn một mô-đun Blog vào cột của dòng đã tạo trước đó.

Cài đặt mô-đun blog

Sau đó, đi tới cài đặt mô-đun Blog, trong tab Nội dung, bên dưới Phần tử, đặt thành "Có", tùy chọn "Hiển thị nút Đọc thêm"

Bây giờ, hãy chuyển đến tab Kiểu, trong Mẫu, chọn mẫu “Lưới” làm bố cục cho blog.

Cuối cùng, chuyển đến tab Nâng cao và thêm lớp CSS sau: 

Lớp CSS: chuyển đổi-blog-đoạn trích

Sau đó, chúng tôi sẽ sử dụng lớp này làm bộ chọn cho mã CSS tùy chỉnh của chúng tôi trong bước tiếp theo.

Thêm CSS tùy chỉnh với mô-đun Mã.

Tại thời điểm này, các bài đăng trên blog của chúng tôi được bố trí dưới dạng lưới và một lớp CSS tùy chỉnh đã được thêm vào menu Blog. Vì vậy, chúng tôi sẽ sử dụng bộ chọn lớp CSS này để nhắm mục tiêu cụ thể mô-đun Blog này và thêm hiệu ứng chuyển đổi khi di chuột qua một bài viết.

Để thêm CSS, chúng tôi sẽ sử dụng mô-đun Mã. Để thực hiện việc này, hãy thêm mô-đun Mã bên dưới mô-đun Blog.

Tiếp theo, dán CSS tùy chỉnh bên dưới cần thiết để tạo hiệu ứng chuyển đổi đoạn mã bài viết khi di chuột. Trên hết, hãy đảm bảo dán mã CSS giữa các thẻ kiểu cần thiết.

  1. @media all and (min-width981px) {
  2.   /* add transition for post content*/
  3.   .toggle-blog-excerpt .et_pb_post .post-content {
  4.     -webkit-transitionall 500ms !important;
  5.     transitionall 500ms !important;
  6.   }
  7.   /* keep post content visible in visual builder */
  8.   body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
  9.     visibility:visible;
  10.     opacity1;
  11.     max-height:none;
  12.   }
  13.   /* hide post content */
  14.   .toggle-blog-excerpt .et_pb_post .post-content {
  15.     visibilityhidden;
  16.     opacity0;
  17.     max-height:0px;
  18.   }
  19.   /* show post content when hovering over post item */
  20.   .toggle-blog-excerpt .et_pb_post:hover .post-content {
  21.     visibilityvisible;
  22.     opacity:1;
  23.     max-height500px;
  24.   }
  25.   /* set min-height for all post items */
  26.   .toggle-blog-excerpt .et_pb_post {
  27.     min-height400px
  28.   }
  29. }

Hãy xem kết quả thu được cho đến nay.

Kết quả

Hãy thêm một số kiểu bổ sung vào mô-đun Blog với trình tạo Divi

Giờ đây, CSS đã sẵn sàng để cung cấp cho chúng tôi hiệu ứng chuyển đổi cho các đoạn trích bài đăng trên blog của chúng tôi, sau đó chúng tôi có thể thêm bất kỳ kiểu bổ sung nào vào mô-đun blog bằng trình tạo Divi.

Đối với ví dụ này, chúng tôi sẽ thực hiện các điều chỉnh tối thiểu đối với phong cách, nhưng bạn cũng có thể tự do khám phá phong cách của riêng mình.

Kiểu tiêu đề bài viết

  • Tiêu đề ánh sáng mờ: Văn bản in đậm
  • Màu văn bản tiêu đề: # 6D6A7E
  • Kích thước văn bản tiêu đề: 20px
  • Chiều cao dòng tiêu đề: 1.3em
hiển thị đoạn trích của các bài báo khi di chuột trong Divi

Kiểu văn bản "Đọc thêm"

  • Đọc thêm Dim Light: Bold Text
  • Đọc thêm Kiểu sao chép: TT
  • Màu chữ Đọc thêm: # 6D6A7E
  • Khoảng cách giữa các chữ cái Đọc thêm: 1px
  • Chiều cao dòng Đọc thêm: 3.5em

Thay đổi cách hiển thị của phân trang Văn bản

  • Hiển thị phân trang Đèn mờ: Chữ in đậm
  • Màu văn bản Hiển thị phân trang: # 6D6A7E
  • Khoảng cách chữ cái Hiển thị phân trang: 1px
  • Hiển thị phân trang Kiểu sao chép: TT
hiển thị đoạn trích của các bài báo khi di chuột trong Divi

Xóa đường viền

  • Chiều rộng đường viền bố cục lưới: 0px

Hover Shadow Box Style

  • Hộp bóng: Xem ảnh chụp màn hình
  • Vị trí bắt đầu: 0px
  • Độ mạnh của Box Shadow Blur: 38px
  • Màu phông chữ phụ đề: rgba (109,106,126,0.25)

Kết quả cuối cùng

Kết luận

Tóm lại, như được hiển thị trong hướng dẫn này, việc thêm một số đoạn mã CSS có thể cung cấp cho bạn chức năng bạn cần để tạo các đoạn trích bài đăng trên blog với hiệu ứng di chuột đẹp mắt. 

Điều quan trọng nhất của phương pháp này là chúng ta có thể thêm kiểu bổ sung tùy thích vào mô-đun blog bằng cách sử dụng các tùy chọn tích hợp của Divi. Ngoài ra, nó sẽ cho phép bạn tùy chỉnh các phần tử của bài đăng, bao gồm cả việc thêm nhiều hiệu ứng di chuột hơn. 

Hy vọng rằng điều này sẽ giúp mang lại cho blog trang web Divi của bạn một sự thúc đẩy thêm về thiết kế và chức năng. Hãy cho chúng tôi biết về kinh nghiệm của bạn trong các bình luận.

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

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

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.

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

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

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;

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

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

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
Divi: Cách tạo tiêu đề chung với mô-đun Menu Toàn màn hình
  • 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!

Divi: Cách tạo tiêu đề chung với chủ đề Builder

Divi: Cách tạo tiêu đề chung với chủ đề Builder

Bạn cần tạo tiêu đề chung cho trang web của mình với Divi?

Tiêu đề chung sẽ xuất hiện ở mọi nơi trên trang web của bạn trừ khi bạn đã chỉ định một tiêu đề khác cho một trang hoặc bài đăng.

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

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

Định cấu hình menu chính của bạn

Bắt đầu bằng cách tạo menu của bạn trong cài đặt giao diện trang WordPress của bạn.

Truy cập tùy chọn Trình tạo chủ đề trong Divi

Trong các tùy chọn chủ đề Divi, hãy nhấp vào Trình tạo chủ đề. Khi đó, bạn sẽ thấy một mẫu trang web mặc định.

Thêm và tạo một tiêu đề chung

Mẫu trang web mặc định là nơi bạn có thể bắt đầu tạo đầu trang toàn cục, nội dung toàn cục và chân trang toàn cục tùy chỉnh của mình. Nhấp vào "Thêm tiêu đề chung" và tiếp tục bằng cách nhấp vào "Xây dựng tiêu đề chung" để bắt đầu quá trình.

Cài đặt phần

kích thước

Mở cài đặt phần mà bạn sẽ tìm thấy trên trang, trong tab Kiểu, thay đổi kích thước trên các kích thước màn hình khác nhau.

  • Chiều rộng tối đa: 100%
  • Chiều rộng tối đa: 1280px (dành cho PC và máy tính bảng), 100% (dành cho thiết bị di động)

khoảng cách

Loại bỏ tất cả các lề nội bộ trên cùng và dưới cùng

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

Biên giới

Bây giờ, thêm bán kính đường viền vào các góc dưới cùng bên trái và bên phải của phần.

  • Dưới cùng bên trái: 50px
  • Dưới cùng bên phải: 50px

Hộp bóng

Cũng hãy thêm một bóng hộp tinh tế.

  • Độ mạnh của Box Shadow Blur: 60px
  • Màu phông chữ phụ đề: rgba (0,0,0,0.13)

tầm nhìn

  • Tràn ngang: Có thể nhìn thấy
  • Tràn dọc: Có thể nhìn thấy

Dành một dòng mới cho tiêu đề

Bây giờ chúng tôi đã hoàn thành cài đặt phần chung, chúng tôi có thể bắt đầu thêm hàng. Tổng cộng, chúng ta sẽ cần hai dòng; một dành riêng cho tiêu đề và một cho phép các mục menu hiển thị. Chúng tôi sẽ bắt đầu với tiêu đề bằng cách thêm một hàng mới bằng cách sử dụng cấu trúc cột sau:

Cài đặt dòng

Cài đặt nền

Không thêm bất kỳ mô-đun nào vào dòng, hãy mở cài đặt dòng và thay đổi màu nền.

  • Nền: # 38383F

kích thước

Sau đó, sửa đổi các thông số định cỡ dòng.

  • 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: 100%
  • Chiều rộng tối đa: 100%

xem

Bây giờ, hãy đảm bảo các cột xuất hiện bên cạnh nhau trên màn hình nhỏ hơn bằng cách thêm dòng mã CSS này vào phần tử hàng chính.

01 display: flex;

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

Tải logo

Khi bạn đã hoàn thành cài đặt hàng, đã đến lúc bắt đầu thêm mô-đun. Thêm mô-đun hình ảnh vào cột 1 và tải lên biểu trưng của bạn.

sự liên kết

Chuyển đến tab Kiểu và căn chỉnh hình ảnh ở bên trái.

kích thước

Đồng thời sửa đổi Chiều rộng của mô-đun.

khoảng cách

Đồng thời thêm các giá trị ký quỹ tùy chỉnh.

tạo tiêu đề chung với chủ đề Divi Builder

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

Thêm mạng xã hội

Hãy chuyển sang cột thứ hai. Ở đó, chúng tôi sẽ cần một mô-đun theo dõi mạng xã hội. Thêm các mạng xã hội mà bạn chọn. Bạn có thể thêm bao nhiêu mạng xã hội tùy thích.

tạo tiêu đề chung với chủ đề Divi Builder

Mạng xã hội màu nền

Tiếp theo, mở từng mạng xã hội riêng lẻ và thay đổi màu nền thành màu hoàn toàn trong suốt.

  • Màu nền: rgba (0,0,0,0)
tạo tiêu đề chung với chủ đề Divi Builder

sự liên kết

Quay lại cài đặt mô-đun bình thường và sau đó thay đổi toàn bộ căn chỉnh của mô-đun.

biểu tượng

Thay đổi cả cài đặt biểu tượng.

  • Màu biểu tượng: #FFFFFF
  • 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 (PC và máy tính bảng), 12px (điện thoại)

khoảng cách

Thêm một lợi nhuận trên cùng.

Thêm mô-đun Nút trong cột 3

Di chuyển đến cột thứ ba và thêm mô-đun Nút chứa văn bản bạn chọn.

sự liên kết

Thay đổi căn chỉnh của nút trong tab Kiểu.

Cài đặt nút

Tùy chỉnh cài đặt 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: 12px (máy tính để bàn), 10px (máy tính bảng), 8px (điện thoại)
  • Màu văn bản của nút: #ffffff
  • Nút nền: # ffae25
  • Chiều rộng đường viền nút: 0 pixel
  • Nút Border Radius: 0 pixel
  • Khoảng cách giữa các ký tự nút: 5 px (máy tính để bàn), 3 px (máy tính bảng và điện thoại)
  • Nút Phông chữ: Mở Không có
  • Nút Soft Light: Chữ in đậm
  • Sao chép kiểu nút: TT

khoảng cách

Tùy chỉnh giá trị ký quỹ.

Dành một dòng mới cho thanh menu

Khi bạn đã điền vào dòng dành riêng cho tiêu đề chung, bạn có thể thêm một dòng khác ngay bên dưới.

Cài đặt dòng

kích thước

Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt dòng và thay đổi cài đặt định cỡ trong tab Kiểu.

khoảng cách

Sau đó, loại bỏ tất cả các lề dưới cùng và trên cùng.

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

Chọn Menu

Tiếp theo, thêm mô-đun Menu vào cột và chọn menu bạn đã tạo trong phần đầu tiên của hướng dẫn này.

Bố trí

Chuyển sang tab Kiểu và thay đổi cài đặt bố cục như sau:

Kết nối

Đồng thời thay đổi màu của liên kết đang hoạt động trong tab Kiểu.

  • Màu liên kết hiện hoạt: # ffae25
tạo tiêu đề chung với chủ đề Divi Builder

Menu thả xuống

Làm tương tự đối với màu dòng menu thả xuống trong cài đặt menu thả xuống.

  • Màu hàng thả xuống: # ffae25

biểu tượng

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

Văn bản menu

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

  • Phông chữ menu: Prata
  • Màu văn bản menu: # 000000

Đặt tiêu đề và thanh menu luôn ở trên cùng

Mở cài đặt phần

Khi bạn đã hoàn thành dòng thứ hai, tất cả những gì bạn phải làm là đảm bảo phần này vẫn ở đầu các trang và bài đăng của chúng tôi. Để làm điều này, chúng tôi sẽ mở lại cài đặt phần.

Thêm CSS tùy chỉnh vào phần tử chính

Tiếp theo, chúng ta sẽ chuyển đến tab nâng cao và chúng ta sẽ thêm một vài dòng mã CSS vào phần tử chính của phần.

01 position: fixed;

02 top: 0;

03 left: 0;

04 right: 0;

Lưu các tùy chọn trình tạo chủ đề và tiêu đề chung

Khi bạn đã hoàn thành toàn bộ thiết kế tiêu đề chung, hãy nhớ lưu thiết kế trước khi thoát khỏi bố cục mẫu. Khi bạn đã ra khỏi bố cục mẫu, hãy lưu toàn bộ thay đổi của trình tạo chủ đề và bạn đã hoàn tất!

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.

tạo tiêu đề chung với chủ đề Divi Builder

Kết luận

Trong bài viết này, chúng tôi đã hướng dẫn bạn cách tạo tiêu đề chung tùy chỉnh bằng trình tạo chủ đề mới của Divi. Hướng dẫn này cho thấy việc tạo tiêu đề đẹp và áp dụng chúng cho toàn bộ trang web của bạn hoặc cho các loại bài đăng tùy chỉnh cụ thể dễ dàng như thế nào. 

Chúng tôi hy vọng nó sẽ giúp bạn trong việc tùy chỉnh trang web của mình với Trình tạo chủ đề.

Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào, vui lòng để lại bình luận cho chúng tôi trong phần phần bình luận bên dưới.

...