Xin chào các bạn, giới thiệu dài dòng và đầy đủ để sau. Tôi viết vài dòng ngắn gọn này để mô tả rằng chuỗi bài viết này ra đời nhằm mục đích không chỉ hướng dẫn các bạn cách sử dụng mà còn là khai thác công cụ Visual Composer này. Kỳ vọng là xong series bài này xong sẽ hướng dẫn tiếp sử dụng các plugin bổ trợ cho Visual Composer cực kì hữu dụng khác. Tôi sẽ quay lại viết tiếp phần giới thiệu này sau, nung nấu từ lâu rồi nhưng một phần vì bận quá, một phần vì viết rất mất thời gian vì chưa có tài liệu nào đầy đủ cả (chính nhà cung cấp cũng không có) nên đến giờ mới bắt đầu tiến hành. Đây là một công cụ cần phải có của bất kì người làm web Fẳng nào. Rất mong nhận được sự ủng hộ và góp ý của các bạn để tôi hoàn thiện tốt nhất. Trân trọng cám ơn,
———————————————-
Đối với bạn nào chưa biết có thể xem video làm website bằng Visual Composer trong chưa đến 10 phút dưới đây.
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.
2. Làm quen với Row và cách thêm hàng, chia cột.
Khi xây dựng trang bằng VC, bạn nên chia ra thành nhiều Row (hàng) dữ liệu khác nhau tương ứng với các nội dung/kiểu dữ liệu khác nhau. Ví dụ row chứa văn bản (text) riêng, row chứa hình ảnh riêng, row chứa video riêng, row chứa nội dung giới thiệu riêng, row chứa form đăng ký riêng… Tóm lại là phân bổ các loại dữ liệu khác nhau vào các row khác nhau cho dễ quy hoạch, dễ quản lý và chỉnh sửa về sau.
Ví dụ như hình bên dưới là khung soạn thảo của chính bài viết này, các bạn có thể thấy tôi để phần “Xin chào các bạn…” ở trên cùng làm một row riêng, phần video một row riêng, tiếp theo đến phần “Trong phần 1…” tôi lại để một row khác. Nó giúp tôi có cái nhìn tổng thể về bố cục, thứ tự của bài viết cũng như thuận tiện trong việc chỉnh sửa từng phần khi cần, giảm rủi ro khi nhỡ may chỉnh sửa cái nọ nhầm cái kia, xóa nhầm… nhất là khi về sau này nội dung mỗi row phức tạp và cầu kì hơn. Việc chia thế này cũng cho phép bạn để màu nền, ảnh nền riêng cho từng row nếu cần.
Để tạo một row mới, ở cửa sổ soạn thảo VC ban đầu các bạn click vào nút “Add element” màu xanh lá cây.
Sau đó một cửa sổ hiện ra rất nhiều element khác nhau, click vào tab “content” để lọc chỉ hiển thị các element liên quan đến soạn thảo, click tiếp vào Row ở góc trên cùng bên trái.
Một row mới màu xám xuất hiện.
1. Mũi tên 4 hướng này cho phép kéo thả, dịch chuyển row (trong trường hợp sau này có nhiều row).
2. Click vào đây để chia cột cho row. Bạn có thể lựa chọn các kiểu chia cho sẵn hoặc nhấn vào custom để tự nhập tỉ lệ chia phù hợp.
3. Click vào hình cái bút sẽ ra cửa sổ Row Setting cho phép bạn chỉnh sửa row. Bạn có thể mở tab “Design options” để có thể thiết lập màu viền cho row hoặc màu nền, ảnh nền.
4. Sao chép, nhân bản ra làm hai row giống nhau. Chức năng này sẽ cần khi bạn muốn tạo thêm một row giống y hệt để chỉ việc chỉnh sửa nội dung cần thiết.
5. Biểu tượng hình thùng rác là chức năng xóa row.
6. Dấu cộng ở giữa là chức năng thêm element vào row. Bạn đã tạo ra một row để chứa một nội dung nào đó, cần ấn vào đây để lựa chọn loại nội dung bạn cần thêm.
Nhấn vào dấu cộng giữa row để thêm element, cửa sổ hiển thị danh sách các element hiện ra.
3. Làm quen với các element của VC
Đây là các tài nguyên rất giá trị giúp các bạn không cần biết dòng nào về code cũng có thể xây dựng nhanh chóng nội dung, tùy biến hiển thị cầu kì, phức tạp với tính thẩm mỹ cao.
Sau đây tôi sẽ liệt kê các element cơ bản của VC kèm đôi dòng giới thiệu về chức năng của từng cái để các bạn nắm được. Hướng dẫn sử dụng chi tiết tôi sẽ nói ở phần 2 của series bài viết này.
01. Text Block: element dành riêng cho nội dung văn bản và các nội dung liên quan.
02. Separator: gạch ngang phân cách, sử dụng để ngăn cách các đoạn, các phần.
03. Separator with Text: gạch ngang phân cách có nội dung ở giữa.
04. Message Box: sử dụng trong trường hợp muốn làm một khung thông báo, lưu ý, nhắc nhở, cảnh báo…
05. 06. 07. 08. Chèn các biểu tượng mạng xã hội “Like” của Facebook, “Tweet” của Twitter, “G+” của Google Plus, “Pin it” của Pinterest.
09. FAQ: phù hợp với các nội dung dạng hỏi đáp.
10. Single Image: element dành riêng để chèn ảnh.
11. Image Gallery: element tạo album ảnh.
12. Image Carousel: một element tạo album ảnh khác.
13. Tabs: element tạo nội dung hiển thị dạng thẻ.
14. Tour: element tạo nội dung dạng thẻ nằm ngang.
15. Accordion: tạo nội dung nằm ngang dạng thẻ xếp chồng lên nhau.
16. Post Slider: hiển thị slide bài viết.
17. Witgetised Sidebar: tự xây dựng cột sidebar bằng VC và các element.
18. Button: chèn nút.
19. Button 2: chèn nút dạng nâng cao với nhiều tùy chỉnh hơn.
20. Call to Action: chèn nội dung dạng kêu gọi hành động.
21. Call to Action 2.0: chèn nội dung dạng kêu gọi hành động dạng nâng cao với nhiều tùy chỉnh hơn.
22. Video Player: chèn nội dung dạng video.
23. Google Maps: chèn bản đồ theo khu vực tùy chọn trên Google Maps.
24. Raw HTML: nhúng mã HTML.
25. Raw JS: nhúng mã JS vào.
26. Flickr Widget: nhúng album ảnh trên Flickr vào.
27. Progress Bar: chèn nội dung dạng thanh tiến trình, trạng thái.
28. Pie Chart: nội dung dạng biểu đồ tròn.
29. Empty Space: chèn khoảng trắng để tạo khoảng cách giữa hai phần nội dung.
30. Custom Heading: tạo tiêu đề đẹp mắt.
31. Post Grid: tạo mục hiển thị bài viết kiểu ô lưới.
32. Media Grid: hiển thị hình ảnh kiểu ô lưới.
33. Masonry Post Grid: tạo mục hiển thị bài viết kiểu ô lưới dạng nâng cao với nhiều tùy chỉnh hơn.
34. Masonry Media Grid: hiển thị hình ảnh kiểu ô lưới dạng nâng cao với nhiều tùy chỉnh hơn.
35. Icon: chèn nội dung dạng biểu tượng.
Ngoài ra ở phía cuối cùng cửa sổ danh sách element còn có các biểu tượng chữ W như hình dưới. Đây là các widget có sẵn của theme, và thật tuyệt là VC cho phép nhúng cả các widget này vào phần nội dung như một element thông thường.
Tham khảo nguồn: http://thietkewebfang.com/huong-dan-su-dung-visual-composer-a-z-phan-1.html
