Cara Membuat Desain Unik Menggunakan Elemen Sebelum dan Sesudah Pseudo di Divi
Diterbitkan: 2019-04-14Sebagai desainer web, kami selalu mencari cara baru untuk menambahkan individualitas ke situs web yang kami buat. Divi memberikan peluang tanpa batas untuk menghasilkan tata letak yang unik tetapi selalu ada sedikit tambahan yang dapat kami sertakan untuk menyatukan desain. Di sinilah elemen pseudo CSS sangat berguna.
Apa itu pseudo-element CSS?
Sederhananya, elemen pseudo CSS dapat digunakan untuk menata bagian tertentu dari suatu elemen. Ada lima jenis elemen semu yang melakukan hal yang berbeda. Untuk tujuan posting ini kita akan melihat ::sebelum dan ::setelah.
Kedua elemen semu ini digunakan untuk menyisipkan sesuatu sebelum atau sesudah isi suatu elemen. Ini sangat berguna karena kita dapat menggunakannya untuk menambahkan elemen visual tambahan ke gambar, teks, dan lainnya yang ada!
Jadi mengapa kita menggunakan elemen pseudo ini? Sebelum dan sesudah sempurna untuk membuka kemungkinan desain tanpa perlu menambahkan lebih banyak elemen atau modul. Sama, mereka berguna untuk menambahkan elemen tambahan tanpa harus menyentuh template html atau file tema inti.
Bagaimana Anda menggunakan elemen sebelum dan sesudah dengan Divi?
Jika sejauh ini semua ini terdengar sedikit membingungkan, jangan khawatir! Jika kita menggunakan ::before dan ::after saat menulis kode CSS dari awal, akan terlihat seperti ini:
Bayangkan kita memiliki baris teks dengan kelas "text-example" - CSS untuk menata dan menyesuaikan baris ini adalah:
.text-example {*This is where you add the styles*}Sekarang jika Anda ingin menambahkan dan menata elemen ::before atau ::after, CSS akan terlihat seperti ini:
.text-example::before {*This is where you add before content and styles*}.text-example::after {*This is where you add after content and styles*}Untungnya Divi menyediakan akses mudah ke ::sebelum dan ::setelah elemen semu dengan lebih sedikit kerumitan. Bahkan, jika Anda pernah membuka tab "Lanjutan" untuk modul apa pun untuk menambahkan kode CSS khusus, Anda akan melihat area yang kami maksud.
Kotak-kotak ini menyediakan pintasan cepat untuk menambahkan dan menyesuaikan konten sebelum dan sesudah modul Divi yang ada dan kita dapat menggunakannya untuk membuat beberapa desain yang sangat fleksibel dan menarik.
Sneak Peek
Inilah yang akan kita buat dalam tutorial ini:
Contoh 1
Contoh 2
Contoh 3
Mulai
Untuk tutorial ini kita hanya perlu salinan tema Divi dan batu tulis kosong. Untuk memulainya, kita akan membuat halaman baru dan, setelah menambahkan judul halaman, klik pembuat visual.
Sekarang kita siap untuk memulai!
Contoh 1: Modul uraian bernomor menggunakan Pseudo Elements
Uraian ini mungkin salah satu modul Divi paling fleksibel yang Anda inginkan. Dalam contoh ini kita akan menggunakan elemen semu untuk menambahkan angka sebelum setiap uraian untuk membuat bagian "cara kerjanya" langkah demi langkah. Kami juga akan menambahkan bentuk panah ke kanan untuk menunjukkan prosesnya.
Apa yang akan kita buat:
Meskipun desain ini akan bekerja dengan desain uraian apa pun, kami telah meminjam bagian uraian dari Tata Letak Agensi Web. Jika Anda ingin menggunakan ini sebagai titik awal, Anda dapat mengakses Halaman Arahan Agensi Web dengan membuat halaman baru dan mengakses pembuat ujung depan.
Saat halaman Anda dimuat, Anda akan memiliki opsi untuk menggunakan tata letak yang telah dibuat sebelumnya, salah satu tata letak yang Anda simpan, atau membangun dari awal. Pilih tata letak yang dibuat sebelumnya dan gunakan bilah pencarian untuk menemukan Tata Letak "Agen Web". Bagian uraian dalam tutorial ini dapat ditemukan di Landing Page.
Setelah dimuat, satu-satunya perbedaan antara tata letak premade dan contoh kami adalah bahwa kami telah mengubah latar belakang setiap uraian, judul dan warna font teks dan menambahkan sedikit padding.
Setelah Anda mengubah pengaturan ini pada satu uraian, Anda dapat mengklik kanan pada modul dan menggunakan "Perpanjang Gaya" untuk menerapkannya ke tiga lainnya.
Sekarang kita telah menyesuaikan empat modul uraian agar terlihat seperti yang kita inginkan, saatnya menambahkan beberapa kode untuk membuat elemen bernomor. Namun agar desain ini berfungsi, pertama-tama kita perlu menambahkan satu baris css ke kotak css kustom Elemen Utama.
overflow: visible;
Ini hanya akan memungkinkan elemen apa pun yang kita buat di langkah selanjutnya terlihat di mana pun mereka tumpang tindih dengan tepi modul uraian kita.
Setelah Anda selesai melakukannya, buka opsi modul dan navigasikan ke "Tab Lanjutan". Di dalam kotak "sebelum", tambahkan cuplikan CSS ini:
content: '1.'; /* Adds the number 1. as before content */ font-weight: bold; font-size: 80px; opacity: 0.7; /* Makes the number slightly transparent */ color: blue; /* Changes the color of the number text */ position: absolute; z-index: 9999; left: 0; /* Positions the content 0px away from the left border */ Top:-20px; /* Positions the content 20px above the top border */
Setelah Anda menambahkan cuplikan kode ini, Anda akan melihat nomor tersebut muncul di kiri atas modul uraian. Anda dapat mengubah posisi nomor dengan mengubah baris "kiri:" dan "atas:" atau mengubah warna dan ukuran font nomor dalam cuplikan CSS ini.
Setelah Anda menyelesaikan ini untuk modul pertama, masuk ke tiga modul uraian baru dan ubah baris “content:” menjadi:
isi: '2.';
isi: '3.';
…dan seterusnya.
Sekarang setelah nomor kita diurutkan, kita perlu menambahkan sedikit css untuk membuat bentuk panah.
Buka setiap modul dan masukkan ini ke dalam kotak Setelah di dalam area CSS Kustom:
content: ''; display:block; height:60px; /* Size of the shape */ width:60px; /* Size of the shape */ position:absolute; top:40%; right:-30px; z-index: -1; background-color: #e8e8e8; /* Colour of the shape */ transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);
Sekarang keempat uraian Anda akan terlihat seperti ini:
Contoh 2. Menambahkan bentuk unik ke modul yang ada
Desain ini bergantung pada cuplikan kode kecil yang sederhana namun efektif yang ditambahkan ke kotak CSS khusus ::before dan ::after dalam setiap modul teks.
Keindahan menggunakan elemen semu di sini adalah kita dapat mengintegrasikan bentuk dan objek unik ke modul yang ada tanpa perlu menambahkan elemen atau modul tambahan ke halaman kita. Karena elemen semu ini terkandung dalam modul kami yang ada, mereka tidak menambahkan ruang ekstra ke desain kami dan tetap terlihat bagus di semua perangkat.
Apa yang akan kita buat:
Untuk membuat tata letak awal, kita perlu menambahkan bagian reguler dengan baris tiga kolom, atur ke lebar default. Setelah Anda selesai melakukannya, tambahkan modul teks ke salah satu kolom baru.
Sekali lagi, Anda dapat menata modul teks ini sesuai keinginan Anda, namun jika Anda mengikuti, berikut adalah langkah-langkah untuk mencapai desain ini:
Buka opsi modul teks dan tambahkan konten teks Anda dan gambar latar belakang atau warna latar belakang sesuai kebutuhan. Kami telah menggunakan gambar latar belakang normal dengan gradien transparan di atas:
Selanjutnya, konfigurasikan opsi desain berikut:
1. Padding atas: 120px & Padding bawah: 120px
2.Perataan Teks: tengah & Warna teks: #ffffff
3. Perataan Judul: tengah & Warna judul: #f5ee5d
Sekarang setelah kita memiliki semua aspek visual untuk modul teks pertama Anda, sekarang saatnya menambahkan CSS untuk mewujudkan keajaiban. Di tab Advanced modul teks, tambahkan kode berikut ke kotak "sebelum":
content:''; height: 30px; /* change the size to suit your design */ width: 30px; /* change the size to suit your design */ display: block; position: absolute; border-top: solid 3px #f5ee5d; /* change the colour to suit your design */ border-left: solid 3px #f5ee5d; /* change the colour to suit your design */ left: 20px; /* change the position to suit your design */ top: 20px; /* change the position to suit your design */
Dan kemudian tambahkan kode berikut ke kotak "setelah":
content:''; height: 30px; /* change the size to suit your design */ width: 30px; /* change the size to suit your design */ display: block; position: absolute; border-bottom: solid 3px #f5ee5d; /* change the colour to suit your design */ border-right: solid 3px #f5ee5d; /* change the colour to suit your design */ right: 20px; /* change the position to suit your design */ bottom: 20px; /* change the position to suit your design */
Setelah Anda menambahkan potongan kode ini ke modul, Anda akan melihat bentuk baru kami yang mewah ditambahkan.
Jika Anda bertanya-tanya apa yang dilakukan CSS ini, sebenarnya cukup sederhana. Yang kita lakukan hanyalah membuat kotak transparan yang diposisikan 20px dari atas dan kiri (dan bawah dan kanan) modul teks. Kami kemudian menambahkan dua batas ke kotak ini untuk menciptakan efek panah.
Bila Anda senang dengan tampilan modul teks pertama ini, cukup salin dan tempel untuk mengisi kolom lain dan ubah konten teks, latar belakang, dan gaya yang sesuai.
Bonus dari metode ini adalah ia akan bekerja dengan hampir semua modul Divi dengan sedikit penyesuaian. Jika Anda ingin lebih mewah, coba tambahkan beberapa CSS tambahan untuk memutar, memiringkan, dan menyesuaikan elemen ::before dan ::after lebih jauh lagi. Selamat bersenang-senang!
Contoh 3. Menambahkan ikon dan deskripsi ke judul tab
Dalam desain ini kami akan memanfaatkan kemampuan untuk menambahkan ikon gambar sebelum beberapa konten yang ada serta deskripsi teks kecil di bawah ini. Ini sempurna untuk menyesuaikan modul tab Divi sedikit lebih jauh dari biasanya.
Catatan – Meskipun menambahkan konten melalui css sangat bagus untuk desain, namun tidak mudah diindeks oleh mesin pencari (walaupun Google sebenarnya mengindeks konten CSS dan Javascript, itu membutuhkan waktu lebih lama dan tidak dapat diandalkan saat ini. Mesin pencari seperti Bing dan DuckDuckGo melakukannya tidak mengindeks konten ini sama sekali). Untuk alasan ini konten Anda harus minimal dan Anda tidak boleh mengandalkannya untuk memengaruhi potensi peringkat Anda.
Apa yang akan kita buat:
Pertama-tama kita perlu menambahkan bagian standar dan baris 1 kolom, diikuti oleh modul tab Divi itu sendiri. Di dalam modul tab, kita hanya perlu menambahkan judul dan konten ke setiap tab karena kita akan menangani gaya di langkah selanjutnya.
Setelah konten kita ada, kita perlu mulai menambahkan konten ke elemen ::before modul. Karena kita tidak dapat menambahkan CSS khusus ke tab tertentu menggunakan metode yang telah kita ikuti di atas, kita harus melakukannya dengan sedikit berbeda.
Buka opsi modul tab dan di dalam tab Lanjutan berikan modul kelas "tab mewah".
Setelah Anda menambahkan kelas CSS ini, kita perlu melakukan sedikit persiapan. Untuk menambahkan beberapa ikon atau gambar ke judul tab Anda, kami jelas perlu menambahkannya ke WordPress. Buka tab Media di dasbor WordPress dan unggah ikon pilihan Anda seperti biasa.
Dengan gambar Anda diunggah, kami perlu mengklik masing-masing dan menyalin URL yang telah dibuat WordPress untuk kami. Telusuri setiap gambar Anda dan salin dan tempel URL ini ke dalam dokumen atau aplikasi catatan pilihan Anda.
Dengan URL gambar yang Anda pilih, buka Opsi Tema Divi Anda dalam menu Divi di Dasbor WordPress.
Di bagian bawah halaman ini Anda akan melihat kotak tempat Anda dapat menambahkan CSS kustom Anda sendiri. Di dalam kotak inilah kita akan menempelkan beberapa kode CSS.
Cuplikan berikut akan menambahkan gambar di atas setiap judul tab. Cukup salin dan tempel cuplikan ini ke dalam kotak CSS khusus dan ganti konten di antara (dan termasuk) tanda bintang (misalnya *Ganti ini dengan URL untuk gambar pertama Anda*) dengan URL yang Anda catat sebelumnya.
.fancy-tabs .et_pb_tab_0 a::before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::before {
content: url(*Replace this with the URL for your second image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::before {
content: '' !important; }
Jika Anda kembali ke halaman dengan modul tab aktif, Anda sekarang akan melihat bahwa gambar telah ditambahkan di atas setiap judul – sukses!
Jadi bagaimana dengan menambahkan deskripsi? Untungnya ini juga cukup sederhana. Tepat di bawah kode yang baru saja Anda salin ke dalam kotak CSS khusus Anda, rekatkan yang berikut ini:
.fancy-tabs .et_pb_tab_0 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::after {
content: '' !important; }
Seperti sebelumnya dengan gambar Anda, Anda harus mengganti "ini adalah deskripsi" dengan konten Anda sendiri. Kembali ke halaman dengan modul tab Anda, Anda akan melihat kami sekarang memiliki deskripsi yang bagus juga!
Akhirnya, kita hanya perlu menerapkan lebih banyak CSS untuk mencapai desain lengkap yang ditunjukkan di atas. Sekali lagi, salin cuplikan berikut ke dalam kotak CSS khusus yang sama:
.fancy-tabs .et_pb_tab_content a:after {
content: '' !important; }
.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
.fancy-tabs .et_pb_tabs_controls li a {
width: 100% !important;
text-align: center;
}
@media (max-width: 768px) {
.fancy-tabs .et_pb_tabs_controls li {
width: 100% !important;
}
.fancy-tabs .et_pb_tabs_controls {
padding: 0 !important;
}
}
Kode ini memusatkan teks dan gambar tab Anda dan meningkatkan lebar tab Anda untuk menutupi seluruh modul.
Kami juga menambahkan beberapa CSS untuk memastikan tab terlihat bagus di semua perangkat – jika Anda lebih memilih untuk tidak memiliki lebar penuh dan tumpukan tab di seluler, kami harus kembali dan mengelilingi kode CSS asli dalam kueri media. Ini berarti bahwa pada perangkat seukuran tablet dan lebih lebar kami menambahkan deskripsi dan ikon, namun pada perangkat yang lebih kecil kami akan kembali ke gaya default Divi.
Untuk melakukan ini, salin kode CSS yang diubah di bawah ini dan rekatkan ke area CSS khusus Anda di panel opsi tema Divi:
@media (min-width: 769px) {
.fancy-tabs .et_pb_tab_0 a::before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::before {
content: url(*Replace this with the URL for your second image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::before {
content: '' !important; }
.fancy-tabs .et_pb_tab_0 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::after {
content: '' !important; }
.fancy-tabs .et_pb_tab_content a:after {
content: '' !important; }
.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
.fancy-tabs .et_pb_tabs_controls li a {
width: 100% !important;
text-align: center;
}
}
Menambahkan lebih banyak tab
Dalam contoh ini kami telah membuat modul tab yang mencakup 2 tab berbeda, namun dalam praktiknya terkadang kami membutuhkan lebih dari ini. Jika Anda berada dalam posisi di mana Anda ingin membuat lebih dari 2 tab, kami perlu mengubah kode yang baru saja Anda tambahkan.
Seperti yang Anda lihat dari cuplikan, Divi secara otomatis menetapkan kelas untuk setiap judul tab – yang pertama dimulai dengan 0 (.et_pb_tab_0), meningkat 1 setiap kali (.et_pb_tab_1, .et_pb_tab_2 dan seterusnya). Kami telah menangani dua tab pertama, jadi saat menambahkan lebih banyak, kami cukup menyalin dan menempelkan bagian kode untuk setiap tab baru:
.fancy-tabs .et_pb_tab_0 a:before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
}
dan ubah nomor di kelas (.et_pb_tab_0) menjadi 2, 3, 4 dst. Anda juga harus melakukan hal yang sama untuk deskripsi Anda.
Perubahan terakhir yang perlu kita lakukan adalah menyesuaikan satu baris CSS lagi. Ambil jumlah tab Anda dan bagi dengan 100. Catat nomor ini dan navigasikan ke bagian berikut di CSS khusus Anda:
.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
dan tukar 50% dengan jawaban Anda. Ini akan memastikan tab Anda memiliki jarak yang sama di seluruh lebar modul.
Misalnya, jika Anda membuat tab ketiga, kode CSS tambahan yang Anda butuhkan adalah sebagai berikut:
.fancy-tabs .et_pb_tabs_controls li {
width: 33% !important;
}
Sebagai penutup
Dan begitulah, tiga cara hebat untuk memanfaatkan elemen CSS ::before dan ::after untuk menciptakan kemungkinan desain baru. Semoga panduan ini akan menginspirasi Anda untuk mengeksplorasi bagaimana Anda dapat menggunakan elemen semu dalam kreasi masa depan Anda – peluangnya benar-benar tidak terbatas!