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