HDSD: Hướng dẫn sử dụng trình soạn thảo Visual Composer

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:

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.

HDSD: Hướng dẫn sử dụng trình soạn thảo Visual Composer

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
HDSD: Hướng dẫn sử dụng trình soạn thảo Visual Composer

Đầ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
HDSD: Hướng dẫn sử dụng trình soạn thảo Visual Composer

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
  • Là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

NÂNG CAO

  • 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

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.