Biết cách thêm tiêu đề trang web động và khẩu hiệu vào tiêu đề toàn cầu Divi sẽ hữu ích khi tạo trang web Divi. Và có một vài lý do chính đáng để làm như vậy. Mặt khác, không phải tất cả các trang web đều có biểu tượng. Tiêu đề trang web là một sự thay thế logo tốt. Một lý do khác là để thúc đẩy thương hiệu của bạn bằng cách bao gồm thông tin quan trọng trên trang web của bạn nơi mọi người sẽ nhìn thấy nó.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thêm tiêu đề và khẩu hiệu của trang web động vào tiêu đề chung của Divi. Giải pháp này sẽ tự động trích xuất tiêu đề trang web và dòng giới thiệu từ phần phụ trợ WordPress. Thêm vào đó, bạn sẽ có tất cả các tùy chọn thiết kế mạnh mẽ của Divi để tùy chỉnh tiêu đề và khẩu hiệu theo cách bạn muốn!
Kết quả có thể
Dưới đây là bản xem trước của thiết kế mà chúng tôi sẽ xây dựng trong hướng dẫn này.
Lưu ý tiêu đề trang web và dòng giới thiệu ở giữa trên cùng của tiêu đề được hiển thị động.
Tải xuống miễn phí
Tham gia Divi Newlsetter và chúng tôi sẽ gửi email cho bạn bản sao của Gói bố cục trang đích Divi Ultimate, cùng với nhiều hơn thế nữa ressources, các mẹo và thủ thuật Divi miễn phí và tuyệt vời. Hãy làm theo nó và bạn sẽ nhanh chóng trở thành một Divi Master. Nếu bạn đã đăng ký, chỉ cần nhập địa chỉ email của bạn dưới đây và nhấp vào tải xuống để truy cập gói bố cục.DOWNLOAD
Để nhập mẫu, hãy đi tới Divi> Trình tạo chủ đề.
Nhấp vào biểu tượng tính di động ở trên cùng bên phải của trang.
Trong cửa sổ bật lên khả năng di động, hãy chọn tab nhập và chọn tệp tải xuống từ máy tính của bạn.
Sau đó bấm vào nút nhập.
Sau khi hoàn thành, mẫu tiêu đề tổng thể sẽ có sẵn trong Divi Theme Builder.
Trong những gì tiếp theo chúng ta sẽ chuyển sang thiết kế.
Tiêu đề của trang web và khẩu hiệu trên WordPress
Mỗi trang web WordPress có một tiêu đề trang web và một dòng giới thiệu. Tiêu đề trang web về cơ bản là tên của trang web và dòng giới thiệu là một cụm từ ngắn thường giải thích nó là gì.
Không có gì lạ khi thêm tiêu đề trang web khi cài đặt WordPress và quên nó.
Và, một số người thậm chí không nhận ra khẩu hiệu tồn tại, hãy để một mình dành thời gian để cập nhật nó. Ngoài ra, khi sử dụng Chủ đề Divi, tiêu đề trang web và dòng giới thiệu sẽ không hiển thị trên trang web của bạn theo mặc định, vì vậy bạn rất dễ bỏ qua chúng. Tuy nhiên, tiêu đề trang web và khẩu hiệu là những yếu tố cần thiết của trang web và sẽ được các công cụ tìm kiếm nhận ra.
Bạn có thể định vị và cập nhật tiêu đề trang web và dòng giới thiệu trong WordPress bất kỳ lúc nào bằng cách truy cập trang tổng quan WordPress và điều hướng đến Cài đặt> Chung.
Hoặc, bạn có thể thực hiện một tuyến đường khác bằng cách sử dụng tùy biến chủ đề để cập nhật tiêu đề trang web trong cài đặt chung.
Bây giờ chúng ta đã biết tiêu đề và khẩu hiệu trang web ở đâu trong phần phụ trợ WordPress, hãy khám phá cách chúng ta có thể thêm chúng vào tiêu đề Divi!
Cách thêm tiêu đề và khẩu hiệu trang web động vào tiêu đề toàn cầu trong Divi
Nhập mẫu tiêu đề chung được thiết kế trước
Đối với hướng dẫn này, chúng tôi sẽ tập trung vào cách thêm tiêu đề trang web động và dòng giới thiệu vào tiêu đề hiện có thay vì tạo tiêu đề đầy đủ từ đầu. Nó sẽ giúp bạn tiết kiệm thời gian và cải thiện độ rõ ràng. Vì vậy, để bắt đầu thiết kế tiêu đề này, chúng tôi sẽ nhập một mẫu tiêu đề toàn cầu được xác định trước từ gói tạo chủ đề thứ tư .
Một khi bạn có tải về gói tạo ra chủ đề , giải nén tệp và tìm tệp JSON của mẫu trang web mặc định
Sau đó, vào Divi> Theme Builder.
Nhấp vào biểu tượng tính di động ở trên cùng bên phải. Trong cửa sổ tính di động bật lên, hãy chọn tệp JSON từ mẫu trang web mặc định và nhấp vào nút Nhập.
Khi mẫu được thêm vào trình tạo chủ đề, hãy xóa mẫu chân trang và nhấp để chỉnh sửa tiêu đề tổng thể.
Thêm tiêu đề trang web động và dòng giới thiệu vào tiêu đề
Bên trong trình chỉnh sửa bố cục mẫu, bạn sẽ thấy tiêu đề được tạo sẵn đã được thiết kế sẵn. Chúng tôi có thể bắt đầu thực hiện các tùy chỉnh của mình ngay lập tức.
Di chuyển logo
Để bắt đầu, hãy kéo mô-đun hình ảnh hiển thị biểu trưng (động) từ cột giữa của hàng trên cùng sang cột bên trái của hàng trên cùng.
Thêm mô-đun gọi hành động để hiển thị tiêu đề trang web và dòng giới thiệu
Sau đó, thêm mô-đun Kêu gọi hành động mới vào cột giữa của hàng trên cùng (nơi có biểu trưng).
Chúng tôi sẽ sử dụng mô-đun Kêu gọi Hành động để hiển thị tiêu đề và dòng giới thiệu của trang web.
Nhưng trước khi bạn bắt đầu thêm nội dung, trước tiên hãy chọn KHÔNG để sử dụng màu nền.
Thêm tiêu đề trang web động
Trong cài đặt nội dung, di chuột qua hộp nhập tiêu đề và nhấp vào biểu tượng “Sử dụng nội dung động”. Sau đó chọn "Tiêu đề trang web" từ danh sách.
Thêm một khẩu hiệu trang web động
Sau đó, di chuột qua vùng cơ thể và chọn biểu tượng "Sử dụng nội dung động". Sau đó chọn "Dòng giới thiệu trang web" từ danh sách.
Thêm liên kết trang chủ động
Tiêu đề trang web thường chuyển hướng đến trang chủ khi nhấp chuột, đặc biệt nếu bạn đang thay thế biểu trưng. Để chuyển hướng toàn bộ khóa học đến trang chủ, hãy thêm liên kết trang chủ dưới dạng nội dung động vào URL liên kết khóa học.
Thiết kế văn bản của tiêu đề và khẩu hiệu của trang web
Bây giờ, tiêu đề trang web và khẩu hiệu được hiển thị trên tiêu đề động. Tất cả chúng ta phải làm bây giờ là thêm một số kiểu dáng. Hãy nhớ rằng, chúng ta cần tùy chỉnh văn bản tiêu đề để thiết kế tiêu đề trang web và văn bản cơ thể để thiết kế khẩu hiệu.
Chuyển qua tab thiết kế và cập nhật các thông tin sau:
- Phông chữ: Heebo
- Trọng lượng phông chữ: đậm
- Tiêu đề Kiểu chữ: TT
- Kích thước văn bản tiêu đề: 32px (máy tính để bàn), 24px (máy tính bảng và điện thoại)
- Khoảng cách tiêu đề thư: 0.3em
- Phông chữ cơ thể: Roboto
- Kiểu chữ cơ thể: chữ nghiêng
- Màu văn bản cơ thể:
- Kích thước văn bản cơ thể: 13px
- Khoảng cách thư cơ thể: 0.1em
- Chiều cao cơ thể: 1em
Để giúp định tâm, hãy lấy phần đệm mặc định bên dưới văn bản cơ thể bằng cách thêm CSS tùy chỉnh sau vào Mô tả quảng cáo:
đệm-dưới: 0px
Điều chỉnh thiết kế bổ sung
Đối với phần cuối cùng của hướng dẫn này, chúng tôi sẽ thực hiện một số điều chỉnh thiết kế bổ sung cho tiêu đề để đảm bảo các mục vẫn được căn giữa theo chiều dọc trong mỗi cột và tạo cho nút một thiết kế độc đáo. Chúng tôi cũng sẽ thêm một dòng trước và sau khi nguệch ngoạc vào khẩu hiệu (chỉ dành cho cú đá).
Định tâm theo chiều dọc các Cột / Nội dung
Ngay bây giờ, hàng trên cùng là cột Equalize Cột Heights đang hoạt động sử dụng thuộc tính flex. Chúng ta có thể tận dụng điều này bằng cách thêm một đoạn css nhỏ để đảm bảo tất cả các cột vẫn được căn giữa theo chiều dọc trong hàng. Để thực hiện việc này, hãy mở cài đặt cho hàng trên cùng và thêm CSS sau vào Thành phần chính:
align-item: trung tâm;
Cập nhật Cột bằng Nút
Tiếp theo, mở cài đặt cho cột 3 ở hàng trên cùng và lấy ra màu nền và phần đệm.
Cập nhật nền nút
Sau đó, mở cài đặt mô-đun nút và cập nhật nền với gradient nền mới như sau:
- Nền màu Màu trái: #ffffff
- Màu gradient nền bên phải: # 1dbf73
- Hướng Gradient: 135deg
- Vị trí bắt đầu: 10%
- Vị trí cuối: 0%
Thêm các ký tự trước và sau vào khẩu hiệu
Mỗi phần tử nội dung động có thể được thay đổi bằng cách nhấp vào biểu tượng bánh răng. Để thêm các ký tự trước và sau vào khẩu hiệu, hãy mở cài đặt của mô-đun kêu gọi hành động có chứa khẩu hiệu và nhấp vào biểu tượng chỉnh sửa trên nội dung động của khẩu hiệu trang web. Sau đó thêm các ký tự vào các mục trước và sau.
Kết quả cuối cùng
Để xem kết quả, hãy mở bất kỳ trang nào trên trang web của bạn. Bạn sẽ thấy tiêu đề trang web động và dòng giới thiệu được hiển thị đẹp mắt!
cuối cùng suy nghĩ
Thật là tuyệt khi bạn có thể tùy chỉnh tiêu đề tổng thể với tiêu đề trang web động và dòng giới thiệu. Điều này có vẻ như một cái gì đó sẽ hữu ích cho nhiều trang web. Tôi cũng thích ý tưởng bao gồm tiêu đề trang web và dòng giới thiệu ngoài biểu trưng để thể hiện thương hiệu mạnh mẽ hơn nữa.
nguồn: Chủ đề thanh lịch
