Langsung ke konten utama

Cara Menempatkan Dua Tombol Divi Wordpress Page Builder Berdampingan Di Kolom Yang Sama



 Ada banyak kali Anda ingin menempatkan dua tombol Divi di samping satu sama lain, tetapi Anda tidak bisa. 

Tentu, Anda dapat mencoba menambahkan modul tombol ke kolom yang berbeda, tetapi terkadang itu tidak praktis. Satu-satunya cara untuk menempatkan dua atau lebih modul tombol berdampingan di kolom yang sama adalah dengan menggunakan potongan kecil CSS. Tutorial Divi singkat ini akan menunjukkan caranya!

Buat Tombol Divi Sebaris

Tambahkan Cuplikan Kode CSS

Kami sebenarnya tidak akan melakukan apa pun pada Modul Tombol itu sendiri, melainkan ke kolom tempat Modul Tombol berada di dalamnya. Itu karena kita perlu menargetkan pembungkus tombol, dan ini adalah satu-satunya cara untuk melakukannya.

Temukan baris dan kolom tempat Anda ingin meletakkan tombol. Di kolom pengaturan, buka tab Lanjutan ke Kelas CSS. Tambahkan kelas "pa-inline-buttons" dan simpan.

Selanjutnya, tambahkan cuplikan berikut kotak Divi>Theme Options>Custom CSS Anda.

/*place button modules next to each other in the same column*/

.pa-inline-buttons .et_pb_button_module_wrapper {

    display: inline-block;

}


Tambahkan Modul Tombol

Sekarang Anda dapat melanjutkan dan menambahkan dua atau lebih Modul Tombol di kolom itu. Mereka akan berbaris bersebelahan.

Sesuaikan Spasi Di Modul Tombol

Sekarang tentu saja Anda dapat menyesuaikan jarak, karena secara default mereka akan saling bertabrakan. Saya akan merekomendasikan masuk ke pengaturan tombol dan menambahkan margin kiri 10px atau lebih pada tombol kanan.

Pusatkan Tombol Di Kolom

Jika Anda ingin memusatkan tombol di dalam kolom, Anda perlu menambahkan potongan kode tambahan:

.pa-inline-buttons {

    text-align: center !important;

}

Komentar

Postingan populer dari blog ini

Quick Tip: Remove Space between Footer and Post in Divi

 Divi has a weird quirk where any blog post that is published has a space between the post and the footer. Luckily there is a quick fix. Click on the gear icon in the Divi Visual Builder. In the CSS section of the post editor, add the following code snippet and save. .single .et_pb_post {  margin-bottom: 0;  padding-bottom: 0; } #left-area {  padding-bottom: 0 !important; } If it is saved correctly, you should no longer see a space between the post and footer.

Membuat background colom atau section yang saat di hover zoom

https://www.youtube.com/watch?v=EMud8mbVZ50 Pada colom yang ada backgroundnya, masuk ke ADVANCE - CUSTOM CSS - MAIN ELEMENT: background-size:100%; transition: all 0.5s ease; dan di HOVER: background-size:130%; Start write the next paragraph here