Divi: Cara membuat halaman blog dengan modul Blog

Apakah Anda ingin membuat halaman blog dengan modul Blog de divi?

Biasanya setiap paket tata letak Divi diterbitkan pada Elegan Tema menawarkan tata letak blog, yang membantu Anda berkreasi blog Anda cukup cepat. Namun pernahkah Anda ingin melihat sendiri cara membuat salah satu halaman blog ini?

Pada artikel ini, kita akan melihat cara membuat halaman blog dengan modul Blog Divi. Kami akan melalui setiap pengaturan langkah demi langkah.

Ayo mulai!

penelitian

Sebelum kita mulai, mari kita lihat gambaran umum tentang apa yang akan kita buat.

buat halaman blog dengan modul Blog Divi

Buat halaman blog baru

Buat halaman baru

Pertama, kita akan membuat halaman kita. Di dasbor WordPress, klik Pages > Tambahan.

Berikan halaman judul yang masuk akal bagi Anda.

Judul halaman: Blog di Divi

Beralih ke Divi Builder

Klik tombol ungu di tengah halaman: Gunakan Divi Builder .

Tambahkan bagian untuk judul halaman blog

Sesuaikan bagian

Kita akan mulai dengan bagian pertama. Buka Mereka parameter bagian .

Gulir ke Latar belakang dan ubah warnanya menjadi #f9f3fd. Masukkan Blog sebagai label admin. Tutup pengaturan bagian.

Latar belakang: #f9f3fd
Label Admin: Blog

Buat judul halaman blog

Kemudian kita akan menambahkan baris untuk judul. Pilih ikon hijau dan pilih baris kolom tunggal.

Kemudian tambahkan modul teks di garis.

Sesuaikan modul Teks Judul Blog

Buka mereka Pengaturan modul teks dan pilih H1. Tambahkan judul Blog kami.

Font: Judul 1
Teks: Blog kami

Lalu pergi ketab gaya dan atur perataan ke Centered. Untuk teks judul H1, pilih Cormorant Infant untuk font dan membuatnya tebal.

Perataan Teks: Terpusat
Teks judul: H1
Font Header: Bayi Kormoran
Header Cahaya Lembut: Teks Tebal

Atur Color ke #442854, Size ke 130px, dan Line Height ke 0,8em.

Warna: #442854
Ukuran teks desktop: 130px
Tinggi garis: 0,8em

Buat Artikel Terbaru dan Bagian Ajakan Bertindak

Bagian kami terdiri dari artikel terbaru dan email keikutsertaan.

Tambahkan baris baru di bawah baris pertama kami dan pilih desain kolom 2/3 kiri dan 1/3 kanan.

Buka mereka parameter garis dengan mengklik ikon roda gigi.

Pilihtab gaya, gulir ke jarak dan tambahkan 0px ke Bottom Inner Margin. Tutup Pengaturan.

Margin Internal Bawah: 0px

Tambahkan dan sesuaikan modul posting blog unggulan

Kemudian kita akan menambahkan blog-modul . Ini akan berisi artikel terakhir kami. Klik ikon plus abu-abu di kolom kiri baris baru kita dan tambahkan modul Blog.

Isi

Di bawah Isi , masukkan 1 untuk jumlah postingan.

Jumlah posisi: 1

Elemen

Gulir ke Elemen dan hapus centang Penulis dan Pagination. Kami akan membiarkan sisanya pada default mereka.

Tampilkan penulis: tidak
Tampilkan pagination: Tidak

ketentuan

Kemudian pilih tab gaya dan pilih Layar Penuh untuk tata letak dan matikan hamparan gambar unggulan.

Model: Layar Penuh
Hamparan Gambar yang Dipilih: Dinonaktifkan

Teks judul

Gulir ke Teks judul . Pilih H2 dan pilih Cormoran Bayi. Pilih Bold dan ubah warnanya menjadi #442854.

Sisipkan Judul Tiga: H2
Judul Font: Bayi Kormoran
Judul Cahaya Lembut: Teks Tebal
Warna teks judul: #442854

Atur ukuran font menjadi 30 piksel. Ubah tinggi garis menjadi 1.1em.

Ukuran: 30 piksel untuk desktop, 20 piksel untuk tablet, 18 piksel untuk ponsel
Tinggi baris judul: 1,1 em

Tubuh teks

Kemudian gulir ke bawah ke teks tubuh . Pilih Cabin untuk font, ubah warnanya menjadi #442854, dan ubah tinggi garis menjadi 1,8em.

Korps Polisi: Kabin
Warna teks isi: #442854
Tinggi garis tubuh: 1,8 em

Metadata teks

Kemudian gulir ke bawah ke Metadata Teks . Atur parameternya sebagai berikut:

Font Metadata: Bayi Kormoran
Metadata Cahaya Redup: Reguler
Gaya Salin Metadata: Tidak Ada
Warna teks metadata: #442854
Ukuran teks metadata: Desktop 16px, Tablet 15px, Telepon 14px
Tinggi baris metadata: 1,8 em

jarak

Kemudian gulir ke bawah ke jarak dan ubah margin atas menjadi 0vw.

Margin Atas: 0vw

Kotak bayangan

Terakhir, gulir ke bawah ke Kotak bayangan dan menonaktifkannya.

Kotak Bayangan: Nonaktifkan

Tambahkan dan Sesuaikan Modul Teks Email Blog

Sekarang kita akan pindah ke kolom kanan dan buat Ajakan Bertindak melalui email . Pertama, tambahkan modul Teks di kolom kanan. Klik ikon plus abu-abu dan cari Teks.

Isi

Pilih Judul 2 dan masukkan teks Berlangganan ke penawaran kami.

Font: Judul 2
Teks: Berlangganan penawaran kami

Teks Tajuk

untuk teks dari judul, pilih Center Alignment, pilih H2, pilih Cormorant Infant dan atur ke Bold.

Perataan Teks: Terpusat
Teks judul: H2
Font Header: Bayi Kormoran
Header Cahaya Lembut: Tebal

Ubah warnanya menjadi #442854, ukurannya menjadi 32px, dan tinggi garis menjadi 0,95em.

Warna teks tajuk: #442854
Ukuran Teks Tajuk: 32 piksel
Tinggi garis tajuk: 0,95 em

jarak

Terakhir, gulir ke bawah ke jarak dan tambahkan 10 piksel ke margin bawah. Tutup pengaturan modul Teks.

Margin Bawah: 10px

Tambahkan dan sesuaikan modul Blog Email Optin

Lalu kita pergi buat bentuk surel . Tambahkan modul Email Optin di bawah modul Teks di kolom kanan.

Isi

Pertama, hapus judul dan teks isi.

Judul: Tidak ada
Teks isi: tidak ada

Gulir ke Akun email dan tambahkan penyedia layanan Anda.

Kemudian gulir ke bawah ke Latar belakang dan batalkan pilihan warna latar belakang.

Gunakan warna latar belakang: tidak

Bidang

Pergilah ke tab gaya dan ubah Warna Latar Belakang Bidang menjadi rgba(255,255,255,0) dan Warna Teks menjadi #442854.

Bidang Warna Latar Belakang: rgba(255,255,255,0)
Bidang Warna Teks: #442854

Gulir ke bawah ke opsi font dan ubah font menjadi cabin, size menjadi 16px dan line height menjadi 1,8em.

Bidang Font: Kabin
Bidang Ukuran Teks: 16 piksel
Tinggi baris bidang: 1,8 em

Selanjutnya, sesuaikan sudut bulat bidang menjadi 32px, lebar batas menjadi 2px, dan ubah warna batas menjadi #442854.

Kontrol Persegi Panjang Bulat: 32px
Bidang lebar batas: 2px
Bidang Warna Perbatasan: #442854

tombol

Gulir ke Tombol dan pilih Gunakan gaya khusus untuk Tombol . Ubah ukurannya menjadi 18ps, warna tombol menjadi putih, dan warna latar belakang tombol menjadi #442854.

Gunakan gaya khusus untuk tombol: Ya
Ukuran Teks Tombol: 18 piksel
Warna Teks Tombol: #ffffff
Tombol latar belakang: #442854

Ubah radius batas menjadi 50 piksel, font menjadi Cormorant Infant, dan buat bobot menjadi tebal.

Tombol Radius Batas: 50px
Tombol Font: Bayi Kormoran
Tombol Soft Light: Teks tebal

Akhirnya, mari tambahkan beberapa Margin. Masukkan 20px untuk margin Atas, 12px untuk padding Atas dan Bawah, dan 32px untuk padding Kiri dan Kanan. Tutup pengaturan Email Optin.

Tombol Margin Atas: 20 px
Tombol Padding Atas dan Bawah: 12 px
Tombol Padding Kiri dan Kanan: 32px

Tambahkan baris baru untuk daftar posting blog

Kami akan melakukannya sekarang buat daftar item halaman. Pertama, tambahkan baris kolom tunggal baru di bawah bagian sebelumnya.

Pengaturan saluran

Pergi ke tab gaya dan tambahkan 0px ke Vertex Inner Margin. Tutup Pengaturan Garis.

Inner Margin Vertex: 0px

Tambahkan modul Blog ke baris Anda

Tambah sebuah blog-modul ke baris baru Anda dengan mengklik ikon plus abu-abu dan mengklik Blog.

Menata umpan posting blog

Mari kita ubah feed Halaman Blog.

Konten umpan blog

Buka mereka Pengaturan modul blog dan masukkan 3 untuk jumlah posting. Ini memungkinkan Anda untuk memilih jumlah posting yang ditampilkan di layar.

Angka yang lebih rendah, seperti 3, memungkinkan kita untuk fokus pada posting terbaru dan mengurangi ukuran halaman. Ini adalah pilihan yang baik jika Anda tidak sering memposting atau ingin menjaga halaman tetap bersih. Menampilkan lebih banyak posting, seperti 6-9, adalah ide bagus jika Anda ingin fokus pada aliran blog.

Jumlah posting: 3

Masukkan 1 untuk offset. Ini memberitahu Divi untuk memulai dengan posting blog kedua, yang mencegah kami menampilkan artikel yang sama yang sudah ditampilkan di posting blog yang ditampilkan di atasnya.

Nomor offset pos: 1