Cách sử dụng Tiện ích Heading

1. Các tiện ích Widgets trong Elementor

Widgets hay các tiện ích trong ngữ cảnh của Elementor (và rộng hơn là WordPress) là các khối nội dung có thể tái sử dụng, được thiết kế để thực hiện một chức năng hoặc hiển thị một loại thông tin cụ thể.

Khi bạn nhấp vào một widget trong khu vực chỉnh sửa chính, các tùy chọn chỉnh sửa cho widget đó sẽ xuất hiện trong Bảng điều khiển (Panel) bên trái. Mỗi widget thường có 3 tab chính:

• Content (Nội dung): Tùy chỉnh nội dung của widget (ví dụ: văn bản của tiêu đề, nguồn ảnh, URL nút bấm, v.v.).
• Style (Kiểu hiển thị): Tùy chỉnh giao diện (ví dụ: màu sắc, phông chữ, kích thước, căn chỉnh, border, shadow, v.v.).
• Advanced (Nâng cao): Các tùy chọn nâng cao như:
  • Margin & Padding: Khoảng cách bên ngoài và bên trong phần tử.
  • Z-index: Thứ tự hiển thị của các lớp phần tử.
  • CSS ID & CSS Classes: Dùng để tùy chỉnh CSS bổ sung.
  • Motion Effects (Hiệu ứng chuyển động): Ví dụ: hiệu ứng cuộn (scroll effects), hiệu ứng vào (entrance animation).
  • Background: Màu nền, hình ảnh nền, gradient.
  • Border: Đường viền.
  • Positioning: Vị trí của phần tử (mặc định, tương đối, tuyệt đối, cố định).
  • Responsive: Ẩn/hiện phần tử trên các thiết bị khác nhau.
  • Custom CSS (Elementor Pro): Viết CSS tùy chỉnh.

2.Tiện ích Heading là gì ?

Heading giúp bạn thêm tiêu đề nổi bật vào website, ví dụ: tên section, slogan, lời kêu gọi…

Ngoài ra, tiêu đề còn hỗ trợ SEO rất tốt nếu bạn chọn đúng thẻ HTML (H1, H2, H3…).

3.Các bước sử dụng tiện ích Heading

Bước 1: Kéo tiện ích Heading vào khung

Bước 2: Chỉnh nội dung tiêu đề

Tại thanh bên sẽ bao gồm các mục mà bạn có thể thay đổi:

Tiêu đề

• Điền nội dung vào ô “Thêm tiêu đề của bạn ở đây”.

Liên kết

• Nếu muốn tiêu đề này trở thành liên kết, nhập link URL (ví dụ: https://tenmiencuaban.com).

Thẻ HTML

• Chọn cấp độ tiêu đề: H1, H2, H3…
  
• Lưu ý:
  
  • H1: Chỉ nên dùng 1 lần cho tiêu đề chính của trang. 
  • H2: Phần tiêu đề lớn phụ (section). 
  • H3: Tiêu đề nhỏ hơn (trong section).

Bước 3: Tùy chỉnh kiểu hiển thị

Chuyển sang tab Kiểu hiển thị (Style):

• Màu chữ: Chọn màu cho tiêu đề.
  
• Kiểu chữ (Typography):
  
  • Font family (Arial, Roboto, Montserrat…)
    
  • Kích thước (px)
    
  • Độ đậm (Bold)
    
  • Khoảng cách chữ, khoảng cách dòng.
    
• Bóng chữ: Thêm hiệu ứng đổ bóng nếu muốn.

Bước 4: Tùy chỉnh nâng cao (Advanced)

Ở tab Nâng cao, thanh bên trái hiện các mục như Bố cục, Hiệu ứng động, Biến đổi, Nền, Viền, Mặt nạ, Tương thích, Thuộc tính và tùy chỉnh CSS, tuỳ mục đích bạn muốn tiêu đề của mình được hiển thị như thế nào, bạn có thể:

Bố cục

• Margin (lề ngoài): Tạo khoảng cách giữa Heading và phần tử khác bên ngoài.
  
• Padding (lề trong): Tạo khoảng trống giữa viền Heading và nội dung bên trong.
  
• Có thể bật/tắt “liên kết giá trị” (chuỗi xích) để chỉnh riêng từng cạnh.
  

Hiệu ứng động (Motion Effects)

• Hiệu ứng khi xuất hiện (Entrance Animation): Ví dụ fade in, zoom in, slide…
  
• Scrolling Effects (nếu dùng bản Pro): Heading di chuyển khi người dùng cuộn trang.
  
• Sticky (cố định): Giúp tiêu đề Heading luôn xuất hiện khi cuộn trang.
  

Biến đổi (Transform)

• Xoay, nghiêng, co giãn, di chuyển (Translate, Rotate, Scale, Skew).
  
• Dùng để tạo hiệu ứng sáng tạo, ví dụ chữ hơi nghiêng hoặc phóng to khi hover.
  

Nền

• Thêm màu hoặc ảnh nền cho riêng Heading (độc lập với section hoặc column).
  

Viền

• Chọn kiểu viền: solid, dashed…
  
• Chỉnh độ dày, bo góc (border radius), màu viền.
  

Mặt nạ

• Dùng hình dạng hoặc SVG để “cắt” Heading thành hình đặc biệt.
  
• Ví dụ: làm Heading thành hình tròn, đa giác… 

Tương thích

• Cho phép ẩn/hiện trên từng thiết bị: Desktop, Tablet, Mobile. 
• Rất hữu ích nếu bạn muốn tùy chỉnh bố cục riêng cho di động.
  

Thuộc tính

• Thêm các thuộc tính HTML tùy chỉnh (ví dụ: id, class, aria-*).
  
• Dùng khi bạn muốn styling thiết kế bằng CSS riêng hoặc điều khiển bằng JS.
  

Tùy chỉnh CSS

• Dành cho người biết về CSS.