Cara Membuat Blog Gaya Medium dengan Divi

Diterbitkan: 2017-07-06

Dalam posting blog Divi hari ini, kami akan membagikan beberapa tips hebat tentang cara membuat situs web blog Anda sendiri dengan gaya yang sama seperti blog Medium.

Medium dikenal sebagai salah satu platform yang paling banyak digunakan untuk blogging. Mereka tidak hanya memiliki komunitas blogger besar yang terlibat dengan audiens mereka secara teratur, tetapi platform blogging mereka juga memberikan pengalaman pengguna yang sangat bagus. Itulah yang diinginkan setiap blogger. Mereka ingin memastikan bahwa mereka menyampaikan pesan dengan cara yang jelas dan dalam lingkungan di mana pembaca merasa nyaman.

Namun, blogging di Medium memiliki keterbatasan. Tidak ada manfaat dari SEO yang terlibat, misalnya. Dengan membuat blog Anda sendiri, yang terinspirasi oleh gaya blog Medium, Anda dapat melanjutkan perasaan akrab yang sudah mereka miliki dengan blog Medium dan membawanya ke situs web Anda sendiri.

Ayo Mulai

Berlangganan Saluran Youtube Kami

Kami akan menunjukkan kepada Anda bagian terpenting dalam membuat blog gaya Medium dan kami juga menunjukkan kepada Anda, langkah demi langkah, cara membuat beberapa bagian penting. Sebagai contoh; cara membuat template posting blog bergaya Medium yang dapat Anda gunakan untuk semua posting Anda. Templatenya terlihat seperti ini:

Kami juga akan menunjukkan cara menambahkan plugin Worth The Read dan Highlight and Share agar terlihat lebih mirip. Hasil Worth The Read terlihat seperti ini:

Dan Sorotan dan Bagikan akan memiliki efek berikut:

Buat Menu Sederhana Seperti Blog Medium

Salah satu hal yang dapat Anda perhatikan dengan jelas ketika mengunjungi situs web Medium adalah kesederhanaan menu mereka. Tidak terlalu banyak pilihan yang tersedia yang langsung memudahkan pengunjung untuk bernavigasi. Pengunjung dapat menjelajahi posting blog yang disorot di beranda dan melanjutkan kunjungan mereka dari sana.

Elemen Menu

Pilih logo yang cocok dengan kesederhanaan situs web Anda yang lain dan pastikan logo itu halus dengan memberinya ukuran kecil di menu Anda. Anda pasti tidak ingin logo mengalahkan konten yang Anda bagikan di situs web Anda.

Selanjutnya, jangan sertakan terlalu banyak halaman dalam navigasi Anda. Karena situs web Anda semua tentang blogging, beranda mungkin sudah cukup. Anda juga dapat mempertimbangkan untuk menambahkan halaman tentang jika Anda ingin memberi tahu pengunjung sedikit lebih banyak tentang diri Anda.

Selanjutnya, sertakan ikon pencarian sehingga orang dapat dengan mudah mencari melalui posting blog Anda dengan beberapa kata kunci. Ini semua tentang konten yang Anda hasilkan dan membuatnya mudah ditemukan.

Untuk contoh di atas, kami menggunakan pengaturan berikut untuk Bilah Menu Utama di Penyesuai Tema:

  • Tinggi Menu: 54
  • Tinggi Maks Logo: 37
  • Ukuran Teks: 18

Gunakan Palet Warna dengan Kontras & Font Sederhana

Blog Medium menggunakan tiga warna utama di seluruh platform mereka yang membuat konten mudah dibaca. Meskipun dua warna mungkin tampak seperti hitam dan putih, mereka sedikit lebih lembut di mata. Yang ketiga berwarna abu-abu muda tapi bisa dibaca. Lakukan penyesuaian berikut pada Bilah Menu Utama di Penyesuai Tema untuk mengubah warna dan font yang sedang digunakan di menu utama:

  • Font: Sumber Sans Pro
  • Warna Teks: rgba(0,0,0,.44)
  • Warna Tautan Aktif: rgba(0,0,0,.44)
  • Warna Latar Belakang: #fbfcfd

Sertakan Ikon Pencarian

Selanjutnya, untuk menyertakan Ikon Pencarian di menu utama Anda, buka Header & Navigasi > Elemen Header > Tampilkan ikon pencarian.

Nonaktifkan Bilah Navigasi Tetap

Hal lain yang dilakukan blog Medium adalah menjaga bilah navigasi mereka di bagian atas halaman. Dengan begitu, pengunjung tidak perlu terganggu saat sedang membaca. Untuk menonaktifkan bilah navigasi tetap di situs web Divi Anda, buka panel WordPress > Divi > Opsi Tema > Pengaturan Umum > Nonaktifkan Bilah Navigasi Tetap.

Gaya Modul Blog Beranda Anda berdasarkan Kategori

Selanjutnya, Anda ingin menata beranda situs web Anda berdasarkan kategori. Bergantung pada blog yang Anda buat, Anda dapat membuat bagian berbeda di beranda Anda yang sesuai dengan apa yang paling disukai pengunjung Anda untuk dibaca. Kami merekomendasikan untuk setidaknya menggunakan jenis kategori berikut: populer, terbaru, dan disarankan. Anda dapat menetapkan posting blog ke kategori ini dengan membuat kategori yang berbeda di halaman 'Kategori' dari 'Postingan' di menu WordPress Anda dan dengan menetapkan setiap posting ke satu atau lebih kategori dalam posting itu sendiri.

Hal lain yang benar-benar ingin Anda lakukan adalah membuat berbagai modul dan bagian blog di beranda Anda mudah diikuti. Untuk mencapai itu, Anda dapat menggunakan kisi blog standar di pembuat Divi atau Anda dapat mencari sesuatu yang sedikit lebih maju. Kami telah mencantumkan tiga plugin di bawah ini yang dapat Anda pertimbangkan untuk digunakan.

Plugin Kartu Artikel Divi

Plugin Divi Article Card adalah plugin gratis yang dibagikan di blog kami selama Divi 100. Gaya yang digunakan dalam plugin ini bersih dan memiliki efek hover yang bagus. Ini adalah efek sederhana tetapi dapat menciptakan sedikit sentuhan ekstra untuk blog Anda.

Plugin ini sepenuhnya gratis, cukup buka pos dan unduh!

Modul Blog Kustom Divi

Plugin lain yang membuat tata letak Modul Blog yang tampak bagus adalah Modul Blog Kustom Divi. Yang ini lebih menyerupai posting blog Medium daripada yang sebelumnya dengan menempatkan gambar unggulan di sisi kiri.

Harga plugin adalah $20.

Ekstra Blog Divi

Plugin terakhir yang dapat membantu Anda mendekatkan blog Anda agar terlihat seperti blog Medium adalah Divi Blog Extras. Plugin ini juga memiliki banyak tata letak modul Blog yang berbeda yang dapat membantu Anda membangun blog gaya Medium Anda.

Plugin ini dijual seharga $15 untuk Single Site License dan $30 untuk Extended License.

Buat Template Posting Blog

Medium memiliki format posting blog standar untuk semua posting yang dibuat. Desainnya berfokus pada esensi postingan: konten. Format posting blog yang digunakan sejalan dengan sisa situs web: sederhana. Ini memotong pengejaran dengan menggunakan kombinasi konten tertulis dan media yang dapat Anda sisipkan di seluruh posting.

Divi menawarkan kemungkinan yang sama. Anda dapat membuat posting blog Anda sesederhana atau sehalus yang Anda inginkan dengan menggunakan modul berbeda yang disediakan oleh pembuat Divi. Ini adalah contoh tata letak yang akan kami tunjukkan cara membuatnya langkah demi langkah:

Pengaturan Pos Divi

Mulailah dengan menambahkan posting baru, memberinya judul, dan mengaktifkan pembuat Divi. Selanjutnya, pastikan Pengaturan Divi Post adalah sebagai berikut:

  • Tata Letak Halaman: Lebar Penuh
  • Navigasi Titik: Mati
  • Sembunyikan Nav Sebelum Gulir: Default
  • Judul Postingan: Sembunyikan

Penulis (Desktop)

Untuk membuat tata letak, kita akan beralih ke Visual Builder. Mulailah dengan menambahkan bagian baru dengan dua baris. Lanjutkan dengan menambahkan Modul Gambar ke kolom pertama dan dua Modul Teks ke kolom kedua. Buka pengaturan bagian dan tambahkan pilih '#fbfcfd' sebagai warna latar belakang Anda.

Modul Gambar

Buka Modul Gambar, unggah gambar di tab Konten dan letakkan Perataan Gambar ke 'Kiri' di tab Desain. Selanjutnya, tambahkan '-5%' ke Margin Atas dan '25%' ke margin kiri di subkategori Spasi pada tab Desain.

Setelah itu, tambahkan kode berikut ke Elemen Utama di subkategori CSS Kustom pada tab Lanjutan: 

-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
width: 75px;
height: 75px;

Modul Teks Pertama

Tambahkan nama penulis di Kotak Konten di dalam tab Konten dan buat penyesuaian berikut pada subkategori Teks dari tab Desain:

  • Orientasi Teks: Kiri
  • Font Teks: Sumber Sans Pro
  • Ukuran Font Teks: 18
  • Warna Teks: rgba(0,0,0,0.8)
  • Tinggi Baris Teks: 1.7em

Gulir ke bawah tab yang sama untuk menambahkan '-3%' ke Margin Atas dan '-70%' ke Margin Kiri.

Modul Teks Kedua

Ketikkan tagline di Modul Teks kedua dan buat penyesuaian berikut pada subkategori Teks dari tab Desain:

  • Orientasi Teks: Kiri
  • Font Teks: Sumber Sans Pro
  • Ukuran Font Teks: 14
  • Warna Teks: rgba(0,0,0,0.44)
  • Tinggi Baris Teks: 1.7em

Selain itu, gulir ke bawah tab yang sama dan tambahkan '-5%' ke Margin Atas dan '-70%' ke Margin Kiri di subkategori Spasi.

Visibilitas Baris

Terakhir, buka pengaturan Baris dan nonaktifkan baris pada ponsel dan tablet di subkategori Visibilitas pada tab Lanjutan.

Penulis (Seluler)

Tambahkan baris lain ke bagian yang sama dengan baris lebar penuh. Lanjutkan dengan mengkloning Modul Gambar dan Modul Teks di baris sebelumnya dan menempatkannya di baris lebar penuh. Kita harus membuat beberapa modifikasi pada setiap modul untuk membuatnya terpusat di layar ketika seseorang membuka halaman di ponsel atau tablet.

Modul Gambar

Buka Modul Gambar dan letakkan Perataan Gambar ke 'Tengah'.

Modul Teks Pertama

Buka Modul Teks pertama dan ubah Orientasi Teks menjadi 'Tengah' di subkategori Teks pada tab Desain.

Gulir ke bawah tab yang sama, hapus Margin Kiri dan pertahankan Margin Atas.

Modul Teks Kedua

Selanjutnya lakukan hal yang sama untuk Modul Teks kedua. Letakkan Orientasi Teks ke 'Tengah' dan hapus Margin Kiri di subkategori Spasi pada tab Konten.

Visibilitas Baris

Terakhir, buka pengaturan baris dan nonaktifkan baris untuk desktop.

Modul Judul Posting

Karena kami telah menonaktifkan judul posting di Pengaturan Posting Divi kami, kami akan menambahkan modul Judul Postingan ke dalam baris lebar penuh di dalam bagian yang sama yang telah kami gunakan sampai sekarang.

Di subkategori Elemen dari tab Konten, kita dapat memilih elemen mana yang ingin kita tampilkan. Karena kami telah menyebutkan penulisnya, kami telah menonaktifkan semuanya kecuali judulnya.

Lebih-lebih lagi; buat penyesuaian berikut pada subkategori Teks dan Teks Judul dari tab Desain:

  • Orientasi Teks: Tengah
  • Judul Font: Sumber Sans Pro
  • Judul Font Style: Tebal
  • Judul Ukuran Font: 47px (Desktop), 40 (Tablet), 35 (Ponsel)
  • Warna Teks Judul: rgba(0,0,0,0.8)

Gambar Lebar Penuh

Gambar fullwidth pertama yang akan kita tambahkan adalah representasi dari gambar unggulan. Tambahkan Bagian Lebar Penuh, tempatkan Modul Gambar Lebar Penuh di dalamnya dan unggah gambar di tab Konten. Ini sesederhana itu.

Modul Teks

Selanjutnya, kita akan membuat Modul Teks yang digunakan untuk posting blog. Tambahkan bagian standar dengan baris lebar penuh dan letakkan Modul Teks di dalamnya. Dalam contoh ini, kami menggunakan keluarga font 'Cardo' alih-alih 'Georgia' hanya karena 'Cardo' adalah keluarga font yang ada di dalamnya.

Selanjutnya, buka pengaturan modul Teks, ketik beberapa contoh teks di kotak Konten dan buka tab Desain. Dalam subkategori Teks, buat penyesuaian berikut:

  • Orientasi Teks: Kiri
  • Font Teks: Cardo
  • Ukuran Font Teks: 25px (Desktop), 19px (Tablet), 17px (Telepon)
  • Warna Teks: rgba(0,0,0,0.8)
  • Tinggi Baris Teks: 1.8em

Gulir ke bawah tab yang sama, tambahkan '800px' ke Max Width di subkategori Sizing dan tambahkan '10%' ke Left Margin di subkategori Spacing.

Modul Video

Hal terakhir yang dapat memberikan nilai tambah pada posting blog Anda adalah mengintegrasikan video. Untuk melakukan ini, Anda harus mengkloning bagian yang dibuat sebelumnya dengan Modul Teks dan membagi total konten yang Anda miliki di antara dua modul teks. Tepat di antara dua bagian, kita akan menambahkan bagian lain dengan baris lebar penuh. Di baris lebar penuh itu, kita akan menambahkan Modul Video.

Beginilah tampilan struktur di backend:

Kami tidak melakukan penyesuaian apa pun pada Modul Video selain menambahkan URL.

Simpan Template

Anda dapat menggunakan kembali bagian yang berbeda agar sesuai dengan posting blog yang Anda buat dengan mengkloningnya dan mengubah kontennya. Setelah Anda selesai melakukannya, Anda dapat menyimpan template posting blog dengan mengklik 'Simpan ke Perpustakaan' dan beri nama.

Lain kali Anda ingin menggunakan template, cukup klik 'Load From Library' dan muat template.

Layak Dibaca

Hal khas tentang membuat blog Medium adalah beberapa menit yang diperlukan untuk membaca posting blog tertentu. Ini biasanya muncul tepat di awal halaman dan memberi pengguna serta perkiraan berapa lama mereka akan selesai membaca. Di era di mana waktu adalah hal yang paling berharga, ini membantu orang memutuskan apakah mereka ingin membaca posting blog atau tidak.

Plugin WordPress gratis yang membantu Anda mencapainya adalah Worth The Read by Well Done Marketing. Anda dapat mengunduhnya di halaman yang kami tautkan atau mencarinya di plugin. Hal yang menyenangkan tentang plugin ini adalah Anda dapat memilih di mana Anda ingin waktu membaca muncul; halaman, posting atau keduanya. Anda juga dapat memilih penempatan dan format.

Setelah Anda mengunduh plugin dan mengaktifkannya, klik opsi 'Progres Membaca' di menunya. Lanjutkan dan buat perubahan yang perlu Anda lakukan. Menempatkan waktu membaca biasanya hanya digunakan untuk posting sehingga kebanyakan orang kemungkinan hanya akan memilih opsi itu.

Di tab Gaya, Anda dapat memilih gaya yang ingin Anda gunakan. Pastikan Anda menggunakan font yang sama seperti pada judul. Anda juga dapat menambahkan kode CSS khusus jika Anda ingin membuat modifikasi tambahan.

Sorot dan Bagikan

Hal lain yang sangat khas tentang Medium adalah kemungkinan untuk menyorot sesuatu, membagikannya, atau mengomentarinya jika Anda menyukainya. Ini memberi nilai tambah pada posting blog dengan membiarkannya terlibat dengan orang-orang yang membacanya. Kami menemukan plugin yang membantu Anda melakukan hal serupa; plugin Sorot dan Bagikan yang juga gratis untuk digunakan.

Anda dapat memutuskan saluran media sosial mana yang dapat dibagikan orang dengan membuka Pengaturan > Sorotan dan Bagikan > Mengaktifkan saluran media sosial yang ingin Anda gunakan.

Membungkus

Setelah membaca posting ini, Anda seharusnya dapat mulai membangun blog gaya Medium Anda yang berisi beberapa bagian Medium yang paling relevan. Anda memiliki banyak kemungkinan untuk membuatnya tetap sederhana seperti yang dilakukan blog Medium tetapi tetap memasukkannya dengan beberapa sentuhan pribadi. Jika Anda memiliki pertanyaan atau saran; pastikan Anda meninggalkan komentar di bagian komentar di bawah sehingga kami dapat tetap berhubungan dengan komunitas Divi kami yang luar biasa!

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!

Gambar Unggulan oleh Julia Tim / shutterstock.com