Cara Membungkus Teks di Sekitar Gambar di Divi (3 cara)

Membungkus teks di sekitar gambar adalah teknik desain umum yang paling umum ditemukan di media cetak seperti majalah dan surat kabar. Tetapi Anda juga dapat menemukan ini digunakan di web, terutama untuk posting blog. Membungkus teks di sekitar gambar sebenarnya adalah bagian standar WordPress yang melibatkan penyesuaian perataan sederhana pada editor WYSIWYG. Satu-satunya masalah adalah sulit untuk menyesuaikan gaya halaman Anda menggunakan editor WordPress default. Di situlah Divi dapat membantu!

Dalam tutorial ini, saya akan menunjukkan kepada Anda 3 cara Anda dapat menggunakan Divi untuk membungkus teks di sekitar gambar. Ini akan memungkinkan Anda untuk membuat tata letak gaya cetak klasik dengan kekuatan Divi untuk membantu Anda dengan desain. Inilah yang akan kita bahas:

1. Cara Membungkus Teks di Sekitar Gambar (dan Kutipan Blok) di dalam Modul Teks dengan Editor WYSIWYG
2. Cara Membungkus teks di sekitar Gambar dengan Mengambang Modul Gambar di sebelah Modul Teks di Divi
3. Cara Membungkus Teks di Sekitar Gambar Terpusat untuk Tata Letak Dua Kolom yang Unik

Meskipun tutorial ini akan berkonsentrasi pada gambar, Anda sebenarnya dapat menggunakan proses yang sama untuk membungkus teks di sekitar modul apa pun di Divi.

Sneak Peek

Berikut ini adalah sneak peek dari desain utama yang akan kita buat hari ini.

Mari kita mulai!

Berlangganan Saluran Youtube Kami

Unduh Teks Pembungkus di Sekitar Tata Letak Gambar GRATIS

Untuk mendapatkan desain dari tutorial ini, 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!

Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, yang Anda butuhkan hanyalah Divi dan beberapa gambar.

• Divi – Pastikan Tema Divi sudah terpasang dan aktif. Kami akan membuat desain kami dari awal menggunakan Divi Builder di bagian depan (pembuat visual).
• Gambar – Juga, pastikan untuk memiliki setidaknya satu gambar berukuran 400px kali 250px untuk digunakan dalam tutorial.

Saat Anda siap, buka Dasbor WordPress Anda dan navigasikan ke Pages > Add New. Beri judul halaman baru Anda dan gunakan Divi Builder di bagian depan. Pilih opsi "Bangun dari Awal". Sekarang Anda siap untuk pergi!

Cara Membungkus Teks Di Sekitar Gambar dan Kutipan Blok di Dalam Modul Teks dengan Editor WYSIWYG

WordPress memudahkan untuk membungkus teks di sekitar gambar menggunakan editor default WordPress (WYSIWYG). Dan karena modul teks Divi memiliki editor WYSIWYG bawaan WordPress yang sama, kita dapat menggunakan metode yang sama yang selalu digunakan pengguna WordPress untuk membungkus teks di sekitar gambar.

Berikut cara melakukannya.

Buat bagian reguler dengan baris satu kolom, lalu tambahkan modul teks ke baris.

Perbarui konten modul teks dengan salinan Anda. Untuk saat ini saya menggunakan beberapa paragraf lorem ipsum.

Sekarang jika Anda belum melakukannya, pilih tab visual pada editor konten. Kemudian pastikan untuk mengklik bagian atas area konten tempat Anda ingin menambahkan gambar dan klik tombol Add Media.

Di popup perpustakaan media, pilih gambar yang ingin Anda gunakan. Dan di bawah pengaturan tampilan lampiran, pilih kiri atau kanan untuk opsi perataan. Untuk contoh ini, saya ingin memposisikan gambar ke kiri.

WordPress akan menambahkan kelas ke gambar Anda (disebut "alignleft") yang akan mengapungkan gambar ke kiri. Properti float yang ditambahkan akan memungkinkan teks untuk membungkus gambar. WordPress juga akan menambahkan buffer di sekitar gambar menggunakan margin untuk membuat sedikit jarak antara gambar dan teks di sekitarnya.

Dan, tentu saja, jika Anda memberi gambar perataan yang tepat, gambar akan melayang ke kanan memungkinkan teks membungkus gambar.

Anda juga dapat menggunakan teknik serupa untuk membungkus teks di sekitar blockquote dalam modul teks. Untuk melakukan ini, buat blockquote menggunakan editor Konten.

Kemudian gaya blockquote menggunakan pengaturan modul teks bawaan untuk blockquote.

Kemudian kembali ke editor konten dan beralih ke tab teks. Kemudian tambahkan beberapa gaya sebaris ke tag blockquote untuk membuat beberapa spasi di sekitar blockquote dan mengapungkannya ke kiri. HTML blockquote Anda akan terlihat seperti ini.

<blockquote style="margin: 0 15px 15px 0; float:left;">This is a <br> blockquote</blockquote>

Sekarang teks akan membungkus blockquote.

Cara Membungkus Teks di Sekitar Gambar dengan Mengambang Modul Gambar di sebelah Modul Teks di Divi

Untuk membungkus teks di sekitar modul gambar, kita dapat mengapungkan seluruh modul gambar di sebelah modul teks. Ini mungkin metode yang lebih disukai untuk menggunakan editor WordPress di atas karena memungkinkan Anda mengontrol penuh gaya gambar Anda menggunakan pengaturan pembuat Divi alih-alih menambahkan gaya sebaris atau css eksternal ke tag gambar.

Berikut cara melakukannya.

Buat bagian reguler baru dengan baris satu kolom. Kemudian tambahkan modul gambar ke baris dengan gambar yang Anda pilih. Gambar yang saya gunakan berasal dari Charity Layout Pack dan berukuran 400px kali 250px.

Kemudian tambahkan modul teks di bawah modul gambar dengan beberapa konten teks tiruan.

Sekarang dengan kedua modul di tempatnya, kita perlu mengapungkan gambar di sebelah kiri modul teks. Untuk melakukannya, buka pengaturan modul gambar dan tambahkan CSS khusus berikut ke Elemen Utama:

float:left;

Kemudian perbarui margin kustom gambar untuk membuat buffer yang kita butuhkan untuk membungkus teks di sekitar gambar:

Margin Kustom: 2% atas, 2% bawah, 2% kanan

Inilah hasilnya.

Dan, jika Anda ingin melayangkan gambar ke kanan, buka pengaturan modul gambar dan ganti css dengan yang berikut:

float:right;

Dan perbarui jarak margin menjadi yang berikut:

Margin Kustom: 2% atas, 2$ bawah, 2% kiri

Inilah hasilnya.

Menggunakan desain ini pada beberapa kolom

Anda juga dapat menggunakan pengaturan ini di beberapa kolom untuk membuat desain pembungkusan teks untuk menampilkan layanan Anda. Untuk melakukan ini, ubah tata letak kolom baris Anda menjadi dua kolom.

Kemudian berikan nilai persentase lebar maksimum pada gambar sehingga merespons lebar browser yang berbeda.

Lebar Maks: 33,33% (desktop), 100% (ponsel)

Salin modul gambar dan teks dari kolom pertama dan tempel ke kolom 2. Kemudian perbarui konten dan gambar sesuai kebutuhan.

Itu dia. Inilah hasilnya.

Cara Membungkus Teks di Sekitar Gambar atau Modul Terpusat untuk Tata Letak Dua Kolom yang Unik

Dalam contoh ini, saya akan menunjukkan kepada Anda cara membungkus dua kolom teks di sekitar modul gambar di tengah. Ini memungkinkan Anda membuat tata letak gaya majalah atau surat kabar yang unik. Tapi, karena tidak ada properti css "float: center", kita perlu sedikit kreatif dengan tata letak agar desain ini berfungsi.

Berikut cara melakukannya.

Membuat Konten Baris Teratas dengan Gambar Terpusat

Untuk memulai, buat bagian reguler baru dengan satu baris kolom. Kemudian tambahkan modul gambar ke baris Anda. Unggah gambar berukuran 400px kali 250px. Ukurannya harus tepat untuk desain ini.

Kemudian perbarui pengaturan desain sebagai berikut:

Lebar Maks: 400 piksel (desktop), 100% (tablet)
Penyelarasan Modul: tengah
Padding Kustom: 2% atas, 2% bawah, 2% kiri, 2% kanan

Kemudian simpan pengaturan Anda dan buka pengaturan baris. Keluarkan bantalan bawah baris.

Padding Kustom: 0px bawah

Buat Baris Dua Kolom Teks

Di bawah baris yang berisi gambar, buat baris baru dengan tata letak dua kolom.

Di kolom 1, tambahkan modul teks dengan beberapa konten tiruan.

Kemudian salin modul teks dan tempel ke kolom 2 untuk kolom teks kedua.

Menciptakan Ruang Kosong dengan Pembagi Terapung

Untuk membuat ruang yang kita butuhkan untuk gambar, kita dapat menggunakan modul pembagi. Di kolom kiri kita akan membuat modul pembagi yang berukuran setengah dari gambar dan mengapungkannya ke kanan sehingga modul teks kita akan membungkus pembagi. Kemudian di kolom kanan kita akan membuat pembatas lagi yang berukuran setengah dari gambar dan mengapungkannya ke kiri.

Untuk melakukan ini, buat modul pembagi dan letakkan tepat di atas modul teks di kolom 1.

Kemudian perbarui pengaturan modul pembagi sebagai berikut:

Tampilkan Pembagi: TIDAK
Lebar: 200 piksel
Tinggi: 250px

Pastikan tingginya sama dengan tinggi gambar yang Anda buat sebelumnya dan lebarnya persis setengah lebar gambar.

Untuk seluler, kami ingin menonaktifkan pembagi di tablet dan ponsel. Untuk melakukan itu, perbarui pengaturan visibilitas untuk menonaktifkan tampilan tablet dan ponsel.

Sekarang setelah pembagi pertama kita dibuat, salin modul pembagi dan tempel di atas modul teks di kolom 2.

Selanjutnya, kita perlu mengapungkan pembagi kita. Untuk melakukan ini, buka pengaturan pembagi di kolom 1 dan tambahkan CSS khusus berikut ke elemen utama:

float: right;

Kemudian, buka pengaturan untuk modul pembagi di kolom 2 dan tambahkan CSS khusus berikut ke elemen utama:

float: left;

Memindahkan Gambar ke Tempatnya dengan Margin Kustom

Sekarang yang perlu kita lakukan adalah menurunkan gambar kita di baris pertama sehingga pas di dalam ruang yang kita buat dengan pembagi kita.

Buka pengaturan modul gambar dan tambahkan margin khusus berikut:

Margin khusus: -250 piksel bawah (desktop), 20 piksel (tablet)

Inilah hasilnya sejauh ini.

Menambahkan Judul ke Bagian

Langkah terakhir ini opsional, tetapi jika Anda ingin menambahkan judul ke bagian, buat modul teks dan posisikan di atas gambar.

Kemudian tambahkan konten berikut ke modul teks:

<h2>Learn more about how to give</h2>

Kemudian perbarui pengaturan teks sebagai berikut:

Warna Latar Belakang: #000000
Judul 2 Font: Tampilan Playfair
Judul 2 Perataan Teks: tengah
heading 2 Warna Teks: #ffffff
Pos 2 Tinggi Baris: 2em

Justify Text untuk Desain Pembungkusan Teks yang Lebih Bersih

Saat membungkus teks di sekitar gambar, terutama jika teks berada di tengah seperti ini, selalu merupakan ide yang baik untuk menggunakan justifikasi teks di sekitarnya. Dalam hal ini, yang perlu kita lakukan hanyalah mengubah orientasi teks untuk membenarkan kedua modul teks yang berisi konten teks pembungkus kita.

Hasil Akhir

Berikut adalah hasil akhirnya.

Dan ini dia di layar tablet dan ponsel.

Pikiran Akhir

Mengetahui cara membungkus teks di sekitar gambar secara efektif dapat benar-benar membuat konten Anda terlihat profesional dan mudah dibaca. Konsepnya cukup lurus ke depan. Yang perlu Anda lakukan adalah melayangkan gambar Anda ke kanan atau kiri dan kemudian menggunakan spasi khusus di sekitar gambar untuk buffer. Dan yang saya sukai adalah Anda dapat mengapungkan modul apa pun (bukan hanya gambar) untuk membungkus teks di sekitar semua jenis konten di Divi. Saya harap ini memberi Anda sedikit inspirasi untuk proyek Anda berikutnya.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!