Font Responsive Elementor Builder Tanpa Plugin

62

Untuk membuat font responsif di Elementor, Anda bisa menggunakan beberapa teknik CSS yang memungkinkan ukuran font berubah berdasarkan ukuran layar perangkat (desktop, tablet, atau ponsel). Ini akan memastikan bahwa teks di situs Anda tetap terbaca dengan baik di semua perangkat.

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

1. Menggunakan Unit vw (Viewport Width)

Unit vw (viewport width) memungkinkan ukuran font berubah berdasarkan lebar viewport (lebar layar). Ini membuat font menjadi responsif karena ukurannya akan menyesuaikan dengan lebar layar perangkat.

Contoh CSS dengan unit vw:

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

Penjelasan:

• 5vw berarti font akan mengambil 5% dari lebar viewport. Semakin besar ukuran layar, semakin besar ukuran font, dan sebaliknya.

2. Menggunakan Media Queries untuk Responsivitas Lintas Perangkat

Media queries memungkinkan Anda untuk menyesuaikan ukuran font berdasarkan perangkat yang digunakan (desktop, tablet, atau ponsel). Dengan media queries, Anda bisa memberikan aturan CSS yang berbeda untuk perangkat yang memiliki ukuran layar tertentu.

Contoh CSS dengan 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 (layar lebih dari 1024px), ukuran font adalah 32px.
• Pada tablet (layar antara 768px hingga 1024px), ukuran font adalah 24px.
• Pada ponsel (layar kurang dari 768px), ukuran font adalah 18px.

3. Menggunakan Fungsi CSS clamp() untuk Ukuran Font Fleksibel

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

Contoh CSS menggunakan clamp():

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

Penjelasan:

• clamp(16px, 5vw, 32px) berarti:
  • Ukuran font minimal adalah 16px.
  • Ukuran font maksimal adalah 32px.
  • Ukuran font dihitung berdasarkan 5vw, yaitu 5% dari lebar layar. Artinya, font akan menyesuaikan ukuran berdasarkan lebar layar perangkat.

4. Menggunakan REM dan Media Queries untuk Responsivitas Lintas Perangkat

Salah satu cara lain adalah dengan menggunakan unit rem, yang relatif terhadap ukuran font dasar (biasanya 16px). Anda bisa mengubah ukuran font di perangkat tertentu menggunakan media queries.

Contoh CSS dengan REM dan Media Queries:

/* 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 di Elementor

Untuk menerapkan CSS responsif di Elementor, Anda dapat menggunakan beberapa cara untuk menambahkannya.

a. Melalui Pengaturan Halaman (Global)

1. Buka halaman yang ingin Anda edit dengan Elementor.
2. Klik ikon Hamburger Menu (tiga garis horizontal) di kiri atas.
3. Pilih Site Settings.
4. Pergi ke Custom CSS dan tempelkan kode CSS responsif yang telah Anda buat di sini.

b. Melalui Pengaturan Modul di Elementor

Jika Anda hanya ingin menambahkan CSS untuk elemen tertentu di halaman:

1. Pilih modul yang ingin Anda edit (misalnya teks atau heading).
2. Klik ikon Edit (roda gigi) pada modul tersebut.
3. Pilih tab Advanced > Custom CSS.
4. Tempelkan kode CSS responsif di sana.

c. Melalui Pengaturan Pengguna (Theme Customizer)

Jika Anda ingin menambahkan CSS ke seluruh situs:

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

6. Menyesuaikan Font Responsif Secara Manual di Elementor

Selain menggunakan kode CSS, Elementor juga memiliki beberapa pengaturan responsif yang memungkinkan Anda menyesuaikan ukuran font untuk desktop, tablet, dan ponsel secara manual. Berikut langkah-langkahnya:

1. Pilih Modul Teks atau Heading: Klik pada modul yang ingin Anda sesuaikan fontnya.
2. Masuk ke Pengaturan Teks: Pilih tab Style.
3. Ubah Ukuran Font: Di bagian Typography, Anda akan melihat pengaturan Font Size.
4. Pengaturan Responsif: Di sebelah kanan pengaturan Font Size, klik ikon perangkat (desktop, tablet, atau ponsel) untuk mengubah ukuran font untuk perangkat tertentu.
   • Sesuaikan ukuran font untuk desktop, tablet, dan ponsel sesuai kebutuhan.

Dengan cara ini, Anda bisa menyesuaikan font responsif langsung dari Elementor tanpa menambahkan CSS manual.

Untuk membuat font responsif di Elementor, Anda bisa menggunakan berbagai teknik CSS seperti unit vw, media queries, fungsi clamp(), dan rem. Anda juga bisa menyesuaikan font langsung di Elementor melalui pengaturan responsif yang ada. Dengan menggunakan pendekatan ini, font pada situs Anda akan terlihat optimal di perangkat desktop, tablet, dan ponsel.

Jika Anda ingin lebih banyak kontrol dan fleksibilitas, menambahkan Custom CSS di Elementor adalah pilihan yang baik. Anda dapat menambahkan kode CSS responsif ke halaman, modul, atau seluruh situs Anda untuk membuat desain yang lebih dinamis dan fleksibel.