Loncat ke Konten Utama

Cara menggunakan modul blog di Divi Builder

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

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

Dengan Divi, bahkan blogging adalah modul dan "blog" Anda dapat ditempatkan di mana saja di situs web Anda 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.

preview blog divi module blog.png

Bagaimana cara menambahkan modul blog ke halaman Anda

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

tombol divi builder modul blog divi.png

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.

tambahkan modul blog divi builder.png

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.

contoh halaman divi.jpg

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:

tata letak khusus divi.png

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

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
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;

pengaturan blog divi.png

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

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

blok artikel desain divi.jpg

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.

modul blog divi.png

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.

elemen untuk menampilkan modul divi blog.png

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.

pilihan desain divi builder module blog.png

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]

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

Jika blog Anda ditempatkan pada latar belakang terang, warna teks harus disetel ke "Gelap". Visa, jika blog Anda ditempatkan di latar belakang gelap, warna teks harus disetel 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.

konfigurasi spasi header divi.png

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.

bagian meta data diiv builder.png

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.

Buat Toko Online Anda dengan mudah

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

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.

bagian lanjutan dari modul blog.png

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 dalam tema Divi Child Anda 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.

Artikel ini berisi 1 komentar

  1. Halo,
    Apakah Anda tahu cara membalikkan arah penomoran halaman? Saya ingin menyajikan artikel saya dari yang terbaru hingga yang terlama.
    Merci pour votre respon.
    Manolita

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