Tutorial

Tutorial Mudah Cara Menambahkan Heading dan Teks Body di Elementor

admin@webumkm.com
4 menit baca
Tutorial Mudah Cara Menambahkan Heading dan Teks Body di Elementor

Tutorial Mudah Cara Menambahkan Heading dan Teks Body di Elementor

Elementor adalah builder visual yang sangat mudah digunakan, bahkan oleh pemula. Dua elemen yang paling sering dipakai dalam membuat halaman website adalah Heading (judul) dan Text Editor (teks isi atau paragraf).
Dalam artikel ini, kamu akan mempelajari cara menambahkan keduanya menggunakan bahasa yang sederhana, seperti mengajari anak SD.


Apa Itu Heading dan Teks Body?

Heading adalah judul besar atau subjudul pada halaman.
Contoh:

Tentang Kami

Layanan Kami

Produk Terlaris

Sedangkan teks body adalah isi tulisan atau penjelasan panjang di bawahnya.
Contoh: paragraf deskripsi produk, penjelasan layanan, atau kalimat-kalimat artikel.

Keduanya sangat penting untuk membuat halaman website yang rapi, informatif, dan mudah dibaca.


Bagian 1: Cara Menambahkan Heading di Elementor

Heading digunakan untuk judul utama dan subjudul. Elementor menyediakan widget khusus untuk ini.


1. Buka Halaman di Elementor

Masuk ke dashboard WordPress dan buka halaman yang ingin kamu edit.
Klik tombol “Edit with Elementor”.

image1.png


2. Cari Widget “Heading”

Di panel sebelah kiri terdapat banyak widget.
Kamu dapat mengetik “Heading” di kolom pencarian agar cepat ditemukan.

Widget ini biasanya bertuliskan “Heading”.

heading1.png

3. Drag Widget Heading ke Halaman

Klik widget “Heading”, lalu tarik dan lepaskan ke posisi yang diinginkan pada halaman.
Sebuah judul default seperti “Heading Title” akan muncul.

heading2.png

4. Ubah Tulisan Heading

Klik tulisan tersebut, lalu pada panel sebelah kiri ubah teksnya menjadi judul yang kamu inginkan.

Contoh:

Selamat Datang di Website Kami

Layanan Servis AC Profesional

Promo Bulan Ini


5. Atur Level Heading (H1, H2, H3, dst.)

Di bagian “HTML Tag”, kamu bisa memilih jenis heading:

H1 untuk judul utama

H2 untuk subjudul

H3 untuk sub-subjudul

Gunakan urutan heading secara berurutan agar website lebih rapi dan SEO-friendly.


6. Atur Style Heading

Masuk ke tab “Style” untuk mengatur:

heading3.png

Warna tulisan

heading4.png

Ukuran font

heading6.png

Jenis font

heading7.png

Jarak antar huruf

heading8.png

Ketebalan tulisan

Screenshot 2025-11-16 at 11.57.52.png

Semua pengaturan bisa kamu lihat hasilnya secara langsung di layar.


Bagian 2: Cara Menambahkan Teks Body di Elementor

Teks body biasanya menggunakan widget “Text Editor”.
Widget ini mirip seperti Microsoft Word, jadi sangat mudah digunakan.


1. Cari Widget “Text Editor”

Di panel kiri, cari widget bernama “Text Editor”.
Kamu bisa menemukannya dengan scroll atau mengetik “text” di kolom pencarian.


2. Drag Widget Text Editor ke Halaman

Tarik widget tersebut dan letakkan di bawah heading atau bagian lain yang kamu inginkan.

heading9.png

Akan muncul teks default seperti “Lorem ipsum”.


3. Ubah Isi Teks

Klik teks tersebut dan ketikkan kalimat yang kamu inginkan.
Contoh:

“Website kami menyediakan layanan pembuatan website profesional dengan harga terjangkau.”

Atau tulis paragraf panjang sesuai kebutuhan halaman.

heading10.png

4. Atur Style Teks Body

Masuk ke tab “Style”.

heaing11.png

Di sini kamu bisa mengatur:

Warna teks

13.png

Jenis Font

heading12.png

Ukuran font

14.png

Alignment (rata kiri, rata tengah, rata kanan)

15.png

Gunakan ukuran font yang mudah dibaca, misalnya 16–20px.


5. Tambahkan Link Jika Perlu

Jika ingin membuat teks bisa diklik, pilih kata yang ingin diberi link, lalu klik icon link di Text Editor.

Masukkan URL yang kamu inginkan.


Bagian 3: Mengatur Heading dan Teks Secara Responsif

Elementor memberi kamu kontrol penuh untuk tampilan mobile dan tablet.


1. Pilih Mode Device

Pada pengaturan ukuran font, klik ikon device untuk mengatur secara terpisah:

Desktop

Tablet

Mobile


2. Sesuaikan Ukuran Font

Biasanya heading terlalu besar di mobile.
Sesuaikan ukuran agar tidak terlihat berantakan.

Contoh:

Heading desktop 40px → Mobile 28px

Teks body desktop 20px → Mobile 16px

Dengan begini, halaman tetap rapi di semua ukuran layar.


Kesimpulan

Menambahkan heading dan teks body di Elementor sangat mudah.
Langkah-langkahnya adalah:

Drag widget Heading untuk membuat judul

Ubah tulisan dan pilih level heading (H1, H2, H3)

Drag widget Text Editor untuk teks body

Atur tampilan font, warna, dan ukuran

Sesuaikan tampilan untuk mobile dan tablet

Dengan langkah-langkah sederhana ini, kamu bisa membuat halaman website yang rapi, jelas, dan mudah dibaca oleh pengunjung.

Ditulis oleh admin@webumkm.com · Terbit kamis, 13 november 2025

Ingin belajar lebih banyak tentang website UMKM? Jelajahi artikel lainnya.