Menggunakan ikon presentasi sebagai sentuhan estetika dapat memberi tata letak Anda desain unik yang mungkin tidak pernah Anda pikirkan. Selain memposisikan ikon modul presentasi untuk menutupi modul teks, Anda dapat menggunakan latar belakang dan batas modul teks untuk memberi gaya ikon. Ini menciptakan aksen desain bagus yang membingkai konten sekaligus memberi ikon Anda desain yang benar-benar unik.
Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana menyesuaikan dgn mode ikon presentasi sebagai aksen desain untuk konten Anda di Divi.
penelitian
Berikut adalah beberapa contoh desain yang akan kami buat dalam tutorial ini.
Unduh contoh layout untuk tutorial ini
Untuk mendapatkan tata letak pola aksen modul uraian singkat gratis, Anda perlu mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses unduhan, Anda harus berlangganan milis Divi Daily kami menggunakan bentuk di bawah. Sebagai pelanggan baru, Anda akan menerima lebih banyak lagi kebaikan Divi dan paket Tata Letak Divi setiap hari Senin gratis ! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah dan klik Unduh. Anda tidak akan “mendaftar ulang” atau menerima email tambahan.
Download
Mulailah dengan desain dari awal
Untuk memulai, buat halaman baru dan beri judul pada halaman Anda. Kemudian, terapkan pembuat Divi pada sistem bagian publik. Tambahkan bagian biasa dengan baris satu kolom. Sebelum menambahkan modul pertama Anda, perbarui pengaturan baris dengan yang berikut:
Gunakan lebar selokan khusus: YA
Lebar Talang Khusus: 1
Ini akan menghilangkan margin khusus antar modul.
Membuat modul teks
Kemudian tambahkan modul teks di dalam baris.
Perbarui modul teks dengan teks isian berikut:
Pelayanan kami bagian ini menampilkan daftar berbagai layanan yang kami tawarkan kepada pelanggan kami.
Sesuaikan modul teks
Sekarang, perbarui sisa parameter modul Teks sebagai berikut:
- Warna latar: #ffffff
- Tajuk 2 Font: Nunito
- Judul 2 Berat font: Tebal
- Judul 2 Gaya Huruf: TT
- Judul 2 Warna teks: #f24a5b
- Judul 2 Ukuran Teks: 42 piksel (desktop), 32 piksel (tablet), 22 piksel (ponsel)
- Judul 2 Penempatan Huruf: 16px
- Judul 2 Tinggi Baris: 1.3em
- Lebar: 500px (desktop), 490px (tablet)
- Penyelarasan modul: pusat
- Padding khusus (desktop): 40px di atas, 40px di bawah, 50px di kiri, 50px di kiri, XNUMXpx di kanan
- Padding khusus (telepon): 20px di sebelah kiri, 20px di sebelah kanan
- Lebar perbatasan: 10px
- Warna perbatasan: #ffffff
Karena kita akan tumpang tindih modul teks dengan ikon presentasi, kita perlu memastikan bahwa modul teks berada di atas ikon dalam urutan z-space. Untuk melakukan ini, pertama-tama kita perlu menambahkan potongan CSS berikut di area CSS dari elemen utama modul Teks:
posisi: relatif;
Kemudian atur nilai indeks-z ke 1.
Sekarang, modul teks ini akan ditempatkan di atas modul lain yang tumpang tindih, yang penting untuk desain.
Buat ikon Blurb
Kami sekarang siap untuk membuat ikon uraian pertama. Untuk melakukan ini, pertama-tama kita perlu menambahkan modul Blurb dan menyeretnya ke bagian atas modul teks. Kemudian hapus isi placeholder (teks judul dan teks isi) dan Klik untuk menggunakan ikon alih-alih gambar untuk teks uraian.
Kemudian perbarui parameter desain berikut:
- Warna Ikon: # 2ea3f2
- Gunakan ukuran font ikon: YA
- Ukuran Font Ikon: 100px
- Margin Kustom: 0px di bagian bawah (ini menghapus margin bawah default antara modul, tidak perlu jika Anda menggunakan 1 selokan lebar)
Kemudian, karena kami tidak menggunakan teks apa pun dengan modul (hanya ikonnya), kami dapat menghapus margin bawah default di bawah ikon tata letak. Untuk melakukan ini, tambahkan kode CSS khusus berikut ke area CSS Blurb Image:
Blurb Gambar CSS:
margin-bottom: 0px
Gandakan Ikon Blurb
Sebelum kita mulai memposisikan uraian, mari kita lanjutkan, duplikat modul uraian dan seret ke bawah modul teks. Anda sekarang harus memiliki ikon presentasi di atas dan di bawah modul teks.
Menempatkan Ikon Presentasi Menggunakan Transform Translate
Untuk memposisikan ikon presentasi, kami akan menggunakan opsi transformasi Divi, yang memungkinkan kami menempatkan modul presentasi dengan ikon di mana saja di halaman.
Ikon Blurb Positioning #1
Untuk memposisikan ikon blurb atas, buka pengaturan modul blurb dan perbarui yang berikut:
- Transform translate X axis (desktop): -242px
- Ubah terjemahan sumbu Y (desktop): 50px
- Transform translate X axis (telepon): -170px
Namun, Anda dapat menambahkan ini sesuai dengan pengaturan yang telah Anda buat.
Ikon Blurb Positioning # 2
Sebelum memposisikan ikon presentasi ini, mari kita perbesar. Untuk melakukan ini, buka pengaturan modul Blurb dan ubah ukuran font ikon menjadi 150px.
Kemudian posisikan ikon presentasi dengan memperbarui opsi transformasi berikut:
- Transform translate X axis (desktop): 242px
- Ubah terjemahan sumbu Y (desktop): -100px
- Transform translate X axis (telepon): 190px
Pembuatan bagian lain
Mulai sekarang kita bisa mengambil inspirasi dari apa yang sudah kita lakukan, membuat zona lain dengan penataan berbeda. Yang perlu Anda lakukan adalah membuat kolom baru, dan menyalin modul sebelumnya. Untuk melakukan beberapa salinan, arahkan kursor ke setiap modul sambil menahan tombol CTRL pada keyboard Anda.
Hasil akhir
Sekarang mari kita lihat hasil akhirnya.
final pikiran
Menambahkan ikon presentasi sebagai aksen desain pada Anda isi adalah contoh bagaimana dua modul dapat digabungkan untuk menciptakan desain yang benar-benar unik. Dalam hal ini, latar belakang dan batas modul teks berfungsi sebagai overlay sebagian untuk ikon di sekitarnya. Hasilnya unik dan membuka pintu untuk mengeksplorasi beberapa variasi desain. Jangan ragu untuk menjelajahi berbagai ikon dan kombinasi warna untuk menciptakan sesuatu sesuai kebutuhan Anda.
Harapan untuk mendengar dari Anda di komentar.
