Bỏ qua đến nội dung chính

Cách thêm tiêu đề và khẩu hiệu trang web động vào tiêu đề Divi toàn cầu

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 901.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

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.

Mẫu tiêu đề toàn cầu của tiêu đề trang web động 6

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.

Ví dụ về sửa đổi tiêu đề Divi

Tải xuống miễn phí

Hãy 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 tối thượng, cùng với rất nhiều tài nguyên, mẹo và thủ thuật Divi miễn phí và tuyệt vời khác. Hãy làm theo nó và bạn sẽ nhanh chóng trở thành một bậc thầy Divi. 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.

Chọn một mẫu divi

Sau khi hoàn thành, mẫu tiêu đề tổng thể sẽ có sẵn trong Divi Theme Builder.

Sửa đổi tiêu đề divi toàn cầu

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

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

Tùy chỉnh tiêu đề divi

Và, một số người thậm chí không nhận ra khẩu hiệu tồn tại, chưa nói đến việc dành thời gian để cập nhật nó. Hơn nữa, khi bạn sử dụng chủ đề Divi, tiêu đề trang web và khẩu hiệ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à dòng giới thiệu là những phần thiết yếu của trang web và sẽ được các công cụ tìm kiếm công nhận.

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.

Tùy chỉnh danh tính wordpress

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à định vị 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 di động ở trên cùng bên phải. Trong cửa sổ bật lên khả năng di động, hãy chọn tệp JSON của mẫu trang web mặc định và nhấp vào nút Nhập.

Nhập mô hình Divi

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

Xóa mẫu khỏi chân trang

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.

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

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

Tùy chỉnh lời gọi hành độ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.

Định cấu hình các hành động gọi hành động

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 khẩu hiệu trang web divi

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.

Thêm một liên kết đến trang chủ

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
Tùy chỉnh phông chữ tiêu đề divi

Để 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
Thêm mã css divi tùy chỉnh

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

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

Tùy chỉnh nút liên lạc divi

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%
Tùy chỉnh nền của nút divi

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.

Hiển thị khẩu hiệu divi

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!

Kết quả cuối cùng divi

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

Bài viết này chứa comments 0

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
0 cổ phiếu
cổ phiếu
tweet
Enregistrer