Hướng dẫn sử dụng visual composer thachpham

Visual Composer là gì? Giới thiệu nhanh khô VC

Visual Composer (hotline tắt là VC) là plugin dựng website tốt nhất, số #1 thế giới. Giúp bạn xây dựng được hầu hết website đẹp mắt và chuyên nghiệp với những hiệu ứng cực kỳ văn minh, đã mắt.

Bạn đang xem: Hướng dẫn sử dụng visual composer thachpham

Mình đã có lần dùng tương đối nhiều plugin về Page Builder tương tự như nhỏng Visual Composer. Miễn tầm giá cũng đều có, trả tầm giá cũng đều có. Nhưng quả thực VC là plugin đáng sử dụng nhất trong toàn bộ số đó: Mạnh mẽ, linc hoạt, đa-zi-năng.

Hướng dẫn sử dụng Visual Composer

Nếu chúng ta bao gồm vốn tiếng Anh tốt và chút xíu tay nghề về trang web thì việc gợi ý sử dụng Visual Composer có thể không quan trọng. Vì đồ họa nó hơi trực quan, chỉ cần bấm nút với kéo thả là bao gồm.

Các khái niệm Lúc sử dụng Visual Composer

Vài tư tưởng nhỏ tuổi mình cần sử dụng vào bài bác này (chúng ta hiểu thì càng giỏi, không hiểu nhiều cũng ko sao):

Giao diện Frontend: là những gì khách hàng viếng thăm bắt gặp lúc xem trang web (bài viết, trang…)Giao diện Backend: là những gì bạn cai quản trị, sửa đổi ngôn từ mới thấy.

Nôm na là khi viết bài viết, bạn sẽ cần sử dụng bối cảnh biên tập riêng – Hotline là Giao diện Backkết thúc. Còn lúc khách hàng viếng thăm vào mặt đường link nội dung bài viết đó, phần đông gì chúng ta nhìn thấy là Giao diện Frontend. 2 có mang trên khác định nghĩa Backover Editor với Frontend Editor của Visual Composer dưới.

Nếu đã thiết lập plugin Visual Composer, khi chế tạo ra 1 trang new bạn sẽ thấy bối cảnh Backend:

*
Giao diện Backend sau khi tải Visual Composer

1 – là trình chỉnh sửa (editor) mang định rất gần gũi của WordPress, có 2 tab: Visual và Text. 2 – là 2 trình chỉnh sửa của Visual Composer, bấm chuột để chuyển qua thực hiện chúng.

Backkết thúc Editor của Visual Composer

Là một trình sửa đổi của VC. khi chúng ta nhấn vào nút ít BACKEND EDITOR, trình chỉnh sửa Backover Editor của Visual Composer đã hiện tại ra:

*
Backkết thúc Editor của Visual Composer

Quý khách hàng hoàn toàn có thể nhấp chuột CLASSIC MODE (1) nhằm trở về trình chỉnh sửa mang định của WordPress.

Frontkết thúc Editor của Visual Composer

Là trình chỉnh sửa trực quan liêu của VC, sửa đổi mang đến đâu bắt gặp biến đổi cho đó. Khi bấm chuột FRONTEND EDITOR (bao gồm bảng xác thực chỉ ra -> bnóng OK), bạn sẽ được chuyển qua 1 trang khác – đó là Frontkết thúc Editor của VC. Mọi lắp thêm hiển thị tại chỗ này chính là số đông gì đang hiển thị với khách viếng thăm, chỉ có điều cai quản trị viên hoàn toàn có thể sửa đổi các element (kân hận nội dung).

*
Frontkết thúc Editor của Visual Composer

Content Element (Element)

Visual Composer đã cung ứng mang đến chúng ta list những Content Element (nhất thời dịch: Kân hận Nội Dung, hoặc Call là Thành Phần), cùng với chức năng khác biệt. quý khách buộc phải kân hận câu chữ làm sao thì cứ đọng lựa chọn trường đoản cú danh sách cơ mà áp dụng.

Chính vì vậy việc lí giải thực hiện Visual Composer sẽ chuyển phiên xung quanh vấn đề reviews các Thành Phần (những Kăn năn Nội Dung). Và kết phù hợp với việc xem đoạn Clip trả lời, các bạn sẽ thấy rất dễ hình dung.

*
Hướng dẫn áp dụng Visual Composer – Danh sách Khối Nội DungHướng dẫn thực hiện các Content Element của Visual Composer

Đầu tiên, gồm một cách tưởng tượng rất lôi cuốn giúp bạn tiếp cận giải pháp áp dụng Visual Composer:

Bất kỳ Kân hận Nội Dung như thế nào mọi là những kân hận hình vỏ hộp. Ta đang sử dụng khối hận Row cùng khối Column nhằm chia website thành các sản phẩm cùng cột (giống hệt như Microsoft Excel). Rồi đặt những Kăn năn Nội Dung khác vào những Hàng – Cột đó.

Mỗi Khối hận Nội Dung đông đảo được chỉnh sửa bởi cách: điền quý hiếm, gạn lọc trường đoản cú những cực hiếm bao gồm sẵn, hoặc bnóng nút. Đa số bạn không nên biết chút ít gì về code vày những tùy trở nên hơi trực quan lại. Một Khối hận Nội Dung thì rất nhiều có thể chỉnh những nằm trong tính như mặt đường viền (border), cnạp năng lượng lề, ảnh trên nền màu sắc nền (background), hiệu ứng hiển thị v.v…

*
Sửa một Element bất kỳ bằng cách điền cực hiếm, chọn từ cực hiếm gồm sẵn hoặc bấm nút

Dưới phía trên mình đang trình làng các Khối hận Nội Dung.

Row – Hàng Đây là yếu tố cơ phiên bản duy nhất của Visual Composer. Nó cung cấp trang web 1 Hàng (Row) với bạn sẽ chỉnh được số Cột (Column) có trong Hàng kia. Như ở bên trên đang nói, những Kân hận Nội Dung vẫn luôn luôn bên trong Cột nào kia của Hàng. Tại bối cảnh backover, bấm Add Element, rồi lựa chọn Row vào Danh sách Khối hận Nội Dung, bạn sẽ thêm 1 sản phẩm vào website nhỏng hình dưới:

*
Thêm Khối hận Nội Dung vào Visual Composer

Giải đam mê hình mặt trên:

1 với 2 – Bất kỳ vệt cùng + làm sao đều có chức năng thêm một Khối hận Nội Dung.3 – Tùy thay đổi số Cột vào một Hàng, độ rộng của một Hàng là 1 đơn vị chức năng, các Cột trong Hàng sẽ có phạm vi ứng cùng với hình dạng ta chọn, bên trên hình ta vẫn phân chia Hàng thành 3 Cột bằng nhau.4 – Bấm chuột vào với kéo thả Khối hận quý phái địa chỉ khác.5 – Tạm thời thu gọn hoặc mở rộng một Hàng mang lại dễ nhìn.6 – Chỉnh sửa Kăn năn Nội Dung về Hiệu ứng, màu nền hình nền (background), cnạp năng lượng lề (margin, padding), con đường viền (border) v.v…7 – Nhân phiên bản Khối hận Nội Dung (trong Kân hận gồm gì nhân bản hết, bao gồm cả câu chữ, hiệu ứng…).8 – Xóa Khối hận Nội Dung.

Tmê man khảo hình tiếp theo:

*
Thêm Khối Nội Dung vào các cột vào Visual Composer

Giải phù hợp hình trên:

1 – Bấm biểu tượng + để thêm Kăn năn vào Cột.2 – Dấu + trên đã ckém một Kân hận vào trước một Kân hận gồm sẵn trong Cột.3 – Dấu + bên dưới vẫn chèn một Khối vào sau đó 1 Kân hận gồm 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 như nhấp chuột Hàng đang còn 2 Cột, độ rộng vẫn là 1/3 đơn vị.6 – Di con chuột qua hình tượng này đã tùy đổi thay lại số Cột (nếu như muốn).

Và đây là công dụng hiển thị không tính Frontend:

*
Kết quả hiển thị kế bên hình ảnh Frontkết thúc Lúc bỏ ra cột

Quý khách hàng có thể thấy chia 3 cột rất nkhô giòn, cột đầu chưa thêm nội dung yêu cầu đang trống.

Text Block

Kăn năn vnạp năng lượng phiên bản (Text) tất cả áp dụng trình sửa đổi WYSIWYG (là trình chỉnh sửa với các chế độ nhỏng Word). Cũng hệt nhau trình chỉnh sửa mang định của WordPress.

Icon

Biểu tượng đặc biệt quan trọng trường đoản cú các tlỗi viện biểu tượng đẹp nhất nhỏng Font Awesome. Các inhỏ này vô cùng đặc biệt, chưa hẳn dạng hình ảnh, mà lại nó tương đương font text. cũng có thể cấu hình thiết lập cỡ thước và màu sắc đến icon nhỏng chỉnh font text.

Xem thêm: Cách Chuyển Danh Bạ Từ Outlook Sang Gmail (Kèm Ảnh), Chuyển Từ Microsoft Outlook Sang Gmail

*
Element – Icon

Separator

Đường chia cách ngang. Có những dạng cho mình lựa chọn nlỗi solid (nét liền), dashed (nét đứt), dotted (đường nét chấm) v.v… Và được cho phép chỉnh độ dày của nét.

*
Element – Separator

Separator with Text

Tương tự bên trên, tuy nhiên cho phép bạn thêm cả đoạn Text vào giữa mặt đường chia cách. Kèm theo cả 1 icon thiết lập nếu như ưng ý.

*
Element – Separator with Text

Message Box

Tạo 1 kăn năn thông báo hiện đang có màu nền + ibé + văn bản. Mục đích thường dùng làm nhấn mạnh vấn đề 1 thông tin như thế nào đó.

*
Element – Message Box

FAQ

Một kăn năn có tác dụng mở rộng – thu thanh mảnh được câu chữ Khi nhấp chuột nó. Thường được dùng để tạo thành Câu hỏi thường xuyên chạm mặt, giúp tiết kiệm ngân sách và chi phí diện tích website.

*
Element – FAQ

Single Image

Tạo kăn năn hình ảnh 1-1 cố nhiên hiệu ứng hiển thị ưa nhìn.

*
Element – Single Image

Image Gallery

Tạo tủ chứa đồ, gồm nhiều hình xếp cạnh nhau, với xây đắp Responsive sầu.

Image Carousel

Khối hận những ảnh, cơ mà chỉ coi được từng ảnh một. Chuyển tương hỗ thân các hình ảnh với hiệu ứng tđuổi đẹp mắt.

Tabs

Tạo tab nội dung ngang, góp tiết kiệm chi phí diện tích hiển thị. cũng có thể cho các khối không giống vào Danh sách Khối Nội Dung vào trong những tab này.

Tour

Tương tự nhỏng bên trên tuy thế đây là chế tạo ra tab câu chữ dọc.

Accordion

Tạo kăn năn có thể thu khiêm tốn – không ngừng mở rộng ngôn từ bên phía trong. Gần như thể với khối FAQ ngơi nghỉ trên.

Custom Heading

Tạo tiêu đề kèm cấu hình thiết lập font chữ. Đặc biệt được tích đúng theo thỏng viện Google Fonts đẹp mắt.

Button

Tạo nút ít bnóng cùng với con đường links, action xuất xắc những tùy lựa chọn khác. cũng có thể thêm icon vào những vị trí khác biệt bên trên nút ít. Có thể thiết lập những loại nút ít nhỏng 3D, Flat… rồi bo tròn góc tuyệt vuông góc.

hotline lớn Action

Tạo kân hận kêu gọi hành động, hay nhằm tập trung sự chăm chú, kêu gọi fan đọc tất cả hành vi như thế nào kia theo mục đích của chúng ta. Thêm được ibé mang lại kân hận, cnhát văn bạn dạng cũng tương tự trình soạn thảo WYSIWYG. Đặc biệt cũng thêm được nút bấm chuột khối.

Video Player

Nhúng 1 video clip (YouTube, Vimeo) vào trang web. Với nhiều cấu hình thiết lập đến trình phát nhỏng phạm vi, hiệu ứng…

Chart – Biểu đồ

Pie Chart – Tạo biểu đồ gia dụng dạng bánh. Round Chart – Tạo biều trang bị dạng tròn. Line Chart – Tạo biều đồ gia dụng dạng cột.

Kết luận

Còn rất nhiều nhân tố khác cũng khá dễ dàng sử dụng, dẫu vậy có thể bản thân ít sử dụng buộc phải chưa liệt kê. khi áp dụng và thống trị được plugin này, các bạn sẽ thấy nó tuyệt đối nuốm nào!

Mình cũng chế tạo ra 1 trang chứa đa số các Khối hận Nội Dung, với các cấu hình thiết lập sẵn bắt mắt để các bạn tham khảo. Trang này sẽ được gửi cho bạn lúc bạn mua Visual Composer theo các links dưới mình giới thiệu.

lúc bao gồm thêm những Kăn năn Nội Dung bắt đầu trong những bạn dạng update của Visual Composer, mình vẫn trả lời với cập nhật trên nội dung bài viết này.

Xem thêm: Cách Lập Trang Web Bán Hàng Free Chỉ Trong 5 Phút Trên Wordpress Và Woocommerce

Chúc chúng ta thực hiện Visual Composer thành công nhằm tạo nên phần đông website, trang đích bán hàng đẹp long lanh vời, tất cả Tỷ Lệ biến đổi mua sắm chọn lựa cao.


Chuyên mục: Lập trình viên