Cara Menata Ikon Blurb sebagai Aksen Desain untuk Konten di Divi
Diterbitkan: 2019-03-25Menggunakan ikon uraian sebagai aksen desain dapat memberikan tata letak halaman Anda desain unik yang mungkin belum pernah Anda pikirkan sebelumnya. Selain memposisikan ikon modul uraian untuk tumpang tindih dengan modul teks, Anda dapat menggunakan latar belakang dan batas modul teks untuk menata ikon. Ini menciptakan aksen desain yang bagus yang membingkai konten sambil memberi ikon Anda desain yang benar-benar unik.
Dalam tutorial ini, saya akan menunjukkan cara menata ikon blurb sebagai aksen desain untuk konten Anda di Divi.
Mari selami!
Sneak Peek
Berikut adalah beberapa contoh desain yang akan kita buat dalam tutorial ini.
Unduh Contoh Tata Letak untuk Tutorial ini
Untuk mendapatkan tata letak desain aksen modul blurb gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.
Unduh Gratis
Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.
Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!
Memulai Membangun Desain Dari Awal
Untuk memulai, buat halaman baru dan beri judul pada halaman Anda. Kemudian gunakan pembuat Divi di ujung depan. Tambahkan bagian reguler dengan baris satu kolom. Sebelum menambahkan modul pertama Anda, perbarui pengaturan baris dengan yang berikut:
Gunakan Lebar Talang Kustom: YA
Lebar Talang Kustom: 1
Ini akan menghilangkan margin khusus di antara modul.
Membuat Modul Teks
Selanjutnya tambahkan modul teks di dalam baris.
Perbarui modul teks dengan teks pengisi berikut:
<h2>Our Services</h2> <p>Your content goes here. Edit or remove this text inline or in the module Content settings. </p>
Menata Modul Teks
Sekarang perbarui sisa pengaturan modul Teks sebagai berikut:
Warna Latar Belakang: #ffffff
- Judul 2 Font: Nunito
- Judul 2 Berat Font: Tebal
- Judul 2 Gaya Font: TT
- Judul 2 Warna Teks: #f24a5b
- Judul 2 Ukuran Teks: 42px (Desktop), 32px (tablet), 22px (ponsel)
- Judul 2 Spasi Huruf[acing: 16px
- Pos 2 Tinggi Baris: 1.3em
- Lebar: 500 piksel (desktop), 490 piksel (tablet)
- Penyelarasan Modul: tengah
- Padding Kustom (desktop): 40px atas, 40px bawah, 50px kiri, 50px kanan
- Padding Kustom (telepon): 20px kiri, 20px kanan
- Lebar Perbatasan: 10px
- Warna Perbatasan: #ffffff
Karena kita akan menumpang tindih modul teks dengan ikon uraian, kita perlu memastikan modul teks berada di atas ikon dalam urutan z-space. Untuk melakukan ini, pertama-tama kita harus menambahkan potongan CSS berikut ke kotak CSS Elemen Utama modul Teks:
position: relative;
Kemudian atur nilai indeks-z ke 1.
Sekarang modul teks ini akan berada di atas modul tumpang tindih lainnya yang penting untuk desain.
Membuat Ikon Blurb
Sekarang kita siap untuk membuat ikon blurb pertama. Untuk melakukannya kita harus menambahkan modul blurb terlebih dahulu dan menyeretnya ke bagian atas modul teks. Kemudian hapus konten tiruan (teks judul dan teks isi) dan Klik untuk menggunakan ikon alih-alih gambar untuk uraian.
Kemudian perbarui pengaturan desain berikut:
- Warna Ikon: #2ea3f2
- Gunakan Ukuran Font Ikon: YA
- Ukuran Font Ikon: 100px
- Custom Margin: 0px bottom (ini menghilangkan margin bawah default antar modul; tidak perlu jika Anda menggunakan lebar talang baris 1)
Selanjutnya, karena kita tidak menggunakan teks apa pun dengan modul (hanya ikon), kita dapat menghilangkan margin bawah default di bawah ikon uraian. Untuk melakukannya, tambahkan CSS khusus berikut ke kotak Blurb Image CSS:
CSS Gambar Kabur:
margin-bottom: 0px
Gandakan Ikon Blurb
Sebelum kita mulai memposisikan blurb, mari kita lanjutkan dan duplikat modul blurb dan seret duplikat di bawah modul teks. Anda sekarang harus memiliki ikon uraian di atas dan di bawah modul teks.
Memposisikan Ikon Blurb Menggunakan Transform Translate
Untuk memposisikan ikon uraian, kita akan menggunakan opsi transformasi Divi yang memungkinkan kita menempatkan modul uraian dengan ikon di mana pun kita inginkan pada halaman.
Memposisikan Ikon Blurb #1
Untuk memposisikan ikon uraian atas, buka pengaturan modul uraian dan perbarui yang berikut:
- Transformasi Terjemahkan sumbu X (desktop): -242px
- Transformasi Terjemahkan sumbu Y (desktop): 50px
- Transformasi Terjemahkan sumbu X (ponsel): -170px
Memposisikan Ikon Blurb #2
Sebelum kita memposisikan ikon uraian ini, mari kita membuatnya sedikit lebih besar. Untuk melakukan ini, buka pengaturan modul uraian dan ubah Ukuran Font Ikon menjadi 150px.
Kemudian posisikan ikon uraian dengan memperbarui opsi transformasi berikut:
- Transformasi Terjemahkan sumbu X (desktop): 242px
- Transformasi Terjemahkan sumbu Y (desktop): -100px
- Transformasi Terjemahkan sumbu X (ponsel): 190px
Membuat Baris Dua Kolom
Untuk membuat kolom berikutnya, duplikat baris yang ada dan ubah tata letak kolom baris menjadi tata letak dua kolom (1/2 1/2). 
Selanjutnya, gunakan fitur multiselect Divi untuk memilih ketiga modul di kolom kiri lalu salin dan tempel ke kolom kedua.
Kemudian, hapus ikon uraian bawah di kolom satu.
Menyejajarkan Ikon Blurb di Kolom 2
Untuk Ikon Blurb di kolom 2, kita perlu menggeser ikon atas ke kiri dan ikon bawah ke kanan. Kita dapat melakukan ini hanya dengan mengubah nilai sumbu X Transform Translate.
Buka pengaturan modul uraian untuk modul uraian atas di kolom 2 dan perbarui yang berikut:
- Transformasi Terjemahkan sumbu X (desktop): 242px
- Transformasi Terjemahkan sumbu X (ponsel): 170px
Pada dasarnya yang Anda lakukan hanyalah mengubah nilai-nilai ini dari negatif ke positif untuk menggesernya ke arah yang berlawanan di sepanjang sumbu x.
Selanjutnya, perbarui nilai transform translate untuk modul uraian bawah di kolom 2 sebagai berikut:
- Transformasi Terjemahkan sumbu X (desktop): -242px
- Transformasi Terjemahkan sumbu X (ponsel): -190px
Perbarui Gaya Modul Teks di Baris Kedua
Baris kedua konten berfungsi sebagai bagian dari layanan unggulan. Oleh karena itu, kami ingin ukuran font judul berbeda dan lebih kecil dari header kami. Untuk memperbarui dua modul teks secara bersamaan, gunakan multiselect untuk memilih kedua modul teks. Kemudian perbarui yang berikut ini:
Ubah konten heading h2 menjadi "Layanan".
- Judul 2 Ukuran Teks: 28px (desktop), 22px (tablet), 18px (ponsel)
Simpan Pengaturan.
Sekarang buka modal pengaturan untuk modul teks di kolom 2 dan perbarui yang berikut:
- Orientasi Teks: Kanan
Menyesuaikan Spasi Tata Letak
Saat ini mungkin ada terlalu banyak ruang putih (atau negatif) di antara dua baris konten. Untuk menghilangkan sebagian dari ruang itu, kita dapat menambahkan margin bawah negatif ke modul uraian bawah di baris atas sebagai berikut:
- Margin Kustom: -100px bawah
Hasil Akhir
Sekarang mari kita lihat hasil akhirnya.
Mencoba Ikon Lainnya
Untuk mencoba berbagai ikon untuk tata letak Anda, Anda dapat menggunakan fitur temukan dan ganti. Buka pengaturan uraian untuk salah satu uraian yang berisi ikon Anda. Kemudian klik kanan pada ikon di modal pengaturan dan pilih Temukan & Ganti.
Di popup Temukan & Ganti, perbarui yang berikut ini:
- Dalam: Bagian Ini
- Ganti Dengan: [pilih ikon baru]
Setelah itu, klik tombol ganti.
Ini akan mengubah semua uraian di bagian Anda dengan yang baru.
Berikut adalah beberapa contoh tata letak menggunakan ikon yang berbeda.
Pikiran Akhir
Menambahkan ikon uraian sebagai aksen desain ke konten Anda adalah contoh bagaimana dua modul dapat digabungkan untuk membuat desain yang benar-benar unik. Dalam hal ini, latar belakang dan batas modul teks berfungsi sebagai hamparan sebagian untuk ikon di sekitarnya. Hasilnya unik dan membuka pintu untuk mengeksplorasi lebih banyak variasi desain. Jangan ragu untuk menjelajahi berbagai ikon dan kombinasi warna untuk menciptakan sesuatu untuk kebutuhan Anda sendiri.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!