Menampilkan Postingan Blog Terbaru Anda dalam Desain Seluler yang Menakjubkan dengan Divi

Cara Anda menampilkan posting blog di situs web Anda memiliki pengaruh besar pada bagaimana pengunjung Anda berperilaku ketika mereka menemukannya saat menavigasi di situs web Anda. Untuk membantu Anda menjadi kreatif dan efektif, kami akan menunjukkan cara menampilkan entri blog terbaru Anda dengan cara yang menakjubkan.

Contoh yang akan kita buat ulang akan terlihat sangat bagus pada ukuran layar yang lebih kecil sambil mempertahankan tampilan dan nuansa yang bagus di desktop dan tablet juga. Kami harap tutorial ini menginspirasi Anda untuk membuat desain posting blog terbaru kustom Anda sendiri.

Mari kita lakukan!

Pratinjau

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

Mari Mulai Berkreasi!

Tambahkan Bagian Baru

Latar Belakang Gradien

Buat halaman baru atau buka yang sudah ada dan tambahkan bagian reguler ke dalamnya. Buka pengaturan dan tambahkan latar belakang gradien berikutnya.

• Warna 1: #2e1b8f
• Warna 2: #ffffff
• Arah Gradien: 90 derajat
• Posisi Awal: 53,3%
• Posisi Akhir: 53,3%

Jarak

Kemudian, pergi ke pengaturan spasi. Di sini, kita akan mengecilkan ukuran konten bagian di desktop dan secara bertahap menghilangkan ruang itu pada ukuran layar yang lebih kecil.

• Margin Atas: 100px
• Margin Bawah: 100px
• Padding Kiri: 26vw (Desktop), 13vw (Tablet), 0vw (Telepon)
• Padding Kanan: 22.8vw (Desktop), 11.4vw (Tablet), 0vw (Telepon)

Tambahkan Baris Baru

Struktur Kolom

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

Warna Latar Belakang Kolom 2

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan warna latar belakang ke kolom kedua.

• Kolom 2 Warna Latar Belakang: #f7f7f7

Warna Latar Kolom 3

Tambahkan warna yang sama ke latar belakang kolom 3 juga. Kami menggunakan warna yang sama untuk kedua kolom ini untuk menghubungkannya dan membuatnya terlihat seperti satu kesatuan. Nanti di postingan, kita akan menggunakan ini untuk memanipulasi lebar kolom pada ukuran layar yang lebih kecil.

• Warna Latar Kolom 3: #f7f7f7

Perekat

Buka tab desain berikutnya dan buka pengaturan ukuran. Di sini, kita akan menghapus semua ruang default antar kolom.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya

Menampilkan

Sekarang, untuk memastikan ketiga kolom muncul bersebelahan pada ukuran layar yang lebih kecil, kita perlu menambahkan satu baris kode CSS ke elemen utama baris.

display: flex;

Tambahkan Modul Blurb ke Kolom 1

Pilih Ikon

Saatnya mulai menambahkan modul! Mulailah dengan Modul Blurb di kolom 1 dan pilih ikon pilihan Anda.

Latar Belakang Gradien

Buka pengaturan latar belakang modul dan tambahkan latar belakang gradien radial.

• Warna 1: #5000ff
• Warna 2: rgba(41.196.169,0)
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 28%
• Posisi Akhir: 28%

Pengaturan Ikon

Lanjutkan dengan membuka tab desain dan mengubah pengaturan ikon.

• Warna Ikon: #ffffff
• Penempatan Gambar/Ikon: Atas
• Gunakan Font Ikon: Ya
• Ukuran Font Ikon: 22px

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus berikutnya.

• Padding Atas: 20px
• Padding Bawah: 10px

Berbatasan

Dan tambahkan batas bawah yang halus untuk menyelesaikan desain Modul Blurb.

• Lebar Batas Bawah: 1px
• Warna Batas Bawah: #ffffff
• Gaya Perbatasan Bawah: Putus-putus

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Modul berikutnya dan terakhir yang kita butuhkan di kolom pertama adalah Modul Teks. Tambahkan beberapa konten pilihan Anda.

Pengaturan Teks

Kemudian, buka tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Didact Gothic
• Berat Font Teks: Tebal
• Warna Teks: #ffffff

Tambahkan Modul Teks ke Kolom 2

Tambah isi

Ke kolom kedua! Di sini, satu-satunya modul yang kita perlukan adalah Modul Teks. Masukkan beberapa konten pilihan Anda.

Warna latar belakang

Pindah ke pengaturan latar belakang dan tambahkan warna latar belakang yang benar-benar putih.

• Warna Latar Belakang: #ffffff

Pengaturan Teks

Kami juga mengubah tampilan konten kami dengan memodifikasi pengaturan teks di tab desain.

• Font Teks: Sumber Serif Pro
• Berat Font Teks: Tebal
• Warna Teks: #000000
• Ukuran Teks: 13px
• Orientasi Teks: Tengah

Perekat

Seperti yang disebutkan sebelumnya, kami memanipulasi struktur kolom untuk membuat desain khusus pada ukuran layar yang lebih kecil. Untuk melakukannya, Anda harus mengurangi lebar Modul Teks dan memastikannya sejajar dengan sisi kiri kolom.

• Lebar: 60%
• Penyelarasan Modul: Kiri

Jarak

Kami menambahkan beberapa nilai padding kustom berikutnya.

• Padding Atas: 57px
• Padding Bawah: 57px
• Padding Kiri: 20px
• Padding Kanan: 20px

Bayangan Kotak

Bersamaan dengan bayangan kotak yang halus.

• Kekuatan Buram Bayangan Kotak: 80px
• Warna Bayangan: rgba (0,0,0,0.23)

Tambahkan Modul Teks ke Kolom 3

Tambah isi

Ke kolom berikutnya dan terakhir. Tambahkan Modul Teks dengan judul H3 dari posting blog Anda dan sebuah tautan. Tambahkan detail posting dalam gaya teks paragraf tepat di bawah judul.

Pengaturan Teks

Buka tab desain Modul Teks dan ubah pengaturan teks.

• Font Teks: Sumber Serif Pro
• Warna Teks: #a8a8a8
• Ukuran Teks: 12px

Pengaturan Teks H3

Lanjutkan dengan mengubah pengaturan teks H3 juga.

• Judul 3 Font: Didact Gothic
• Judul 2 Berat Font: Tebal
• Judul 3 Ukuran Teks: 17px

Jarak

Terakhir, kita perlu menambahkan beberapa nilai spasi kustom. Anda akan melihat bahwa kami juga menambahkan beberapa margin kiri negatif ke modul. Ini adalah langkah terakhir untuk membuat jenis struktur kolom yang berbeda pada ukuran layar yang lebih kecil. Jadi meskipun struktur kolom secara teknis masih sama, kami telah menggabungkan latar belakang kolom, lebar modul, dan margin kiri negatif untuk menciptakan hasil yang tampak berbeda.

• Margin Atas: 35px
• Margin Kiri: -80px (Desktop), -50px (Tablet & Ponsel)
• Padding Kanan: 20px

Baris Klon Dua Kali

Setelah Anda selesai memodifikasi baris dan semua modulnya, Anda dapat melanjutkan dan mengkloning seluruh baris sebanyak yang Anda inginkan, tergantung pada berapa banyak posting blog terbaru yang ingin Anda tampilkan.

Ubah Ikon

Ubah ikon setiap duplikat.

Ubah Konten & Tautan

Bersama dengan konten dan tautan yang terlibat dan Anda selesai!

Pratinjau

Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhir pada ukuran layar yang berbeda.

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat desain seluler yang menakjubkan yang menampilkan posting blog terbaru Anda. Desain yang telah kami buat ulang selangkah demi selangkah terutama dibuat untuk ukuran layar yang lebih kecil tetapi juga terlihat bagus di tablet dan desktop. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!