Hello, AMPs

Tidak diragukan lagi Divi adalah tema yang hebat. Tetapi terkadang standard modules sedikit terbatas cara menggunakannya. Bagaimana Divi Slider dapat digunakan untuk menampilkan gambar penuh. Tentu, slide memiliki bidang untuk mengunggah gambar dan juga memiliki opsi untuk menambahkan background tetapi kedua pengaturan itu memiliki kekurangan.

Bagaimana jika Anda hanya menginginkan gambar yang tampil dislide dan mempertahankan ukuran gambar yang ada? ini tidak mungkin dilakukan dengan modul standar, tentu bukan itu yang Anda inginkan. Tidak ada jalan lain selain Anda menambahkan  beberapa kode CSS.

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.

Membuat Fullwidth Image Slider

Kemudian tambahkan slide Anda. Karena judul, tombol, dan konten tidak akan terlihat oleh pembaca, jadi tidak masalah apapun yang Anda masukkan di sini.

Membuat Fullwidth Image Slider

Kemudian pilih gambar yang ingin Anda tampilkan di slide Anda.

Membuat Fullwidth Image Slider

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.