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.
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ó.
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:
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.
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:
01
border-radius: 20px;
Thông tin liên lạc:
01
margin-bottom: 1vw;
Mã ngẫu nhiên:
01
margin-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 :
01
height: 3vw;
máy tính bảng:
01
height: 5vw;
Gọi:
01
height: 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.
01
display: 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.
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.
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.
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
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.
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
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
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.
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!
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.
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.
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)
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
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.
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.
Bảo mật và cookie: trang này sử dụng cookie. Bằng cách tiếp tục duyệt trang web này, bạn đồng ý với việc chúng tôi sử dụng nó.
Để tìm hiểu thêm, bao gồm cả cách kiểm soát cookie, hãy xem phần sau:
Chính sách cookie