CSS tạo tiêu đề có chiều rộng đầy đủ
|
Mô-đun tiêu đề toàn chiều rộng giúp dễ dàng thêm các tiêu đề đẹp, đầy màu sắc vào đầu trang của bạn (hoặc bất kỳ đâu trên trang của bạn, nếu bạn chọn). Các mô-đun này chỉ có thể được đặt trong các phần có chiều rộng đầy đủ Show
 Xem bản demo trực tiếp của mô-đun này Cách thêm mô-đun tiêu đề toàn chiều rộng vào trang của bạnTrước khi bạn có thể thêm mô-đun tiêu đề toàn chiều rộng vào trang của mình, trước tiên bạn cần chuyển sang Trình tạo Divi. Khi Chủ đề Divi đã được cài đặt trên trang web của bạn, bạn sẽ thấy nút Sử dụng Trình tạo Divi phía trên trình chỉnh sửa bài đăng mỗi khi bạn tạo một trang mới. Nhấp vào nút này sẽ kích hoạt Trình tạo Divi, cho phép bạn truy cập vào tất cả các mô-đun của Trình tạo Divi. Tiếp theo, nhấp vào nút Sử dụng Trình tạo Trực quan để khởi chạy trình tạo trong Chế độ Trực quan. Bạn cũng có thể nhấp vào nút Bật Trình tạo hình ảnh khi duyệt trang web của mình ở giao diện người dùng nếu bạn đã đăng nhập vào Bảng điều khiển WordPress của mình Khi bạn đã vào Trình tạo hình ảnh, bạn có thể nhấp vào nút dấu cộng màu xám để thêm mô-đun mới vào trang của mình. Các mô-đun toàn chiều rộng mới chỉ có thể được thêm vào bên trong các phần chiều rộng đầy đủ. Nếu bạn đang bắt đầu một trang mới, trước tiên đừng quên thêm phần toàn chiều rộng vào trang của bạn. Chúng tôi có một số hướng dẫn tuyệt vời về cách sử dụng các phần tử của Divi Xác định vị trí mô-đun tiêu đề toàn chiều rộng trong danh sách các mô-đun và nhấp vào mô-đun đó để thêm vào trang của bạn. Danh sách mô-đun có thể tìm kiếm được, nghĩa là bạn cũng có thể nhập từ “tiêu đề toàn chiều rộng” rồi nhấp vào enter để tự động tìm và thêm mô-đun tiêu đề chiều rộng đầy đủ. Khi mô-đun đã được thêm vào, bạn sẽ được chào đón với danh sách các tùy chọn của mô-đun. Các tùy chọn này được chia thành ba nhóm chính. Nội dung, Thiết kế và Nâng cao Ví dụ về trường hợp sử dụng. Thêm tiêu đề toàn chiều rộng vào trang giới thiệuTrong ví dụ này, tôi sẽ chỉ cho bạn cách sử dụng Mô-đun tiêu đề toàn chiều rộng để thêm tiêu đề với văn bản tùy chỉnh và hình nền Tất cả các Mô-đun Toàn băng thông chỉ khả dụng khi sử dụng các phần Toàn băng thông. Sử dụng Trình tạo hình ảnh, chèn Phần băng thông đầy đủ mới. Sau đó thêm Mô-đun Người vào phần Cập nhật Cài đặt tiêu đề toàn băng thông như sau Tùy chọn nội dungTiêu đề. Giới thiệu về chúng tôi Tùy chọn thiết kếĐịnh hướng văn bản & biểu trưng. Giữa Tùy chọn nâng cao (CSS tùy chỉnh)Phần tử chính. Đó là nó Tùy chọn nội dung tiêu đề toàn chiều rộngTrong tab nội dung, bạn sẽ tìm thấy tất cả các thành phần nội dung của mô-đun, chẳng hạn như văn bản, hình ảnh và biểu tượng. Mọi thứ kiểm soát những gì xuất hiện trong mô-đun của bạn sẽ luôn được tìm thấy trong tab này Tiêu đềNhập tiêu đề trang của bạn ở đây Tiêu đề phụNếu bạn muốn sử dụng một tiêu đề phụ, hãy thêm nó vào đây. Tiêu đề phụ của bạn sẽ xuất hiện bên dưới tiêu đề của bạn với phông chữ nhỏ Nút #1 Văn bảnNhập nội dung cho Button Nút #2 Văn bảnNhập nội dung cho Button Nội dungTại đây bạn có thể xác định nội dung sẽ được đặt bên dưới tiêu đề và văn bản tiêu đề Nút số 1 URLNhập URL cho Nút Nút #2 URLNhập URL cho Nút URL hình ảnh biểu trưngTải lên hình ảnh mong muốn của bạn hoặc nhập URL vào hình ảnh bạn muốn hiển thị URL hình ảnh tiêu đềTải lên hình ảnh mong muốn của bạn hoặc nhập URL vào hình ảnh bạn muốn hiển thị URL hình nềnNếu được xác định, hình ảnh này sẽ được sử dụng làm nền cho mô-đun này. Để xóa hình nền, chỉ cần xóa URL khỏi trường cài đặt. Hình nền sẽ xuất hiện phía trên màu nền, nghĩa là màu nền của bạn sẽ không hiển thị khi áp dụng hình nền Màu nềnXác định màu nền tùy chỉnh cho mô-đun của bạn hoặc để trống để sử dụng màu mặc định Màu lớp phủ nềnChọn màu lớp phủ nền, màu này sẽ được đặt trên hình nền. Hình ảnh lớp phủ nền bán trong suốt có thể tạo hiệu ứng thú vị khi được đặt bên trên hình nền Nhãn quản trịĐiều này sẽ thay đổi nhãn của mô-đun trong trình tạo để dễ nhận biết. Khi sử dụng chế độ xem WireFrame trong Visual Builder, các nhãn này sẽ xuất hiện trong khối mô-đun trong giao diện Divi Builder Tùy chọn thiết kế tiêu đề toàn chiều rộngTrong tab thiết kế, bạn sẽ tìm thấy tất cả các tùy chọn kiểu dáng của mô-đun, chẳng hạn như phông chữ, màu sắc, kích thước và khoảng cách. Đây là tab bạn sẽ sử dụng để thay đổi giao diện của mô-đun. Mỗi mô-đun Divi đều có một danh sách dài các cài đặt thiết kế mà bạn có thể sử dụng để thay đổi mọi thứ Định hướng văn bản & logoĐiều này kiểm soát cách văn bản của bạn được căn chỉnh trong mô-đun Tạo toàn màn hìnhTại đây, bạn có thể chọn xem tiêu đề có được mở rộng thành kích thước toàn màn hình hay không Sử dụng hiệu ứng ParallaxNếu được bật, hình nền của bạn sẽ có một vị trí cố định khi cuộn của bạn, tạo hiệu ứng giống như thị sai thú vị phương pháp thị saiXác định phương thức, được sử dụng cho hiệu ứng thị sai Hiển thị nút cuộn xuốngTại đây bạn có thể chọn có hiển thị nút cuộn xuống hay không Biểu tượngChọn một biểu tượng để hiển thị cho nút cuộn xuống Cuộn xuống màu biểu tượngTheo mặc định, biểu tượng cuộn xuống kế thừa màu của văn bản tiêu đề của bạn (trắng hoặc xám). Bạn có thể thay đổi màu này bằng cách điều chỉnh màu trong tùy chọn này bằng bộ chọn màu Cuộn xuống Kích thước biểu tượngSử dụng cài đặt này để tăng hoặc giảm kích thước của biểu tượng cuộn xuống xuất hiện ở cuối tiêu đề của bạn Căn chỉnh dọc hình ảnhĐiều này kiểm soát hướng của hình ảnh trong mô-đun Văn bản màuỞ đây bạn có thể chọn giá trị của văn bản của bạn. Nếu bạn đang làm việc với nền tối, thì văn bản của bạn phải được đặt thành sáng. Nếu bạn đang làm việc với nền sáng, thì văn bản của bạn phải tối Căn dọc văn bảnCài đặt này xác định căn chỉnh dọc của nội dung của bạn. Nội dung của bạn có thể được căn giữa theo chiều dọc hoặc căn chỉnh xuống dưới cùng Phông chữ tiêu đềBạn có thể thay đổi phông chữ của văn bản tiêu đề bằng cách chọn phông chữ mong muốn từ menu thả xuống. Divi đi kèm với hàng chục phông chữ tuyệt vời do Google Fonts cung cấp. Theo mặc định, Divi sử dụng phông chữ Open Sans cho tất cả văn bản trên trang của bạn. Bạn cũng có thể tùy chỉnh kiểu văn bản của mình bằng các tùy chọn in đậm, in nghiêng, viết hoa toàn bộ và gạch chân Tiêu đề Cỡ chữTại đây bạn có thể điều chỉnh kích thước của văn bản tiêu đề của mình. Bạn có thể kéo thanh trượt phạm vi để tăng hoặc giảm kích thước văn bản hoặc bạn có thể nhập trực tiếp giá trị kích thước văn bản mong muốn vào trường nhập liệu ở bên phải thanh trượt. Các trường đầu vào hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập “px” hoặc “em” theo giá trị kích thước của mình để thay đổi loại đơn vị Màu văn bản tiêu đềTheo mặc định, tất cả các màu văn bản trong Divi sẽ xuất hiện dưới dạng màu trắng hoặc xám đậm. Nếu bạn muốn thay đổi màu của văn bản tiêu đề, hãy chọn màu bạn muốn từ bộ chọn màu bằng tùy chọn này Khoảng cách chữ tiêu đềKhoảng cách giữa các chữ cái ảnh hưởng đến khoảng cách giữa mỗi chữ cái. Nếu bạn muốn tăng khoảng cách giữa mỗi chữ cái trong văn bản tiêu đề của mình, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng cách hoặc nhập kích thước khoảng cách mong muốn của bạn vào trường nhập liệu ở bên phải thanh trượt. Các trường đầu vào hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập “px” hoặc “em” theo giá trị kích thước của mình để thay đổi loại đơn vị Chiều cao dòng tiêu đềChiều cao của dòng ảnh hưởng đến khoảng cách giữa mỗi dòng trong văn bản tiêu đề của bạn. Nếu bạn muốn tăng khoảng cách giữa mỗi dòng, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng cách hoặc nhập kích thước khoảng cách mong muốn của bạn vào trường nhập liệu ở bên phải thanh trượt. Các trường đầu vào hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập “px” hoặc “em” theo giá trị kích thước của mình để thay đổi loại đơn vị Phông chữ nội dungBạn có thể thay đổi phông chữ của văn bản nội dung bằng cách chọn phông chữ mong muốn từ menu thả xuống. Divi đi kèm với hàng chục phông chữ tuyệt vời do Google Fonts cung cấp. Theo mặc định, Divi sử dụng phông chữ Open Sans cho tất cả văn bản trên trang của bạn. Bạn cũng có thể tùy chỉnh kiểu văn bản của mình bằng các tùy chọn in đậm, in nghiêng, viết hoa toàn bộ và gạch chân Kích thước phông chữ nội dungTại đây bạn có thể điều chỉnh kích thước của văn bản nội dung của mình. Bạn có thể kéo thanh trượt phạm vi để tăng hoặc giảm kích thước văn bản hoặc bạn có thể nhập trực tiếp giá trị kích thước văn bản mong muốn vào trường nhập liệu ở bên phải thanh trượt. Các trường đầu vào hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập “px” hoặc “em” theo giá trị kích thước của mình để thay đổi loại đơn vị Màu văn bản nội dungTheo mặc định, tất cả các màu văn bản trong Divi sẽ xuất hiện dưới dạng màu trắng hoặc xám đậm. Nếu bạn muốn thay đổi màu của văn bản nội dung, hãy chọn màu bạn muốn từ bộ chọn màu bằng tùy chọn này Khoảng cách nội dung chữ cáiKhoảng cách giữa các chữ cái ảnh hưởng đến khoảng cách giữa mỗi chữ cái. Nếu bạn muốn tăng khoảng cách giữa mỗi chữ cái trong văn bản nội dung của mình, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng cách hoặc nhập kích thước khoảng cách mong muốn của bạn vào trường nhập liệu ở bên phải thanh trượt. Các trường đầu vào hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập “px” hoặc “em” theo giá trị kích thước của mình để thay đổi loại đơn vị Chiều cao dòng nội dungChiều cao của dòng ảnh hưởng đến khoảng cách giữa mỗi dòng trong văn bản nội dung của bạn. Nếu bạn muốn tăng khoảng cách giữa mỗi dòng, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng cách hoặc nhập kích thước khoảng cách mong muốn của bạn vào trường nhập liệu ở bên phải thanh trượt. Các trường đầu vào hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập “px” hoặc “em” theo giá trị kích thước của mình để thay đổi loại đơn vị Phông chữ tiêu đề phụBạn có thể thay đổi phông chữ của văn bản tiêu đề phụ bằng cách chọn phông chữ mong muốn từ trình đơn thả xuống. Divi đi kèm với hàng chục phông chữ tuyệt vời do Google Fonts cung cấp. Theo mặc định, Divi sử dụng phông chữ Open Sans cho tất cả văn bản trên trang của bạn. Bạn cũng có thể tùy chỉnh kiểu văn bản của mình bằng các tùy chọn in đậm, in nghiêng, viết hoa toàn bộ và gạch chân Kích thước phông chữ tiêu đề phụTại đây bạn có thể điều chỉnh kích thước của văn bản tiêu đề phụ của mình. Bạn có thể kéo thanh trượt phạm vi để tăng hoặc giảm kích thước văn bản hoặc bạn có thể nhập trực tiếp giá trị kích thước văn bản mong muốn vào trường nhập liệu ở bên phải thanh trượt. Các trường đầu vào hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập “px” hoặc “em” theo giá trị kích thước của mình để thay đổi loại đơn vị Màu văn bản tiêu đề phụTheo mặc định, tất cả các màu văn bản trong Divi sẽ xuất hiện dưới dạng màu trắng hoặc xám đậm. Nếu bạn muốn thay đổi màu của văn bản tiêu đề phụ, hãy chọn màu bạn muốn từ bộ chọn màu bằng tùy chọn này Khoảng cách giữa các chữ cái trong tiêu đề phụKhoảng cách giữa các chữ cái ảnh hưởng đến khoảng cách giữa mỗi chữ cái. Nếu bạn muốn tăng khoảng cách giữa mỗi chữ cái trong văn bản tiêu đề phụ của mình, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng cách hoặc nhập kích thước khoảng cách mong muốn của bạn vào trường nhập liệu ở bên phải thanh trượt. Các trường đầu vào hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập “px” hoặc “em” theo giá trị kích thước của mình để thay đổi loại đơn vị Chiều cao dòng tiêu đề phụChiều cao của dòng ảnh hưởng đến khoảng cách giữa mỗi dòng trong văn bản tiêu đề phụ của bạn. Nếu bạn muốn tăng khoảng cách giữa mỗi dòng, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng cách hoặc nhập kích thước khoảng cách mong muốn của bạn vào trường nhập liệu ở bên phải thanh trượt. Các trường đầu vào hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập “px” hoặc “em” theo giá trị kích thước của mình để thay đổi loại đơn vị Chiều rộng văn bản tối đaSử dụng cài đặt này để giảm độ rộng tối đa của văn bản trong mô-đun tiêu đề. Ví dụ: giá trị 50% sẽ đảm bảo rằng văn bản không bao giờ dài hơn 50% chiều rộng của mô-đun tiêu đề tổng thể Sử dụng Kiểu tùy chỉnh cho NútBật tùy chọn này sẽ hiển thị các cài đặt tùy chỉnh nút khác nhau mà bạn có thể sử dụng để thay đổi giao diện của nút mô-đun của mình Kích thước văn bản nútCài đặt này có thể được sử dụng để tăng hoặc giảm kích thước của văn bản trong nút. Nút sẽ mở rộng khi kích thước văn bản được tăng và giảm Màu văn bản nútTheo mặc định, các nút giả sử màu chủ đề của bạn như được xác định trong Tùy biến chủ đề. Tùy chọn này cho phép bạn chỉ định màu văn bản tùy chỉnh cho nút trong mô-đun này. Chọn màu tùy chỉnh của bạn bằng công cụ chọn màu để thay đổi màu của nút Màu nền nútTheo mặc định, các nút có màu nền trong suốt. Điều này có thể được thay đổi bằng cách chọn màu nền bạn muốn từ bộ chọn màu Chiều rộng viền nútTất cả các nút Divi đều có đường viền 2px theo mặc định. Đường viền này có thể được tăng hoặc giảm kích thước bằng cách sử dụng cài đặt này. Đường viền có thể được loại bỏ bằng cách nhập giá trị 0 Màu viền nútTheo mặc định, các đường viền của nút giả định màu nhấn chủ đề của bạn như được xác định trong Tùy biến chủ đề. Tùy chọn này cho phép bạn chỉ định màu đường viền tùy chỉnh cho nút trong mô-đun này. Chọn màu tùy chỉnh của bạn bằng công cụ chọn màu để thay đổi màu đường viền của nút Bán kính viền nútBán kính đường viền ảnh hưởng đến mức độ bo tròn của các góc nút. Theo mặc định, các nút trong Divi có bán kính đường viền nhỏ làm tròn các góc 3 pixel. Bạn có thể giảm giá trị này xuống 0 để tạo nút vuông hoặc tăng đáng kể để tạo các nút có cạnh tròn Khoảng cách chữ cái nútKhoảng cách giữa các chữ cái ảnh hưởng đến khoảng cách giữa mỗi chữ cái. Nếu bạn muốn tăng khoảng cách giữa mỗi chữ cái trong văn bản nút của mình, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng cách hoặc nhập kích thước khoảng cách mong muốn của bạn vào trường nhập liệu ở bên phải thanh trượt. Các trường đầu vào hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập “px” hoặc “em” theo giá trị kích thước của mình để thay đổi loại đơn vị Phông chữ nútBạn có thể thay đổi phông chữ của văn bản nút bằng cách chọn phông chữ mong muốn từ menu thả xuống. Divi đi kèm với hàng chục phông chữ tuyệt vời do Google Fonts cung cấp. Theo mặc định, Divi sử dụng phông chữ Open Sans cho tất cả văn bản trên trang của bạn. Bạn cũng có thể tùy chỉnh kiểu văn bản của mình bằng các tùy chọn in đậm, in nghiêng, viết hoa toàn bộ và gạch chân Thêm biểu tượng nútĐã tắt cài đặt này sẽ xóa các biểu tượng khỏi nút của bạn. Theo mặc định, tất cả các nút Divi hiển thị biểu tượng mũi tên khi di chuột Biểu tượng nútNếu các biểu tượng được bật, bạn có thể sử dụng cài đặt này để chọn biểu tượng sẽ sử dụng trong nút của mình. Divi có nhiều biểu tượng khác nhau để lựa chọn Màu biểu tượng nútĐiều chỉnh cài đặt này sẽ thay đổi màu của biểu tượng xuất hiện trong nút của bạn. Theo mặc định, màu của biểu tượng giống với màu văn bản của nút, nhưng cài đặt này cho phép bạn điều chỉnh màu một cách độc lập Vị trí biểu tượng nútBạn có thể chọn hiển thị biểu tượng nút ở bên trái hoặc bên phải nút của mình Chỉ hiển thị biểu tượng khi di chuột cho nútTheo mặc định, các biểu tượng nút chỉ được hiển thị khi di chuột. Nếu bạn muốn biểu tượng luôn xuất hiện, hãy tắt cài đặt này Màu văn bản khi di chuột qua nútKhi nút được khách truy cập di chuột qua, màu này sẽ được sử dụng. Màu sẽ chuyển từ màu cơ bản được xác định trong các cài đặt trước đó Màu nền di chuột của nútKhi nút được khách truy cập di chuột qua, màu này sẽ được sử dụng. Màu sẽ chuyển từ màu cơ bản được xác định trong các cài đặt trước đó Màu đường viền nút di chuộtKhi nút được khách truy cập di chuột qua, màu này sẽ được sử dụng. Màu sẽ chuyển từ màu cơ bản được xác định trong các cài đặt trước đó Bán kính đường viền nút di chuộtKhi nút được khách truy cập di chuột qua, giá trị này sẽ được sử dụng. Giá trị sẽ chuyển đổi từ giá trị cơ sở được xác định trong cài đặt trước đó Khoảng cách giữa các chữ cái khi di chuột trên nútKhi nút được khách truy cập di chuột qua, giá trị này sẽ được sử dụng. Giá trị sẽ chuyển đổi từ giá trị cơ sở được xác định trong cài đặt trước đó Tiêu đề toàn chiều rộng Tùy chọn nâng caoTrong tab nâng cao, bạn sẽ tìm thấy các tùy chọn mà các nhà thiết kế web có kinh nghiệm hơn có thể thấy hữu ích, chẳng hạn như các thuộc tính HTML và CSS tùy chỉnh. Tại đây, bạn có thể áp dụng CSS tùy chỉnh cho bất kỳ thành phần nào của mô-đun. Bạn cũng có thể áp dụng các lớp và ID CSS tùy chỉnh cho mô-đun, có thể được sử dụng để tùy chỉnh mô-đun theo kiểu chủ đề con của bạn. tập tin css mã CSSNhập một CSS ID tùy chọn để sử dụng cho mô-đun này. ID có thể được sử dụng để tạo kiểu CSS tùy chỉnh hoặc để tạo liên kết đến các phần cụ thể trên trang của bạn Lớp CSSNhập các lớp CSS tùy chọn sẽ được sử dụng cho mô-đun này. Một lớp CSS có thể được sử dụng để tạo kiểu CSS tùy chỉnh. Bạn có thể thêm nhiều lớp, cách nhau bằng dấu cách. Các lớp này có thể được sử dụng trong Chủ đề con Divi của bạn hoặc trong CSS tùy chỉnh mà bạn thêm vào trang hoặc trang web của mình bằng Tùy chọn chủ đề Divi hoặc Cài đặt trang Divi Builder CSS tùy chỉnhCSS tùy chỉnh cũng có thể được áp dụng cho mô-đun và bất kỳ thành phần bên trong nào của mô-đun. Trong phần CSS tùy chỉnh, bạn sẽ tìm thấy một trường văn bản nơi bạn có thể thêm CSS tùy chỉnh trực tiếp vào từng thành phần. Đầu vào CSS vào các cài đặt này đã được bao bọc trong các thẻ kiểu, vì vậy bạn chỉ cần nhập các quy tắc CSS được phân tách bằng dấu chấm phẩy Hiển thịTùy chọn này cho phép bạn kiểm soát các thiết bị mà mô-đun của bạn xuất hiện trên đó. Bạn có thể chọn tắt riêng mô-đun của mình trên máy tính bảng, điện thoại thông minh hoặc máy tính để bàn. Điều này hữu ích nếu bạn muốn sử dụng các mô-đun khác nhau trên các thiết bị khác nhau hoặc nếu bạn muốn đơn giản hóa thiết kế di động bằng cách loại bỏ một số thành phần khỏi trang |
