• Beranda
  • Artikel
  • Tema
  • Cara Menambahkan Template dan Desain Kustom ke Format Postingan Blog Divi (Bagian 3 dari 3)

Cara Menambahkan Template dan Desain Kustom ke Format Postingan Blog Divi (Bagian 3 dari 3)

Diterbitkan: 2017-05-04

Selamat datang di Hari 3 dari 3, hari terakhir dalam seri kami tentang Cara Menambahkan Gaya Kustom ke Format Postingan Blog Divi. Secara default Divi hadir dengan enam format posting blog: Standar, Video, Audio, Kutipan, Galeri, dan Tautan. Dalam seri ini kami mengajari Anda cara menyesuaikannya dengan php dan css.

Hari ini adalah hari terakhir dari seri kami tentang cara menambahkan templat dan gaya khusus ke format posting blog Divi. Hari terakhir seri ini didedikasikan untuk desain. Dengan single.php kami yang disesuaikan dan tema anak kami aktif, kami siap untuk menambahkan gaya ke format posting blog.

Saya akan memandu Anda melalui keenam format posting saat kami menambahkan beberapa sentuhan desain unik untuk masing-masing format. Pada akhir tutorial ini, Anda akan memiliki enam alternatif yang tampak hebat untuk format posting blog default yang disertakan dengan Divi.

Anda juga akan memiliki halaman blog yang cukup unik yang menampilkan elemen fitur format posting yang berbeda. Misalnya, format tautan akan menampilkan kotak tautan khusus sebagai pengganti gambar mini gambar unggulan. Posting format galeri akan menampilkan penggeser gambar dari gambar galeri Anda sebagai pengganti thumbnail gambar unggulan. Dan seterusnya.

Berikut adalah sekilas tampilan halaman blog Anda setelah tutorial hari ini (saya menggunakan Modul Blog Divi dengan tata letak kotak di gif di bawah).

Mari kita mulai.

Menyiapkan Pengaturan Desain Umum di Penyesuai Tema

Pertama kita perlu membuat beberapa perubahan gaya umum menggunakan penyesuai tema. Dari Dasbor WordPress Anda, buka Divi → Penyesuai Tema → Pengaturan Umum → Pengaturan Tata Letak dan ubah yang berikut:

Lebar Talang Situs Web: 2
Centang Gunakan Lebar Bilah Sisi Khusus
Lebar Bilah Samping: 30

Juga di bawah Penyesuai Tema, buka Skema Warna dan pilih Oranye.

Sekarang mari kita lihat seperti apa postingan standar Anda sejauh ini:

Seperti yang Anda tahu, itu masih membutuhkan beberapa gaya tetapi semuanya berada di tempat yang tepat. Anda memiliki bagian pahlawan yang mencakup lebar penuh halaman. Anda belum memiliki gambar unggulan sehingga latar belakang hanya menampilkan gradien yang Anda tambahkan ke file single.php Anda sebelumnya. Juga judul posting dan meta ada di dalam bagian pahlawan. Sekarang saatnya untuk menambahkan elemen desain lainnya.

Menata Bagian Pahlawan untuk semua Format Posting

Karena setiap format posting Anda akan berbagi bagian pahlawan dan desain bilah sisi yang sama, Anda dapat menambahkan CSS khusus ini terlebih dahulu. Kembali ke Penyesuai Tema, klik CSS Tambahan di bagian bawah, dan tambahkan CSS khusus berikut: 

.hero-section {
	padding-top: 120px;
	padding-bottom: 120px;
	background-repeat: no-repeat;
	background-size: cover;
	position:relative;
	max-height: 450px;
	background-color: #333;
}

.single-post #main-content #left-area {padding-top: 0px;}

/* ---- Sidebar Settings ---- */
.single #sidebar {background: #efefef; padding-top: 20px; padding-right: 20px; padding-left: 20px; padding-bottom: 20px;}

/* ---- Standard Post Title & Post Meta ---- */
.single h1.entry-title,.attachment h1.entry-title, .single p.post-meta {
width: 100%;
text-align: center;
padding-left: 8px;
padding-right: 8px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
}

 @media only screen and (min-width: 980px) {
/*** Set title font size for desktop ***/
.single h1.entry-title {
font-size: 65px !important;
}
 }

Sekarang lihat seperti apa postingan standar sekarang.

Dengan bagian pahlawan dan gaya bilah sisi di tempat, Anda siap untuk menata format posting individual.

Menata Format Postingan Standar

Format posting standar adalah format default untuk semua posting blog Anda. Anda dapat memilih format posting standar saat mengedit posting Anda.

Yang akan kita lakukan untuk format standar ini adalah menambahkan gambar unggulan. Karena gambar unggulan ini akan meregangkan seluruh lebar layar, saya sarankan menggunakan gambar berukuran 2000 x 600. Saya menggunakan gambar dari unsplash.com.

Setelah Anda menambahkan gambar unggulan Anda, lihat seperti apa tampilan postingan standar.

Menata Format Posting Video

Untuk menata Format Posting Video, pastikan Anda telah memilih format Video untuk postingan Anda.

Selanjutnya, tambahkan url atau embed video ke konten Anda. Format video akan mengambil url video pertama, tag video, atau embed dan menampilkannya di bagian atas konten posting Anda. Video ini juga akan menggantikan gambar unggulan di halaman blog Anda.

Untuk contoh ini, saya hanya menggunakan url video youtube.

Tambahkan gambar unggulan 2000 x 600 Anda ke pos.

Selanjutnya, kita akan menambahkan gaya tambahan ke video unggulan untuk memberi video batas putih dan meninggikannya sedikit sehingga tumpang tindih dengan bagian pahlawan dan sedikit menonjol.

Buka Penyesuai Tema → CSS tambahan dan tambahkan CSS khusus berikut: 

/* ---- Format the Position of the Video Wrapper ---- */
 
@media only screen and (min-width: 980px) {
 /*** elevate the video to overlap the hero section ***/
.single-post.single-format-video .et_main_video_container {margin-top: -120px; background: #fff; outline: 10px solid #ffffff !important; z-index: 100; margin-bottom: -100px;}
}

Sekarang lihat posting Format Video baru Anda.

Atau, Anda dapat membuat posting ini dengan lebar penuh untuk opsi desain hebat lainnya. Cukup pergi untuk mengedit posting Anda dan, di Pengaturan Posting Divi di kanan atas halaman, pilih tata letak halaman lebar penuh.

Sekarang lihat posting Format Video lebar penuh:

Menata Format Pos Audio

Untuk Audio Post Format, pastikan Anda telah memilih Audio Format untuk posting Anda.

Tambahkan gambar unggulan 2000 x 600 Anda.

Selanjutnya, tambahkan file audio Anda ke posting Anda. Ini bisa berupa file .mp3, .m4a, .ogg, atau .wav. Anda dapat mengunggah file audio ke perpustakaan media Anda dan menyisipkan ke posting Anda dalam tiga cara berbeda (menyematkan pemutar media, menautkan ke file media, atau menautkan ke halaman lampiran).

Salah satu dari tiga opsi ini akan berfungsi. Tapi, untuk contoh ini saya hanya akan menambahkan url sederhana ke file audio. WordPress akan mengonversi url audio ini menjadi pemutar media di bagian atas postingan.

Sekarang mari kita lihat pada postingan Audio Format.

Itu tidak buruk, tapi bisa lebih baik. Mari sembunyikan pemutar media duplikat yang ditampilkan di bawah pemutar media oranye dan tambahkan gambar latar belakang ke pemutar media oranye kita.

Buka Penyesuai Tema → CSS tambahan dan tambahkan CSS khusus berikut: 

/* ----- Add Background Image to the Audio Player & Change size of the player ----- */
body.single .et_audio_content, .blog .et_audio_content {
margin-bottom: 0px !important;
height: 300px !important;
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
background-repeat: no-repeat;
background-size: cover;
 }

/* ---- Hide the Duplicate Audio Player  ------ */ 
div#mep_1 {display: none;}

Kemudian temukan dan unggah gambar ke galeri media Anda (harus berukuran sekitar 700 x 300). Kemudian salin url dan tempel di CSS di atas yang bertuliskan "ENTER IMAGE URL HERE". 

background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');

Sekarang periksa posting Format Audio baru Anda.

Menata Format Posting Kutipan

Untuk Format Postingan Kutipan, pastikan Anda telah memilih Format Kutipan untuk postingan Anda.

Kemudian tambahkan gambar unggulan 2000 x 600 ke postingan.

Format kutipan menggunakan kode pendek blockquote untuk menghasilkan tampilan kutipan khusus. Jadi, tambahkan blockquote ke konten Anda agar kutipan kustom ditampilkan.

Sekarang periksa posting Anda.

Mari kita sesuaikan kotak kutipan unggulan dengan sedikit CSS untuk memberikannya gambar latar belakang dan kutipan besar di kanan atas.

Buka Penyesuai Tema → CSS tambahan dan tambahkan CSS khusus berikut: 

/* ---- Add Background Image to the Quote Box ---- */
 
.et_quote_content {
 
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE')!important;
background-repeat: no-repeat;
background-size: cover;
 
}

/* ---- Add the Quotation Symbol to the Quote Box ---- */
 
.et_quote_content blockquote p::before {
font-family: Cardo;
position: absolute;
top: 16px;
left: 5%;
margin-left: -16px;
border-radius: 31px;
background: rgba(255, 255, 255, .0);
font-size: 70px; 
font-color: #fff;
content: "\201C" !important;
}

/* ---- Text Format Inside of quote ---- */
@media only screen and (min-width: 980px) {
.single-post.single-format-quote blockquote p {
font-size: 30px !important;
font-weight: 600 !important;
}
}

Temukan dan unggah gambar ke galeri media Anda (harus berukuran sekitar 700 x 300). Kemudian salin url dan tempel di CSS di atas yang bertuliskan "ENTER IMAGE URL HERE". 

background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');

Sekarang periksa hasil akhir Anda:

Menata Format Posting Galeri

Untuk Format Posting Galeri, pastikan Anda telah memilih Format Galeri untuk postingan Anda.

Selanjutnya, pastikan untuk menambahkan gambar unggulan 2000 x 600 Anda.

Format Posting Galeri memungkinkan Anda membuat galeri di dalam konten postingan Anda dari galeri media.

Untuk membuat galeri untuk posting Anda, pertama-tama unggah setidaknya 6 gambar ke galeri media Anda. Ukuran gambar dapat bervariasi tetapi karena galeri memiliki efek lightbox yang meledakkan gambar ke ukuran penuh, Anda dapat membuat gambar sekitar 1200 x 800.

Sekarang pilih gambar Anda di galeri media, pilih Buat Galeri, dan klik tombol "Buat galeri baru".

Sekarang Anda harus memiliki kode pendek galeri di konten Anda.

Galeri ini akan ditampilkan pada posting Anda dalam tata letak mosaik selebar tiga kolom. Galeri juga akan menggantikan gambar unggulan di halaman blog Anda dengan penggeser gambar galeri Anda.

Sekarang pergi memeriksa posting Anda.

Mari tambahkan beberapa CSS ke galeri untuk menaikkannya sedikit agar tumpang tindih dengan bagian pahlawan dan mengubah margin di sekitar setiap gambar.

Buka Penyesuai Tema → CSS tambahan dan tambahkan CSS khusus berikut: 

/* ---- Position & Style the Gallery to Overlap the Featured Image ---- */
 
@media only screen and (min-width: 980px) {
 
.single-format-gallery .et_post_meta_wrapper { margin-top: -100px;}
 
.et_post_gallery {
z-index: 100;
position: relative;
border-top: 8px solid #fff !important;
border-left: 8px solid #fff !important; 
background: #fff !important;
}

/* ---- Set Background Color, Margins & Padding for the Gallery Image ---- */
 
.et_gallery_item { margin: 0 0 0 0 !important;}
 
.et_gallery_item {
width: 33.3%;
margin: 0 0% 0% 0 !important;
padding-right: 8px !important;
background: #fff !important;
padding-bottom: 8px !important;
}
}

Sekarang lihat hasil akhirnya.

Menata Format Tautan Posting

Untuk Format Posting Tautan, pastikan Anda telah memilih Format Tautan untuk posting Anda.

Selanjutnya, tambahkan gambar unggulan 2000 x 600 Anda ke posting Anda.

Format Posting Tautan mengambil tautan pertama di pos dan menampilkannya di bagian atas konten di dalam kotak. Tampilan tautan khusus ini juga menggantikan thumbnail gambar unggulan untuk posting ini di halaman blog Anda.

Silakan tambahkan tautan ke posting Anda dan lihat desain posting.

Sekarang mari kita perbaiki desainnya sedikit dengan menambahkan gambar latar belakang ke kotak tautan khusus, dan ikon di sebelah kiri url tautan.
Buka Penyesuai Tema → CSS tambahan dan tambahkan CSS khusus berikut: 

/* ---- Add thick border to the left side and Lower the link box ---- */

.et_link_content {
border-bottom: 8px solid #ddd; 
background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(ENTER IMAGE URL HERE);
background-size: cover;
background-color:#edb059; 
border-radius: 25px; 
}

/* ---- Font Settings within the Link box ---- */

.et_link_content a.et_link_main_url { font-size: 21px; font-weight: 600; color: #fff !important;}

/* ---- Link Symbol on the right side ---- */
 
.et_link_content::before {
font-family: "ETmodules";
position: absolute;
top: 38%;
left: 5%;
margin-right: -26px;
border-radius: 31px;
background: rgba(255, 255, 255, .0);
font-size: 48px; 
color: #fff;
content: "\e02c";
}

/* ---- Position & Style the Gallery to Overlap the Featured Image ---- */

@media only screen and (min-width: 980px) {
 
.single-format-gallery .et_post_meta_wrapper { margin-top: -100px;}

Kemudian temukan dan unggah gambar ke galeri media Anda (harus berukuran sekitar 700 x 300). Kemudian salin url dan tempel di cuplikan CSS yang baru saja Anda masukkan di mana dikatakan "ENTER IMAGE URL HERE". 

background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');

Sekarang Lihat seperti apa postingan itu.

Itu dia!

Sekarang setelah semua format posting kita dirancang, saatnya untuk memeriksa tata letak keren yang dibuatnya di halaman blog. Anda dapat melihat bagaimana semua item fitur format posting yang berbeda ditampilkan.


Catatan: Anda dapat menampilkan blog Anda menggunakan editor default atau Divi Builder dan desainnya akan tetap berfungsi.

Responsif?

Semua format posting sepenuhnya responsif dan berfungsi dengan baik di semua perangkat. Berikut adalah contoh tampilan Gallery Format saat saya mengecilkan mengubah ukuran layar:

Pikiran Akhir

Selamat! Anda semua selesai. Saya harap Anda menikmati seri 3 bagian ini tentang menyesuaikan format posting blog. Jika ada, saya harap Anda belajar sesuatu yang berharga untuk dibawa bersama Anda di proyek Anda berikutnya. Sekarang setelah Anda menyelesaikan tutorial, silakan bereksperimen dengan elemen desain Anda sendiri untuk format posting blog Anda.

Silakan kirimkan komentar Anda di bawah ini. Saya berharap mendengar kabar dari kamu.