Loncat ke Konten Utama

Cara menggunakan modul blog di Divi Builder

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]

dengan Divi, bahkan blog adalah modul dan "blog" Anda dapat ditempatkan di mana saja di situs web Anda dan dalam berbagai format. Anda dapat menggabungkan modul blog dan sidebar untuk membuat desain blog klasik. Kolom 1, 2 kolom atau kolom 3 dapat dibuat menggunakan modul blog dan sidebar.

preview blog divi module blog.png

Cara menambahkan modul blog ke halaman Anda

Sebelum Anda dapat menambahkan modul blog ke halaman Anda, Anda harus terlebih dahulu mengakses Divi Builder. Setelah tema Divi dipasang di situs web Anda, Anda akan melihat sebuah tombol Gunakan Divi Builder di atas penerbit 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 tombolnya Gunakan Visual Builder saat Anda menjelajahi situs web hulu jika Anda masuk ke dasbor WordPress Anda.

tombol divi builder modul blog divi.png

Setelah masuk dalam 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 hebat tentang penggunaan elemen baris dan bagian dari Divi.

tambahkan modul blog divi builder.png

Cari modul blog dalam daftar modul dan klik di atasnya untuk menambahkannya ke halaman Anda. Daftar modul dapat dicari, 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-opsi ini dibagi menjadi tiga kelompok utama: Isi , Pembuahan et maju .

Gunakan case modul blog dengan layout grid di bagian khusus dengan sidebar kanan

Untuk contoh ini, saya akan menambahkan modul blog ke halaman blog. Halaman blog ini memiliki header lengkap dengan modul pencarian di bawahnya. 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 penerbitan baru-baru ini, modul email Optin, dan modul Person.

Seperti inilah halaman contoh.

contoh halaman divi.jpg

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

Mari kita mulai.

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

tata letak khusus divi.png

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

seletion zone divi builder.png

Kemudian tambahkan modul blog ke baris.

gunakan modul blog.png

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
Warna Overlay Hover: rgba (224,153,0,0.51) Header
POLISI:
Ukuran Font Header: 21px
Warna Teks Header: # 333333
Spasi huruf: 1px
Tinggi baris judul: 1.2 em
Perbatasan: YA
Warna batas: # f0f0f0
Lebar perbatasan: 1px
Gaya batas: Padat

Opsi lanjutan

CSS Kustom (Tombol Baca Lebih Lanjut):

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

pengaturan blog divi.png

Tombol Custom CSS lanjutan untuk tombol Read More menciptakan tampilan khusus yang sesuai dengan desain.

blok artikel desain divi.jpg

Divi: Tema WordPress terbaik sepanjang masa!

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

Di bagian sidebar kanan tata letak bagian, Anda perlu menambahkan modul sidebar yang menyisipkan widget publikasi terbaru. Di bawah ini Anda perlu menambahkan modul Email Optin. Dan kemudian, di bawah The Email Optin, Anda perlu menambahkan modul Person dengan informasi tentang penulis.

Itu saja!

Pilihan konten blog

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

modul blog divi.png

Jumlah Posisi (Jumlah Butir)

Atur jumlah pesan yang ingin Anda lihat. Anda akan perlu memiliki pesan untuk semua yang muncul dalam modul ini.

Pilih kategori yang ingin Anda sertakan dalam aliran publikasi. Semua kategori pesan yang Anda buat akan muncul di sini untuk Anda pilih / tidak pilih.

Kategori disertakan

Pilih kategori yang ingin Anda sertakan dalam umpan.

Format meta-date

Setel format tanggal yang ingin Anda tampilkan pada posting blog Anda di sini. Tata letak default adalah format Mj, Y (6 Jan 2014) Periksa WordPress codex pada format tanggal untuk opsi lainnya.

Isi

Melihat konten lengkap tidak akan memotong posting Anda pada halaman indeks. Show Preview hanya akan menampilkan teks ekstrak Anda.

Nomor offset

Pilih jumlah pesan yang ingin Anda bayar. Jika Anda mengimbangi dengan pesan 3, 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 menentukan apakah akan menampilkan tautan "baca lebih lanjut" setelah mengekstrak atau tidak.

Lihat penulis

Pilih apakah atau tidak untuk menampilkan penulis setiap posting blog di kotak meta posting di bawah judul artikel.

Tampilkan tanggal

Pilih apakah Anda ingin menampilkan tanggal setiap artikel dibuat di kotak meta posting di bawah judul pesan.

elemen untuk menampilkan modul divi blog.png

Tampilkan kategori

Pilih apakah atau tidak untuk menampilkan kategori posting di area meta posting di bawah judul publikasi.

Tampilkan jumlah komentar

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

Lihat paginasi

Pilih apakah Anda ingin menampilkan paginasi untuk umpan ini atau tidak. Untuk mengaktifkan paginasi bernomor, Anda perlu menginstal plug-in WP Page Navi .

Label administrasi

Ini akan mengubah tag 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 jarak. Tab ini memungkinkan Anda mengubah tampilan modul Anda. Setiap modul Divi memiliki daftar panjang parameter desain yang dapat Anda gunakan untuk mengubah apa saja.

pilihan desain divi builder module blog.png

ketentuan

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

Gambar yang tumpang tindih

Jika opsi ini diaktifkan, warna dan ikon hamparan akan muncul ketika pengunjung mengarahkan ke gambar yang dipilih dari pesan.

Buat Toko Online Anda dengan mudah

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

Warna ikon hamparan

Di sini Anda dapat mengatur warna kustom untuk ikon overlay.

Warna cover melayang

Di sini Anda dapat menentukan warna kustom untuk overlay.

Hover Icon Picker

Di sini Anda dapat mengatur ikon kustom untuk overlay.

Warna teks

Jika blog Anda ditempatkan di latar belakang terang, warna teks harus disetel ke "Gelap". Visa, jika blog Anda ditempatkan pada latar belakang gelap, warna teks harus diatur ke "Cahaya".

Font tajuk

Anda dapat mengubah font header Anda dengan memilih font pilihan Anda dari menu drop-down. Divi hadir dengan lusinan font bagus 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 dengan menggunakan huruf tebal, miring, huruf besar, dan bergaris bawah.

Ukuran font header

Di sini Anda dapat menyesuaikan ukuran teks header Anda. Anda dapat menyeret slider interval untuk menambah atau mengurangi ukuran teks Anda, atau Anda dapat memasukkan nilai ukuran teks yang diinginkan langsung ke bidang input di sebelah kanan slider. Kolom input mendukung berbagai unit pengukuran, yang berarti Anda dapat memasukkan "px" atau "em" sesuai dengan ukuran Anda untuk mengubah jenis unitnya.

Warna teks header

Secara default, semua warna teks di Divi muncul dalam warna putih atau abu-abu gelap. Jika Anda ingin mengubah warna header Anda, pilih warna pilihan Anda di pemilih warna menggunakan opsi ini.

Jarak kop surat

Jarak huruf mempengaruhi ruang di antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf pada teks header Anda, gunakan slider interval untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di bidang input di sebelah kanan slider. Kolom input mendukung berbagai unit pengukuran, yang berarti Anda dapat memasukkan "px" atau "em" sesuai dengan ukuran Anda untuk mengubah jenis unitnya.

konfigurasi spacing header divi.png

Ketinggian garis tajuk

Tinggi garis memengaruhi ruang di antara setiap baris teks header Anda Jika Anda ingin menambah ruang di antara setiap baris, gunakan slider interval untuk menyesuaikan ruang atau masukkan ukuran spasi yang diinginkan di bidang input di sebelah kanan kursor. Kolom input mendukung berbagai unit pengukuran, yang berarti Anda dapat memasukkan "px" atau "em" sesuai dengan ukuran Anda untuk mengubah jenis unitnya.

Font tubuh

Anda dapat mengubah font tubuh Anda dengan memilih font pilihan Anda dari menu drop-down. Divi hadir dengan lusinan font bagus 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 dengan menggunakan huruf tebal, miring, huruf besar, dan bergaris bawah.

Ukuran font tubuh

Di sini Anda dapat menyesuaikan ukuran tubuh teks Anda. Anda dapat menyeret slider interval untuk menambah atau mengurangi ukuran teks Anda, atau Anda dapat memasukkan nilai ukuran teks yang diinginkan langsung ke bidang input di sebelah kanan slider. Kolom input mendukung berbagai unit pengukuran, yang berarti Anda dapat memasukkan "px" atau "em" sesuai dengan ukuran Anda untuk mengubah jenis unitnya.

Warna teks badan

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

Spasi huruf tubuh

Jarak huruf mempengaruhi ruang di antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf teks tubuh Anda, gunakan slider interval untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di bidang input di sebelah kanan slider. Kolom input mendukung berbagai unit pengukuran, yang berarti Anda dapat memasukkan "px" atau "em" sesuai dengan ukuran Anda untuk mengubah jenis unitnya.

Ketinggian garis tubuh

Ketinggian baris mempengaruhi ruang antara setiap baris teks tubuh. Jika Anda ingin menambah ruang di antara setiap baris, gunakan slider interval untuk menyesuaikan ruang atau masukkan ukuran spasi yang diinginkan di bidang input di sebelah kanan slider. Kolom input mendukung berbagai unit pengukuran, yang berarti Anda dapat memasukkan "px" atau "em" sesuai dengan ukuran Anda untuk mengubah jenis unitnya.

Font Metas

Anda dapat mengubah font meta-teks Anda dengan memilih font pilihan Anda dari menu drop-down. Divi hadir dengan lusinan font bagus 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 dengan menggunakan huruf tebal, miring, huruf besar, dan bergaris bawah.

bagian meta data diiv builder.png

Ukuran font metas

Di sini Anda dapat menyesuaikan ukuran teks meta Anda. Anda dapat menyeret slider interval untuk menambah atau mengurangi ukuran teks Anda, atau Anda dapat memasukkan nilai ukuran teks yang diinginkan langsung ke bidang input di sebelah kanan slider. Kolom input mendukung berbagai unit pengukuran, yang berarti Anda dapat memasukkan "px" atau "em" sesuai dengan ukuran Anda untuk mengubah jenis unitnya.

Warna teks untuk meta

Secara default, semua warna teks di Divi muncul dalam warna putih atau abu-abu gelap. Jika Anda ingin mengubah warna meta-teks Anda, pilih warna pilihan Anda di pemilih warna menggunakan opsi ini.

Spasi huruf meta

Jarak huruf mempengaruhi ruang di antara setiap huruf. Jika Anda ingin meningkatkan ruang antara setiap huruf meta-teks Anda, gunakan slider interval untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di bidang input di sebelah kanan slider. Kolom input mendukung berbagai unit pengukuran, yang berarti Anda dapat memasukkan "px" atau "em" sesuai dengan ukuran Anda untuk mengubah jenis unitnya.

Ketinggian Meta Line

Ketinggian baris mempengaruhi ruang antara setiap baris meta-teks Anda Jika Anda ingin meningkatkan ruang antara setiap baris, gunakan slider interval untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di lapangan masukan ke kanan kursor. Kolom input mendukung berbagai unit pengukuran, yang berarti Anda dapat memasukkan "px" atau "em" sesuai dengan ukuran Anda untuk mengubah jenis unitnya.

Gunakan perbatasan

Mengaktifkan opsi ini akan menempatkan batas di sekitar modul Anda. Perbatasan ini dapat dikustomisasi menggunakan parameter kondisional berikut.

Warna perbatasan

Opsi ini memengaruhi warna batas Anda. Pilih warna kustom di pemilih warna untuk menerapkannya ke perbatasan Anda.

Lebar perbatasan

Secara default, batas memiliki lebar piksel 1. Anda dapat meningkatkan nilai ini dengan menyeret penggeser dalam rentang atau memasukkan nilai khusus di bidang masukan di sebelah kanan bilah geser. Unit pengukuran khusus yang didukung, yang berarti Anda dapat mengubah unit default "px" menjadi sesuatu yang lain, misalnya em, vh, vw dll.

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]

Gaya batas

Perbatasan mendukung delapan gaya berbeda, termasuk: padat, putus-putus, putus-putus, ganda, alur, puncak, inset, dan mulai. Pilih gaya pilihan Anda dari menu drop-down untuk menerapkannya ke perbatasan Anda.

Opsi blog lanjutan

Di tab Lanjutan, Anda akan menemukan opsi yang dapat dimanfaatkan oleh perancang web yang lebih berpengalaman, seperti atribut CSS khusus dan HTML. Di sini Anda dapat menerapkan CSS kustom ke salah satu dari banyak elemen modul. Anda juga dapat menerapkan kelas khusus dan ID CSS ke modul, yang dapat digunakan untuk menyesuaikan modul dalam file style.css dari tema anak Anda.

bagian lanjutan dari modul blog.png

ID CSS

Masukkan ID CSS opsional yang akan digunakan untuk modul ini. Pengidentifikasi dapat digunakan untuk membuat gaya CSS khusus atau untuk membuat tautan ke bagian tertentu dari 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 dalam tema Divi Child Anda atau di CSS kustom yang Anda tambahkan ke halaman atau situs web Anda dengan menggunakan opsi tema Divi atau pengaturan halaman Divi Builder.

CSS Khusus

CSS khusus juga dapat diterapkan ke modul dan ke 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 tertanam dalam tag gaya. 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 di tablet, ponsel pintar atau desktop secara individual. Ini berguna jika Anda ingin menggunakan modul yang berbeda pada perangkat yang berbeda atau jika Anda ingin menyederhanakan desain ponsel dengan menghilangkan elemen-elemen tertentu dari halaman.

Itu saja untuk ini Tutoriel.

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.

Kembali ke atas
10 saham
saham4
menciak2
Register4
Ada apa