Cara Membuat Blok Tata Letak Gambar yang Dapat Digunakan Kembali untuk Menambahkan Gambar Bergaya Divi ke Posting Gutenberg

Blok Tata Letak Divi dapat digunakan sebagai blok tata letak gambar yang dapat digunakan kembali untuk menambahkan gambar bergaya Divi ke posting blog Gutenberg. Ini menggabungkan opsi desain yang kuat dan fungsionalitas Divi (untuk membuat gambar yang indah) dengan kenyamanan menulis posting (dan menambahkan blok) dengan Gutenberg.

Dalam tutorial ini, kami akan mendemonstrasikan cara menggunakan Blok Tata Letak Divi untuk mendesain beberapa tata letak gambar yang menakjubkan. Kemudian kita akan menambahkan tata letak tersebut sebagai blok yang dapat digunakan kembali di Gutenberg. Dengan teknik ini, kita akan dapat menambahkan hampir semua fitur desain Divi ke gambar kita (latar belakang, lightbox, filter, animasi, efek gulir, dan banyak lagi). Kemudian kita dapat menggunakan desain yang luar biasa itu sebagai template gambar yang nyaman untuk menambahkan gambar ke posting mendatang yang dibuat dengan Gutenberg.

Mari kita mulai!

Sneak Peek

Unduh Blok Tata Letak Gambar yang Dapat Digunakan Kembali secara GRATIS

Untuk meletakkan tangan Anda di blok tata letak dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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!

Cara Menggunakan Unduhan untuk Mengimpor Blok Tata Letak ini di Situs Anda

Untuk mengimpor Blok Tata Letak Gambar Divi yang dapat digunakan kembali ini ke situs Anda, pertama-tama, Anda perlu mengekstrak file unduhan. Di sana Anda akan menemukan tiga file JSON yang perlu Anda impor ke situs Anda.

Pergi untuk mengedit posting menggunakan editor default (Gutenberg). Buka menu "Alat & Opsi Lainnya" di kanan atas halaman dan pilih "Kelola semua Blok yang Dapat Digunakan Kembali".

Kemudian klik tombol Impor dari JSON. Pilih salah satu file JSON dari folder unduhan dan klik tombol impor.

Ulangi proses ini untuk mengimpor ketiga file JSON.

Setelah selesai, tambahkan blok baru di dalam Gutenberg. Kami akan dapat menemukan blok tata letak Reusable yang diimpor di bawah sakelar opsi Reusable. Cukup klik salah satu yang ingin Anda tambahkan ke posting Anda.

Itu dia!

Langsung saja ke tutorialnya ya?

Apa yang Kita Butuhkan untuk Memulai

Untuk memulai, kita perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat posting baru di WordPress dan gunakan editor default (Gutenberg) untuk menambahkan beberapa konten tiruan (judul, heading, paragraf, gambar unggulan, dll.). Pada dasarnya kita membutuhkan pos percobaan untuk membangun blok tata letak gambar bergaya Divi.

Setelah itu, kita siap untuk memulai.

Bagian 1: Membuat Gambar Fullwidth dengan Caption Reusable Divi Layout Block

Tambahkan Blok Tata Letak Divi

Untuk memulai, tambahkan Blok Tata Letak Divi ke pos Anda.

Kemudian klik "Bangun Tata Letak Baru".

Mendesain Tata Letak Gambar Divi

Di Layout Block Editor, mulailah mendesain layout dengan menambahkan baris satu kolom.

Modul Gambar

Tambahkan modul gambar ke baris.

Kemudian perbarui pengaturan sebagai berikut:

• Buka di Lightbox: YA

Ini akan memungkinkan gambar kita ditampilkan di lightbox saat diklik.

• Hamparan Gambar: AKTIF
• Warna Ikon Hamparan: #ffffff
• Warna Overlay Arahkan: rgba(120,47,130,0.57)

Untuk membuat beberapa ruang di sekitar gambar kita, perbarui pengaturan baris sebagai berikut:

• Gunakan Lebar Talang Kustom: YA
• Lebar Talang: 1
• Lebar: 90%
• Lebar Maks: 90%
• Padding: 5% atas, 5% bawah

Ini akan memberi kita 5% jarak di sekitar gambar. Ini juga akan menjadi ruang yang akan menampilkan gradien latar belakang yang akan kita tambahkan ke bagian tersebut.

Buka pengaturan bagian dan perbarui desain dengan gradien latar belakang sebagai berikut:

• Warna Kiri Latar Belakang Gradien: #782f82
• Warna Kanan Latar Belakang Gradien: #fe756b
• Arah Gradien: 90 derajat

Untuk membuat gambar sedikit melampaui wadah konten posting blog, kami dapat memberikan bagian lebar khusus sebagai berikut:

• Lebar: 110%
• Lebar Maks: 100%
• Margin: -5% tersisa
• Padding: 0px atas, 0px bawah

Terakhir, berikan sentuhan kreatif pada bagian tersebut dengan menambahkan bayangan kotak dalam sebagai berikut:

• Bayangan Kotak: lihat tangkapan layar
• Posisi Horizontal Bayangan Kotak: 5vw
• Posisi Vertikal Bayangan Kotak: 5vw
• Warna Bayangan: rgba (255,255,255,0.7)

Jika kita ingin memiliki tata letak gambar tanpa keterangan, kita bisa berhenti di sini, tetapi untuk menambahkan keterangan pada tata letak gambar, tambahkan modul teks di bawah gambar.

Kemudian tambahkan beberapa konten pengisi untuk dijadikan sebagai teks keterangan.

Kemudian perbarui pengaturan teks berikut:

• Font Teks: Montserrat
• Berat Font Teks: Semi Tebal
• Warna Teks Teks: #ffffff
• Lebar: 80%
• Penyelarasan Modul: kanan
• Margin: 5% atas

Setelah selesai, pastikan untuk menyimpan tata letak dengan Ctrl + S atau buka bilah pengaturan di bagian bawah dan klik "Simpan & Keluar".

Menambahkan Tata Letak Gambar ke Blok yang Dapat Digunakan Kembali

Untuk menambahkan tata letak ke blok yang dapat digunakan kembali, klik menu "Opsi Lainnya" di atas blok dan pilih "Tambahkan ke Blok yang Dapat Digunakan Kembali".

Beri nama blok yang dapat digunakan kembali dan klik "Simpan".

Sekarang gambar lebar penuh dengan tata letak teks telah ditambahkan ke blok yang dapat digunakan kembali dan akan tersedia dari daftar blokir saat membuat pos.

Jangan lupa untuk memperbarui/menyimpan postingan untuk menyimpan perubahan.

Bagian 2: Membuat Gambar Kiri dengan Caption Reusable Divi Layout Block

Sekarang gambar lebar penuh dengan tata letak teks telah ditambahkan ke blok yang dapat digunakan kembali, kita dapat menggunakan blok itu untuk membuat gambar kiri dengan tata letak teks.

Ubah Blok yang Dapat Digunakan Kembali menjadi Blok Biasa

Untuk memulai, buka menu "Opsi Lainnya" di bagian atas blok yang dapat digunakan kembali yang berisi tata letak gambar lebar penuh. Kemudian pilih "Konversi ke Blok Reguler".

Jangan khawatir, ini tidak akan menghapus blok tata letak yang baru saja kita buat dari blok yang dapat digunakan kembali (meskipun ada opsi untuk itu). Ini hanya akan membuat blok yang dapat digunakan kembali menjadi blok biasa sehingga kami dapat mengedit dan menggunakan blok untuk satu contoh.

Perbarui Tata Letak

Setelah blok teratur, klik tombol Edit Tata Letak di atas blok.

Di editor tata letak, buka pengaturan bagian dan perbarui lebar sebagai berikut:

• Lebar: otomatis
• Lebar Maks: 500px

Hanya itu yang perlu kita lakukan di dalam editor tata letak. Pastikan untuk menyimpan dan keluar dari tata letak.

Dengan blok yang dipilih, buka bilah samping pengaturan utama dan pilih tab blokir untuk menampilkan pengaturan blokir. Di bawah sakelar lanjutan, tambahkan kelas berikut:

• Penambahan Kelas CSS: alignleft

Kelas ini asli WordPress dan akan mengapungkan blok ke kiri yang juga akan mengapungkan gambar kita ke kiri konten di dalam postingan kita.

Setelah kelas ditambahkan, buka menu “Opsi Lainnya” blok dan klik “Tambahkan ke Blok yang Dapat Digunakan Kembali.

Beri nama blok yang Dapat Digunakan Kembali (mis. "Gambar Kiri dengan Teks") dan klik simpan.

Sekarang blok tata letak Gambar Kiri dengan Teks telah ditambahkan ke daftar blok yang dapat digunakan kembali untuk akses mudah.

Bagian 3: Membuat Blok Tata Letak Divi “Gambar Kanan dengan Teks” yang Dapat Digunakan Kembali

Sejauh ini kami memiliki gambar lebar penuh dengan blok tata letak teks dan gambar kiri dengan blok tata letak teks. Sekarang kita dapat menambahkan gambar yang tepat dengan blok tata letak teks.

Ubah Blok yang Dapat Digunakan Kembali menjadi Blok Biasa

Untuk melakukan ini, buka menu "Opsi Lainnya" di gambar kiri dengan blok teks yang dapat digunakan kembali. Kemudian pilih "Konversi ke Blok Reguler".

Perbarui Tata Letak

Setelah blok adalah blok tata letak biasa, klik untuk mengedit tata letak.

Kemudian buka pengaturan bagian dan keluarkan margin kiri.

Simpan dan keluar dari editor tata letak.

Kemudian perbarui kelas CSS tambahan blok dengan yang berikut:

• Kelas CSS Tambahan: alignright

Setelah Kelas ditambahkan, tambahkan blok tata letak ke Blok yang Dapat Digunakan Kembali.

Dan beri nama Blok yang Dapat Digunakan Kembali (mis. "Gambar Kanan dengan Teks") dan Simpan.

Sekarang klik salah satu ikon plus biru di bawah blok di pos untuk menambahkan blok baru. Kemudian di popup daftar blokir, buka sakelar Dapat Digunakan Kembali. Kami sekarang memiliki tiga blok tata letak gambar yang dapat digunakan kembali yang siap digunakan.

Bagian 4: Menggunakan Blok Tata Letak Gambar yang Dapat Digunakan Kembali pada Postingan.

Meskipun kami telah membuat Blok Tata Letak Gambar, blok tersebut ada (untuk tujuan kami) hanya sebagai template untuk memulai proses penambahan gambar ke postingan. Oleh karena itu, setiap kali kita ingin menambahkan gambar sebenarnya ke postingan menggunakan blok tata letak ini, pertama-tama kita harus mengubahnya menjadi blok biasa sebelum menambahkan gambar dan keterangan ke tata letak.

Berikut cara melakukannya.

Langkah 1: Tambahkan Blok Tata Letak yang Dapat Digunakan Kembali

Tambahkan salah satu Blok Tata Letak Gambar Divi yang Dapat Digunakan Kembali ke pos.

Langkah 2: Ubah menjadi Blok Biasa

Buka menu “More Options” dan pilih “Convert to Regular Block”.

Langkah 3: Edit Blok Tata Letak dengan Gambar dan Keterangan baru

Setelah blok teratur, klik untuk mengedit tata letak.

Perbarui tata letak dengan gambar pilihan Anda.

Kemudian perbarui teks teks di dalam modul teks.

Langkah 4: Simpan Blok Tata Letak

Setelah selesai, simpan dan keluar dari editor tata letak.

Lanjutkan proses yang sama untuk menambahkan dua tata letak gambar lainnya ke pos.

Hasil Akhir

Pikiran Akhir

Setelah kita terbiasa menggunakan blok tata letak Divi, menjadi jelas betapa berharganya itu bagi kehidupan blog kita. Dalam posting ini, kami membahas cara menggunakan blok tata letak untuk menambahkan beberapa gambar bergaya Divi yang cukup keren ke posting blog Gutenberg. Triknya adalah menyimpan tata letak sebagai blok yang dapat digunakan kembali terlebih dahulu. Kemudian ketika kita siap untuk menambahkan gambar ke posting blog, kita dapat dengan mudah mengubah blok yang dapat digunakan kembali menjadi blok biasa sehingga kita dapat menambahkan gambar dan keterangan.

Mudah-mudahan, ini akan memberikan beberapa inspirasi untuk membawa gambar blog Anda ke tingkat yang baru.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!