Untuk setiap pemilik situs web, seringkali penting untuk mengetahui bahwa Anda menonjol dari kompetisi. Divi menawarkan kemungkinan yang tak terhitung untuk menghasilkan tata letak yang unik, tetapi kami selalu dapat, dengan sedikit lebih menggali, membuat sesuatu yang lebih unik. Di sinilah elemen pseudo CSS sangat berguna.
Apa yang kami maksud dengan elemen pseudo-CSS?
Sederhananya, pseudo-element CSS dapat digunakan untuk mendesain bagian tertentu dari sebuah elemen. Ada lima jenis elemen semu yang melakukan hal berbeda. Untuk keperluan artikel ini, kita hanya akan membahas tentang: sebelum dan: sesudah.
Kedua elemen semu ini digunakan untuk menyisipkan sesuatu sebelum atau sesudah isi dari suatu elemen. Hal ini sangat berguna karena kita dapat menggunakannya untuk menambahkan elemen visual tambahan ke gambar, teks, dan elemen lainnya yang ada!
Jadi mengapa kita menggunakan elemen semu ini? Before and After sangat bagus untuk membuka kemungkinan desain tanpa perlu menambahkan lebih banyak elemen atau modul. Demikian pula, mereka berguna untuk menambahkan elemen tambahan tanpa harus menyentuh template html utama atau file tema.
Bagaimana Anda menggunakan elemen sebelum dan sesudah dengan Divi?
Jika sejauh ini semua tampak agak membingungkan, jangan khawatir! Jika kita menggunakan :: before dan :: after untuk menulis kode CSS dari awal, akan terlihat seperti ini:
Misalkan kita memiliki baris teks dengan kelas "contoh-teks" - CSS untuk menata dan menyesuaikan baris ini akan menjadi:
.example-text {* tambahkan gaya Anda di sini *}
Sekarang, jika Anda ingin menambahkan dan menata elemen :: sebelum atau :: setelah, CSS akan terlihat seperti ini:
.example-text :: before {* tambahkan style Anda sebelum elemen di sini *} .example-text :: after {* tambahkan style Anda setelah elemen di sini *}
Untungnya, Divi menyediakan akses mudah ke ::sebelum dan ::setelah elemen semu dengan lebih sedikit kerumitan. Bahkan, jika Anda pernah membuka tab "Lanjutan" untuk menambahkan CSS khusus, Anda telah melihat area yang kami maksud.
Area ini menyediakan pintasan cepat untuk menambah dan menyesuaikan isi sebelum dan sesudah modul apa pun Divi sudah ada dan kita dapat menggunakannya untuk membuat desain yang sangat fleksibel dan menarik.
penelitian
Inilah yang akan kita buat dalam tutorial ini:
Contoh 1
awal
Untuk tutorial ini, kita akan mulai dalam mode Visual Builder. Oleh karena itu Anda harus mengklik "Visual Builder", ketika Anda berada di halaman baru.
Sekarang kita siap untuk memulai!
Contoh 1: Modul Blurb bernomor menggunakan elemen semu
Uraian mungkin adalah salah satu modul Divi paling fleksibel yang tersedia untuk Anda. Dalam kasus ini, kita akan menggunakan elemen semu untuk menambahkan angka sebelum setiap presentasi untuk membuat detail bagian "Cara kerjanya". Kami juga akan menambahkan bentuk panah ke kanan untuk menunjukkan prosesnya.
Apa yang akan kita buat:
Sementara desain ini berfungsi dengan semua desain presentasi, kami meminjam bagian khusus untuk presentasi dari agensi web. Jika Anda ingin menggunakannya sebagai titik awal, Anda dapat membuka halaman arahan agensi web dengan membuat halaman baru dan membuka pembuat front-end.
Saat halaman Anda dimuat, Anda memiliki opsi untuk menggunakan tata letak yang telah ditentukan, salah satu tata letak yang Anda simpan, atau membuat build baru. Pilih tata letak yang telah ditentukan dan gunakan bilah pencarian untuk menemukan tata letak "Agensi Web". Bagian ikhtisar dari tutorial ini ada di halaman arahan.
Setelah dimuat, satu-satunya perbedaan antara tata letak yang telah ditentukan dan contoh kami adalah bahwa kami telah mengubah latar belakang setiap teks, judul dan warna font teks dan menambahkan padding kecil.
Setelah Anda mengubah pengaturan ini pada uraian, Anda dapat mengklik kanan pada modul dan menggunakan "gaya diperpanjang" untuk menerapkannya ke tiga lainnya.
Sekarang kita telah menyesuaikan empat modul Blurb kita agar terlihat seperti yang kita inginkan, saatnya menambahkan beberapa kode untuk membuat elemen bernomor. Namun, agar desain ini berfungsi, pertama-tama kita perlu menambahkan baris CSS ke kotak CSS khusus Elemen Utama.
overflow: terlihat
Ini hanya akan memungkinkan elemen yang kita buat dalam langkah-langkah berikut dapat terlihat di mana pun mereka tumpang tindih dengan tepi modul presentasi kami.
Setelah selesai, buka opsi modul dan pergi ke "tab Advanced". Di area "sebelum", tambahkan cuplikan CSS ini:
konten: '1.'; / * tambahkan angka "1." sebelum konten * / font-weight: bold; ukuran font: 80px; opasitas: 0.7; / * buat angkanya sedikit transparan * / color: blue; / * ubah warna font angka * / position: absolute; z-indeks: 9999; kiri: 0; / * tempatkan konten pada 0px di ujung kiri konten * / top: -20px; / * Memposisikan konten 20px di atas batas atas * /
Setelah Anda menambahkan cuplikan ini, Anda akan melihat nomor tersebut muncul di kiri atas pod Blurb. Anda dapat mengubah posisi nomor dengan mengubah baris "left:" dan "top:" atau mengubah warna nomor dan ukuran font dalam cuplikan CSS ini.
Setelah Anda menyelesaikan ini untuk modul pertama, buka tiga modul uraian baru dan ubah baris "konten:" menjadi:
isi: '2.';
konten: '3.';
... dll.
Sekarang kita telah menyortir angka-angka kita, kita perlu menambahkan beberapa CSS untuk membuat bentuk panah.
Buka setiap modul dan masukkan dalam kotak After dari kotak CSS khusus:
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);
Sekarang, empat catatan pengantar Anda akan terlihat seperti ini:
Itu saja untuk tutorial ini, saya harap ini akan memungkinkan Anda untuk menggunakan elemen semu dengan lebih baik dengan opsi yang ditawarkan oleh Divi.
