Như bạn đã biết template là phần không thể thiếu trong cấu trúc website, hiện tại thư viện tempalte WordPress rất phong phú, tuy nhiên để có được template ưng ý các bạn đòi hỏi phải có rất nhiều kiến thức về lập trình HTML, CSS và Javascript chưa kể việc phải xây dựng giao diện hỗ trợ cho di động (Responsive).
Hiện nay, có rất nhiều công cụ có thể giúp bạn thực hiện điều đó mà không cần phải nắm về kỹ thuật lập trình HTML, CSS và Javascript, bạn chỉ cần học cách kéo thả trên công cụ là bạn đã có được bố cục giao diện như ý mình mong muốn. Một trong những công cụ tuyệt vời đó mà tôi đang muốn đề cập ở đây chính là plugin Visual Composer.
Plugin Visual Composer giúp bạn tiết kiệm khá nhiều thời gian để xây dựng bố cục của trang web mình với một tiêu chí khá thân thiện cho người dùng cuối “Kéo & Thả”. 4 tiêu chí mà plugin Visual Composer có thể mang lại cho chúng ta đó là: Tiết kiệm thời gian – Dễ dàng học và thiết kế – Không đụng tới bất kỳ đoạn code nào ngay cả ShortCode – Hỗ trợ Reponsive Design.
Sau khi có bố cục theo ý muốn nhờ plugin Visual Composer bạn băn khoăn về việc không biết phải gắn các đối tượng trang trí (slide, biểu tượng chia sẻ, Video Clip, Thư viện hình ảnh, cách sắp xếp tin, …) vào bố cục đó như thế nào thì plugin Visual Composer cũng tích hợp hơn 40 đối tượng cho bạn và điều cuối cùng bạn cần làm là lựa ra những đối tượng nào cần thiết cho web, sau đó click chuột và đưa vào bố cục.
Và còn nhiều chức năng khác cho bạn tha hồ lựa chọn.
HƯỚNG DẪN SỬ DỤNG PLUGIN VISUAL COMPOSER
Sau khi bạn download plugin Visual Composer về bạn tiến hành cài đặt và kích hoạt Plugin.
Dashboard > Plugins > Add New > Upload > Browse > chọn file zip bạn vừa download về > Install Now > Active plugin sau khi cài đặt.
Sau khi Active plugin thì menu bên trái sẽ xuất hiện các mục như hình:
Grid Elements: đây là một khái niệm mới hoàn toàn trên phiên bản mới nhất của VC (Visual Composer) cho phép khởi tạo các mẫu bố cục cho bài viết, Media theo dạng lưới. Khi bạn khởi tạo Grid Elements, bạn có thể sử dụng các mẫu có sẵn của VC để chỉnh sửa lại theo ý của mình.
Concept đơn giản nhất:
Cấu hình chung
- Cấu hình nội dung
- Kiểm soát tài khoản người dùng và nhóm người dùng
- Reponsive
Tùy biến CSS
- Bước 1: BackEnd > Settings > Visual Composer > chọn Design Options
- Bước 2: Settings > Visual Composer > Custom CSS > gắn css tùy biến vào
- Bước 3: Thêm CSS Rule cho Page hoặc Post.
- Bước 4: Hiệu chỉnh tên class CSS nếu bị trùng lặp
- Bước 5: Ghi đè tên class CSS vào VC bạn sử dụng dòng code “add_filter(“vc_shortcodes_css_class”)”
Cấu hình các đối tượng trên VC
Cấu hình Responsive
Làm việc với mẫu bố cục
Bố trí cho layout: Bạn có thể lựa chọn bất kỳ mẫu đối tượng có sẵn và có thể hiệu chỉnh nó một cách tùy biến. Các mẫu đối tượng đặc trưng của VC luôn hỗ trợ tốt cho Page trong WordPress chỉ với thao tác click chuột giúp bạn có thể tùy biến một cách thoải mái nhất.
Shortcode Mapper: được phát triển từ phiên bản 4.1.0 sở hữu 3 bộ shortcode mạnh mẽ và cho phép tự định nghĩa bộ shortcode riêng cho mình. Bạn có thể tùy chỉnh tại Settings > Visual Composer > My ShortCode
- Các bước triển khai
- Parsing Shortcodes
Đầu tiên bạn cần phải ghi mã shortcode trước. Bên dưới “My Shortcode” tab bạn chọn tiếp Map Shortcodes để mở cửa sổ parse sau đó tiến hành nhập mã shortcode như mẫu sau đó nhấn “Parse Shortcode”:
[my_shortcode value=”100″ bgcolor=”#8e8e8e” desc=”Default values” cssanim=”yes” size=”50″]
- Thay đổi giá trị cho Shortcode
Grid Builder
Một vài kỹ thuật trong VC mà bạn cần biết
- Cách thêm hoặc chỉnh sửa một hình ảnh
- Cách khởi tạo một thư viện ảnh
- Cách thêm một cách hiển thị của bài viết cũ với Grid Builder
- Cách tạo ra một Text Block trên Visual Composer
- Cách kiểm tra giao diện Responsive trên Visual Composer
- Cách nhân đôi đối tượng khởi tạo
- àm cách nào để kiểm soát một đối tượng hiển thị trên các thiết bị khác nhau
- Cách tạo ra vùng trống ngăn cách 2 đối tượng hiển thị trên giao diện
- Cách kéo thả các đối tượng trên Visual Composer
- Cách tùy biến tiêu đề bài viết trên Visual Composer
- Cách khởi tạo 1 hàng chứa các đối tượng trên giao diện
- Cách hiệu chỉnh nhỏ hàng
- Bật tắt cơ chế chỉnh sửa giao diện trên trang chủ
- Cách thức sử dụng các đối tượng Heading tùy biến
- Cách thức triển khai tab, tours và accordions
Chúc mọi người có được những khoảng khắc tuyệt vời khi trải nghiệm plugin đỉnh này.
