Cara menggunakan Input CSS Kustom Bawaan Divi untuk Pengeditan Responsif Tingkat Lanjut

Divi memiliki pengeditan desain responsif bawaan yang membuatnya sangat mudah untuk menyesuaikan gaya situs web Anda di desktop, tablet, atau tampilan ponsel (tanpa mengetahui CSS). Bagian dari pengeditan responsif bawaan Divi mencakup metode yang disederhanakan untuk membuat perubahan desain responsif yang lebih canggih menggunakan CSS khusus. Ini jauh lebih nyaman daripada harus bergantung pada lembar gaya eksternal dengan kueri media. Anda bahkan dapat membuat penyesuaian pada CSS secara visual secara real time untuk setiap tampilan perangkat, menghilangkan banyak tebakan dari desain responsif.

Dalam tutorial ini, saya akan menunjukkan cara membuat perubahan desain responsif yang nyaman menggunakan CSS khusus sehingga Anda dapat membuat sentuhan desain lanjutan yang mungkin tidak tersedia di opsi desain bawaan Divi.

Mari kita mulai.

Breakpoint Bawaan Divi untuk Pengeditan Responsif

Divi memiliki tiga breakpoint responsif umum (titik di mana desain berubah berdasarkan lebar browser) yang dibangun di dalam pengaturan elemen apa pun di Divi Builder. Ketiga breakpoint ini terutama dimaksudkan untuk memfasilitasi pengaturan desain khusus untuk tampilan desktop, tablet, dan ponsel.

Tiga breakpoint responsif utama Divi untuk tampilan desktop, tablet, dan ponsel adalah sebagai berikut:

• Desktop: 981px ke atas
• Tablet: antara 980 piksel dan 768 piksel
• Seluler: 767px ke bawah

Ketiga breakpoint ini sama melalui semua tab desain responsif di seluruh pembuat Divi, tidak hanya untuk CSS khusus tingkat lanjut. Jadi, setiap kali Anda menerapkan tab desain responsif, gaya apa pun yang dilakukan di bawah tab tersebut akan ditampilkan dalam kisaran tiga titik henti sementara responsif utama tersebut.

Juga, perlu disebutkan bahwa breakpoint umum untuk tampilan perangkat ini bukan satu-satunya breakpoint yang dibangun di dalam struktur Tema Divi. Anda dapat mempelajarinya di artikel kami tentang mengidentifikasi breakpoint responsif Divi.

Memahami Kotak Input CSS Kustom Divi

Saat Anda menyesuaikan elemen (bagian, baris, atau modul) dalam pembuat Divi, setiap opsi desain sesuai (atau menargetkan) bagian tertentu dari elemen tersebut. Misalnya, saat mengedit modul teks, Anda dapat menargetkan bagian mana pun dari modul itu menggunakan pengaturan bawaan (mis. Font Heading 2, Left Padding, dll…).

Demikian pula, ketika Anda menyesuaikan elemen Divi (bagian, baris, atau modul) menggunakan kotak input CSS Kustom lanjutan, setiap kotak input akan sesuai (atau menargetkan) seluruh atau bagian tertentu dari elemen Divi tersebut. Jumlah kotak CSS Kustom yang tersedia akan berbeda tergantung pada elemen yang Anda gaya. Modul teks mungkin hanya memiliki tiga kotak masukan elemen CSS khusus (sebelum, utama, dan setelah), tetapi modul ajakan bertindak akan memiliki kotak tambahan untuk judul, deskripsi, dan tombol. Ini karena modul memiliki lebih banyak bagian yang dapat ditargetkan dalam elemen modul tersebut.

Berikut adalah ilustrasi berbagai kotak masukan CSS khusus yang tersedia untuk modul Ajakan Bertindak.

Setiap kotak masukan CSS khusus menargetkan kelas CSS tertentu di dalam elemen. Untuk melihat kelas yang ditargetkan untuk elemen tertentu, cukup arahkan kursor ke elemen dan klik ikon tanda tanya. Di sana Anda akan melihat kelas CSS yang ditargetkan.

Oleh karena itu, Anda tidak perlu menambahkan kelas CSS ke cuplikan CSS Anda di kotak input. Jika Anda melakukannya, kode tidak akan berfungsi.

Sebagai gantinya cukup tambahkan properti CSS langsung ke kotak yang ingin Anda terapkan ke kelas yang sudah ditargetkan.

Cara Menambahkan CSS Kustom ke Breakpoint Desain Responsif

Untuk mengakses tiga breakpoint desain responsif utama untuk salah satu kotak input css, cukup arahkan kursor ke elemen dan klik ikon tablet. Kemudian Anda akan melihat tiga tab desain responsif.

Sekarang yang perlu Anda lakukan hanyalah menggunakan tab untuk menambahkan CSS ke salah satu dari tiga tampilan perangkat (desktop, tablet, dan ponsel).

Misalnya, katakanlah Anda ingin memiliki tombol promo untuk Ajakan bertindak untuk menjangkau lebar penuh modul di tablet dan ponsel tetapi tidak di desktop. Anda akan memilih tab tablet di bawah kotak input Tombol Promo dan menambahkan “display: block;”.

Perhatikan bahwa ketika Anda memilih tab tablet, Mode Tampilan Divi Builder bergeser ke Mode Tampilan Tablet (lebar 768px) untuk melihat sekilas desain Anda secara real time.

Perangkat yang Lebih Kecil Mewarisi CSS Perangkat yang Lebih Besar secara Default

Secara default, kode yang diterapkan pada tab tablet juga akan diwarisi oleh tampilan ponsel. Untuk membantu mengingatkan kita tentang hal ini, Divi menambahkan kode placeholder abu-abu ke kotak input dengan kode yang sama yang ditambahkan ke layar tablet.

Alasan tampilan ponsel mewarisi tampilan tablet adalah karena breakpoint sebenarnya (kueri media) untuk tampilan tablet di backend disetel ke “max-width: 980px;” yang berarti kode yang ditambahkan ke tablet juga akan diterapkan ke ponsel karena lebar layar ponsel kurang dari 980 piksel. Jadi jika Anda ingin menerapkan gaya yang berbeda ke telepon, Anda perlu menambahkan kode tambahan ke kotak input tab telepon.

CATATAN: Jika Anda juga menambahkan CSS Kustom ke tampilan ponsel, Divi akan dengan cerdas mengubah kueri media untuk tablet di bagian belakang ke kisaran yang lebih tepat antara 768px dan 980px (atau lebar maksimum: 980px dan lebar minimum: 768px).

Apa CSS Kustom yang Diterapkan di Backend

Katakanlah kita menambahkan CSS khusus ke ketiga tab responsif (desktop, tablet, dan ponsel).

Di desktop, kami menempatkan tombol di kanan bawah modul.

Di tablet, kami mengganti kode desktop dan cukup merentangkan tombol ke lebar penuh modul.

Di ponsel, kami mengganti CSS tablet dan mengembalikan tampilan ke normal.

Jika kami memeriksa CSS di backend, Anda dapat melihat bahwa Divi mengatur kode dengan kueri media berikut sehingga Anda tidak perlu:

Desktop:

@media only screen and (min-width: 981px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

Tablet:

@media only screen and (max-width: 980px) and (min-width: 768px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: block;
}

Telepon

@media only screen and (max-width: 767px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: inline-block;
}

Bagaimana CSS disimpan di Divi?

Sebagai bagian dari pengoptimalan kecepatan bawaan Divi, semua gaya dalam Divi Builder (termasuk CSS khusus) akan digabungkan, diperkecil, dan disimpan sebagai file CSS statis untuk pemuatan halaman yang lebih cepat. Jadi, jika Anda ingin mengabaikan kebutuhan untuk menambahkan CSS khusus melalui tema anak, Anda dapat memanfaatkan input CSS responsif bawaan tanpa harus khawatir memperlambat situs Anda.

Untuk lebih lanjut, lihat posting kami tentang cara mempercepat situs Divi Anda.

Pikiran Akhir

Mudah-mudahan, posting ini akan membantu Anda memahami sedikit lebih baik bagaimana memanfaatkan kotak input CSS kustom bawaan Divi untuk membuat perubahan desain responsif yang nyaman ke situs web Anda.

Bagi kebanyakan orang, tidak perlu menjelajah ke tab lanjutan untuk menambahkan CSS khusus ke desain Anda. Divi memiliki begitu banyak opsi bawaan sehingga pengguna tingkat lanjut pun jarang merasa perlu menggunakan CSS khusus. Namun, jika saatnya tiba ketika Anda membutuhkan gaya tingkat lanjut, ada baiknya mengetahui betapa mudahnya melakukannya di Divi.

Apa pengalaman Anda dengan input CSS kustom Divi?