Meskipun Divi menyediakan module khusus untuk slider tetapi banyak dari kita yang tidak puas dengan tampilannya, jika Anda sependapat maka jelas Anda wajib untuk mencoba ini supaya lebih mempercantik tampilan website Anda.
Tutorial ini dimaksudkan untuk Anda yang ingin menambahkan slide tetapi dengan bentuk yang full memenuhi layar, cukup mudah karena sudah disediakan script khusus yang siap Anda copy paste nantinya.
Cukup tambahkan CSS berikut di Opsi Tema Divi Anda untuk Membuat Fullwidth Image Slider
.full-image-slider .et_pb_slide {
padding-left: 0 !important;
padding-right: 0 !important;
}
.full-image-slider .et_pb_slide:first-child .et_pb_slide_image img.active {
animation: unset !important;
}
.full-image-slider .et_pb_container {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
}
.full-image-slider .et_pb_slide_image img {
max-height: none !important;
width: 100% !important;
}
.full-image-slider .et_pb_slide_image {
margin: 0 !important;
padding: 0 !important;
top: 0 !important;
position: relative !important;
width: 100% !important;
display: block !important;
-webkit-animation-name: fade !important;
-moz-animation-name: fade !important;
-ms-animation-name: fade !important;
-o-animation-name: fade !important;
animation-name: fade !important;
}
.full-image-slider .et_pb_slider_container_inner {
position: relative;
}
.full-image-slider .et_pb_slide_description {
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
height: auto !important;
}
.full-image-slider .et_pb_slide_description .et_pb_button_wrapper,
.full-image-slider .et_pb_slide_description .et_pb_button_wrapper a,
.full-image-slider .et_pb_slide_description .et_pb_button_wrapper a:hover {
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
color: rgba(0, 0, 0, 0) !important;
border: none !important;
background: none !important;
}
.et_pb_column.et_pb_slider_fullwidth_off.full-image-slider .et_pb_slide_description .et_pb_slide_title,
.et_pb_column.et_pb_slider_fullwidth_off.full-image-slider .et_pb_slide_description .et_pb_slide_content,
.full-image-slider .et_pb_slide_description .et_pb_slide_title,
.full-image-slider .et_pb_slide_description .et_pb_slide_content {
display: none;
}
Pertama, tambahkan Modul Slider baru. Tidak masalah apakah itu Slider Fullwidth di Bagian Fullwidth atau Slider yang biasa.
Kemudian tambahkan slide Anda. Karena judul, tombol, dan konten tidak akan terlihat oleh pembaca, jadi tidak masalah apapun yang Anda masukkan di sini.
Kemudian pilih gambar yang ingin Anda tampilkan di slide Anda.
buka tab Sliders Advanced dan tambahkan kelas full-image-slider ke bidang Kelas CSS.
Itulah beberapa tahap yang perlu Anda lakukan untuk Membuat Fullwidth Image Slider Menggunakan Divi Slider Module, jika ada pertanyaan silahkan tinggalkan dikolom komentar.