Dengan Divi, bahkan blog adalah sebuah modul dan “blog” Anda dapat ditempatkan di mana saja di perangkat Anda situs jaringan dan dalam format yang berbeda. Anda dapat menggabungkan modul blog dan sidebar untuk membuat desain blog klasik. 1 kolom, 2 kolom atau 3 kolom dapat dibuat menggunakan modul blog dan sidebar.

Bagaimana cara menambahkan modul blog ke halaman Anda

Sebelum Anda dapat menambahkan modul blog ke halaman Anda, Anda harus mengakses Divi Builder terlebih dahulu. Sekali Tema Divi diinstal pada Anda situs jaringan, Anda akan melihat tombol Gunakan Divi Builder di atas editor posting setiap kali Anda membuat halaman baru. Dengan mengklik tombol ini, Anda akan dapat mengaktifkan Divi Builder, yang akan memberi Anda akses ke semua modul Divi Builder. Kemudian klik tombolnya Gunakan Visual Builder untuk memulai generator dalam mode visual. Anda juga dapat mengklik tombol tersebut Gunakan Visual Builder saat Anda menelusuri situs jaringan upstream jika Anda masuk ke dasbor WordPress Anda.

Setelah masuk ke Visual Builder, Anda dapat mengklik tombol plus abu-abu untuk menambahkan modul baru ke halaman Anda. Modul baru hanya dapat ditambahkan di dalam baris. Jika Anda memulai halaman baru, jangan lupa untuk menambahkan baris ke halaman Anda terlebih dahulu. Kami memiliki tutorial yang bagus tentang penggunaan elemen baris dan bagian oleh Divi.

Temukan modul blog dalam daftar modul dan klik di atasnya untuk menambahkannya ke halaman Anda. Daftar modul dapat ditelusuri, yang berarti Anda juga dapat mengetik kata "blog" lalu klik enter untuk mencari dan menambahkan modul blog secara otomatis! Setelah modul ditambahkan, Anda akan disambut dengan daftar opsi modul. Opsi ini dibagi menjadi tiga kelompok utama: Isi , Pembuahan et maju .

Kasus penggunaan modul blog dengan tata letak kisi di bagian khusus dengan bilah sisi kanan

Untuk contoh ini, saya akan menambahkan modul blog ke halaman blog. Halaman blog ini memiliki header lengkap dengan modul pencarian di bawah. Di bawah modul pencarian, saya akan menambahkan bagian khusus dengan modul blog di sisi kiri dan bagian sidebar di sebelah kanan. Sidebar di sebelah kanan berisi widget recent post, modul email optin, dan modul person.

Seperti inilah tampilan halaman contoh.

Perhatikan bahwa modul blog berada dalam tata letak grid di sisi kiri bagian khusus.

Mari kita mulai.

Gunakan pembangun visual untuk menambahkan bagian khusus dengan tata letak berikut:

Anda akan diminta untuk menambahkan satu kolom atau dua baris kolom untuk sisi kiri. Pilih baris 1 kolom.

Kemudian tambahkan modul blog ke baris.

Perbarui pengaturan blog sebagai berikut:

Opsi konten

Nomor Pos: 6
Pelajari lebih lanjut Tombol: AKTIF
Tunjukkan paginasi: TIDAK
Warna latar belakang kotak: #ffffff

Opsi desain

Tata Letak: Kotak
Gunakan Dropshadow: ON
Ikon Warna Overlay: #ffffff
Arahkan Warna Hamparan: Header rgba (224,153,0,0.51)
POLISI:
Header Ukuran Font: 21px
Warna Teks Tajuk: # 333333
Penspasian surat: 1px
Tinggi Baris Header: 1.2 em
Perbatasan: YA
Warna batas: # f0f0f0
Lebar perbatasan: 1px
Gaya batas: Padat

Opsi lanjutan

CSS Khusus (tombol Baca Selengkapnya):

warna: # e09900;
melihat blok;
text-align: center;
margin atas: 10px;
batas: 1px solid #ccc;
padding: 5px;
Transformasi Teks: Bermodalkan;
spasi huruf: 1px;

Tombol CSS khusus tingkat lanjut untuk tombol Read More menciptakan tampilan khusus yang sesuai dengan desain.

Di bagian sidebar kanan dari layout bagian spesialis, Anda perlu menambahkan modul sidebar yang memasukkan widget recent posts. Di bawah ini Anda perlu menambahkan modul Email Optin. Dan kemudian di bawah Email Optin, Anda perlu menambahkan modul Person dengan informasi penulis.

Itu saja!

Pilihan konten blog

Di tab Content, Anda akan menemukan semua elemen konten dari modul, seperti teks, gambar, dan ikon. Semua itu mengontrol apa? muncul di modul Anda akan selalu ada di tab ini.

Nomor item (Jumlah item)

Setel jumlah pesan yang ingin Anda tampilkan. Anda akan membutuhkan pesan untuk semua yang muncul di modul ini.

Pilih kategori yang ingin Anda sertakan di feed posting. Semua kategori pesan yang Anda buat akan muncul di sini untuk Anda pilih / batalkan pilihannya.

Kategori disertakan

Pilih kategori yang ingin Anda sertakan dalam umpan.

Format meta date

Atur format tanggal yang ingin Anda tampilkan pada posting blog Anda di sini. Tata letak default adalah format M j, Y (6 Januari 2014) Lihat WordPress codex pada format tanggal untuk opsi lainnya.

Isi

Menampilkan konten lengkap tidak akan memotong posting Anda di halaman indeks. Show Snippet hanya akan menampilkan teks snippet Anda.

Nomor offset

Pilih jumlah pesan yang ingin Anda offset. Jika Anda memberi kompensasi dengan 3 posting, misalnya, tiga posting pertama di feed blog Anda tidak akan ditampilkan.

Tampilkan gambar unggulan

Opsi ini memungkinkan Anda memilih apakah Anda ingin gambar mini muncul di modul blog Anda atau tidak.

Baca lebih banyak tombol

Di sini Anda dapat mengatur apakah akan menampilkan tautan "baca lebih lanjut" setelah cuplikan atau tidak.

Tunjukkan penulis

Pilih apakah Anda ingin menampilkan penulis setiap posting blog di kotak meta posting di bawah judul posting atau tidak.

Tampilkan tanggal

Pilih apakah Anda ingin menampilkan tanggal setiap artikel dibuat di kotak Item Meta di bawah judul pesan.

Tampilkan kategori

Pilih apakah akan menampilkan kategori posting di area meta pos di bawah judul publikasi.

Tampilkan jumlah komentar

Pilih apakah Anda ingin menampilkan jumlah komentar di kotak meta pos di bawah judul posting.

Lihat paginasi

Pilih apakah Anda ingin menampilkan pagination untuk feed ini atau tidak. Untuk mengaktifkan paging bernomor, Anda perlu menginstal plugin WP Page Navi .

Label administrasi

Ini akan mengubah label modul di generator untuk memudahkan identifikasi. Saat menggunakan tampilan WireFrame di Visual Builder, label ini akan muncul di blok modul antarmuka Divi Builder.

Pilihan desain blog

Di tab Desain, Anda akan menemukan semua opsi gaya modul, seperti font, warna, ukuran, dan spasi. Tab ini memungkinkan Anda untuk mengubah tampilan modul Anda. Setiap modul Divi memiliki daftar panjang pengaturan desain yang dapat Anda gunakan untuk menyesuaikan apa saja.

ketentuan

Anda dapat memilih untuk menampilkan posting blog Anda dalam grid atau tata letak lebar penuh.

Gambar yang dilapiskan

Jika opsi ini diaktifkan, warna dan ikon hamparan ditampilkan saat pengunjung mengarahkan kursor ke gambar pesan yang dipilih.

Warna ikon overlay

Di sini Anda dapat mengatur warna kustom untuk ikon overlay.

Warna cover melayang

Di sini Anda dapat menentukan warna khusus untuk hamparan.

Hover Icon Picker

Di sini Anda dapat menentukan ikon khusus untuk hamparan.

Warna teks

Si blog Anda ditempatkan pada latar belakang terang, warna teks harus diatur ke "Gelap". Visanya, ya blog Anda ditempatkan pada latar belakang gelap, warna teks harus diatur ke "Terang".

Font header

Anda dapat mengubah font header dengan memilih font yang diinginkan dari menu drop-down. Divi hadir dengan lusinan font mengagumkan yang diberdayakan oleh Google Fonts. Secara default, Divi menggunakan font Open Sans untuk semua teks di halaman Anda. Anda juga dapat menyesuaikan gaya teks Anda menggunakan opsi tebal, miring, kapital dan garis bawah.

Ukuran font tajuk

Di sini Anda dapat menyesuaikan ukuran teks header Anda. Anda dapat menyeret penggeser interval untuk menambah atau mengurangi ukuran teks Anda, atau Anda dapat langsung memasukkan nilai ukuran teks yang diinginkan ke dalam bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung satuan ukuran yang berbeda, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada ukuran Anda untuk mengubah jenis satuannya.

Warna Teks Tajuk

Secara default, semua warna teks di Divi muncul dalam warna putih atau abu-abu tua. Jika Anda ingin mengubah warna header, pilih warna yang Anda inginkan dari color picker menggunakan opsi ini.

Spasi huruf header

Penspasian huruf mempengaruhi jarak antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf teks header, gunakan penggeser interval untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung satuan ukuran yang berbeda, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada ukuran Anda untuk mengubah jenis satuannya.

Tinggi Baris Tajuk

Tinggi baris memengaruhi ruang antara setiap baris teks header Anda.Jika Anda ingin menambah ruang di antara setiap baris, gunakan bilah geser rentang untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di kolom input di sebelah kanan kursor. Kolom masukan mendukung satuan ukuran yang berbeda, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada ukuran Anda untuk mengubah jenis satuannya.

Font tubuh

Anda dapat mengubah font tubuh Anda dengan memilih font yang diinginkan dari menu drop-down. Divi hadir dengan lusinan font mengagumkan yang diberdayakan oleh Google Fonts. Secara default, Divi menggunakan font Open Sans untuk semua teks di halaman Anda. Anda juga dapat menyesuaikan gaya teks Anda menggunakan opsi tebal, miring, kapital dan garis bawah.

Ukuran font tubuh

Di sini Anda dapat menyesuaikan ukuran teks tubuh Anda. Anda dapat menyeret penggeser interval untuk menambah atau mengurangi ukuran teks Anda, atau Anda dapat langsung memasukkan nilai ukuran teks yang diinginkan ke dalam bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung satuan ukuran yang berbeda, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada ukuran Anda untuk mengubah jenis satuannya.

Warna teks badan

Secara default, semua warna teks di Divi muncul dalam warna putih atau abu-abu tua. Jika Anda ingin mengubah warna teks tubuh Anda, pilih warna yang diinginkan dari pemilih warna menggunakan opsi ini.

Spasi huruf tubuh

Penspasian huruf mempengaruhi jarak antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf teks tubuh Anda, gunakan penggeser rentang untuk menyesuaikan ruang atau masukkan ukuran ruang yang Anda inginkan di bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung satuan ukuran yang berbeda, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada ukuran Anda untuk mengubah jenis satuannya.

Ketinggian garis tubuh

Ketinggian garis memengaruhi ruang di antara setiap baris teks isi. Jika Anda ingin menambah ruang di antara setiap baris, gunakan penggeser interval untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung satuan ukuran yang berbeda, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada ukuran Anda untuk mengubah jenis satuannya.

Fon meta

Anda dapat mengubah fonta meta-teks Anda dengan memilih font yang diinginkan dari menu drop-down. Divi hadir dengan lusinan font mengagumkan yang diberdayakan oleh Google Fonts. Secara default, Divi menggunakan font Open Sans untuk semua teks di halaman Anda. Anda juga dapat menyesuaikan gaya teks Anda menggunakan opsi tebal, miring, kapital dan garis bawah.

Ukuran font meta

Di sini Anda dapat menyesuaikan ukuran teks meta Anda. Anda dapat menyeret penggeser interval untuk menambah atau mengurangi ukuran teks Anda, atau Anda dapat langsung memasukkan nilai ukuran teks yang diinginkan di bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung satuan ukuran yang berbeda, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada ukuran Anda untuk mengubah jenis satuannya.

Warna teks untuk meta

Secara default, semua warna teks di Divi muncul dalam warna putih atau abu-abu tua. Jika Anda ingin mengubah warna meta-teks Anda, pilih warna yang Anda inginkan dari color picker menggunakan opsi ini.

Spasi huruf meta

Penspasian huruf mempengaruhi jarak antara setiap huruf. Jika Anda ingin menambah spasi di antara setiap huruf meta-teks Anda, gunakan slider range untuk menyesuaikan spasi atau masukkan ukuran spasi yang Anda inginkan di kolom input di sebelah kanan slider. Kolom masukan mendukung satuan ukuran yang berbeda, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada ukuran Anda untuk mengubah jenis satuannya.

Ketinggian Meta Line

Tinggi baris memengaruhi ruang antara setiap baris dalam meta-teks Anda. Jika Anda ingin menambah ruang di antara setiap baris, gunakan slider rentang untuk menyesuaikan ruang atau masukkan ukuran spasi yang Anda inginkan di bidang di sebelah kanan kursor. Kolom masukan mendukung satuan ukuran yang berbeda, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada ukuran Anda untuk mengubah jenis satuannya.

Gunakan perbatasan

Mengaktifkan opsi ini akan memberi batas di sekitar modul Anda. Perbatasan ini dapat disesuaikan menggunakan parameter bersyarat berikut.

Warna perbatasan

Pilihan ini mempengaruhi warna perbatasan Anda. Pilih warna kustom dari color picker untuk diterapkan ke perbatasan Anda.

Lebar perbatasan

Secara default, batasnya selebar 1 piksel. Anda dapat meningkatkan nilai ini dengan menyeret penggeser rentang atau memasukkan nilai kustom di bidang masukan di sebelah kanan penggeser. Unit pengukuran kustom yang didukung, yang berarti Anda dapat mengubah unit default dari "px" ke sesuatu yang lain misalnya em, vh, vw dll.

Gaya batas

Perbatasan mendukung delapan gaya berbeda, termasuk: solid, dotted, dotted, double, groove, ridge, inset, dan start. Pilih gaya yang Anda inginkan dari menu drop-down untuk menerapkannya ke perbatasan Anda.

Opsi blog tingkat lanjut

Pada tab Advanced, Anda akan menemukan opsi yang mungkin berguna bagi desainer web yang lebih berpengalaman, seperti atribut CSS dan HTML khusus. Di sini Anda dapat menerapkan CSS khusus ke salah satu dari banyak elemen modul. Anda juga dapat menerapkan kelas dan ID CSS khusus ke modul, yang dapat digunakan untuk menyesuaikan modul dalam file style.css tema anak Anda.

ID CSS

Masukkan ID CSS opsional untuk digunakan untuk modul ini. ID dapat digunakan untuk membuat gaya CSS kustom atau untuk menautkan ke bagian tertentu halaman Anda.

Kelas CSS

Masukkan kelas CSS opsional yang akan digunakan untuk modul ini. Kelas CSS dapat digunakan untuk membuat gaya CSS khusus. Anda dapat menambahkan beberapa kelas, dipisahkan oleh spasi. Kelas-kelas ini dapat digunakan di Tema Divi Anak atau dalam CSS khusus yang Anda tambahkan ke halaman atau situs web Anda menggunakan Opsi Tema Divi atau Pengaturan Halaman Divi Builder.

CSS khusus

CSS khusus juga dapat diterapkan ke modul dan salah satu elemen internal modul. Di bagian CSS Khusus, Anda akan menemukan bidang teks tempat Anda dapat menambahkan CSS langsung ke setiap elemen. Entri CSS dalam pengaturan ini sudah disematkan dengan tag gaya. Jadi Anda hanya perlu memasukkan aturan CSS yang dipisahkan oleh titik koma.

jarak penglihatan

Opsi ini memungkinkan Anda untuk mengontrol perangkat tempat modul Anda muncul. Anda dapat memilih untuk menonaktifkan modul Anda pada tablet, smartphone atau desktop satu per satu. Ini berguna jika Anda ingin menggunakan mod yang berbeda pada perangkat yang berbeda atau jika Anda ingin menyederhanakan desain seluler dengan menghilangkan elemen tertentu dari halaman.

Itu saja untuk tutorial ini.