Advertisement
  1. Web Design
  2. WordPress

Bắt đầu với Visual Composer

Scroll to top
Read Time: 9 min

() translation by (you can also view the original English article)

WordPress là CMS yêu thích của thế giới vì giao diện đơn giản, các chủ đề có thể tùy chỉnh cao và vô số các plugin bổ sung vô tận.  Nó đã đơn giản hóa việc phát triển trang web và quản lý cho ngay cả những người sử dụng nghiệp dư nhất.

Tuy nhiên, vẫn có những lúc bạn nhìn thấy một thiết kế trang web nào đó, điều này ngay lập tức thu hút bạn và bạn muốn sửa đổi trang web của riêng bạn xuất hiện y như vậy. Thật không may, nếu bạn là một tay hoàn toàn nghiệp dư, bạn sẽ không thể làm được nhiều điều với WordPress, vì các sửa đổi mẫu yêu cầu một mức độ chuyên môn nhất định trong HTML, CSS, PHP và nhiều kỹ năng khác tùy thuộc vào bản chất mẫu của bạn. Nhưng ngay cả khi bạn là một chuyên gia coder, nó vẫn có thể mất vài giờ để thực hiện các sửa đổi mong muốn.

May mắn thay, plugin WordPress Visual Composer đã đơn giản hóa vấn đề này.  Với plugin xây dựng trang tuyệt vời này, ngay cả những người sử dụng WordPress cơ bản nhất có thể sửa đổi thiết kế chủ đề và tạo ra một cái nhìn hoàn toàn độc đáo cho trang web của họ. Đối với các chuyên gia WordPress, nó giúp tiết kiệm phần lớn thời gian và giúp họ sửa đổi các trang chỉ trong một vài phút Nói chung, plugin đã có một thành công lớn và đã được sử dụng trong nhiều mẫu WordPress mới nhất.

Vì vậy với bối cảnh này, hãy để tôi hướng dẫn bạn qua một số tính năng chính của Visual Composer và cách thiết lập nó cho trang web WordPress của bạn.

Các đặc điểm chính

Visual Composer được thiết kế bởi những anh chàng tại WP Bakery.  Nó là một plugin trả phí chứ không phải là dạng công khai miễn phí có sẵn trên thư mục plugin của WordPress.  Bạn chỉ có thể tải nó từ CodeCanyon.

Nó đã được tải về nhiều hơn 70.000 người dùng và dường như ngày càng thành công hơn! Visual Composer nhiều tính năng rất hữu ích mà có thể làm cho việc xây dựng trang web có một trải nghiệm vô cùng thú vị trong WordPress. Dưới đây là một cái nhìn nhanh về chúng.

Xây dựng Frontend và Backend

Tính năng mạnh mẽ nhất của Visual Composer là cung cấp cho bạn trình tạo trang kéo và thả dễ dàng có thể được sử dụng từ khu vực chỉnh sửa post/page chuẩn của Wordpress hoặc trực tiếp từ giao diện người dùng.

Khả năng tương thích các chủ đề phổ biến

Visual Composer không phải là một trang mẫu cụ thể. Điều này có nghĩa là bạn có thể sử dụng nó với bất kỳ mẫu WordPress mà không cần thực hiện bất kỳ điều chỉnh nào với mã hiện tại.

Giao diện tùy biến cao

Kéo và thả các thành phần của Visual Composer có một khuôn và mẫu mặc định. Tuy nhiên, bạn có thể thay đổi điều này theo màu sắc và vẻ bề ngoài của trang web của bạn.

Hơn 40 thành phần thiết kế đã sẵn sàng

Giao diện kéo và thả của Visual Composer có hơn 40 mẫu đã sẵn sàng sử dụng các yếu tố kéo và thả có thể được sử dụng để tạo bố cục độc đáo cho trang web của bạn trong vài phút.

Các thành phần hoàn toàn Responsive

Các thành phần thiết kế và trang được tạo bằng Visual Composer là hoàn toàn responsive và phù hợp với các màn hình di động.

Phát triển thân thiện

Visual Composer có đầy đủ các yếu tố kéo và thả linh hoạt. Nếu bạn muốn thêm nhiều hơn, bạn có thể dễ dàng làm điều đó nhờ bản chất thân thiện của nhà phát triển.

Cài đặt và cấu hình Plugin

Như tôi đã gợi ý từ trước, Visual Composer là một plugin trả phí. Vậy, bạn sẽ cần mua nó trước và sau đó tải nó lên trang Wordpress của bạn.

Bước 1

Quá trình cài đặt giống như bất kỳ plugin Wordpress khác. Sau khi kích hoạt, các plugin sẽ xuất hiện trong các tùy chọn cài đặt trên menu bên trái trong Bảng điều khiển chính của Wordpress.

Bước 2

Ở đây, bạn có thể điều chỉnh một số cài đặt plugin cơ bản.


Bước 3

Bạn có thể bật Visual Composer cho cả Trang và Bài đăng, hoặc bất kỳ một trong số chúng.  Bạn cũng có thể đặt quyền truy cập cụ thể cho từng loại người dùng. Đối với mỗi loại người sử dụng, bạn có thể chọn để hiển thị cả Visual Composer trong khu vực chỉnh sửa bài đăng và trình soạn thảo WordPress tiêu chuẩn, hoặc chỉ bạn có thể hiển thị Visual Composer. Bạn cũng có thể bật hoặc vô hiệu hoá các phần tử Visual Composer riêng lẻ cho những người dùng khác nhau.

Bước 4

Trong tab Tùy chọn Thiết kế, bạn có thể sửa đổi giao diện của các thành phần Visual Composer theo chủ đề của trang web của bạn.  Tab tùy chỉnh CSS cho phép bạn sửa đổi CSS mà không thay đổi bất kỳ tệp nào khác, trong khi tab Giấy phép sản phẩm cho phép bạn tích hợp tài khoản Envato của bạn để hỗ trợ và cập nhật tự động. Trong tab Shortcodes của tôi, bạn có thể thêm bất kỳ shortcodes bổ sung được phát triển theo cách thủ công vào danh sách hiện có của các shortcodes trong Visual Composer.

Bây giờ chúng ta hãy chuyển sang sử dụng thực tế plugin!

Sử dụng Visual Composer trên Pages và Posts

Như tôi đã đề cập ở trên, bạn có thể bật Visual Composer cho Bài đăng, Trang hoặc bất kỳ một trong số chúng.  Sau khi kích hoạt plugin, bạn sẽ thấy các tab Visual Editor trên đầu trình soạn thảo văn bản chuẩn của WordPress.

Hai tab xuất hiện trên phần đầu của soạn thảo văn bản là Backend EditorFrontend Editor.  Đây là những lựa chọn làm việc sử dụng plugin này càng dễ dàng. Từ đây, bạn có thể tạo bất kỳ cấu trúc trang nào bạn muốn.  Hãy bắt đầu với trình chỉnh sửa backend nào.

Backend Editor

Bước 1

Khi bạn nhấp vào tab Backend editor, khu vực trình chỉnh sửa văn bản của bạn sẽ thay đổi thành một hộp kéo và thả nơi bạn có thể thêm các phần tử bằng cách chọn chúng từ danh sách.  Nhưng trước tiên, bạn cần thêm một hàng.  Từ đây, điều duy nhất hạn chế thiết kế của bạn sẽ là trí tưởng tượng của bạn.

Bước 2

Bạn có thể thêm các phần tử khác nhau trong hàng và cũng có thể chọn bố cục cột khác nhau cho mỗi hàng bằng cách di chuột con trỏ chuột lên nút trên trình chỉnh sửa nội dung. Bạn có thể thêm các phần tử khác nhau để thiết kế trang của mình từ tab Thêm phần tử. Hộp Thêm các phần tử chứa mọi thứ bạn cần để thiết kế một trang web.

Các yếu tố được chia thành các loại Nội dung, Xã hội, Cấu trúc trang web, Các thành phần mới và Các Tiện ích WordPress, nhưng bạn cũng có thể xem tất cả chúng với nhau. Tùy chọn nào bạn cần, chỉ cần nhấp vào nó và kéo nó trong hộp nội dung của bạn.  Trang của bạn về cơ bản được chia thành các hàng khác nhau.  Bạn có thể tiếp tục thêm hàng mới và các yếu tố mới trong các hàng đó.

Bước 3

Để chỉnh sửa, xóa hoặc sao chép bất kỳ hàng cụ thể nào, chỉ cần sử dụng các biểu tượng ở trên cùng của mỗi hàng.

Bước 4

Bạn có thể lưu một sắp xếp nội dung cụ thể như là một mẫu đã sẵn sàng để sử dụng có thể được tải từ danh sách bất cứ khi nào bạn cần.

Bước 5

Visual Composer cũng cho phép bạn thêm CSS tùy chỉnh cho các trang cá nhân và các bài đăng.  Tác động của CSS tùy chỉnh này sẽ chỉ giới hạn ở trang hoặc bài đăng cụ thể đó.

Visual Composer cũng hỗ trợ một số plugin WordPress nổi tiếng như Contact Form 7, Layer Slider, Revolution SliderGravity Forms.  Nếu bạn cài đặt bất kỳ plugin nào, chúng sẽ được tự động thêm vào hộp Thêm phần tử.  Khi bạn chọn bất kỳ trong số chúng từ danh sách các phần tử, nó sẽ được chèn trực tiếp vào trang của bạn mà không cần thêm bất kỳ shortcodes nào.  Trình chỉnh sửa backend cung cấp cho bạn rất nhiều sự linh hoạt và các tùy chọn mà bạn có thể tạo ra bất kỳ kiểu thiết kế ngay cả khi bạn là một người sử dụng nghiệp dư.

Frontend Editor

Trình chỉnh sửa frontend cho phép bạn kéo và thả các phần tử trang trong chế độ xem trang trực tuyến.  Nó làm cho nó dễ dàng hơn để xem tác động của các thay đổi của bạn ngay lập tức trong khi những tùy chọn ở trình chỉnh sửa backend đã rất tốt

Bước 1

Bắt đầu từ bên trái, bạn có thể thêm các phần tử mới bằng cách nhấp vào dấu + và chỉnh sửa bố cục của cột bằng nút cột bên cạnh nó.

Bước 2

Bạn cũng có thể thêm hàng hoặc cột mới từ dấu + bên trong nội dung trang.

Bước 3

Tất cả các thành phần của Visual Composer là hoàn toàn responsive và mobile Bạn có thể xem trước trực tiếp cho các thiết bị khác nhau trong trình chỉnh sửa frontend từ các biểu tượng bên dưới.

Bước 4

Mặc dù có tất cả nhiều tính năng và thành phần, Visual Composer vẫn cho phép bạn thêm các shortcode và các yếu tố thiết kế của riêng bạn.  Bạn có thể tự tạo các yếu tố hoặc nhập chúng từ bất kỳ dịch vụ của bên thứ ba.

Tóm tắt

WordPress luôn là một nền tảng linh hoạt về các chức năng khác nhau mà nó có thể hỗ trợ thông qua các plugin của nó.  Nhưng với plugin Trình tạo trang Visual Composer, ngay cả khía cạnh thiết kế của WordPress, chỉ được giới hạn cho người dùng nâng cao, bây giờ có thể được chỉnh sửa trong thời gian rất nhanh.

Đối với tôi, cá nhân, Visual Composer đã giảm đáng kể thời gian, tôi đã từng chi cho thiết kế trang web của khách hàng và chỉnh sửa các nhiệm vụ, từ vài giờ đến vài phút.  Và với sự phổ biến ngày càng tăng của plugin này, tôi chỉ có thể nhìn thấy ngày càng nhiều người dùng WordPress dựa vào nó trong những ngày tới.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.