Sử dụng Elementor tạo trang

Để sử dụng Elementor tạo trang mới, bạn vào Trang > Thêm trang mới sau đó ấn sử dụng với Elementor

Màn hình làm việc Elementor sẽ xuất hiện như dưới đây

Bố cục trang sử dụng Elementor #

  1. Thêm các khối (section) mới cho trang
  2. Chọn mẫu trang dựng sẵn của Elementor
  3. Các widget để tạo các thành phần cho trang
  4. Thanh điều khiển
  5. Mở các thành phần dựng trang
  6. Cài đặt trang
  7. Hoa tiêu để chọn thực thi cụ thể với đối tượng cần thao tác

Cài đặt trang #

Ở mục page setting này, bạn có thể:

  • Đặt lại tiêu đề cho trang
  • Thay đổi trạng thái trang giữa: draft (bản nháp) / pending review (đợi duyệt) / private (riêng tư) / publish (đăng công khai lên web)
  • Thêm ảnh đại diện (featured image) cho trang khi hiển thị lên web
  • Chọn có hiển thị tiêu đề lên trang hay không (hide tittle)
  • Chọn kiểu layout cho trang

Phần quan trọng nhất ở đây là Bố trí trang (Page Layout)

  • Elementor Canvas: kiểu layout trang full toàn màn hình, không có header, footer
  • Elementor Full Width: kiểu layout trang full toàn màn hình, có header, footer của website
  • Theme: kiểu layout giống kiểu trang mặc định trên theme của bạn


Thêm Section, thành phần mới #

Bạn click vào dấu “+” ở giữa trang

Hình ảnh này chưa có thuộc tính alt; tên tệp của nó là image-127.png

Sau đó lựa chọn kiểu bố cục cho trang, tùy theo ý tưởng thiết kế của bạn. Trong trang có thể tạo nhiều Section

Hình ảnh này chưa có thuộc tính alt; tên tệp của nó là image-128.png

Chọn mẫu dựng sẵn trong thư viện Elementor #

Với việc tạo một trang trắng hoàn toàn, bạn sẽ mất khá nhiều thời gian để làm một landing page hoàn chỉnh. Thay vào đó bạn có thể sử dụng các trang dựng sẵn rất đẹp trong thư viện của Elementor

Bạn click vào hình thư mục ở giữa trang (bên cạnh dấu “+” để chọn Section)

Hình ảnh này chưa có thuộc tính alt; tên tệp của nó là image-129.png

Ở đây sẽ có các lựa chọn cho bạn

  • Khối (Blocks): Chèn các khối thành phần lẻ tẻ vào trang
  • Trang (Pages): Chèn các mẫu trang đã được dựng hoàn thiện
  • Mẫu của tôi (My templates): Các mẫu trang bạn đã dựng trước đây và bạn đã lưu vào thư việc riêng của mình để dùng về sau

Khi đã chọn được mấu trang bạn muốn, bạn hãy click vào xem mẫu trang, sau đó ấn nút “Chèn” để tải và cài trang

Thư viện này, có một số ít là miễn phí, còn hầu hết là bạn phải nâng cấp lên bản Elementor Pro mới dùng được.

Sau khi đã cài đặt trang mẫu thành công, bạn có thể sửa theo ý bạn trên khung trang mẫu đã có sẵn.

Giới Thiệu Các Thành Phần – Element #

Elementor Pro sẽ có thêm các chức năng nâng cao khác mà Elementor miễn phí không có.

Bạn cứ khám phá các thành phần trong bản Elementor miễn phí trước nhé

Các Thành Phần Trong Plugin Elementor Free #

Thành Phần Cơ Bản – Basic Elements #

  • Inner section: Thêm cột chứa các thành phần vào trang
  • Headling: Thêm tiêu đề cho từng khối trên trang
  • Hình ảnh (Image): Thêm hình ảnh
  • Trình chỉnh sửa văn bản (Text editor): Thêm đoạn văn bản
  • Video: Thêm video từ youtube, vimeo
  • Nút (Button): Thêm nút kêu gọi hành động
  • Đường phân cách (Divider): Các đoạn phân trang để có bố cục rõ ràng
  • Khoảng đệm (Spacer): Thêm các khoảng trắng phân cách các thành phần
  • Google Map: Thêm Google Map vào trang
  • Icon: Thêm các icon

Thành Phẩn Tổng Quan – General Elements #

  • Image box
  • Icon box
  • Star rating
  • Image Carousel
  • Basic gallery
  • Icon list
  • Counter
  • Progress bar
  • Testimonial
  • Tab
  • Accordion
  • Toogle
  • Social icon
  • Alert
  • Soundcloud
  • Shortcode
  • HTML
  • Menu anchor
  • Sidebar
  • Read more

Mỗi thành phần, bạn có thể nhìn hình mô tả là hình dung được nó dùng để làm gì

Bạn cứ kéo vào và thử nghiệm để nắm thêm về nó nhé

Các Thành Phần Trên Elementor Pro #

Với Elementor Pro (bạn đã nâng cấp lên bản có tính phí), thì ngoài các thành phần ở trên, bạn còn có thêm:

  • Tự thiết kế lại được toàn bộ theme (giao diện website) bằng cách kéo thả đơn giản
    • Mục comment
    • Table of content (tóm tắt nội dung trên blog)
    • Author box: giới thiệu tác giả bài viết blog
    • Site map
    • Site logo
    • Site title
    • Và còn rất nhiều lựa chọn………….
  • Tạo và thiết kế lại các trang sản phẩm trong WooCommerce đẹp & cực chuyên nghiệp

Chi tiết hơn, bạn xem ở phần review Elementor Pro bên dưới

Thêm Thành Phần Mới #

Ví dụ bạn muốn thêm một tiêu đề cho một khối nội dung trên trang,

Bạn Click chuột vào Heading > Giữ chuột (không nhả ra), kéo tới chỗ bạn muốn nó ở đó > Nhả chuột ra

Bạn kéo thả tiếp một Trình chỉnh sửa văn bản (Text editor) và một Hình ảnh vào để xem nó trông thế nào nhé

Bạn trở lại khu vực lấy các thành phần ở ô bên dưới

Sau khi thêm Trình chỉnh sửa văn bản (Text editor)Hình ảnh , nó sẽ trông thế này

Chỉnh Sửa Từng Thành Phần #

Giờ bạn muốn sửa thành phần nào, bạn click chuột vào thành phần đó. Hoặc ấn chọn bên khung Hoa tiêu

Cột điều khiển bên trái sẽ hiển thị khung chỉnh sửa thành phần đó.

  • Nội dung (Content): nơi bạn chỉnh sửa nội dung, căn chỉnh lề, thêm liên kết khi click chuột vào thành phần…
  • Kiểu (Style): Nơi bạn chỉnh sửa kiểu chữ, màu sắc, …
  • Nâng cao (Advanced): Chỉnh sửa nâng cao như căn chỉnh lề 4 phía, thêm hiệu ứng động, thêm màu/hình nền, thêm đường viền, quy định hiện thị trên từng loại thiết bị như máy tính, điện thoại, máy tính bảng, …

Di Chuyển Các Thành Phần #

Ví dụ bạn muốn di chuyển cái hình vào giữa cái heading và đoạn văn bản.

Bạn rê chuột vào thành phần cần di chuyển > Click và giữ chuột vào biểu tượng cây bút > Kéo nó tới chỗ cần tới > Thả chuột ra

kết quả sẽ như thế này

Thêm Hiệu Ứng Chuyển Động #

Bạn muốn thành phần nào có hiệu ứng chuyển động ngang dọc, nhấp nháy…

Bạn hãy chọn thành phần => Tab Nâng cao (Advanced) => Hiệu ứng chuyển động (Motion Affects) => Chọn hiệu ứng

Ở mục Sticky, bạn có thể gán cố định vị trí cho nó, khi cuộn trang thì nó vẫn sẽ xuất hiện ở vị trí đã chọn. Phần này thường được dùng để gán cho Menu hoặc thành phần nào đó bạn muốn nó hiển thị mọi lúc ở trên trang của mình.

Thêm Màu/ Hình Nền #

Bạn thêm màu nền / hình nền ở Tab Nâng cao (Advanced) => Nền

Có thành phần thì mục Nền này nó nằm ở Tab Kiểu. Bạn cứ lục lọi chút là thấy. Tại đây bạn có thể tùy chỉnh nền lúc hiển thị bình thường và khi trỏ chuột vào sẽ biến đổi nền kiểu khác

Chỉnh Sửa Trang Theo Từng Thiết Bị #

Khi bạn thao tác trên máy tính, bạn thấy nó trông ổn rồi.

Nhưng khi trang hiển thị lên thiết bị di động hoặc máy tính bảng, nó lại không cân đối.

Bạn cần vào kiểm tra xem trang hiển thị trên các thiết bị khác đã hợp lý chưa.

Bạn ấn vào nút Chế độ Responvide, sau đó bảng điều khiển lựa chọn kiểu thiết bị sẽ xuất hiện bên trên trình sửa trang

Ví dụ khi bạn chọn sang chế độ Mobile, bạn thấy phần tiêu đề hiển thị quá lớn, bạn có thế sang tab Kiểu (Style) để sửa lại cỡ chứ cho phù hợp với màn hình điện thoại.

Lưu ý: Khi bạn sửa ở chế độ Mobile thì sẽ nó sẽ chỉ áp dụng với chế độ Mobile mà không làm thay đổi đối với các chế độ thiết bị khác. Bạn có thể chỉnh sửa riêng cho máy tính và di động

Xem Trước Trang #

Trong khi làm, bạn muốn xem trước trang mình tạo sẽ hiển thị ra sao thì click vào biểu tượng con mắt

Lưu Nháp, Đăng & Cập Nhật Trang #

Vài thao tác khác mà bạn cần biết:

Lưu nháp trang bạn đang thiết kế

Đăng trang để hiển thị công khai => Xuất bản

Cập nhật để các thay đổi bạn vừa làm được lưu lại => Update

Trang mới tạo mới có nút Xuất bản. Bạn đã bấm nó một lần rồi, thì nó đổi thành Update

Lưu Mẫu Trang Vào Thư Viện Để Dùng Về Sau #

Sau khi bạn dựng hoàn thiện một trang bằng Elementor, bạn có thể sẽ muốn dùng tiếp mẫu trang đó về sau thì hãy lưu nó lại trong thư viện Elementor

Bạn hãy ấn vào “Lưu dưới dạng mẫu

Bạn nhập tên cho trang mẫu sau đó ấn Lưu. Vậy là bạn đã tạo được trang mẫu để sau này có thể dùng để thiết kế trang mà không phải mất thời gian làm lại từ đầu

Bạn có thể dựng toàn bộ website, các trang (pages), bài viết trên blog WordPress với Elementor

Video hướng dẫn

Tùy ý kéo thả & chỉnh sửa các thành phần.

Tạo các trang sản phẩm trong WooCommerce cho website bán hàng wordpress với Elementor Pro

Dựng các Landing Page với Elementor Pro

Kim Quy Tech

Công Ty Cổ Phần Đầu Tư Và Công Nghệ Kim Quy
Địa chỉ: Lô 01/9B khu công nghiệp quận Hoàng Mai, phường Hoàng Văn Thụ, quận Hoàng Mai, Hà Nội

Dịch vụ

Web Service

CRM Bitrix24

SMS Brandname

Thiết kế thương hiệu

Chính sách

Chính sách bảo mật

Điều khoản dịch vụ

Chính sách hợp tác

tuyển dụng

Giấy chứng nhận đăng ký kinh doanh số 0106516154 do Sở kế hoạch và đầu tư thành phố Hà Nội cấp ngày 18/04/2014.
© 2014 - 2021 - Bản quyền của Công Ty Cổ Phần Đầu Tư Và Công Nghệ Kim Quy - Kimquy.com.vn, Jsc. Giúp khách hàng kinh hoanh hiệu quả.