Kawan Kursus Google Adwords Private Online kali ini kita membahas seputar Carousel, atau juga disebut slideshow ialah proses penampilan gambar-gambar berjalan yang diberi efek tertentu, sekarang banyak sekali website yang menggunakan efek ini untuk mempercantik tampilan websitenya.
Untuk membuat carousel diperlukan script CSS khusus yang nanti ditambahkan ke tema Divi Anda, tutorial ini juga membutuhkan waktu yang lumayan lama. Jadi mohon bersabar 🙂
Untuk persiapan awal, memulai dengan menyiapkan regular section dan tambahkan single row, buka row setting dan di sizing yang berada di tab design setelah itu sesuaikan setingan seperti berikut :
Make this row fullwidth = yes
Use costum gutter width = yes
Gutter width = 1
Kemudian, pada tab Advanced  masukkan text ds-carousel dibaris css class.
Sekarang save & exit dari row Anda yah sahabat kursus google adwords private online, persiapan sudah selesai.
Sekarang, di row Anda tambahkan modul baru. Saya akan menggunakan module image untuk contoh ini, Jika Anda ingin memberi jarak, tambahkan padding kiri dan kanan di dalam modul itu sendiri. Anda kemudian dapat melakukan penyesuaian lainnya yang Anda inginkan.
Setelah Anda mengatur module sesuai keinginan Anda, duplikat untuk jumlah modul yang diinginkan di carousel Anda. Disini saya akan mencontohkan dengan delapan, jadi row saya akan terlihat seperti ini:
Selanjutnya, masuk ke setiap module dan masukkan konten yang Anda inginkan. Saya baru saja menambahkan gambar yang berbeda untuk setiap module nya.
Setelah Anda selesai silahkan duplikasi setiap modulenya. Gandakan masing-masing modul Anda sekali, sehingga Anda memiliki dua set module, semua dalam row yang sama, seperti ini:
Di module image 1 dan image 1 nya merupakan gambar yang sama, inilah teknik yang akan membuat carousel Anda seolah-olah tidak ada habisnya terus berputar, jika Anda berniat mengganti gambar berarti Anda harus mengganti kedua-duanya.
Jika sudah silahkan Anda masukkan script dibawah ini Divi – theme options – additonal css dan klik save changes.
–ds-module-number: 16;
–ds-columns-desktop: 6;
–ds-columns-tablet: 4;
–ds-columns-mobile: 2;
–ds-speed-desktop: 30s;
–ds-speed-tablet: 30s;
–ds-speed-mobile: 30s;
}
@media all and (min-width: 981px) {
:root {
–ds-column-width: auto;
–ds-module-width: calc(100vw / var(–ds-columns-desktop));
–ds-column-animation: calc(var(–ds-module-width) – (var(–ds-module-width) * 2));
–ds-scroll-speed: var(–ds-speed-desktop);
}
}@media all and (max-width: 980px) {
:root {
–ds-column-width: auto;
–ds-module-width: calc(100vw / var(–ds-columns-tablet));
–ds-column-animation: calc(var(–ds-module-width) – (var(–ds-module-width) * 2));
–ds-scroll-speed: var(–ds-speed-tablet);
}
}@media all and (max-width: 479px) {
:root {
–ds-module-width: calc(100vw / var(–ds-columns-mobile));
–ds-scroll-speed: var(–ds-speed-mobile);
}
}
.ds-carousel {
overflow: hidden;
}.ds-carousel .et_pb_column {
display: grid;
grid-template-columns: repeat(var(–ds-module-number), var(–ds-module-width));
width: var(–ds-column-width);
-webkit-animation: scroll var(–ds-scroll-speed) linear infinite;
animation: scroll var(–ds-scroll-speed) linear infinite;
}.ds-carousel .et_pb_module {
width: var(–ds-module-width) !important;
}
@-webkit-keyframes scroll {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(calc(var(–ds-column-animation) * (var(–ds-module-number) / 2)));
transform: translateX(calc(var(–ds-column-animation) * (var(–ds-module-number) / 2)));
}
}
@keyframes scroll {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
Jika berhasil Anda akan melihat carousel tema Divi Anda berjalan dan menari dengan indah 🙂 .
Sekian tutorial tema Divi kali ini semoga bermanfaat yah kawan kursus privat google ads online, terimakasih.
