hocvietcode.com
  • Trang chủ
  • Học lập trình
    • Lập trình C/C++
    • Lập trình HTML
    • Lập trình Javascript
      • Javascript cơ bản
      • ReactJS framework
      • AngularJS framework
      • Typescript cơ bản
      • Angular
    • Lập trình Mobile
      • Lập Trình Dart Cơ Bản
        • Dart Flutter Framework
    • Cơ sở dữ liệu
      • MySQL – MariaDB
      • Micrsoft SQL Server
      • Extensible Markup Language (XML)
      • JSON
    • Lập trình PHP
      • Lập trình PHP cơ bản
      • Laravel Framework
    • Lập trình Java
      • Java Cơ bản
    • Cấu trúc dữ liệu và giải thuật
    • Lập Trình C# Cơ Bản
    • Machine Learning
  • WORDPRESS
    • WordPress cơ bản
    • WordPress nâng cao
    • Chia sẻ WordPress
  • Kiến thức hệ thống
    • Microsoft Azure
    • Docker
    • Linux
  • Chia sẻ IT
    • Tin học văn phòng
      • Microsoft Word
      • Microsoft Excel
    • Marketing
      • Google Adwords
      • Facebook Ads
      • Kiến thức khác
    • Chia sẻ phần mềm
    • Review công nghệ
    • Công cụ – tiện ích
      • Kiểm tra bàn phím online
      • Kiểm tra webcam online
Đăng nhập
  • Đăng nhập / Đăng ký

Please enter key search to display results.

Home
  • Hướng dẫn Wordpress
  • Wordpress cơ bản
Hướng dẫn sử dụng tính năng plugin wp bakery builder (visual composer) để làm landing page

Hướng dẫn sử dụng tính năng plugin wp bakery builder (visual composer) để làm landing page

  • 05-04-2021
  • trienkhaiweb
  • 2 Comments

Mục lục

  • Hướng dẫn cách sử dụng nhanh các khối trong trình tạo trang WPBakery
    • Tại sao sử dụng trình tạo trang WPBakery?
    • Nhiều thành phần với hiệu ứng đáp ứng nhiều phong cách thiết kế
    • Kéo – Thả để tạo trang web (Drag – Drop)
    • Backend và Frontend Editors tiện lợi
    • Tương thích với mọi theme, sẵn sàng cho Responsive Design
    • Nhiều Addons bổ trợ WPBakery page Builder
  • Hướng dẫn sử dụng các khối nội dung trong WPBakery page builder
  • Dưới đây mình sẽ giới thiệu các Khối Nội Dung.

Hướng dẫn cách sử dụng nhanh các khối trong trình tạo trang WPBakery

WPBakery page builder là một công cụ tuyệt vời được tích hợp trên website sử dụng nền tảng wordpress, giúp bạn sắp xếp và trình bày nội dung của website, chỉ bằng thao tác bấm chuột, kéo – thả.
Nó cũng giúp làm đẹp trang web với nhiều hiệu ứng hiện đại và “hay ho”. Vì vậy, trong bài viết này, chúng ta cùng tìm hiểu cách sử dụng nhanh các khối trong WPBakery page buildernhé. Và đây là hướng dẫn.

Tại sao sử dụng trình tạo trang WPBakery?

Tạo trang linh hoạt, dễ dàng tạo một landingpage theo mong muốn một cách tương đối.
Nhiều thành phần tính năng đáp ứng cho một giao diện website hiện đại & đẹp mắt
Nhiều tính năng youtube,google maps, hiển thị danh sách bài viết được tích hợp sẵn giúp bạn trình bày mà không cần hiểu nhiều về code.

Nhiều thành phần với hiệu ứng đáp ứng nhiều phong cách thiết kế

WPBakery page builder chứa hơn 98 content elements (tạm dịch là Khối nội dung) với hiệu ứng cực kỳ hiện đại, đẹp mê hồn.
Kể cả những người giỏi về kiến thức CSS, tạo hiệu ứng thì để tạo được các Khối nội dung này không dễ.
Nhưng ở đây, bạn chỉ cần lựa chọn và kéo thả các Khối nội dung này để phù hợp mục đích của bạn, bởi vì 1 trang web mà chỉ có text và hình ảnh thì thật nhàm chán. Nó cần có thêm các hiệu ứng và các thành phần khác nữa.
Đặc biệt là khả năng chia cột, chia hàng & đáp ứng luôn mobile responsive cho trang web siêu nhanh trong WPBakery page builder sẽ khiến bạn thấy vô cùng tiện lợi.

Kéo – Thả để tạo trang web (Drag – Drop)

Mọi thao tác bạn cần làm là Kéo – Thả để xây dựng trang web.
Khi muốn thêm Khối nội dung nào, bạn chỉ cần bấm nút để thêm nó.
Khi cần sắp xếp chúng thì bạn chỉ cần thao tác kéo – thả.
Chính vì vậy, khi sử dụng WPBakery page builder bạn không cần tìm hiểu về Code, thậm chí CSS hay HTML.

Backend và Frontend Editors tiện lợi

WPBakery page builder cho phép bạn tạo nội dung trang web với 2 trình chỉnh sửa tiện lợi:

  • Frontend Editor: Là trình chỉnh sửa mà bạn sẽ thấy nội dung thay đổi trực tiếp. Khách viếng thăm thấy thế nào thì bạn thấy như vậy, nhưng tất nhiên bạn mới có quyền chỉnh sửa nội dung.
  • Backend Editor: Ngược lại với Frontend, là trình chỉnh sửa tương tự với trình editor mặc định, và các khối thành phần được mô tả gọn gàng hơn.

Tương thích với mọi theme, sẵn sàng cho Responsive Design

Hầu hết mọi theme đều có thể sử dụng WPBakery page builder.
Và WPBakery page builder được thiết kế theo chuẩn Responsive Design – 1 chuẩn giúp website xem tốt trên mọi thiết bị, mọi cỡ màn hình. Đây là 1 yếu tố quan trọng để Google đánh giá khi bạn SEO website.

Nhiều Addons bổ trợ WPBakery page Builder

Vì đây là 1 thành phần rất mạnh mẽ, nên nó được cộng đồng viết thêm rất nhiều addon hỗ trợ mở rộng thêm nhiều tính năng, thêm nhiều Khối nội dung và hiệu ứng.

Hướng dẫn sử dụng các khối nội dung trong WPBakery page builder

Trước tiên, có 1 cách tưởng tượng rất hay giúp bạn tiếp cận cách sử dụng WPBakery page builder:

Bất kỳ Khối Nội Dung nào đều là các khối hình hộp.
Ta sẽ dùng khối Row và khối Column để chia trang web thành các hàng và cột (giống như Microsoft Excel).
Rồi đặt các Khối Nội Dung khác vào các Hàng – Cột đó.

Mỗi Khối Nội Dung đều được chỉnh sửa bằng cách: điền giá trị, lựa chọn từ các giá trị có sẵn, hoặc bấm nút.
Hầu như bạn không cần biết chút gì về code vì các tùy biến khá trực quan.
Một Khối Nội Dung thì đều có thể chỉnh các thuộc tính như đường viền (border), căn lề, ảnh nền màu nền (background), hiệu ứng hiển thị v.v…

Dưới đây mình sẽ giới thiệu các Khối Nội Dung.

Row – Hàng

Đây là thành phần cơ bản nhất của WPBakery Page Builde. Khi bạn thêm vào website 1 hàng thì bạn sẽ chỉnh được số cột có trong hàng đó. Tại giao diện WPBakery Page Builde, bạn bấm Add Element sau đó chọn Row trong danh sách để thêm hàng.

 

lưu ý: bạn có thể ấn vào ba dấu gạch ngang hình dưới đây để thay đổi số hàng.

Column – Cột

Khái niệm chia cột đối với các bạn không quen làm việc với code hay css (bootstrap) thì các bạn cứ hiểu đơn giản, một row có thể chia nhiều nhất thành 12 cột, bạn có thể chia thành mấy cột tùy thích, miễn đáp ứng tỉ lệ khi các cột cộng lại đủ 12. Ví dụ: 1/6+2/3+1/6. Hãy đẻ ý khi chia cột, nếu số lượng cột nhiều hơn 1, các bạn nên kiểm tra và tùy chỉnh cả tính năng respsonsive của cột để đáp ứng giao diện mobile

Text Block – Khối văn bản

Trình chỉnh sửa nội dung, khối văn bản được sử dụng trình chỉnh sửa WYSIWYG – một dạng công cụ chỉnh sửa văn bản giống như Microsoft Word. Định dạng của Text Block giống hệt với công cụ editor trên trang hay bài viết nên rất dễ sử dụng. Nếu bạn còn phân vân chưa biết cách sử dụng công cụ editor bạn có thể xem lại bài hướng dẫn của mình: Hướng dẫn sử dụng công cụ editor để viết bài viết

Icon

Dùng WPBakery Page Builde bạn có thể sử dụng các biểu tượng đặc biệt từ thư viện biểu tượng Font Awesome. Các icon này không nằm ở dạng ảnh như thường thấy mà chúng giống với font chữ bình thường, bạn có thể tùy chỉnh được màu sắc, kích thước của icon tương tự như khi bạn gõ text.

 

Separator – Đường phân cách ngang

Ở mục này có khá nhiều dạng khác nhau dành cho bạn như là: solid – nét liền, dotted – nét chấm, dashed – nét đứt… Bạn cũng có thể tự điều chỉnh được độ dày của nét phân cách một cách dễ dàng.

Separator with Text

Đường phân cách, mục này đó là bạn có thể thêm một đoạn văn bản vào giữa đường phân cách, bạn cũng có thể sử dụng cả icon tùy chỉnh nếu bạn cảm thấy cần thiết.

Lưu ý: Separator with Text cũng giống với Separator điểm khác nhau lớn nhất là Separator with Text cho thêm chèn icon vào.

Message Box

Đây là một hộp thông báo có chức năng gửi đi các thông tin từ website của bạn dành cho người dùng đăng ký thành viên ở website. Bạn có thể sử dụng Message Box để tạo một khối thông báo có màu nền cùng văn bản và các icon phù hợp.

FAQ

FAQ là mục tạo ra những câu hỏi, có thể mở rộng hoặc thu hẹp được phần nội dung mà bạn để trong đó nhằm tiết kiệm được diện tích của website và giúp người dùng dễ tìm hiểu được những thông tin mà họ cần.

Single Image

Trình hình ảnh, đây là chức năng tạo khối ảnh đơn đi kèm các hiệu ứng hiển thị vô cùng đẹp mắt.

Image Gallery  

Bạn có thể tạo ra một bộ sưu tập các loại hình ảnh khác nhau, xếp cạnh nhau với thiết kế Responsive để giúp website đẹp hơn.

Image Carousel

Đây là khối có nhiều ảnh khác nhau nhưng bạn sẽ chỉ xem được lần lượt từng ảnh một, bạn sử dụng hiệu ứng trượt để chuyển qua lại giữa các ảnh với nhau.

Tabs

Bạn nên tạo các tabs nội dung theo chiều ngang nhằm tiết kiệm được diện tích hiển thị. Bạn cũng có thể cho các khối khác mà bạn cần trong danh sách nội dung vào các tabs này để tạo ra một website đầy đủ, thống nhất hơn.

Tour

Tương tự như tabs nhưng đây là tạo tab nội dung theo chiều dọc, giúp người xem có cái nhìn tổng quát về website của bạn.

Accordion

Ở mục này, bạn có thể tạo các khối có khả năng thu hẹp hay mở rộng các nội dung chi tiết. Cách thực hiện gần giống với FAQ như trên.

Custom Heading

Bạn có thể tạo ra những tiêu đề với tùy chỉnh font chữ khác nhau, sử dụng các font từ Google Fonts để tạo cảm giác đẹp mắt hơn.

Button

Bạn hãy tạo ra các nút bấm với những đường link khác nhau, nút action… Bạn có thể thêm icon, kiểu nút 3D, Flat… tùy theo sở thích của bạn.

Call to Action

Một khối kêu gọi hành động có chức năng tập trung sự chú ý, kêu gọi người vào website có hành động theo mục đích của bạn. Bạn hãy thêm icon, text với trình soạn thảo được tích hợp sẵn có.

Video Player

Nhúng video từ Youtube vào website với các tùy chỉnh như độ rộng, hiệu ứng… theo ý muốn của bạn.

Chart – Biểu đồ

Bạn có thể tạo ra các biểu đồ dạng bánh, dạng tròn, dạng cột… theo chỉ dẫn từ WPBakery Page Builde.

Trên đây là những giới thiệu chức năng cần thiết để bạn dùng. Chúc các bạn thành công

Ngoài ra nếu các bạn sử dụng theme bản quyền, hay sử dụng dịch vụ thiết kế web hoặc mua theme của tech888, bạn còn được cung cấp thêm hàng loạt các addons WP Bakery Builder. Tiện dụng đúng không ? Nếu bạn có thắc mắc gì, hãy để lại câu hỏi ở đây nhé, chúng tôi sẽ giải đáp thắc mắc của bạn !

Bài viết liên quan:

Dịch WordPress với Poedit
Hướng dẫn thay đổi thư mục theme wordpress không bị mất cấu hình theme
Tích hợp facebook chat vào website wordpress đơn giản
Các yếu tố đơn giản giúp bạn cải thiện sự hài lòng của người đọc trên website sử dụng WordPress [Hướng dẫn tổng quan]
Cách trỏ tên miền về host
Mua hosting WordPress: làm thế nào chọn được nhà cung cấp chất lượng
Hướng dẫn mua tên miền tại GoDaddy
Cách chọn tên miền hay, độc đáo và tốt cho SEO
Hướng dẫn dùng Plugin UpdraftPlus để backup WordPress
Công cụ xuất & nhập dữ liệu của WordPress
Hướng dẫn sử dụng plugin AMP for WordPress
Có nên dùng CDN và Các tính năng tăng tốc độ website khác của plugin JetPack?

2 Comments

  1. KHANH PHUNG
    Th8 25, 2021

    Hi, vui lòng chỉ cho mình cách tạo (khai báo) khối MODAL; cách chèn Modal vào BUTTON.
    Cám ơn bạn

    Phản hồi
    • trienkhaiweb
      Th9 03, 2021

      Chào bác, tính năng tạo khối modal không có sẵn trong bakery builder, bác lựa chọn sự kiện khi người dùng bấm vào button là một hàm javascript rồi viết javascript để hiện button lên nhé ( bác có thể tìm kiếm theo từ khóa bootstrap modal click hoặc javascript popup để tham khảo)

      Phản hồi

THÊM BÌNH LUẬN Cancel reply

Dịch vụ thiết kế Wesbite

NỘI DUNG MỚI CẬP NHẬT

2. PHÂN TÍCH VÀ ĐẶC TẢ HỆ THỐNG

1. TỔNG QUAN KIẾN THỨC THỰC HÀNH TRIỂN KHAI DỰ ÁN CÔNG NGHỆ THÔNG TIN

Hướng dẫn tự cài đặt n8n comunity trên CyberPanel, trỏ tên miền

Mẫu prompt tạo mô tả chi tiết bối cảnh

Một số cải tiến trong ASP.NET Core, Razor Page, Model Binding, Gabbage collection

Giới thiệu

hocvietcode.com là website chia sẻ và cập nhật tin tức công nghệ, chia sẻ kiến thức, kỹ năng. Chúng tôi rất cảm ơn và mong muốn nhận được nhiều phản hồi để có thể phục vụ quý bạn đọc tốt hơn !

Liên hệ quảng cáo: [email protected]

Kết nối với HỌC VIẾT CODE

© hocvietcode.com - Tech888 Co .Ltd since 2019

Đăng nhập

Trở thành một phần của cộng đồng của chúng tôi!
Registration complete. Please check your email.
Đăng nhập bằng google
Đăng kýBạn quên mật khẩu?

Create an account

Welcome! Register for an account
The user name or email address is not correct.
Registration confirmation will be emailed to you.
Log in Lost your password?

Reset password

Recover your password
Password reset email has been sent.
The email could not be sent. Possible reason: your host may have disabled the mail function.
A password will be e-mailed to you.
Log in Register
×