No Code Building
  • LIÊN HỆ
  • KIẾN THỨC WEBSITE
  • GIẢI TRÍ
  • TIỀN ĐIỆN TỬ
  • KINH DOANH
    • Quà tặng doanh nghiệp
    • Đồng hồ công cộng
    • Đồng hồ treo tường
    • Dịch vụ kinh doanh
    • Nón bảo hiểm
No Result
View All Result
No Code Building
  • LIÊN HỆ
  • KIẾN THỨC WEBSITE
  • GIẢI TRÍ
  • TIỀN ĐIỆN TỬ
  • KINH DOANH
    • Quà tặng doanh nghiệp
    • Đồng hồ công cộng
    • Đồng hồ treo tường
    • Dịch vụ kinh doanh
    • Nón bảo hiểm
No Result
View All Result
No Code Building
No Result
View All Result
Home WordPress Elementor

Thao tác ở Widget Panel trong Elementor

in Elementor
0
Hướng dẫn Elementor cơ bản cho người mới
349
SHARES
1.9k
VIEWS
Share on FacebookShare on Twitter

Elementor sử dụng bảng công cụ Widget Panel phía bên trái để thực hiện các thao tác chỉnh sửa. Đây là nơi bắt đầu hầu hết các chỉnh sửa. Tại bài viết này, No Code Building sẽ hướng dẫn bạn tổng thể các thao tác này.

Bạn nhìn vào giao diện của Widget Panel như hình bên dưới. Bây giờ, chúng ta sẽ đi từ phần theo thứ tự trong hình.

Giao diện bảng công cụ Elementor

1. Style & Setting

Style & Setting là khu vực để thiết lập các cài đặt mặc định như Font chữ, Màu sắc, Điều hướng…Bạn click vào icon hamburger (ba gạch ngang) ở phía bên trái để vào khu vực này.

Khu vực này gồm 3 nhóm và các chức năng như sau:

Style

  • Màu mặc định: Tùy chỉnh màu chính, màu phụ, văn bản và màu nhấn trong Elementor. Nếu hộp tùy chỉnh không hiện ra, tức là bạn đang sử dụng màu mặc định của theme, hãy thực hiện theo hướng dẫn để truy cập vào Settings của Elementor để tùy chỉnh lại.
  • Font chữ mặc định: Tùy chính font chữ tiêu đề chính, tiêu đề phụ, văn bản chung và văn bản nhấn mạnh
  • Bộ chọn màu: Chọn màu nào sẽ xuất hiện trong bộ chọn màu của Elementor.

Settings

  • Cài đặt chung: Chọn font chữ dự phòng, độ rộng nội dung, khoảng cách giữa các widget, phần kéo dài khi ở chế độ fit, bộ chọn tiêu đề trang và cài đặt Lightbox.
  • Cài đặt bảng điều khiển: Liên kết đến phần Settings của Elementor.
  • Giới thiệu về Elementor: Liên kết đến website của Elementor.

Go to

  • Finder: Nhanh chóng tìm và điều hướng đến một khu vực khác trên website của bạn.
  • Xem trang: Mở trang hiện tại, ở chế độ trực tiếp trong trình duyệt.
  • Thoát khỏi Bảng điều khiển: Thoát khỏi trình chỉnh sửa WordPress của trang hoặc bài đăng hiện tại.

2. Widget menu

Biểu tượng icon hình vuông 9 ô ở góc trên bên phải là widget menu. Khi click vào, Elementor sẽ đưa bạn quay trở lại bảng điều khiển các widget.

3. Các widget

Để tìm widget mà bạn muốn sử dụng, gõ tên widget vào thanh Search ở trên trang. Hoặc bạn có thể tự tìm bằng cách kéo thanh cuộn xuống dưới. Khi chọn được widget ưng ý, giữ chuột và kéo widget vào khu vực thiết kế.

Khi chọn 1 widget bất kỳ, bảng công cụ Widget panel sẽ hiển thị 3 tab gồm:

  • Content (Nội dung): tùy chỉnh nội dung đưa vào widget
  • Style (Kiểu): tùy chỉnh font chữ, màu chữ, khoảng cách dòng…
  • Advanced (Nâng cao): tùy chỉnh margin, padding, z-index, các hiệu ứng chuyển động, background, border, chế độ responsive như đảo cột hay ẩn hiện trên các loại thiết bị, thêm CSS tạo hiệu ứng…

Khi chọn vào 1 Column hoặc Section thì bảng công cụ Elementor sẽ hiển thị các tương tự, nhưng thay thế tab Content bằng tab Layout để bạn có thể chỉnh sửa Layout dễ dàng với các tùy chọn.

4. Các chức năng ở khu vực phía dưới của Widget Panel

Page setting (icon bánh răng cưa): chỉnh sửa các cài đặt của trang hiện tại.

  • Settings: tùy chỉnh cài đặt của trang như Tiêu đề, Trạng thái xuất bản, Ảnh đại diện, Layout của trang.
  • Style: tùy chỉnh kiểu nền và khoảng cách viền.
  • Advance: chèn thêm code CSS.

Navigator (icon hình hộp thứ hai): để điều hướng các thành phần section, column, widget chính xác trong các trường hợp có nhiều thành phần. Bạn có thể sử dụng phím tắt Ctrl + I để mở Navigator. Hoặc click chuột phải vào một thành phần bất kỳ và chọn Navigator.

Khi cửa sổ Navigator mở ra, bạn chọn 1 thành phần, Navigator sẽ dẫn bạn đến vị trí thành phần đó. Bạn có thể dùng Navigator để di chuyển các thành phần đến vị trí mình muốn một cách nhanh chóng.

History (icon kim đồng hồ ngược): xem lịch sử chỉnh sửa, có thể khôi phục các bản chỉnh sửa.

Responsive (icon màn hình): kiểm tra và thiết lập các thiết kế của bạn khi ở chế độ máy tính, máy tính bảng hay điện thoại di động. Các hiển thị này chỉ mang tính tương đối, và trong một số trường hợp có thể khác thực tế. Và bạn có thể sử dụng chế độ xem trước Preview (icon con mắt) để xem thực tế.

Phía góc dưới cùng của bảng công cụ, có một nút Publish màu xanh lá cây kèm ký hiệu mũi tên. Bạn chọn Publish nếu bạn muốn xuất bản ngay thiết kế của mình.
Nếu chưa hoàn thiện, bạn nhấp vào ký hiệu mũi tên và chọn Save Draft. Nếu muốn sử dụng phần thiết kế làm mẫu sử dụng nhiều lần thì chọn Save as Template. Và mẫu này sẽ nằm trong phần My Template của thư viện.
Như vậy là mình vừa chia sẻ những thao tác cơ bản trên bảng công cụ Widget Panel trong Elementor. Hẹn gặp lại các bạn trong các bài hướng dẫn tiếp theo về chuyên đề Elementor.
Tags: cài đặt chung trong elementorhướng dẫn elementorthiết kế website bằng elementor
Previous Post

Lùi 1 bước để tiến 3 bước

Next Post

Tích hợp Mailchimp với Elementor

Related Posts

Hướng dẫn Elementor cơ bản cho người mới
Elementor

Chỉnh tiêu đề Tabs Elementor nằm ngang trên mobile

by TRUNG NO CODE
4 Tháng Hai, 2021
Sửa lỗi xung đột layout Archive dạng cột giữa GeneratePress và Elementor
Elementor

Sửa lỗi xung đột layout Archive dạng cột giữa GeneratePress và Elementor

by TRUNG NO CODE
4 Tháng Hai, 2021
Hướng dẫn chèn Google Maps vào website
Elementor

Hướng dẫn chèn Google Maps vào website

by TRUNG NO CODE
4 Tháng Hai, 2021
Hướng dẫn Elementor cơ bản cho người mới
Elementor

Chỉnh Background trong Elementor

by TRUNG NO CODE
4 Tháng Hai, 2021
Hướng dẫn Elementor cơ bản cho người mới
Elementor

Hướng dẫn chỉnh Layout trong Elementor

by TRUNG NO CODE
4 Tháng Hai, 2021
Next Post
Tích hợp Mailchimp với Elementor

Tích hợp Mailchimp với Elementor

Currently Playing

[Không quảng cáo] Tiếng đàn piano nhẹ nhàng, êm dịu, dễ ngủ vào buổi tối

[Không quảng cáo] Tiếng đàn piano nhẹ nhàng, êm dịu, dễ ngủ vào buổi tối

00:43:24

Recommended

Mẫu thiết kế website cửa hàng bán laptop

Mẫu thiết kế website cửa hàng bán laptop

4 Tháng Hai, 2021
Biểu trưng – Logo Đoàn 90 năm chính thức [Đầy đủ file thiết kế AI, Corel, avatar và cover facebook]

Biểu trưng – Logo Đoàn 90 năm chính thức [Đầy đủ file thiết kế AI, Corel, avatar và cover facebook]

4 Tháng Ba, 2021

Chuyên mục

  • Âm nhạc
  • Bàn bida
  • Biểu trưng
  • Công nghệ
  • Cuộc sống
  • Design
  • Đồng hồ công cộng
  • Đồng hồ treo tường
  • Elementor
  • Giải trí
  • Hot girl
  • HTML & CSS
  • Hướng dẫn
  • Kinh doanh
  • Kinh tế
  • Lập trình
  • Mẫu thiết kế
  • Nón bảo hiểm
  • Phim ảnh
  • PHP
  • Quà tặng doanh nghiệp
  • Review công nghệ
  • SEO tốt
  • Thể thao
  • Thời sự
  • Thủ thuật
  • Tiền điện tử
  • Tin công nghệ
  • Woocommerce
  • WordPress
  • Xã hội
  • Youtube

Don't miss it

Xem trọn bộ phim Hán Sở tranh hùng  2013
Giải trí

Xem trọn bộ phim Hán Sở tranh hùng 2013

13 Tháng Một, 2022
Tuyển tập nhạc No Copyright Calm Music
Âm nhạc

Tuyển tập nhạc No Copyright Calm Music

15 Tháng Mười Hai, 2021
Mua vải bố canvas TP.HCM ở đâu?
Kinh doanh

Mua vải bố canvas TP.HCM ở đâu?

9 Tháng Mười Hai, 2021
Rick Astley Hodlers – Thói quen mua Bitcoin của các Hodlers yêu hết mình
Tiền điện tử

Rick Astley Hodlers – Thói quen mua Bitcoin của các Hodlers yêu hết mình

27 Tháng Chín, 2021
Mô hình Stock to Flow S2F của PlanB
Tiền điện tử

Mô hình Stock to Flow S2F của PlanB

27 Tháng Chín, 2021
Xem phim The Big Short 2015 – Phim hay về thị trường tài chính
Giải trí

Xem phim The Big Short 2015 – Phim hay về thị trường tài chính

9 Tháng Mười Một, 2021

Thẻ

bàn bida hollywood 2021 chỉnh font mặc định trong corel code auto choose variable product code để khách gửi email bằng tài khoản gmail hướng dẫn cách xem kênh youtube nào nhiều sub nhất hướng dẫn lắp kim đồng hồ treo tường in nón bảo hiểm giá rẻ in nón bảo hiểm giá rẻ tphcm in nón bảo hiểm giá sỉ khuyến mãi kênh youtube nhiều sub nhất thế giới kênh youtube nhiều sub nhất việt nam mua elementor pro namesilo nocodebuilding nón bảo hiểm quà tặng qts1 quà tặng 90 năm thành lập đoàn quà tặng kỷ niệm 90 năm đoàn thanh niên quà tặng số 1 raya và rồng thần cuối cùng full sản xuất nón bảo hiểm chất lượng sản xuất đồng hồ treo tường theo yêu cầu thiết kế website thiết kế website không cần code thiết kế website wordpress top 100 phim hoạt hình hay nhất mọi thời đại tra cứu thông tin bầu cử quận 12 tự động chọn biến thể vultr woocommerce xưởng sản xuất nón bảo hiểm xưởng sản xuất nón bảo hiểm giá rẻ đặt in nón bảo hiểm số lượng lớn đặt làm đồng hồ treo tường theo yêu cầu đặt nón bảo hiểm quà tặng đặt nón bảo hiểm theo yêu cầu đồng hồ công cộng đồng hồ công cộng uy tín đồng hồ treo tường 1m đồng hồ treo tường cỡ lớn đồng hồ treo tường giá rẻ đồng hồ treo tường hội trường đồng hồ treo tường in logo giá rẻ đồng hồ treo tường trước cổng trường
No Code Building

Giải pháp Marketing hiệu quả

Categories

  • Âm nhạc
  • Bàn bida
  • Biểu trưng
  • Công nghệ
  • Cuộc sống
  • Design
  • Đồng hồ công cộng
  • Đồng hồ treo tường
  • Elementor
  • Giải trí
  • Hot girl
  • HTML & CSS
  • Hướng dẫn
  • Kinh doanh
  • Kinh tế
  • Lập trình
  • Mẫu thiết kế
  • Nón bảo hiểm
  • Phim ảnh
  • PHP
  • Quà tặng doanh nghiệp
  • Review công nghệ
  • SEO tốt
  • Thể thao
  • Thời sự
  • Thủ thuật
  • Tiền điện tử
  • Tin công nghệ
  • Woocommerce
  • WordPress
  • Xã hội
  • Youtube

Recent News

Xem trọn bộ phim Hán Sở tranh hùng  2013

Xem trọn bộ phim Hán Sở tranh hùng 2013

13 Tháng Một, 2022
Tuyển tập nhạc No Copyright Calm Music

Tuyển tập nhạc No Copyright Calm Music

15 Tháng Mười Hai, 2021

© 2021 No Code Building - Giải pháp Marketing hiệu quả

No Result
View All Result
  • LIÊN HỆ
  • KIẾN THỨC WEBSITE
  • GIẢI TRÍ
  • TIỀN ĐIỆN TỬ
  • KINH DOANH
    • Quà tặng doanh nghiệp
    • Đồng hồ công cộng
    • Đồng hồ treo tường
    • Dịch vụ kinh doanh
    • Nón bảo hiểm

© 2021 No Code Building - Giải pháp Marketing hiệu quả

Gọi điện thoại
0989 333 069