Cara Menerapkan Gaya Garis Bawah Teks Alternatif di Divi

Gaya garis bawah teks selalu sangat membatasi. Metode paling umum untuk menggarisbawahi teks di web adalah dengan menggunakan properti CSS “text-decoration: underline”. Divi bahkan memungkinkan Anda untuk menerapkan dan menata jenis garis bawah ini dalam pengaturan Modul Divi Builder. Tetapi metode garis bawah standar ini memiliki keterbatasan dalam hal gaya dan dukungan lintas-browser.

Memang, dalam banyak kasus, menggarisbawahi teks tidak perlu rumit. Misalnya, menggarisbawahi semua tautan di situs Anda untuk menunjukkan bahwa tautan tersebut dapat diklik adalah aplikasi standar yang tidak memerlukan metode alternatif apa pun. Tetapi, jika Anda ingin menggarisbawahi ke tingkat berikutnya, posting ini dapat membantu.

Dalam tutorial ini, saya akan memandu Anda melalui cara menerapkan beberapa gaya garis bawah teks alternatif ke teks Anda di Divi. Saya akan menunjukkan metode standar menggunakan opsi bawaan Divi untuk menggarisbawahi teks. Dan saya juga akan menunjukkan cara menggunakan batas bawah sebagai metode alternatif untuk menggarisbawahi teks. Menggunakan batas bawah tidak hanya memberi Anda lebih banyak kontrol atas gaya, tetapi juga didukung di semua browser.

Mari kita mulai.

Menggarisbawahi Teks dengan Dekorasi Teks (metode umum)

Cara paling umum dan mudah untuk menggarisbawahi teks adalah menggunakan properti CSS dekorasi teks. Bahkan, Divi memungkinkan Anda untuk menata teks menggunakan metode ini dengan mudah dalam opsi bawaan modul. Cukup cari opsi Text Font Style dan pilih ikon “ U ” untuk menerapkan dekorasi teks garis bawah. Setelah gaya font garis bawah dipilih, Anda juga akan memiliki opsi untuk menyesuaikan warna dan gaya garis bawah.

Ini memungkinkan Anda untuk memiliki warna garis bawah yang berbeda dari warna teks sebenarnya.

Dan Anda dapat memilih dari gaya garis bawah berikut:

• Padat
• Dobel
• Burik
• putus-putus
• Bergelombang

Anda bahkan dapat menargetkan gaya garis bawah tautan di dalam teks isi. Ini memberi Anda kontrol lebih besar atas desain saat menggunakan Modul Teks. Cukup pilih tab Link Font di bawah toggle kategori desain teks. Untuk Link Font Style, pilih “Underline”. Kemudian Anda dapat menyesuaikan warna dan gaya garis bawah tautan yang sesuai.

Batasan Gaya Garis Bawah Dekorasi Teks

Tidak Memiliki Kemampuan untuk Menyesuaikan Lebar dan Posisi Garis

Sayangnya, saat menambahkan properti text-decoration: underline css menggunakan pengaturan bawaan Divi, tidak ada opsi untuk menyesuaikan lebar garis atau posisi garis. Lebar garis relevan dengan ukuran font sehingga akan bertambah seiring Anda memperbesar ukuran font. Dan karena posisi garis bawah berada di garis dasar, descender (huruf kecil yang turun di bawah garis dasar) akan menghalangi garis yang menyebabkan beberapa inkonsistensi terutama dengan kata-kata yang memiliki banyak turunan (seperti "Tipografi") .

Batasan ini mungkin tidak menjadi masalah jika Anda menggunakan semua teks huruf besar karena Anda tidak perlu khawatir dengan turunan. Alangkah baiknya jika ada dukungan untuk mengatur lebar garis bawah dan posisi garis bawah, tetapi untuk saat ini kami kurang beruntung.

Tidak Memiliki Dukungan Peramban

Internet Explorer tidak mendukung properti text-decoration-style atau text-decoration-color, sehingga gaya garis bawah (ganda, putus-putus, putus-putus, dll...) dan warna garis bawah tidak dapat disesuaikan. Safari juga tidak mendukung properti gaya dekorasi teks tetapi Anda dapat mengubah warna garis bawah.

Kurangnya dukungan ini tidak terbatas pada Divi. Bahkan CSS khusus tidak akan membantu Anda.

Menggarisbawahi Teks Menggunakan Batas Bawah

Jika Anda mencari solusi alternatif untuk menggarisbawahi gaya teks, opsi terbaik menurut saya adalah menggunakan batas bawah. Berikut adalah beberapa alasan bagus untuk melakukannya:

• Sebuah perbatasan mendukung delapan gaya perbatasan yang berbeda untuk menata garis bawah Anda termasuk: putus-putus, putus-putus, padat, ganda, alur, punggungan, inset, dan awal.
• Anda dapat menyesuaikan lebar (ketebalan) batas tanpa bergantung pada ukuran font.
• Anda dapat memposisikan batas agar lebih dekat atau lebih jauh dari teks.
• Anda dapat menambahkan warna apa pun yang Anda inginkan ke perbatasan.
• Border Styles didukung oleh SEMUA browser.

Batasan Menggunakan Batas Bawah untuk Menggarisbawahi

• Terbatas pada satu baris teks pada elemen blok. Tetapi ada cara untuk mengatasi ini (lihat di bawah).
• Diposisikan sepenuhnya di bawah descenders dan agak sulit untuk mendapatkan posisi yang benar (tapi bisa dilakukan).

Memahami Perbedaan Antara Elemen Blok dan Sebaris

Untuk memahami cara kerja garis bawah batas, Anda perlu mengetahui perbedaan antara elemen blok dan sebaris.

Elemen blok

Elemen blok akan secara otomatis menjangkau lebar penuh wadahnya (kecuali jika lebar khusus diatur) dan mulai pada baris baru. Situs web (termasuk yang dibuat dengan Divi) penuh dengan elemen blok.

Beberapa contoh elemen blok umum meliputi:

• Bagian Divi, Baris, Modul (div)
• teks isi atau paragraf (p)
• judul (h1, h2, h3, h4, h5, h6)
• daftar (ol, ul)

Saat menambahkan batas bawah untuk memblokir elemen, batas akan berada di bawah seluruh blok. Jadi jika Anda memiliki paragraf teks (p) atau judul (h1) yang pecah menjadi dua atau lebih baris, batas bawah hanya akan diterapkan ke bagian bawah blok, bukan baris teks individual.

Berikut adalah contoh bagaimana menambahkan batas bawah ke elemen blok heading h1 terlihat seperti ketika teks dipecah menjadi beberapa baris.

Meskipun css menargetkan tag h1, baris tersebut hanya diterapkan pada elemen blok. Oleh karena itu garis hanya diterapkan pada bagian paling bawah dan tidak pada setiap garis secara individual.

Elemen Sebaris

Tidak seperti elemen blok, elemen sebaris dapat dibagi menjadi beberapa baris. Jadi jika Anda menambahkan batas bawah ke elemen sebaris (seperti tautan misalnya), garis bawah batas bawah akan diterapkan bahkan jika tautan itu pecah menjadi baris baru. Selain itu, Anda dapat menyesuaikan bantalan elemen sebaris tanpa memengaruhi tinggi baris teks isi yang sangat bagus untuk memposisikan garis bawah batas bawah.

Berikut adalah contoh beberapa tautan (yang merupakan elemen sebaris secara default) yang memiliki garis bawah batas bawah.

Sederhananya, elemen sebaris dapat memiliki garis bawah batas bawah saat memecah menjadi beberapa baris dan elemen blok tidak bisa.

Bagaimana Menambahkan Garis Bawah Batas Bawah ke Satu Baris Teks (elemen blok)

Berikut adalah contoh bagaimana Anda akan menambahkan batas bawah ke satu baris teks menggunakan pengaturan bawaan Modul Teks. Opsi ini berfungsi paling baik untuk header karena Anda akan membatasi teks menjadi satu baris.

Buat bagian baru dengan satu baris kolom. Kemudian tambahkan modul teks dengan konten berikut:

Underlining Typography

Kemudian perbarui pengaturan modul teks sebagai berikut:

• Teks teks Ukuran: 46px (desktop), 40px (tablet), 26px (ponsel)
• Tinggi Baris Teks: 1.8em
• Lebar: 517 piksel (desktop), 450 piksel (tablet), 293 piksel (ponsel)
• Lebar Batas Bawah: 2px
• Warna Batas Bawah: #0c71c3
• Gaya Perbatasan Bawah: Dotted

Seperti yang Anda lihat, perbatasan dapat ditata menggunakan lebar, warna, dan gaya. Karena batas bawah diterapkan ke modul, perlu untuk menyesuaikan lebar modul dengan lebar teks yang sama. Jadi, Anda perlu memodifikasi ukuran teks dan lebar modul yang sesuai.

Cara Menambahkan Garis Bawah Batas Bawah pada Elemen Blok (seperti judul) yang Terpisah Lintas Garis

Seperti disebutkan sebelumnya, elemen blok seperti heading (h1, h2, h3, dll...) tidak mengizinkan batas bawah diterapkan sebaris pada setiap jeda baris. Untuk menyiasatinya, kita cukup membungkus teks kita dengan tag span. Rentang memungkinkan Anda mengelompokkan elemen sebaris (seperti sekelompok teks) bersama-sama untuk menambahkan gaya ke elemen tersebut. Jadi, jika kita ingin batas bawah ke tag h1 (elemen blok), kita bisa membungkus teks di dalam tag h1 dengan tag span tambahan. Kemudian kita dapat menambahkan gaya garis bawah batas bawah ke tag span. Ini akan memungkinkan kita untuk menggarisbawahi teks tag h1 (atau sebagian darinya) bahkan ketika itu pecah ke baris lain.

Berikut adalah contoh bagaimana Anda akan menambahkan batas bawah untuk memblokir elemen (seperti judul) yang terbagi menjadi beberapa baris teks menggunakan CSS khusus.

Pertama, tambahkan bagian baru dengan satu baris kolom. Kemudian tambahkan modul teks ke baris. Di kotak konten, ganti teks tiruan default dengan yang berikut ini:

<h1><span>This is a Heading with Bottom Border Underlining Styled with a Span Tag</span></h1>

Karena kita akan menambahkan garis bawah batas bawah, mari kita tingkatkan tinggi baris heading h1 sebagai berikut:

Selanjutnya tambahkan ID CSS Kustom berikut di bawah tab lanjutan:

ID CSS: garis bawah batas

Selanjutnya buka modal pengaturan halaman dan tambahkan CSS Kustom berikut:

.border-underline span {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
}

Penataan batas bawah ini diterapkan ke elemen dalam tag rentang. Dan karena tag span adalah elemen sebaris, garis bawah akan diterapkan pada teks di setiap baris.

Properti border-bottom dapat dikustomisasi sesuai keinginan Anda. Nilai pertama (2px) mengatur ketebalan (atau lebar) perbatasan. Nilai kedua (putus-putus) mengatur gaya perbatasan. Jangan lupa, Anda juga dapat menggunakan gaya perbatasan berikut: putus-putus, putus-putus, ganda, alur, punggungan, sisipan, dan awal. Dan nilai ketiga (#0c71c3) mengatur warna perbatasan. Anda juga dapat men-tweak css padding khusus bersama dengan nilai tinggi baris teks dalam opsi bawaan modul teks untuk mendapatkan jarak yang tepat juga.

Jika Anda tidak memerlukan tag span dan ingin mengonversi seluruh tag h1 menjadi elemen sebaris, Anda dapat menggunakan CSS ini di setelan halaman sebagai gantinya:

.border-underline h1 {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
display: inline;
}

Perhatikan bahwa css ini menargetkan tag h1. Selain gaya batas bawah dan padding, "display: inline" mengubah tag h1 menjadi elemen inline yang memungkinkan teks h1 memiliki garis bawah pada beberapa baris.

Menambahkan Garis Bawah Batas Bawah ke Tautan Sebaris di Divi

Berikut adalah contoh bagaimana Anda akan menambahkan batas bawah ke teks tautan sebaris Anda di Divi menggunakan CSS khusus. Pertama buat bagian baru dengan baris satu kolom dan tambahkan modul teks ke baris.

Kemudian gunakan editor wysiwyg untuk menambahkan beberapa tautan ke teks isi sehingga Anda memiliki beberapa tautan untuk dikerjakan.

Kemudian tambahkan kelas CSS khusus di bawah tab Lanjutan sebagai berikut:

Kelas CSS: garis bawah batas

Sekarang buka pengaturan halaman dan tambahkan CSS khusus berikut untuk menerapkan batas bawah ke semua tautan di dalam modul teks.

.border-underline a {
border-bottom: 1px solid #333333;
padding: 0.1em 0;  
}

Properti border-bottom dapat dikustomisasi sesuai keinginan Anda. Nilai pertama (1px) mengatur ketebalan (atau lebar) perbatasan. Nilai kedua (padat) mengatur gaya perbatasan. Jangan lupa, Anda juga dapat menggunakan gaya perbatasan berikut: putus-putus, putus-putus, ganda, alur, punggungan, sisipan, dan awal. Dan nilai ketiga (#333333) mengatur warna perbatasan.

Jadi jika Anda menginginkan garis bawah batas bawah dengan lebar 2px dengan gaya putus-putus, dan warna yang berbeda, Anda dapat mengganti nilai tersebut dengan sesuatu seperti ini:

border-bottom: 2px dashed #0c71c3;

Nilai padding juga dapat diatur untuk memposisikan garis bawah batas secara vertikal. Jadi jika Anda ingin garis lebih jauh ke bawah dari teks, Anda dapat meningkatkan nilai padding menjadi sesuatu seperti berikut:

padding: 0.3em 0;

Anda juga dapat menggunakan padding khusus ini bersama dengan nilai tinggi baris teks dalam opsi bawaan modul teks untuk mendapatkan jarak yang tepat juga.

Dan karena tautan adalah elemen sebaris, garis bawah batas tetap pada tautan yang membelah garis.

Bagaimana dengan Pembagi?

Jika Anda ingin benar-benar kreatif dengan menggarisbawahi satu baris teks (elemen blok), Anda selalu dapat menggunakan modul pembagi Divi. Modul pembagi memiliki banyak opsi bawaan seperti gaya, tinggi, lebar, latar belakang, batas, bayangan kotak, dan banyak lagi. Anda bahkan dapat menumpuk pembagi di atas satu sama lain untuk tampilan yang lebih khusus.

Berikut adalah contoh cepat modul pembagi yang digunakan untuk menggarisbawahi teks dengan garis ganda dengan latar belakang gradien.

Cukup tambahkan modul pembagi langsung di bawah modul teks yang berisi teks Anda. Kemudian perbarui yang berikut ini:

• Warna Kiri Gradien Latar Belakang: #2b87da
• Warna Kanan Gradien Latar Belakang: #29c4a9
• Tipe Gradien: Linier
• Arah Gradien: 90 derajat
• Warna: #ffffff
• Berat Pembagi: 2px
• Tinggi: 2px
• Lebar: 400px (ini perlu disesuaikan dengan lebar teks di atas)
• Padding Kustom: 5px atas, 5px bawah

Pikiran Akhir

Saya harap tutorial ini memberi Anda alternatif yang berguna untuk menambahkan gaya garis bawah teks di Divi. Metode umum menggunakan "dekorasi teks: garis bawah" sejauh ini merupakan solusi termudah tetapi keterbatasannya dapat menjadi hambatan. Metode garis bawah batas bawah memang memberi Anda sedikit lebih banyak kontrol atas gaya dan penempatan garis. Dan CSS khusus jelas tidak rumit dan dapat dengan mudah diubah sesuai kebutuhan Anda. Jadi, jika Anda ingin menggarisbawahi teks Anda ke tingkat berikutnya, ini akan membantu.

Seperti biasa, saya berharap untuk mendengar dari Anda di komentar.

Bersulang!