Trong phần 1 này, tôi sẽ hướng dẫn cách sử dụng cơ bản của Visual Composer (từ giờ tôi sẽ viết tắt là VC) và sử dụng bản VC 4.4.1 mới nhất tại thời điểm này.
1. Hướng dẫn cấu hình VC khi sử dụng lần đầu tiên:
VC là một plugin bình thường của WordPress, do đó các bạn cài đặt và active bình thường như bao plugin khác. Nếu theme các bạn đang dùng đã tích hợp sẵn VC thì các bạn chỉ việc sử dụng luôn.
Sau khi cài đặt xong VC, giao diện trang quản trị sẽ xuất hiện thêm hai thành phần mới là Visual Composer trong Setting và Grid Elements ngay ngoài thanh menu trang quản trị.
Hãy vào Setting >> Visual Composer >> phần Content types tick vào cả hai ô “post” và “page” để VC được tích hợp vào cả trang lẫn bài viết khi soạn thảo. Tiếp tục kéo chuột xuống dưới phần Google fonts subsets và tick vào “vietnamese” để xác nhận sử dụng bộ font Google hỗ trợ tốt Tiếng Việt. Xong xuôi nhấn vào Save Changes để lưu tùy chọn.
Tiếp theo tại trang quản trị các bạn vào Page >> Add New tạo một trang trắng để chúng ta bắt đầu làm quen và thực hành. Cửa sổ một trang trắng từ giờ ngoài khung soạn thảo mặc định còn có thêm hai tùy chọn là Backend Editor và Frontend Editor.
Backend Editor là chế độ soạn thảo của VC ngay trong khung soạn thảo hiện tại, Frontend Editor là chế độ soạn thảo trực quan hiển thị toàn màn hình. Trong series này tôi chỉ hướng dẫn các bạn làm việc trong môi trường Backend Editor và bản thân tôi cũng chỉ dùng chế độ này, là do sở thích và cảm thấy dễ dùng hơn thôi chứ không vì lý do nào khác. Bạn hoàn toàn có thể chuyển sang chế độ Frontend Editor để vọc theo các nội dung về sau tôi hướng dẫn vì thực ra nó chỉ khác nhau ở mặt hiển thị.
Sau khi click vào Backend Editor, ngay lập tức trang soạn thảo mặc định đã chuyển sang dạng Visual Editor rất trực quan và mới mẻ. Chính giữa màn hình là nút “Add element” màu xanh lá cây cho phép bạn thêm các dạng nội dung vào. Phía dưới nữa là là các dạng layout (bố cục) có sẵn để các bạn có thể lựa chọn ngay, click vào “More Layouts” sẽ hiển thị 44 mẫu layout cho sẵn.
Bình thường tôi chỉ dùng “Add element” để xây dựng nội dung, bố cục mà tôi muốn. Tuy nhiên trong series hướng dẫn này có thể tôi sẽ dùng đến các layout cho sẵn để các bạn tìm hiểu thêm.