Font Responsive Divi Builder Tanpa Plugin

51

Untuk membuat font responsif di Divi Builder menggunakan CSS, Anda dapat menggunakan beberapa teknik yang memungkinkan ukuran font berubah berdasarkan ukuran layar perangkat pengunjung. Ini akan membantu memastikan bahwa teks Anda tetap terbaca dengan baik di berbagai perangkat, seperti desktop, tablet, dan ponsel.

Berikut adalah beberapa cara untuk membuat font responsif menggunakan CSS di Divi Builder:

1. Menggunakan Unit vw (Viewport Width)

Unit vw (viewport width) adalah cara yang baik untuk membuat font responsif. Ukuran font akan disesuaikan berdasarkan lebar viewport (layar) perangkat. Semakin besar ukuran layar, semakin besar ukuran font, dan sebaliknya.

Misalnya:

/* Font responsif dengan vw */
.custom-class {
font-size: 5vw; /* Ukuran font akan berubah sesuai lebar layar */
}

Penjelasan:

• 5vw artinya font akan mengambil 5% dari lebar viewport. Ini berarti ukuran font akan responsif dan berubah seiring ukuran layar perangkat.

2. Menggunakan Media Queries untuk Responsivitas Lintas Perangkat

Jika Anda ingin menyesuaikan ukuran font secara lebih spesifik berdasarkan perangkat (misalnya desktop, tablet, ponsel), Anda bisa menggunakan media queries.

Berikut adalah contoh kode CSS untuk font responsif menggunakan media queries:

/* Ukuran font untuk Desktop */
@media only screen and (min-width: 1024px) {
.custom-class {
font-size: 32px;
}
}
/* Ukuran font untuk Tablet */
@media only screen and (max-width: 1024px) and (min-width: 768px) {
.custom-class {
font-size: 24px;
}
}
/* Ukuran font untuk Ponsel */
@media only screen and (max-width: 768px) {
.custom-class {
font-size: 18px;
}
}

Penjelasan:

• Pada desktop (lebar layar lebih dari 1024px), ukuran font adalah 32px.
• Pada tablet (lebar layar antara 768px hingga 1024px), ukuran font adalah 24px.
• Pada ponsel (lebar layar di bawah 768px), ukuran font adalah 18px.

3. Menggunakan Fungsi CSS clamp()

Fungsi CSS clamp() adalah cara modern untuk membuat ukuran font responsif yang lebih halus. Fungsi ini memungkinkan Anda untuk menetapkan nilai minimum, maksimum, dan nilai yang dihitung berdasarkan lebar layar.

Contoh penggunaan clamp():

/* Menggunakan clamp untuk membuat font responsif */
.custom-class {
font-size: clamp(16px, 5vw, 32px);
}

Penjelasan:

• clamp(16px, 5vw, 32px) berarti font akan memiliki ukuran:
  • Minimal 16px (di layar kecil).
  • Maksimal 32px (di layar besar).
  • Ukuran font dihitung berdasarkan 5vw (5% dari lebar layar), yang berarti ukuran font akan menyesuaikan dengan lebar layar perangkat.

Dengan clamp(), Anda bisa memberikan batasan agar font tidak terlalu kecil atau terlalu besar, memberikan pengalaman desain yang lebih konsisten.

4. Menggunakan CSS dengan Rem untuk Fleksibilitas

Selain menggunakan vw dan clamp(), Anda juga dapat membuat font responsif dengan unit rem (relative em). Satu rem setara dengan ukuran font dasar yang ditentukan dalam elemen <html>.

Misalnya, Anda bisa mengatur ukuran font responsif berdasarkan rem dan mengubah ukuran dasar font di perangkat yang berbeda:

/* Ukuran font dasar */
html {
font-size: 16px; /* 1rem = 16px */
}
/* Responsif untuk Desktop */
@media only screen and (min-width: 1024px) {
.custom-class {
font-size: 2rem; /* 2rem = 32px */
}
}
/* Responsif untuk Tablet */
@media only screen and (max-width: 1024px) and (min-width: 768px) {
.custom-class {
font-size: 1.5rem; /* 1.5rem = 24px */
}
}
/* Responsif untuk Ponsel */
@media only screen and (max-width: 768px) {
.custom-class {
font-size: 1rem; /* 1rem = 16px */
}
}

Penjelasan:

• Di desktop, ukuran font adalah 2rem (32px).
• Di tablet, ukuran font adalah 1.5rem (24px).
• Di ponsel, ukuran font adalah 1rem (16px).

5. Menambahkan CSS Responsif ke Divi Builder

Untuk menerapkan CSS responsif ini di Divi Builder, Anda bisa menambahkan kode CSS kustom di beberapa tempat:

a. Melalui Pengaturan Halaman

1. Buka halaman yang ingin Anda edit dengan Divi Builder.
2. Klik pada pengaturan halaman (ikon roda gigi di pojok kiri bawah).
3. Pergi ke tab Advanced > Custom CSS.
4. Tempelkan kode CSS responsif yang telah Anda buat di bagian ini.

b. Melalui Pengaturan Modul

Jika Anda hanya ingin menambahkan CSS ke modul tertentu:

1. Pilih modul yang ingin Anda edit di Divi Builder.
2. Klik pada pengaturan modul (ikon roda gigi).
3. Pergi ke tab Advanced > Custom CSS.
4. Tempelkan kode CSS responsif di bagian ini.

c. Melalui Theme Customizer

Jika Anda ingin menerapkan CSS responsif di seluruh situs:

1. Masuk ke Dashboard WordPress.
2. Pergi ke Appearance > Customize.
3. Pilih Additional CSS.
4. Tempelkan kode CSS responsif di sini.

Untuk membuat font responsif di Divi Builder, Anda bisa menggunakan berbagai teknik CSS, seperti unit vw, clamp(), dan media queries. Teknik-teknik ini memungkinkan Anda untuk membuat ukuran font yang menyesuaikan dengan lebar layar perangkat, memberikan pengalaman pengguna yang lebih baik.

Kursus Wordpress – Jika Anda bekerja dengan Divi, pastikan Anda memanfaatkan pengaturan Custom CSS di Divi Builder atau menggunakan Theme Customizer untuk menambahkan CSS yang sudah Anda buat. Dengan cara ini, font Anda akan responsif dan tampak bagus di perangkat apapun!