Gambar pembungkus teks adalah teknik desain yang umum, biasanya digunakan 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 WordPress yang cukup standar yang melibatkan penyesuaian penyelarasan sederhana di editor WYSIWYG. Satu-satunya masalah adalah sulit untuk menata halaman Anda menggunakan editor WordPress default. Di sana itu Divi bisa membantu !

Meskipun tutorial ini berfokus pada gambar, Anda sebenarnya dapat menggunakan proses yang sama untuk membungkus teks dalam modul apa pun. Divi.

penelitian

Berikut adalah tampilan desain utama yang akan kami buat hari ini.

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

Inilah cara melakukannya.

Membuat konten di baris atas dengan gambar di tengah

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

Kemudian perbarui parameter desain sebagai berikut:

Lebar maksimum: 400px (desktop), 100% (tablet)
Penyelarasan modul: pusat
Padding khusus: 2% di atas, 2% di bawah, 2% di kiri, 2% di kanan

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

Padding khusus: 0px di bagian bawah

Buat baris teks dua kolom

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

Di kolom 1, tambahkan modul teks dengan a isi contoh.

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

Menciptakan ruang kosong dengan pembagi mengambang

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

Untuk melakukan ini, buat modul pemisahan dan letakkan langsung di atas modul teks di kolom 1.

Kemudian perbarui pengaturan modul split sebagai berikut:

Tampilkan Divider: TIDAK
Lebar: 200px
Tinggi: 250px

Pastikan tingginya sama seperti yang dibuat sebelumnya dan lebarnya persis setengah dari lebar gambar.

Untuk seluler, kami ingin menonaktifkan pemisah di tablet dan ponsel. Untuk melakukan ini, perbarui pengaturan visibilitas untuk mematikan tampilan tablet dan ponsel.

Sekarang pemisah pertama kami dibuat, salin modul pemisahan dan tempelkan di atas modul teks di kolom 2.

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

float: right;

Selanjutnya, buka pengaturan modul pembagian di kolom 2 dan tambahkan kode CSS khusus berikut ke elemen utama:

float: kiri;

Pindahkan gambar ke tempatnya dengan margin khusus

Sekarang kita hanya perlu mengurangi gambar kita di baris pertama agar sesuai dengan ruang yang telah kita buat dengan pemisah kita.

Buka pengaturan Modul Gambar dan tambahkan margin kustom berikut:

Margin Kustom: Rendah -250px (Desktop), 20px (Tablet)

Inilah hasilnya sejauh ini.

Tambahkan judul ke bagian

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

Kemudian tambahkan isi mengikuti modul teks:

Pelajari lebih lanjut tentang cara memberi

Kemudian perbarui pengaturan teks sebagai berikut:

Warna latar: #000000
Judul 2 Font: Tampilan Playfair
Judul 2 Penyelarasan Teks: Judul Tengah
2 Warna Teks: #ffffff
Judul 2 Tinggi Baris: 2em

Ratakan teks untuk desain bungkus teks yang lebih bersih

Saat mengelilingi teks dengan gambar, terutama jika teks dipusatkan dengan cara ini, ada baiknya untuk membenarkan teks di sekitarnya. Dalam hal ini, ubah saja orientasi teks menjadi membenarkan dua modul teks berisi kami isi dari membungkus teks.

Hasil akhir

Inilah hasil akhirnya.

final pikiran

Mengetahui cara mengelilingi teks dengan gambar secara efektif dapat membuat konten Anda terlihat profesional dan mudah dibaca. Konsepnya cukup sederhana. Yang harus Anda lakukan adalah melayangkan gambar Anda ke kanan atau kiri dan kemudian menggunakan spasi khusus di sekitar gambar untuk buffering. Dan yang saya sukai adalah Anda dapat menggunakan modul apa pun (bukan hanya gambar) untuk menyisipkan teks ke dalam jenis konten apa pun Divi. Saya harap ini memberi Anda sedikit inspirasi untuk proyek Anda selanjutnya.

Harapan untuk mendengar dari Anda di komentar.