Cara Menjadi Kreatif dengan Latar Belakang Ikon Blurb Anda di Divi

Modul blurb adalah beberapa elemen paling serbaguna yang dapat Anda temukan di Divi. Dalam posting ini, kami akan menunjukkan kepada Anda bagaimana melangkah lebih jauh dan berkreasi dengan latar belakang ikon blurb. Kami akan menggunakan kombinasi modul uraian, modul teks, dan modul ajakan bertindak. Desain unik ini sangat cocok untuk halaman layanan dan halaman kategori produk. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasil dari ketiga contoh di berbagai ukuran layar.

Contoh 1

Desktop

Seluler

Contoh #2

Desktop

Seluler

Contoh #3

Desktop

Seluler

Unduh Contoh Latar Belakang Ikon Blurb GRATIS

Untuk mendapatkan contoh latar belakang ikon uraian 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 File

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.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Berlangganan Saluran Youtube Kami

Langkah Umum

Tambahkan Bagian Baru

Latar belakang

Untuk membuat ulang desain latar belakang uraian kreatif ini, buka halaman baru atau tambahkan bagian baru ke halaman yang sudah ada. Sebelum menambahkan baris, tambahkan warna latar belakang ke bagian Anda.

• Warna Latar Belakang: #f7f7f7

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus ke bagian juga.

• Padding Atas dan Bawah: 120px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Sebelum menambahkan modul apa pun, sesuaikan ukuran baris.

• Lebar: 100%
• Lebar Maks: 100%

Jarak

Kemudian, sesuaikan padding dalam pengaturan spasi.

• Padding Atas: 8vw
• Padding Bawah: 15vw
• Padding Kiri dan Kanan: 12vw

kolom 1

Setelah Anda selesai mengubah pengaturan baris, buat beberapa perubahan pada kolom pertama.

Latar belakang

Pertama, tambahkan latar belakang putih.

• Warna Latar Belakang: Putih #ffffff

Berbatasan

Kemudian, tambahkan beberapa radius perbatasan.

• Sudut Bulat: 2vw keempat sudut

Bayangan Kotak

Terakhir, tambahkan bayangan kotak.

• Kotak-Bayangan: Opsi Pertama
• Kekuatan Buram Bayangan Kotak: 47px

Baris Klon Dua Kali

Ada satu langkah terakhir yang tersisa sebelum kita mulai menambahkan modul. Kloning baris dua kali.

Buat Ulang Contoh #1

Tambahkan Modul Blurb ke Kolom 1

Hapus Konten Default

Sekarang setelah kita menyiapkan baris dan kolom, kita dapat mulai menambahkan modul ke kolom 1 dari baris pertama. Pertama, tambahkan modul uraian dan hapus semua judul default dan teks isi.

Pilih Ikon

Kemudian, pilih ikon, bukan gambar.

• Ikon: Tautan

Latar belakang

Tambahkan warna latar belakang hitam ke modul uraian.

• Warna Latar Belakang: Hitam #000000

Pengaturan Ikon

Kemudian, ubah pengaturan ikon.

• Warna Ikon: Kuning #edf000
• Penempatan Ikon: Atas
• Ukuran Font Ikon:
  • Desktop: 3vw
  • Tablet: 11vw
  • Telepon: 13vw

Perekat

Lanjutkan dengan menyesuaikan ukuran modul.

• Lebar Konten: 100%
• Lebar:
  • Desktop: 11vw
  • Tablet: 19vw
  • Telepon: 22vw

Jarak

Tambahkan beberapa nilai spasi juga.

• Margin Atas: -5vw
• Margin Bawah: 0vw
• Margin Kiri: -1vw
• Padding Atas dan Padding Bawah: 4vw

Berbatasan

Untuk memberi ikon bentuk yang unik, tambahkan beberapa radius batas ke masing-masing sudut kecuali yang kiri bawah.

• Sudut Bulat: 50vw, 0vw di sudut kiri bawah.

Bayangan Kotak

Terakhir, tambahkan bayangan kotak.

• Kotak-Bayangan: Opsi Pertama
• Kekuatan Buram Bayangan Kotak: 50px

CSS khusus

Ikon memiliki, secara default, beberapa margin bawah yang melekat padanya. Untuk menghilangkannya, kita akan menambahkan satu baris kode CSS ke kotak CSS kustom gambar blurb.

• Gambar Blurb: margin-bottom: 0px;

margin-bottom: 0px;

Tambahkan Modul Teks ke Kolom 1

Tambahkan Konten H3

Di bawah ikon, tambahkan modul teks dengan beberapa konten H3 pilihan Anda.

Latar belakang

Buka pengaturan latar belakang dan tambahkan latar belakang gradien.

• Latar Belakang: Gradien
• Warna Satu: Transparan
• Warna Dua: Kuning #edf000
• Arah Gradien: 180 derajat
• Posisi Awal dan Akhir: 74%

Teks Judul

Kemudian, gaya teks H3.

• Judul Teks Judul Tingkat: H3
• Huruf H3: Josefin Sans
• Penjajaran H3: Pusat
• Warna Huruf H3: Hitam #oooooooo
• Ukuran Teks H3:
  • Desktop: 2.4vw
  • Tablet: 3.4vw
  • Telepon: 4.8vw
• Spasi Huruf H3: 0em

Perekat

Dalam pengaturan ukuran, sesuaikan lebar untuk tablet dan ponsel.

• Lebar:
  • Tablet: 50%
  • Telepon: 60%

Jarak

Lanjutkan dengan masuk ke pengaturan spasi dan menyesuaikan nilai margin.

• Margin Kiri dan Kanan: 5vw
• Padding Atas: 1vw

Mengubah

Terakhir, putar modul dengan opsi transformasi.

• Ubah Terjemahan:
  • sumbu x: -20vw
  • sumbu y: 13vw
• Transform Rotate: Opsi Pertama, 280 derajat

Tambahkan Modul Ajakan Bertindak ke Kolom 1

Hapus Konten Judul Default, Tambahkan Tombol dan Konten Teks

Modul berikutnya dan terakhir yang kita butuhkan di kolom 1 adalah modul panggilan untuk bertindak. Tambahkan beberapa konten pilihan Anda dan hapus salinan judul.

Tambahkan Tautan

Tambahkan tautan yang relevan ke tombol.

Latar belakang

Pastikan latar belakang tidak memiliki warna.

Teks Tubuh

Lalu, buka tab desain dan ubah pengaturan teks isi.

• Font Tubuh: Teks Crimson
• Perataan Teks Tubuh: Kiri
• Warna Teks Tubuh: Abu-abu Gelap #666666
• Ukuran Teks Tubuh:
  • Desktop: 1.2vw
  • Tablet: 2.6vw
  • Telepon: 3.1vw
• Tinggi Garis Tubuh: 1.8em

Tombol

Ubah gaya tombol juga.

• Ukuran Teks Tombol:
  • Desktop: 1vw
  • Tablet: 2vw
  • Telepon: 3vw
• Warna Teks Tombol: Abu-abu Sangat Gelap #3f3f3f
• Warna Batas Tombol: Abu-abu Sangat Gelap #3f3f3f
• Font Tombol: Josefin Sans
• Margin Tombol: 3vw
• Tombol Atas dan Bawah Padding: 1vw
• Tombol Padding Kiri dan Kanan: 3vw

Jarak

Selesaikan pengaturan modul dengan menambahkan beberapa padding kiri dan kanan.

• Padding Kiri dan Kanan: 7vw

Hapus Kolom Dua dan Klon Kolom 1

Sesuaikan Pengaturan di Kolom 2

Sekarang, kembali ke pengaturan baris dan hapus kolom kedua. Segera setelah itu, klon kolom pertama. Pada langkah selanjutnya, kita akan menyesuaikan beberapa pengaturan di kolom duplikat.

Modul Blurb

Mulailah dengan mengubah warna ikon modul uraian.

• Warna Ikon: Aqua #00ffd4

Modul Teks

Ubah latar belakang gradien dan salin modul teks berikutnya.

• Warna Latar Belakang: Aqua #00ffd4
• Ubah Konten

Buat Ulang Contoh #2

Tambahkan Modul Blurb ke Kolom 1

Hapus Konten Default

Ke contoh kedua! Tambahkan modul uraian ke kolom 1 dan hapus semua konten default.

Pilih Ikon

Kemudian, pilih salah satu ikon.

Latar belakang

Sekarang, tambahkan warna latar belakang kuning.

• Warna Latar Belakang: Kuning #edf000

ikon

Lanjutkan dengan mengubah pengaturan ikon di tab desain.

• Warna Ikon: Putih #ffffff
• Penempatan Ikon: Atas
• Ukuran Font Ikon:
  • Desktop: 3vw
  • Tablet: 11vw
  • Telepon: 12vw

Perekat

Setelah warna dan latar belakang ditata, sesuaikan ukuran modul.

• Lebar Konten: 100%

Jarak

Ubah juga pengaturan spasi.

• Margin Bawah: 0vw
• Margin Kiri dan Kanan: 3vw
• Padding Atas dan Bawah: 2vw

Berbatasan

Tambahkan beberapa radius perbatasan ke setiap sudut berikutnya.

• Sudut Bulat: 2vw keempat sudut

Bayangan Kotak

Lengkapi desain modul dengan menambahkan bayangan kotak halus.

• Kotak-Bayangan: Opsi Pertama

Hapus Bayangan Kotak dan Warna Latar Belakang Kolom 1

Buka pengaturan kolom 1 berikutnya dan hapus warna latar belakang dan bayangan kotak.

CSS khusus

Hapus margin bawah default yang diterapkan pada ikon uraian dengan menambahkan satu baris kode CSS ke tab lanjutan.

• Gambar Blurb: margin-bottom: 0px;

margin-bottom: 0px;

Tambahkan Modul Ajakan Bertindak ke Kolom 1

Tambahkan Konten Judul, Konten Isi, dan Konten Tombol

Di bawah modul uraian, tambahkan modul ajakan bertindak dan masukkan beberapa konten pilihan Anda.

Tambahkan Tautan

Tambahkan tautan ke tombol berikutnya.

Latar belakang

Lanjutkan dengan menambahkan latar belakang putih.

• Warna Latar Belakang: Putih #ffffff

Teks Judul

Di tab desain, beri gaya pada teks judul H3.

• Judul Judul Level: H3
• Huruf H3: Josefin Sans
• Warna Huruf H3: Abu-abu Sangat Gelap #3f3f3f
• Ukuran H3:
  • Desktop: 2vw
  • Tablet: 4vw
  • Telepon: 6vw
• Tinggi Garis H3: 2.3em

Teks Tubuh

Kemudian, gaya teks isi.

• Font Tubuh: Teks Crimson
• Perataan Teks Tubuh: Kiri
• Warna Teks Tubuh: Abu-abu Gelap #666666
• Ukuran Teks Tubuh:
  • Desktop: 1.1vw
  • Tablet: 2.2vw
  • Telepon: 3.1vw
• Tinggi Garis Tubuh: 1.8em

Tombol

Pindah ke pengaturan tombol dan gaya tombol sebagai berikut:

• Ukuran Teks Tombol:
  • Desktop: 1vw
  • Tablet: 2vw
  • Telepon: 3vw
• Warna Teks Tombol: Abu-abu Sangat Gelap #3f3f3f
• Font Tombol: Josefin Sans
• Lebar Batas Tombol: 2-x
• Warna Batas Tombol: Abu-abu Sangat Gelap #3f3f3f
• Tombol Margin Atas dan Bawah: 3vw
• Tombol Atas dan Bawah Padding: 1vw
• Tombol Padding Kiri dan Kanan: 3vw

Jarak

Sekarang, sesuaikan jaraknya.

• Margin Bawah: -1vw
• Padding Atas: 6vw
• Padding Kiri dan Kanan: 7vw

Berbatasan

Kemudian, bulatkan sudut di pengaturan perbatasan.

• Sudut Bulat: 2vw

Bayangan Kotak

Terakhir, tambahkan bayangan kotak.

• Kotak-Bayangan: Opsi Pertama
• Kekuatan Buram Bayangan Kotak: 50px

Hapus Kolom Dua dan Klon Kolom 1

Sesuaikan Pengaturan di Kolom 2

Mirip dengan contoh sebelumnya, buka pengaturan baris dan hapus kolom kedua. Gandakan kolom pertama dan sesuaikan beberapa pengaturan.

Modul Blurb

Ubah latar belakang modul blurb dari kuning menjadi aqua.

• Warna Ikon Latar Belakang: Aqua #00ffd4

Modul Ajakan Bertindak

Ubah konten dan tautan modul ajakan bertindak juga.

• Ubah Judul Konten
• Ubah Tautan

Buat Ulang Contoh #3

Tambahkan Modul Blurb ke Kolom 1

Hapus Konten Default

Ke contoh berikutnya dan terakhir! Tambahkan modul uraian ke kolom 1 dan hapus konten default.

Pilih Ikon

Pilih sebuah ikon.

Latar belakang

Tambahkan latar belakang kuning cerah ke modul.

• Warna Latar Belakang: Kuning #f7f426

ikon

Jadikan ikon hitam dan sesuaikan penempatannya

• Warna Ikon: Hitam #000000
• Penempatan Ikon: Kiri
• Ukuran Font Ikon:
  • Desktop: 3vw
  • Tablet + Telepon: 8vw

Perekat

Lanjutkan dengan memodifikasi lebar dan tinggi modul.

• Lebar Konten: 100%
• Tinggi: 23vw

Jarak

Selanjutnya, sesuaikan pengaturan spasi.

• Margin Kiri: 3vw
• Margin Kanan: 25vw
• Padding Atas: 2vw
• Padding Kiri: 1vw

Berbatasan

Tambahkan beberapa radius perbatasan juga.

• Sudut Bulat: 2vw di semua sudut

Bayangan Kotak

Kemudian, tambahkan bayangan kotak.

• Kotak-Bayangan: Opsi Pertama

Mengubah

Terakhir, ubah posisi modul menggunakan nilai terjemahan transformasi kustom.

• sumbu x: -6vw
• sumbu y: 1vw

Hapus warna latar belakang dan bayangan kotak dari kolom 1

Buka pengaturan kolom 1 dan hapus warna latar belakang dan bayangan kotak.

Tambahkan Modul Ajakan Bertindak ke Kolom 1

Tambahkan Judul, Isi, dan Konten Tombol

Di bawah modul uraian, tambahkan modul ajakan bertindak. Tambahkan beberapa konten pilihan Anda.

Tambahkan Tautan

Kemudian, tambahkan tautan ke tombol.

Latar belakang

Untuk menata modul ajakan bertindak, mulailah dengan menambahkan warna latar belakang hitam.

• Warna Latar Belakang: Hitam #oooooo

Teks Judul

Sesuaikan pengaturan teks H3 berikutnya.

• Judul Judul Level: H3
• Huruf H3: Josefin Sans
• Warna Huruf H3: Kuning Cerah #f7f426
• Ukuran Huruf H3:
  • Desktop: 2vw
  • Tablet: 4vw
  • Telepon: 6vw
• Tinggi Garis H3: 2.3em

Teks Tubuh

Ubah juga pengaturan teks isi.

• Font Tubuh: Teks Crimson
• Perataan Teks Tubuh: Kiri
• Warna Teks Tubuh: Putih #000000
• Ukuran Teks Tubuh:
  • Desktop: 1.2vw
  • Tablet: 2.2vw
  • Telepon: 3.1vw
• Tinggi Garis Tubuh: 1.8em

Tombol

Kemudian, gaya tombol sebagai berikut.

• Ukuran Teks Tombol:
  • Desktop: 1vw
  • Tablet: 2vw
  • Telepon: 3vw
• Warna Teks Tombol: Aqua #00ffd4
• Warna Batas Tombol: Aqua #00ffd4
• Font Tombol: Josefin Sans
• Tombol Margin Atas dan Bawah: 3vw
• Tombol Atas dan Bawah Padding: 1vw
• Tombol Padding Kiri dan Kanan: 3vw

Perekat

Pindah ke pengaturan ukuran dan buat beberapa perubahan.

• Lebar: 90%
• Penyelarasan Modul: Pusat

Jarak

Ubah juga pengaturan spasi.

• Margin Atas: -9vw
• Padding Atas: 5vw
• Padding Kiri dan Kanan: 7vw

Berbatasan

Buka pengaturan perbatasan berikutnya dan tambahkan beberapa radius perbatasan ke masing-masing sudut.

• Sudut Bulat: 2vw

Bayangan Kotak

Kami juga menggunakan bayangan kotak yang halus.

• Bayangan Kotak: Opsi Pertama

Ubah Terjemahan

Terakhir, ubah posisi modul ajakan bertindak dengan memodifikasi pengaturan terjemahan transformasi.

• sumbu y: -18vw

Hapus Kolom Dua dan Klon Kolom 1

Sesuaikan Pengaturan di Kolom 2

Sekarang kolom pertama sudah siap, kami akan menghapus yang kedua dan menduplikasi yang pertama. Setelah itu, kami akan menyesuaikan beberapa detail konten dan warna.

Modul Blurb

Dalam pengaturan modul blurb, ubah latar belakang dari kuning menjadi aqua.

• Warna Ikon Latar Belakang: Aqua #00ffd4

Modul Ajakan Bertindak

Dalam pengaturan modul ajakan bertindak, ubah konten judul, warna judul, dan warna tombol. Jangan lupa untuk mengubah tautan tombol juga dan selesai!

• Warna Teks Judul: Aqua #00ffd4
• Isi
• Warna Tombol: #00ffd4

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Contoh 1

Desktop

Seluler

Contoh #2

Desktop

Seluler

Contoh #3

Desktop

Seluler

Kesimpulan

Seperti yang Anda lihat di posting ini, latar belakang ikon blurb dapat membuat desain blurb Anda jauh lebih menarik. Dengan menggunakan modul uraian yang dipasangkan dengan ajakan bertindak dan modul teks, ada banyak kemungkinan kreatif. Gaya desain ini sempurna untuk pameran layanan atau bagian produk. Bagaimana menurutmu? Beritahu kami di komentar.