Visual Composer là gì?
Danh mục bài viết
Visual Composer có thể nói là một plugin “tất cả trong một” trong các thiết kế Website dựa trên nền tảng WordPress.
Visual Composer giúp xây dựng trang trong WordPress nhanh chóng và dễ dàng. Trình chỉnh sửa kéo và thả thân thiện và đơn giản cùng với các mẫu, khối, phần tử và tiện ích mở rộng cao cấp – tất cả những gì bạn cần để tạo một trang web.
Đặc biệt không cần những dòng code rắc rối. Ngoài ra, Visual Composer có giao diện editor front-end khá tốt giúp bạn có thể chỉnh sửa page một cách dễ dàng. Công việc của bạn hiện giờ chỉ là KÉO và THẢ là bạn đã có được một website ưng ý nhất của chính bạn.
Có thể nói Visual Composer là một plugin xây dựng layout tốt #1 thế giới.
Bạn còn có thể sử dụng plugin này để tùy biến giao diện web hiện tại, thiết kế page tùy biến, và xây dựng landing page ngay trong WordPress mà không cần viết bất kỳ dòng code nào.
Hướng dẫn về plugin Visual Composer wordpress toàn tập miễn phí
Những khái niệm khi sử dụng Visual composer
- Giao diện Frontend – Backend
Giao diện Frontend: Nói một cách dễ hiểu là tất cả những gì người dùng có thể nhìn thấy như giao diện, menu,…..
Giao diện Backend: Những người làm quản trị mới có thể thấy.
Nếu bạn đã cài đặt plugin Visual Composer, đây là giao diện Backend mà bạn sẽ thấy:
1 – là trình chỉnh sửa (editor) mặc định của WordPress, gồm 2 tab: Visual và Text.
2- là 2 trình chỉnh sửa của Visual Composer, bấm vào để chuyển qua sử dụng chúng.
Backend Editor của Visual Composer
Khi bạn bấm vào nút BACKEND EDITOR, trình chỉnh sửa Backend Editor của Visual Composer sẽ hiện ra như hình bên dưới:
Bạn có thể bấm vào CLASSIC MODE (1) để quay lại trình chỉnh sửa mặc định của WordPress.
Frontend Editor của Visual Composer
Khi bấm vào FRONTEND EDITOR (có bảng xác nhận hiện ra -> bấm OK), bạn sẽ được chuyển sang một trang khác – chính là Frontend Editor của VC.
Mọi thứ hiển thị ở đây chính là những gì sẽ hiển thị với khách viếng thăm, chỉ có điều quản trị viên có thể chỉnh sửa các element (khối nội dung).
Content Element (Element)
Visual Composer cung cấp cho bạn nhiều Content Element (tạm dịch: Khối Nội Dung, hoặc gọi là Thành Phần), với tác dụng khác nhau.
Bạn có thể chọn từ danh sách khối nội dung mà bạn cần sử dụng.
Hướng dẫn sử dụng các Content Element của Visual Composer
Trước tiên, có 1 cách tưởng tượng hay giúp bạn tiếp cận cách sử dụng Visual Composer:
Bất kỳ element (Khối Nội Dung) nào đều là 1 hình chữ nhật.
+ Các hình chữ nhật này có thể xếp cạnh nhau hoặc lồng trong nhau.
+ Các hình chữ nhật này đều có thể chỉnh sửa 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…
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ị, hoặc 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.
Khối nội dung
Row – Hàng
Đây là thành phần cơ bản nhất của Visual Composer.
Nó thêm vào trang web 1 Hàng (Row) và bạn sẽ chỉnh được số Cột (Column) có trong Hàng đó.
Như ở trên đã nói, các Khối Nội Dung sẽ luôn nằm trong Cột nào đó của Hàng.
Tại giao diện backend, bấm Add Element, rồi chọn Row trong Danh sách Khối Nội Dung, bạn sẽ thêm 1 hàng vào trang web như hình dưới:
- Chú thích:
- 1 và 2 – Bất kỳ dấu cộng + nào đều có tác dụng thêm 1 Khối Nội Dung.
- 3 – Tùy biến số Cột trong một Hàng, độ rộng của một Hàng là 1 đơn vị, các Cột trong Hàng sẽ có độ rộng ứng với kiểu ta chọn, trên hình ta sẽ chia Hàng thành 3 Cột bằng nhau.
- 4 – Bấm chuột vào và kéo thả Khối sang vị trí khác.
- 5 – Tạm thời thu gọn hoặc mở rộng một Hàng cho dễ nhìn.
- 6 – Chỉnh sửa Khối Nội Dung về Hiệu ứng, màu nền hình nền (background), căn lề (margin, padding), đường viền (border) v.v…
- 7 – Nhân bản Khối Nội Dung (trong Khối có gì nhân bản hết, cả về nội dung, hiệu ứng…).
- 8 – Xóa Khối Nội Dung.
Tham khảo hình tiếp theo:
- Chú thích:
- 1 – Bấm biểu tượng + để thêm Khối vào Cột.
- 2 – Dấu + bên trên sẽ chèn một Khối vào trước một Khối có sẵn trong Cột.
- 3 – Dấu + bên dưới sẽ chèn một Khối vào sau một Khối có sẵn trong Cột.
- 4 – Chỉnh sửa Cột.
- 5 – Xóa Cột, với hình này nếu bấm vào Hàng sẽ còn 2 Cột, độ rộng vẫn là 1/3 đơn vị.
- 6 – Di chuột qua biểu tượng này sẽ tùy biến lại số Cột (nếu muốn).
Kết quả hiển thị ngoài Frontend:
Bạn có thể thấy chia 3 cột cực nhanh, cột đầu chưa thêm nội dung nên đang trống.
Text Block
Khối văn bản (Text) có sử dụng trình chỉnh sửa WYSIWYG (là trình chỉnh sửa với các công cụ như Word).
Cũng giống hệt trình chỉnh sửa mặc định của WordPress.
Icon
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 rất đặc biệt, không phải dạng ảnh, mà nó giống font chữ.
Có thể tùy chỉnh cỡ thước và màu sắc cho icon như chỉnh font chữ.
Separator
Đường phân cách ngang.
Có nhiều dạng cho bạn chọn như solid (nét liền), dashed (nét đứt), dotted (nét chấm) v.v…
Và cho phép chỉnh độ dày của nét.
Separator with Text
Tương tự trên, nhưng cho phép bạn thêm cả đoạn Text vào giữa đường phân cách.
Kèm theo cả 1 icon tùy chỉnh nếu thích.
Image Gallery
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
Khối nhiều ảnh, nhưng chỉ xem được từng ảnh một.
Chuyển qua lại giữa các ảnh với hiệu ứng trượt đẹp mắt.
Tabs
Tạo tab nội dung ngang, giúp tiết kiệm diện tích hiển thị.
Có thể cho các khối khác trong Danh sách Khối Nội Dung vào trong các tab này.
Tour
Tương tự như trên nhưng đây là tạo tab nội dung dọc.
Accordion
Tạo khối có thể thu hẹp – mở rộng nội dung bên trong.
Gần giống với khối FAQ ở trên.
Custom Heading
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 mắt.
Button
Tạo nút bấm với đường link, action hay các tùy chọn khác.
Có thể thêm icon vào các vị trí khác nhau trên nút.
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.
Call to Action
Tạo khối kêu gọi hành động, thường để tập trung sự chú ý, kêu gọi người đọc có hành động nào đó theo mục đích của bạn.
Thêm được icon cho khối, chèn văn bản cũng với trình soạn thảo WYSIWYG.
Đặc biệt cũng thêm được nút bấm vào khối.
Video Player
Nhúng 1 video (YouTube, Vimeo) vào trang web.
Với nhiều tùy chỉnh cho trình phát như độ rộng, hiệu ứng…
Chart – Biểu đồ
Pie Chart – Tạo biểu đồ dạng bánh.
Round Chart – Tạo biều đồ dạng tròn.
Line Chart – Tạo biều đồ dạng cột.
Kết luận
Còn rất nhiều thành phần khác khá dễ sử dụng, các bạn có thể tự trải nghiệm để có thể tìm ra được những gì mà plugin này mang đến.
Sau bài này mình hi vọng các bạn sẽ có một ít kiến thức về Visual Composer. Chúc các bạn thành công!
