Mencari cara klasik namun kreatif untuk menampilkan postingan blog di situs web Anda? Jika demikian, Anda akan menyukai freebie Divi ini. Kami telah merancang templat posting blog yang terinspirasi mesin tik klasik yang secara otomatis berlaku untuk semua posting blog di situs web Anda! Sepanjang posting ini, kami juga akan menunjukkan langkah demi langkah bagaimana Anda dapat membuat ulang desain dari awal di dalam Pembuat Tema.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Template Postingan Blog yang Terinspirasi Mesin Ketik secara GRATIS

Untuk mendapatkan template posting blog yang terinspirasi mesin tik gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

1. Buka Divi Theme Builder & Tambahkan Template Baru

Buka Divi Theme Builder & Tambahkan Template Baru

Mulailah dengan membuka Divi Theme Builder. Sesampai di sana, tambahkan template baru.

Gunakan Template di Semua Posting

Gunakan template baru ini di semua posting Anda.

• Gunakan Pada: Semua Posting

Mulai Membangun Tubuh Template

Dan mulailah membangun tubuh template baru.

2. Mulai Membangun Badan Posting Blog

Pengaturan Bagian

Warna latar belakang

Begitu berada di dalam editor template, Anda akan melihat sebuah bagian. Buka bagian itu dan ubah warna latar belakang.

• Warna Latar Belakang: #fff4d8

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus berikutnya.

• Padding Atas: 200px
• Padding Bawah: 200px

Berbatasan

Dan selesaikan pengaturan bagian dengan menambahkan perbatasan.

• Lebar Batas: 100px (Desktop), 20px (Tablet & Ponsel)
• Warna Perbatasan: #ffffff

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Jarak

Tanpa menambahkan modul apa pun, buka pengaturan baris dan hapus semua padding atas dan bawah default.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Modul Gambar ke Kolom

Unggah Gambar

Kemudian, tambahkan Modul Gambar ke kolom baris dan unggah ilustrasi pilihan Anda. Ilustrasi yang kami gunakan dalam tutorial ini dapat ditemukan di folder yang dapat diunduh di awal tutorial ini.

Jarak

Pindah ke tab desain modul dan ubah nilai spasi sebagai berikut:

• Margin Atas: -150px
• Margin Kiri: -12vw (Desktop), 0px (Tablet & Ponsel)

Tambahkan Baris #2

Struktur Kolom

Ke baris berikutnya. Gunakan struktur kolom berikut:

Tambahkan Modul Teks ke Kolom 1

Konten Dinamis

Tambahkan Modul Teks ke kolom pertama baris dan gunakan konten dinamis berikut:

• Isi: Tanggal Penerbitan Posting

• Format Tanggal: 08/06/1999 m/d/Y

Pengaturan Teks

Ubah pengaturan teks yang sesuai:

• Font Teks: Elite Khusus
• Berat Font Teks: Tebal
• Warna Teks: #000000
• Ukuran Teks: 1.4rem

Modul Teks Klon Tiga Kali

Setelah Anda menyelesaikan pengaturan Modul Teks, Anda dapat mengkloning seluruh modul tiga kali.

Ubah Konten Dinamis

Ubah konten dinamis modul duplikat sebagai berikut:

• Duplikat #1: Kategori Posting
• Duplikat #2: Penulis Pos
• Duplikat #3: Jumlah Posting Komentar
  • Setelah: Komentar
  • Tautan ke Area Komentar: Ya

Tempatkan Dua Modul Teks di Kolom 2

Lanjutkan dengan menempatkan dua Modul Teks terakhir di kolom kedua baris,

Ubah Warna Teks Tautan Kategori & Jumlah Komentar

Ubah warna teks tautan jika perlu juga.

• Warna Teks Tautan: #000000

Ubah Orientasi Teks Modul di Kolom 2

Dan selesaikan Modul Teks di kolom 2 dengan memodifikasi perataan teksnya di berbagai ukuran layar.

• Perataan Teks: Kanan (Desktop), Kiri (Tablet & Ponsel)

Tambahkan Baris #3

Struktur Kolom

Ke baris berikutnya! Gunakan struktur kolom berikut:

Tambahkan Modul Teks ke Kolom

Konten Dinamis

Tambahkan Modul Teks ke kolom baris dan gunakan konten dinamis berikut:

• Isi: Judul Postingan/Arsip

• Sebelum:

• Setelah:

Pengaturan Teks H1

Pindah ke tab desain modul dan ubah pengaturan teks H1 sebagai berikut:

• Font Judul: Elite Khusus
• Warna Teks Judul: #000000
• Ukuran Teks Judul: 3.5rem (Desktop), 2.5rem (Tablet), 2rem (Telepon)
• Judul Garis Tinggi: 1.5em

Jarak

Tambahkan beberapa margin atas dan bawah kustom juga.

• Margin Atas: 150px
• Margin Bawah: 150px

Tambahkan Modul Konten Posting ke Kolom

Pengaturan Teks

Lanjut ke modul selanjutnya yaitu Post Content Module. Ubah pengaturan teks yang sesuai:

• Font Teks: Elite Khusus
• Ukuran Teks: 1.2rem
• Tinggi Baris Teks: 2.5em

Pengaturan Teks Judul

Ubah juga pengaturan teks judul yang berbeda.

• Font Judul: Elite Khusus
• Warna Teks Judul: #000000
• Judul 2 Ukuran Teks: 2rem (H2), 1,9rem (H3), 1,8rem (H4), 1,7rem (H5), 1,6rem (H6)

ID CSS

Dan tetapkan ID CSS ke modul.

• ID CSS: modul pasca-konten

Tambahkan Modul Kode ke Kolom

Tambahkan Judul Kode CSS

Sekarang, untuk menambahkan beberapa margin khusus ke judul yang berbeda, kami akan menambahkan CSS khusus berikut ke Modul Kode:

<style>
#post-content-module h2, h3, h4, h5, h6 {
margin-top: 70px;
margin-bottom: 70px;
}
</style>

Tambahkan Bagian #2

Warna latar belakang

Tambahkan bagian lain ke templat posting, buka pengaturan bagian dan ubah warna latar belakang bagian.

• Warna Latar Belakang: #fff4d8

Berbatasan

Tambahkan perbatasan juga.

• Lebar Batas: 100px (Desktop), 20px (Tablet & Ponsel)
• Lebar Batas Atas: 0px
• Warna Perbatasan: #ffffff

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Tambahkan Modul Komentar ke Kolom

Pengaturan Bidang

Satu-satunya modul yang kita butuhkan di baris ini adalah Modul Komentar. Ubah pengaturan bidang sesuai:

• Warna Latar Belakang Bidang: rgba(0,0,0,0)
• Warna Teks Bidang: #000000
• Bidang Bawah Padding: 50px
• Font Bidang: Elite Khusus
• Ukuran Teks Bidang: 1.2rem

• Lebar Batas Bawah Bidang: 1px
• Warna Batas Bawah Bidang: #000000

Pengaturan Teks Hitung Komentar

Bersamaan dengan pengaturan teks hitungan komentar.

• Jumlah Komentar Tingkat Judul: H2
• Font Hitungan Komentar: Elite Khusus
• Warna Teks Hitungan Komentar: #000000
• Ukuran Teks Hitungan Komentar: 2rem

Pengaturan Teks Judul Formulir

Buat beberapa perubahan pada pengaturan teks judul formulir juga.

• Judul Formulir Tingkat Judul: H3
• Font Judul Formulir: Elite Khusus
• Warna Teks Judul Formulir: #000000
• Bentuk Judul Teks Ukuran: 1.5rem

Pengaturan Teks Meta

Kemudian, ubah pengaturan teks meta.

• Meta Font: Elite Khusus
• Warna Teks Meta: #000000
• Ukuran Teks Meta: 1.5rem

Pengaturan Teks Komentar

Kami juga akan membuat beberapa perubahan pada pengaturan teks komentar.

• Font Komentar: Elite Khusus
• Ukuran Teks Komentar: 1.2rem
• Tinggi Baris Komentar: 2.5em

Pengaturan Tombol

Lanjutkan dengan menata tombol sebagai berikut:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 1.2rem
• Warna Teks Tombol: #ffffff
• Latar Belakang Tombol: #000000
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 0px

• Font Tombol: Elite Khusus

CSS Badan Komentar

Dan selesaikan pengaturan modul dengan menambahkan beberapa margin atas ke badan komentar di tab lanjutan.

margin-top: 100px;

3. Simpan Semua Perubahan Pembuat Tema & Hasil Pratinjau

Setelah Anda membuat badan posting blog kustom dari template Anda, Anda dapat menyimpan semua perubahan dan melihat hasilnya pada posting blog Anda!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah membagikan templat posting blog klasik yang terinspirasi mesin tik yang dapat Anda unduh secara gratis dan gunakan untuk proyek Divi Anda berikutnya! Kami juga telah membuat ulang desain template postingan dari awal. Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.