Loncat ke Konten Utama

Bagaimana cara menyesuaikan modul blurb untuk fokus pada konten Divi

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 600.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Penggunaan ikon presentasi sebagai sentuhan estetika dapat memberikan tata letak Anda desain unik yang mungkin tidak pernah terpikirkan oleh Anda. Selain mengatur posisi ikon modul presentasi untuk melapisi modul teks, Anda dapat menggunakan latar belakang dan batas modul teks untuk menyesuaikan 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 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 blurb gratis, Anda harus mengunduhnya menggunakan tombol di bawah ini. Untuk mengakses unduhan, Anda harus berlangganan milis Divi Daily kami menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima setiap hari Senin lebih banyak kebaikan Divi dan paket Layout Divi gratis! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik Unduh. Anda tidak akan "terdaftar kembali" atau menerima email tambahan.

Download

Mulailah dengan desain dari awal

Untuk memulai, buat halaman baru dan berikan judul untuk halaman Anda. Kemudian, gunakan konstruktor Divi pada sistem bagian publik. Tambahkan bagian reguler dengan baris kolom. Sebelum Anda menambahkan modul pertama Anda, perbarui parameter garis 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.

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Perbarui modul teks dengan teks isian berikut:

<h2> Layanan Kami </ h2> <p> Bagian ini mencantumkan berbagai layanan yang kami tawarkan kepada pelanggan kami. </ p>

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 bagian atas, 40px di bagian 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 harus memastikan bahwa modul teks terletak di atas ikon dalam urutan z-space. Untuk melakukan ini, pertama-tama kita harus menambahkan potongan CSS berikut ke area CSS dari elemen utama modul Teks:

position: relative;

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 teks presentasi pertama. Untuk melakukan ini, pertama-tama kita harus menambahkan modul Blurb dan menariknya ke atas modul teks. Kemudian hapus konten fiktif (teks judul dan isi teks) dan klik untuk menggunakan ikon alih-alih gambar untuk teks presentasi.

Kemudian perbarui parameter desain berikut:

  • Warna ikon: #2ea3f2
  • Gunakan ukuran font ikon: YES
  • Ukuran font ikon: 100px
  • Margin Kustom: 0px di bagian bawah (ini menghilangkan margin bawah default antara modul, tidak perlu jika Anda menggunakan 1 selokan lebar)

Kemudian, karena kami tidak menggunakan teks apa pun dengan modul (hanya ikon), kami dapat menghapus margin bawah default di bawah ikon presentasi. Untuk melakukan ini, tambahkan kode CSS khusus berikut ke kotak Gambar CSS Blurb:

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [GRATIS]

Blurb Gambar CSS:

margin-bottom: 0px

Ikon Duplikasi Blurb

Sebelum mulai memposisikan blurb, mari lanjutkan, duplikat modul blurb dan seret ke bawah modul teks. Anda sekarang harus memiliki ikon presentasi di atas dan di bawah modul teks.

Memposisikan ikon presentasi menggunakan Transform Translate

Untuk memposisikan ikon presentasi, kita akan menggunakan opsi transformasi Divi, yang memungkinkan kita untuk 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
  • Transform translate Y axis (desktop): 50px
  • Transform translate X axis (telepon): -170px

Namun, Anda dapat menambahkan ini sesuai dengan pengaturan yang telah Anda buat.

ikon presentasi

Ikon Blurb Positioning # 2

Sebelum memposisikan ikon presentasi ini, mari kita perbesar sedikit. 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
  • Transformasikan translate Y axis (desktop): -100px
  • Transform translate X axis (telepon): 190px

Membuat bagian lain

Mulai sekarang, kita dapat mengambil inspirasi dari apa yang telah kita lakukan, untuk menciptakan area lain dengan pengaturan yang berbeda. Yang perlu Anda lakukan adalah membuat kolom baru, dan menyalin modul sebelumnya. Untuk membuat banyak salinan, arahkan kursor ke setiap modul dengan menahan tombol CTRL pada keyboard Anda.

Hasil akhir

Sekarang mari kita lihat hasil akhirnya.

Buat blog Anda dengan mudah dengan SiteGround

SiteGround memungkinkan Anda membuat blog WordPress hanya dengan beberapa klik. Nama domain gratis, hosting aman, SSL, transfer, dan banyak lagi ... [Direkomendasikan]

Pikiran terakhir

Menambahkan ikon presentasi 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 overlay parsial untuk ikon di sekitarnya. Hasilnya unik dan membuka pintu untuk menjelajahi beberapa varian desain. Merasa bebas untuk mengeksplorasi berbagai ikon dan kombinasi warna untuk membuat sesuatu untuk kebutuhan Anda sendiri.

Saya berharap dapat mendengar dari Anda di komentar.

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Tema WordPress Keren yang saya temukan
Dan ada lebih banyak tema dan model 50 000 untuk dipilih!

Kembali ke atas
5 saham
saham5
menciak
Register
Ada apa