Visual composer là gì? Hướng dẫn sử dụng visual composer

Với những đang xây dựng và phát triển website thì không thể không biết đén Visual composer. Đây là một plugin tốt số một thế giới. Với plugin này bạn có thể tạo ra moojjt website với thiết kế vô cùng bắt mắt. Hãy theo dõi bài viết dưới đây để biết Visual composer là gì? Hướng dẫn sử dụng visual composer nhé!

Visual composer là gì?

Visual composer đươc gọi tắt là VC. Hiện đây là plugin dựng bố cục trang web tốt số 1 thế giới. Với plugin này, bạn có thể thiết kế trang web đẹp mắt một cách tối ưu nhất với những hiệu ứng bắt mắt nhất. Hiện tại, các tảng web hàng đầu trên thế giới cũng đang sử dụng plugin này để thiết kế trang web.

Hiện đây là plugin dựng bố cục trang web tốt số 1 thế giới

Hướng dẫn sử dụng visual composer

Trong việc sử dụng plugin này, nếu bạn có một chút tiếngAnh và kinh nghiệm về website thì viêc sử dụng plugin này khá đơn giản. Hiện nay, giao diện của plugin này được thiết kế một cách rất trực quan, chỉ với vài thao tác đơn giản bạn có thể sử dụng một cách dễ dàng.

Hướng dẫn sử dụng các Content Element của Visual Composer

Bất kỳ element (nội dung) nào đều là hình chữ nhật

Sau đó, ta sẽ dùng khối Row và khối Colum để chia trang web thành các hàng và cột. Khi đã chia xong, ta đặt các khối nội dung khác vào các hàng – cột đó.

Bên cạnh đó, mỗi khối nội dung đều được chỉnh sửa bằng cách: điều giá trị, hoặc lựa chọn từ các giá trị có sẵn hoặc nút bấm.

Giao diện của plugin này được thiết kế một cách rất trực quan

Các khối nội dung

Row – hàng

Có thể coi row là thành phần cơ bản nhất của visual composer và bạn có thể chỉnh được một số cột có trong hàng đó.

Ngay tại giao diện backend bạn hãy bấm add element rồi chọn row trong danh sách khối nội dung. Sau đó bạn thực hiện thêm hàng vào gtranng web.

Text Block

Đây chính là khối văn bản có thể sử dụng trình chỉnh sửa wysiwg và tương tự như trình chỉnh sửa mặc định của WordPress.

Icon

Đây là biểu tượng đặc biệt từ các thư viện biểu tượng đẹp như Font Awesome. Các icon này khá đặc biệt, nó không phải là dạng ảnh mà giống như font chữ. Ngoài ra, bạn hoàn toàn có thể chỉnh kích cỡ và màu sắc nhhuw font chữ.

Separator

Đây chính là đường phân cách ngang và có nhiều dạng cho bạn chọn như solid, dashed, dotted. Đồng thời, Với thanh công cụ này, bạn hoàn toàn có thể chỉnh độ dày của nét.

Separator with Text

Thanh công cụ này cho phép bạn thêm cả đoạn text vào giữa đường phân cách và kèm theo cả 1 icon tùy chỉnh.

Các khối nội dung của Visual Composer

Message box

Với thanh công cụ này, chúng ta hoàn toàn có thể tạo một khối thông báo có màu nền, icon và văn bản.

FAQ

Đây là một khối có khả năng mở rộng và thu hẹp được nội dung khi bấm vào nó. Thông thường, đây là thanh công cụ dùng để tạo câu hỏi thường gặp và giúp tiết kiệm diện tích trang web.

Single Image

Đây là thanh công cụ dùng để tạo khối ảnh đơn kèm theo hiệu ứng hiển thị đẹp mắt nhất hiện nay.

Imaege Galley

Với thanh công cụ này, bạn có thể tạo bộ sưu tập gồm nhiều hình xếp cạnh nhau với thiết kế responsive.

Image Carousel

Đây là khối có nhiều ảnh, tuy nhiên bạn không thể xem nhiều ảnh cùng một lúc mà chỉ có thể xem từng ảnh một. Khối này cũng cho phép chuyển qua lại giữa các ảnh với hiệu ứng trượt đẹp mắt.

Tabs

Đây là một nội dung ngang và giúp tiết kiệm diện tích hiển thị. Với khối này, bạn cũng có thể cho các khối khác trong danh sách khối nội dung vào trong tab này.

Tour

Tương tự giống như tabs nhưng đây là tạo tab nội dung dọc.

Accordion

Đây là thanh công cụ tạo khối có thể thu hẹp và mở rộng nội dung bên trong và gần giống với khối FAQ.

Custom Heading

Đây là khối nội dung tạo tiêu đề để kèm tùy chỉnh font chữ, đặc biệt được tích hợp thư viện Google fonts đẹp nhất.

Button

Với thanh công cụ này, người dùng có thể tạo nít bấm đường link, action hay các tùy chọn khác. Người dùng cũng có thể thêm icon vào các vị trí khác nhau trên nút. Ngoài ra cũng có thể tùy chỉnh các kiểu nút như 3D, Flat rồi bo tròn góc hay vuông góc.