Cara Membuat Style Modul Slider Posting Divi seperti Slider Posting Ruang Berita Facebook

Slider posting adalah solusi elegan untuk menyajikan berbagai konten kepada pembaca Anda. Postingan yang disorot dapat diatur dalam beberapa cara dari kategori hingga saat ini. Dalam proyek hari ini kita melihat contoh dari halaman blog Facebook Newsroom yang menyajikan kategori posting yang disebut “Top Stories”. Ini adalah penggeser yang sangat menarik yang menekankan judul posting dan gambar unggulan. Kami akan membuat ulang tampilan slider ini menggunakan modul Post Slider Divi.

Sebelum & Setelah: Modul Slider Pos Divi

Gambar pertama di bawah ini menunjukkan modul slider divi post dengan pengaturan defaultnya, sedangkan yang kedua adalah modifikasi yang dibuat hanya dengan beberapa penyesuaian dalam pengaturan dan beberapa CSS khusus.

Sebelum

Setelah

Konsep & Inspirasi

Seperti yang disebutkan, model gaya penggeser posting hari ini berasal dari Ruang Berita Facebook. Ini adalah blog berita yang didedikasikan untuk, seperti yang sudah Anda duga, semua hal tentang Facebook. Sementara sebagian besar dari kita tahu facebook sebagai raksasa media sosial, melihat sekilas melalui blog ini akan memperluas perspektif Anda. Dengan pendapatan $8,8 miliar pada kuartal terakhir dan 1,23 miliar pengguna aktif per hari, penggeser posting blog di halaman Ruang Berita Facebook menyediakan model yang layak untuk proyek hari ini.

Mempersiapkan Elemen Desain

Dalam persiapan untuk desain ini, Anda memerlukan beberapa posting blog dengan gambar unggulan. Jika Anda tidak terbiasa dengan pengaturan gambar unggulan untuk posting Anda, Anda akan menemukan pengaturan pada halaman edit posting di sisi kanan bawah halaman.

Desain penggeser ini akan bekerja paling baik jika masing-masing gambar unggulan berukuran 600px x 400px, tetapi ukuran pastinya tidak penting.

Anda mungkin juga ingin menambahkan beberapa teks kutipan untuk setiap posting Anda di kotak input "Kutipan" yang ditemukan di bagian bawah halaman editor posting. Pos akan menampilkan kutipan kiriman Anda jika Anda memilikinya, tetapi akan menggunakan sebagian dari konten Anda yang sebenarnya jika tidak.

Menerapkan Desain dengan Divi

Berlangganan Saluran Youtube Kami

Jika Anda mengikuti dan belum memiliki pengaturan halaman untuk menampilkan slider posting Anda, cukup buat halaman baru dan klik "Gunakan Visual Builder" untuk mulai membuat modifikasi yang diperlukan.

Kita mulai dengan menambahkan Bagian Reguler dengan baris struktur 1 Kolom.

Kemudian tambahkan Modul Post Slider ke baris.

Modifikasi kami dimulai dengan pengaturan "Konten", di mana Anda berada secara default setelah menambahkan modul baru di Visual Builder.

Buat perubahan berikut ke pengaturan Konten default:

Setel "Nomor Posting" ke banyak posting yang Anda inginkan. Untuk contoh ini, saya menggunakan 3.

Kemudian atur "Gunakan Kutipan Postingan jika Ditetapkan" menjadi ya, dan atur "Panjang Kutipan Otomatis" menjadi 180.

Sekarang kita siap untuk pindah ke pengaturan desain dengan mengklik tab di bagian atas modal pengaturan modul.

Buat perubahan berikut pada pengaturan desain:

Ubah “Background Overlay Color” menjadi putih (#ffffff).

Ubah "Warna Kustom Dot Nav" ke #576d90.

Ubah "Warna teks" menjadi Gelap.

Sekarang buat "Header Font" tebal, atur "Header Font Size" ke 34px, atur "Header text Color" ke #3b5998, dan "Header Line Height" ke 42px.

Sekarang atur "Body Text Color" ke #141924, dan "Body Line Height" ke 24px.

Sekarang klik "Gunakan Gaya Kustom untuk Tombol" untuk mengubahnya menjadi ya. Ubah “Button Text Size” menjadi 16px, “Button Border width” menjadi 0px, “Button Hover Text Color” menjadi #666666, dan “Button Hover Background Color” menjadi rgba(0,0,0,0).

Sekarang klik tab "Lanjutan" di bagian atas modal pengaturan modul. Di input teks di bawah ID CSS, tambahkan "fb-post-slider". Ini memungkinkan kita untuk menambahkan gaya ke modul khusus ini tanpa mempengaruhi modul posting lain yang mungkin ditampilkan di halaman.

Sekarang tambahkan kode CSS ke berbagai elemen sebagai berikut:

Sebelum

position:absolute;
top:57px;
right:-6px;
content:"";
border:4px solid transparent;
border-top-color:#2C477F;
border-left-color:#2C477F;

Elemen Utama

border-radius: 3px;
border:1px solid #dedede; 

Setelah

position:absolute;
top:25px;
right:-7px;
display:block;
content:"Top Stories";
color:#F9F4F7;
background-color:#4573CC;
padding:4px 15px;
border-radius:2px;
z-index:2!important;

Deskripsi Slide

min-height:460px;
width: 35%;
min-width: 300px;
float:left;
padding: 57px 45px 50px 35px!important;
font-family: 'Alegreya Sans', sans-serif;
text-align:left

Judul Slide

font-family: 'Alegreya Sans', sans-serif;

Tombol Geser

padding:0!important;
margin-top:0;

Pengontrol Geser

margin-bottom:-55px;

Geser Panah

color:#ffffff!important;
background-color:rgba(0,0,0,.4);
font-weight:bold;
border-radius:2px;
 -ms-transform: scale(1.2, 2.5); /* IE 9 */
 -webkit-transform: scale(1.2, 2.5); /* Safari */
 transform: scale(1.2, 2.5);

Sekarang simpan pengaturan modul dengan mengklik tanda centang di sudut kanan bawah modal.

Anda dapat melihat di Visual Builder bahwa masih ada sedikit cara untuk membuat bilah geser pos kami terlihat seperti yang ada di halaman Ruang Berita Facebook.

Tidak ada yang tidak bisa ditangani oleh CSS, dan kita akan dapat melihatnya terbentuk dengan menambahkan kode yang tersisa ke Pengaturan Halaman langsung dari Visual Builder. Untuk sampai ke sana, klik ikon Perluas Pengaturan di bagian tengah bawah halaman, lalu klik ikon "Pengaturan Halaman".

Jika Anda bekerja pada monitor yang lebih besar, saya sarankan untuk memindahkan modal ke sisi Post Slider sehingga Anda dapat melihat apa yang dilakukan setiap bit kode saat kami menambahkannya. Itu akan lebih membantu Anda untuk memahami CSS yang digunakan untuk mendesain modul kita.

Pertama kita akan menjaga ukuran dan posisi gambar latar belakang (saat ini tersembunyi di balik hamparan putih), serta posisi teks dan hamparan slider dengan menambahkan CSS berikut ke area teks "CSS Kustom".

#fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
    background-size: 70%;
    background-position: top right;
    padding-left: 0;
    overflow: visible!important;
}
 
#fb-post-slider.et_pb_slider_with_overlay .et_pb_slide_overlay_container {
    width: 30%;
    min-width: 300px;
}

Sekarang kita akan menyembunyikan meta posting kita, dengan pengecualian tanggal, dan memindahkan posisi tanggal di atas judul. Untuk melakukannya, tambahkan kode berikut ke input teks CSS Kustom tepat di bawah kode yang dimasukkan sebelumnya.

#fb-post-slider .et_pb_slide_content .post-meta {
    height: 0px;
    overflow: hidden
}
#fb-post-slider .et_pb_slide_content .post-meta .published {
    position: absolute;
    top: 32px;
    left: 35px;
    color: #898f9c;
    font-size: 16px
}

Kami baru saja sampai dengan hanya beberapa pengecualian kecil. Anda akan melihat ketika Anda mengarahkan kursor ke modul Post Slider kami, bahwa panah sebelumnya dan berikutnya muncul. Di penggeser ruang berita Facebook, hanya panah berikutnya yang muncul. Itu mudah diperbaiki dengan menambahkan CSS berikut ke input teks CSS Kustom tepat di bawah kode yang dimasukkan sebelumnya.

#fb-post-slider .et-pb-arrow-prev {
    display: none
}

Sekarang kita perlu memposisikan ulang titik navigasi di bawah slider dengan kode berikut. Omong-omong, Anda juga akan melihat bahwa menyetel properti luapan penggeser menjadi terlihat mengungkapkan efek 3D yang kita buat sebelumnya untuk tag "Berita Teratas" yang melingkari sudut kanan atas.

#fb-post-slider.et_pb_post_slider_0 .et-pb-controllers a {
    height: 8px;
    width: 8px;
    order-radius: 50%
}
#fb-post-slider.et_pb_slider {
    overflow: visible!important
}

Terakhir, kode terakhir ini akan mengubah animasi slider kita agar lebih cocok dengan model slider kita. Meskipun bukan pasangan yang sempurna, ini yang paling dekat yang bisa saya dapatkan tanpa masuk ke solusi jQuery. Ada juga beberapa kueri media untuk membuat penggeser kami sedikit lebih responsif.

.et-pb-active-slide .et_pb_slide_description {
    animation-name: fadeIn;
}
.et_pb_slide.et-pb-active-slide {
    transition: opacity 2.5s!important
}
 
@media all and (max-width: 1252px) {
    #fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
        background-size: 90%
    }
}
@media all and (max-width: 980px) {
    #fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
        background-size: 100%;
        background-position: top center;
    }
}

Sekarang Anda dapat menyimpan halaman dengan mengklik tombol simpan di sudut kanan bawah layar Anda. Setelah halaman disimpan, keluar dari pembuat visual untuk melihat penggeser pos yang sudah selesai, terinspirasi oleh penggeser pos di halaman Ruang Berita Facebook.

Pikiran Akhir

Nah, apakah Anda menemukan desain khusus ini berguna atau tidak, saya harap ini telah memberikan tampilan terperinci ke beberapa pengaturan yang lebih maju dalam Modul Post Slider Divi, serta menggelitik imajinasi Anda tentang apa yang mungkin.