Đối với bất kỳ chủ sở hữu nào của website, điều khá quan trọng là bạn phải biết rằng mình nổi bật so với đối thủ cạnh tranh. Divi cung cấp vô số khả năng để tạo ra bố cục độc đáo, nhưng chúng tôi luôn có thể, với một chút đào sâu hơn, tạo ra thứ gì đó độc đáo hơn. Đây là lúc các phần tử giả CSS thực sự có ích.

Phần tử CSS giả chúng tôi có nghĩa là gì?

Nói một cách đơn giản, một phần tử giả CSS có thể được sử dụng để tạo kiểu cho các phần cụ thể của một phần tử. Có năm loại yếu tố giả làm những việc khác nhau. Với mục đích của bài viết này, chúng ta sẽ chỉ nói về: before và: after.

Hai phần tử giả này được sử dụng để chèn thứ gì đó vào trước hoặc sau phần tử nội dung của một phần tử. Điều này đặc biệt hữu ích vì chúng ta có thể sử dụng chúng để thêm các thành phần hình ảnh bổ sung vào hình ảnh, văn bản và các thành phần khác hiện có!

Vậy tại sao chúng ta lại sử dụng các yếu tố giả này? Before and After rất tuyệt vời để mở khóa các khả năng thiết kế mà không cần thêm các yếu tố hoặc mô-đun khác. Tương tự như vậy, chúng hữu ích để thêm các phần tử bổ sung mà không cần phải chạm vào các mẫu html chính hoặc tệp chủ đề.

Làm thế nào để bạn sử dụng các yếu tố trước và sau với Divi?

Nếu tất cả điều này có vẻ hơi khó hiểu cho đến nay, đừng lo lắng! Nếu chúng ta sử dụng :: before và :: after để viết mã CSS từ đầu, nó sẽ trông giống như sau:

Giả sử chúng ta có một dòng văn bản với lớp "example-text" - CSS để tạo kiểu và tùy chỉnh dòng này sẽ là:

.example-text {* thêm phong cách của bạn vào đây *}

Bây giờ, nếu bạn muốn thêm và định kiểu một phần tử :: trước hoặc :: sau, CSS sẽ trông như thế này:

.example-text :: trước {* thêm kiểu của bạn trước phần tử ở đây *} .example-text :: sau {* thêm kiểu của bạn sau phần tử ở đây *}

May mắn thay, Divi cung cấp khả năng truy cập dễ dàng đến các phần tử giả :: before và :: after với ít rắc rối hơn nhiều. Trên thực tế, nếu bạn đã từng mở tab “Nâng cao” để thêm CSS tùy chỉnh, bạn đã thấy các lĩnh vực mà chúng tôi đang đề cập đến.

Phần nâng cao tùy chỉnh phần tử cssNhững khu vực này cung cấp lối tắt nhanh để thêm và tùy chỉnh nội dung trước và sau bất kỳ mô-đun nào Divi hiện có và chúng ta có thể sử dụng chúng để tạo ra những thiết kế thực sự linh hoạt và thú vị.

khảo sát

Đây là những gì chúng tôi sẽ tạo ra trong hướng dẫn này:

Ví dụ 1

Ví dụ về thiết kế Divibắt đầu

Đối với hướng dẫn này, chúng ta sẽ bắt đầu ở chế độ Visual Builder. Do đó, bạn phải nhấp vào "Trình tạo trực quan", khi bạn đang ở trên một trang mới.

Sử dụng trình tạo hình ảnhBây giờ chúng tôi đã sẵn sàng để bắt đầu!

Ví dụ 1: Các mô-đun Blurb được đánh số bằng các phần tử giả

Blurb có lẽ là một trong những mô-đun Divi linh hoạt nhất có sẵn cho bạn. Trong trường hợp này, chúng tôi sẽ sử dụng phần tử giả để thêm số vào trước mỗi bản trình bày để tạo phần "Cách hoạt động" chi tiết. Chúng tôi cũng sẽ thêm một hình mũi tên ở bên phải để chỉ ra quy trình.

Những gì chúng tôi sẽ tạo ra:

Ví dụ về thiết kế DiviMặc dù thiết kế này hoạt động với tất cả các thiết kế trình bày, chúng tôi đã mượn phần dành riêng để trình bày từ web agency. Nếu bạn muốn sử dụng chúng làm điểm bắt đầu, bạn có thể truy cập trang đích của đại lý web bằng cách tạo một trang mới và chuyển đến trình tạo giao diện người dùng.

Khi trang của bạn tải, bạn có tùy chọn để sử dụng bố cục được xác định trước, một trong các bố cục đã lưu của bạn hoặc tạo một bản dựng mới. Chọn bố cục được xác định trước và sử dụng thanh tìm kiếm để tìm bố cục “Đại lý web”. Phần tổng quan của hướng dẫn này nằm trên trang đích.

Gói đại lý web

Sau khi tải, sự khác biệt duy nhất giữa bố cục được xác định trước và ví dụ của chúng tôi là chúng tôi đã thay đổi nền của từng văn bản, tiêu đề và màu phông chữ của văn bản và thêm một phần đệm.

Thay đổi nềnMàu văn bản tiêu đề

Điều chỉnh divi văn bản nội dungĐiều chỉnh khoảng cách mô-đun Divi

Khi bạn đã thay đổi các cài đặt này trên blurb, bạn có thể nhấp chuột phải vào mô-đun và sử dụng "kiểu mở rộng" để áp dụng chúng cho ba kiểu kia.

mở rộng phong cách mô-đun blurbBây giờ chúng tôi đã tùy chỉnh bốn mô-đun Blurb của mình để trông theo cách chúng tôi muốn, đã đến lúc thêm một số mã để tạo phần tử được đánh số. Tuy nhiên, để thiết kế này hoạt động, trước tiên chúng ta cần thêm một dòng CSS vào hộp CSS tùy chỉnh của Main Element.

tràn: hiển thị

Điều này chỉ đơn giản sẽ cho phép các phần tử chúng ta tạo trong các bước sau có thể nhìn thấy bất cứ nơi nào chúng chồng lên các cạnh của mô-đun trình bày của chúng tôi.

Sau khi hoàn tất, hãy mở các tùy chọn của mô-đun và chuyển đến “Tab nâng cao”. Trong vùng "trước", hãy thêm đoạn mã CSS này:

nội dung: '1.'; / * thêm số "1." trước nội dung * / font-weight: bold; font-size: 80px; độ mờ: 0.7; / * làm cho số hơi trong suốt * / color: blue; / * thay đổi màu chữ của số * / vị trí: tuyệt đối; z-index: 9999; trái: 0; / * đặt nội dung ở 0px ở ngoài cùng bên trái của nội dung * / top: -20px; / * Định vị nội dung 20px trên đường viền trên cùng * /

Khi bạn đã thêm đoạn mã này, bạn sẽ thấy số xuất hiện ở trên cùng bên trái của nhóm Blurb. Bạn có thể thay đổi vị trí của số bằng cách thay đổi dòng "left:" và "top:" hoặc thay đổi màu sắc và kích thước phông chữ của số trong đoạn mã CSS này.

Khi bạn đã hoàn thành việc này cho mô-đun đầu tiên, hãy chuyển đến ba mô-đun blurb mới và thay đổi dòng "nội dung:" thành:

nội dung: '2.';
nội dung: '3.';

... vv

Bây giờ chúng tôi đã sắp xếp các số của mình, chúng tôi cần thêm một số CSS để tạo hình dạng của mũi tên.

Mở từng mô-đun và nhập nó vào hộp Sau của hộp CSS tùy chỉnh:

content:'';
display:block;
height:60px;
width:60px;
position:absolute ;
top:40%;
right:-30px;
z-index:-1;
background-color:#e8e8e8; 
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);

Tùy chỉnh mô-đun mờ thêm một mũi tênBây giờ, bốn ghi chú giới thiệu của bạn sẽ trông như thế này:

Kết quả của các sửa đổi mô-đunĐó là tất cả cho hướng dẫn này, tôi hy vọng nó sẽ cho phép bạn sử dụng tốt hơn các phần tử giả với các tùy chọn do Divi cung cấp.