WordPress là một CMS rất phổ biến trên toàn thế giới do giao diện đơn giản, chủ đề có thể tùy chỉnh cao và vô số bổ sung mạnh mẽ. Nó đã đơn giản hóa việc tạo, phát triển và quản lý trang web, ngay cả đối với những người dùng nghiệp dư nhất.

Ngày nay, và nhờ có WordPress, bạn không còn cần phải có kiến ​​thức cụ thể để tạo các trang web hấp dẫn. Tuy nhiên, bạn là có thể được đã tình cờ thấy một trang web cung cấp một thiết kế thực sự đáng kinh ngạc, và bạn có thể tự hỏi: Làm thế nào được nó làm gì?

Thật không may, nếu bạn là một người nghiệp dư hoặc người mới bắt đầu, bạn không thể làm được gì nhiều, ngay cả với WordPress, vì để sửa đổi chủ đề của bạn, bạn cần một mức độ chuyên môn nhất định về HTML, CSS, PHP và một số kỹ năng khác tùy thuộc vào bản chất của chủ đề, cũng như dự án hoặc mục tiêu của bạn.

Tuy nhiên, ngay cả khi bạn là một coder có kinh nghiệm, bạn chắc chắn cần một công cụ cho phép bạn tiết kiệm thời gian và chất lượng trên kết quả cuối cùng.

May mắn thay, Plugin WordPress « Trình tạo Trang WPBake Trước đây được gọi là " Trực quan Composer » cung cấp một giải pháp cho vấn đề này. Với cái sau, thậm chí hầu hết người mới bắt đầu viết blog có thể tạo các trang với giao diện hoàn toàn độc đáo cho trang web của họ.

Với plugin này, bạn có thể tạo:

  • Trang đích hấp dẫn (trang đích)
  • Từ các trang bán hàng đến cái nhìn chuyên nghiệp
  • Các trang web "trưng bày" cho doanh nghiệp của bạn
  • module trang cho đào tạo của bạn
  • thời gian ngắn

Theo tôi, đây là công cụ định dạng (hoặc bố cục) tốt nhất trên internet. Đặc biệt là đối với người dùng WordPress.

Do đó, trong hướng dẫn này, tôi sẽ chỉ cho bạn cách mang lại cái nhìn độc đáo cho trang web của bạn (Hoặc blog) với Plugin Trực quan Composer.

Vì vậy, ...

Làm thế nào để cài đặt và cấu hình Plugin WPBakery Page Builder

Trình tạo Trang WPBake là một Plugin phí bảo hiểm mà bạn có thể mua Codecanyon : Các nền tảng bán hàng tốt nhất trên các plugin internet.

ĐƯỢC CHỨ. Khi bạn đã mua và tải xuống plugin bố cục này trên WordPress, tất cả những gì bạn cần làm là cài đặt và kích hoạt nó.

Sau đó, chúng tôi sẽ bắt đầu bằng cách thực hiện một số điều chỉnh cơ bản. Để làm điều này, hãy điều hướng đến vị trí "Cài đặt >> Trực quan Composer » trên bảng điều khiển của bạn.

thiết lập chung

cài đặt chung nhà soạn nhạc trực quanTab đầu tiên (cài đặt chung), Cho phép bạn thay đổi:

  • Các nội dung trên đó trực quan soạn thư sẽ có sẵn. Bạn có thể kiểm tra các mặt hàng (gửi) và / hoặc các trang (trang)
  • Các quy tắc khác nhau củaquyền vai trò khác nhau. Với tùy chọn này, bạn có thể xác định rằng những thay đổi gì. Các vai trò khác nhau có sẵn sẽ được hiển thị. Bạn sẽ phải nhấp vào từng cái để kiểm tra các yếu tố mà nó (vai trò) sẽ có quyền truy cập. Bạn có tùy chọn để cấm sử dụng " trực quan nhà soạn nhạc ”cho người dùng của một vai trò cụ thể.
    kích hoạt trình chỉnh sửa trên trình tạo trang WPbakery
  • Bật hoặc tắt các mục đáp ứng
  • Xác định tập hợp con cho phông chữ Google

lựa chọn vai trò của wpbakeryTùy chọn thiết kế

Trên các tùy chọn thiết kế, bạn có thể sửa đổi giao diện trực quan mặc định của các phần tử khác nhau của " trực quan nhà soạn nhạc '. Trước khi sử dụng, hãy đảm bảo rằng bạn đã chọn tùy chọn « Sử dụng tùy chọn thiết kế tùy chỉnh ».

cài đặt css

Các tùy chọn này sẽ cho phép bạn xác định màu áp dụng cho tất cả các phần tử. 

  • Các " CSS tùy chỉnh Cung cấp cho bạn cơ hội để tùy chỉnh thêm từng mục, chỉ các nhà phát triển mới có thể biết nó là gì.
  • Tab « Giấy phép sản phẩm »Cho phép bạn kích hoạt Plugin để nhận được cập nhật tự động.
  • Tab « shortcodes tài sản Chủ yếu là về các nhà phát triển.

Được rồi, bây giờ chúng ta sẽ tạo một trang web tùy chỉnh với Trình soạn nhạc trực quan.

Cách tạo một trang tùy chỉnh với trực quan nhà soạn nhạc

Để dễ dàng tạo các trang web được cá nhân hóa, bạn có sự lựa chọn giữa trình chỉnh sửa của " văn phòng trở lại ", Tức là bạn sửa đổi trang web từ bảng điều khiển WordPress của mình, trong đó" văn phòng phía trước '.

biên tập-the-front-end-the-biên tập phụ trợ

Nếu bạn đang sử dụng Gutenberg, bạn sẽ thấy nút "Trình chỉnh sửa trang" trên thanh tác vụ trên cùng.

trình chỉnh sửa trực quan bảng điều khiển trình chỉnh sửa gutenberg

Lợi thế với trình biên tập của Trụ sở chính là bạn có thể chỉnh sửa trực tiếp các trang của mình và xem các yếu tố khác nhau xuất hiện trên chủ đề của bạn như thế nào.

Với biên tập viên văn phòng

Để truy cập trình chỉnh sửa của " văn phòng trở lại », Tôi mời bạn bấm vào« Nhà phát hành BACK-VĂN PHÒNG '. Bạn có thể quay lại trình chỉnh sửa trực quan WordPress bất kỳ lúc nào bằng cách nhấp vào " chế độ classic ". Nhưng tôi nghĩ rằng nó sẽ không cần thiết, vì vậy định dạng trang web plugin này đã hoàn tất.

Khi ở trong trình chỉnh sửa Back-office, bạn có thể chọn bố cục chung sẽ áp dụng cho trang.

Bản cập nhật trang khác nhau tùy thuộc vào những gì bạn định làm với trang. Vì vậy, bạn có thể chọn « hạ cánh trang » để tạo một trang chủ, "Danh sách dịch vụ" cho một trang hiển thị các dịch vụ, v.v. Với kinh nghiệm, bạn thậm chí sẽ có thể đặt cược en trang tùy chỉnh thiết kế rất pro.

Dù lựa chọn cài đặt của bạn là gì trang, việc trình bày các yếu tố là tương tự trên tất cả các sau này. Bạn có thể thêm mới yếu tố en cliquant sur "+" ở phía trên cùng của meta hộp « visual Editor », Hoặc thêm một mô hình bằng cách nhấp vào biểu tượng "Người mẫu".

Trên mỗi dòng, bạn có thể (từ trái sang phải) :

  • Di chuyển dòng
  • Quản lý các cột trong hàng
  • Thêm một cột mới

giao diện trình tạo trang wpbakeryCác tùy chọn khác có sẵn ở bên phải của hộp. Các tùy chọn này cho phép bạn (từ trái sang phải) Kính gửi:

  • giảm dòng
  • chỉnh sửa một hàng
  • nhân đôi một hàng
  • xóa một hàng

bố trí wpbackeryỞ giữa mỗi cột, bạn có thể thêm một mục trước, chỉnh sửa một cột hoặc xóa nó.

tùy chọn phần wpbackerytùy chọn phần wpbackery

Tài nguyên đề xuất

Đây là một số phần mở rộng của nhà soạn nhạc thị giác mà chúng tôi khuyên bạn nên:

1 - Cách quản lý cột

Trên tab quản lý cột, bạn có thể chọn số cột bạn muốn thêm vào hàng. Để hiểu các mô hình cột khác nhau, hãy biết rằng mỗi phân số tương ứng với chiều rộng mà cột sẽ chiếm. Nhiều như một mẫu có phân số, vì vậy nhiều lần trang sẽ có các cột.

Tất nhiên, các mẫu cột khác nhau của 11 có sẵn, nhưng bạn có thể tạo bao nhiêu tùy ý bằng cách nhấp vào liên kết "Cá nhân hóa" ngay bên dưới danh sách các cột.

Ví dụ: để hiển thị một phần của trang với các cột 2 có độ rộng bằng nhau, bạn phải chọn (Hoặc thêm) "1 / 2 + 1 / 2". 

Các cột sẽ được hiển thị trên blog của bạn và chiều rộng của chúng sẽ được phân phối theo tỷ lệ theo kích thước của chủ đề. Một cột có thể chứa nhiều mục nhất có thể, vì vậy bạn không có bất kỳ giới hạn nào ở cấp độ này.

bố trí phần wpbakery

Các phần tử khác nhau có thể được chuyển đến bất kỳ cột nào.

di chuyển hộp văn bản wordpress wpbakeryBằng cách di chuột qua từng thành phần, bạn sẽ có thể truy cập các tùy chọn của nó, đặc biệt là nút cho phép:

  • hành động thành phần
  • thay đổi thành phần
  • bản sao thành phần
  • Supprimer thành phần

tùy chọn-the-yếu tố

2 - Cách thêm các phần tử

Bạn có tùy chọn để tùy chỉnh từng cột với các yếu tố được đề xuất bởi " Hình ảnh sáng tác '. Để thêm một mục, nhấp vào nút "+" trên một cột cụ thể hoặc trên nút "+" Menu chính plugin.

thêm một yếu tố wpbakery
Khi một cột trống (ne chứa không có nội dung)cô ấy có một nút "+" phía trong.
 Ví dụ: để thêm video, hãy nhấp vào nút này và chọn phần tử video.

add-một-video

Nhấp vào nó sẽ mở ra một cửa sổ mới. Trên cửa sổ này, bạn phải cung cấp tiêu đề, liên kết đến video và một lớp bổ sung (không bắt buộc). Khi bạn đã nhập xong các thông tin khác nhau về video của mình, đừng quên lưu các thay đổi của bạn.

cài đặt video wpbakeryVideo của bạn sẽ có sẵn trên trình chỉnh sửa văn phòng. Lưu các thay đổi của bạn một lần nữa. Bây giờ bạn có thể xem nó bằng cách nhấp vào "xem trước".

thêm video wordpress wpbakeryQuy trình thêm một mục là giống nhau đối với tất cả các mục khác, với một vài ngoại lệ. Thông tin cần hoàn thành có thể khác nhau tùy thuộc vào các yếu tố. 

Ví dụ: bằng cách chọn phần tử văn bản, bạn sẽ tìm thấy một trình chỉnh sửa trực quan cổ điển (một cái có sẵn khi viết bài hoặc trang), mà còn là một tùy chọn cho phép bạn thêm hoạt ảnh trong quá trình hiển thị phần tử. Do đó, phần sau có thể mờ dần từ vị trí này sang vị trí khác, tùy thuộc vào cài đặt của bạn.

cài đặt khối văn bảnThú vị nhất với điều này Plugin, là bạn sẽ có thể tạo sidebars nếu chủ đề của bạn không, chẳng hạn. Để làm điều này, hãy nhấp vào nút thêm (" + »)và chọn phần tử " WP Bình luận mới đây "," Facebook Lượt thích Và cuối cùng « Danh mục Wp '.

Bây giờ tạo mẫu cột tùy chỉnh này 1 / 3 + 2 / 3 »Hoặc bất kỳ cái nào khác và thêm phần tử sidebar ở cột bên trái hoặc cột bên phải. Điều đó không quan trọng vì tất cả phụ thuộc vào độ rộng bạn muốn cung cấp cho thanh bên của mình được tạo trong phần mở rộng bố cục này so với trong Visual Composer.

cấu hình cột wpbakery

Bạn sẽ thấy một cột trống mới ở bên phải, thêm một yếu tố mới bạn chọn (Tôi khuyên bạn nên thêm một văn bản đơn giản). Bây giờ hãy lưu trang và vào phần xem trước để xem kết quả của bài tập này.

3 - Cách lưu và sử dụng lại mẫu trang

Có thể lưu mẫu trang của bạn và sử dụng nó sau này. Tôi thích tùy chọn này vì nó giúp bạn tiết kiệm hàng giờ để sao chép một mẫu từ một trang. Ở đây mọi thứ được thực hiện với một cú nhấp chuột. Vâng, bạn đã nghe đúng, TRONG MỘT NHẤP VÀO… hoặc trong hai lần 🙂

Để lưu mẫu, hãy nhấp vào biểu tượng mẫu. Trên cửa sổ sẽ xuất hiện, hãy nhập tên kiểu máy của bạn vào " Lưu bố cục hiện tại làm mẫu », Sau đó bấm vào« Lưu mẫu '.

Quan trọng: Bạn phải làm điều này trên trang bạn muốn lưu dưới dạng mẫu chứ không phải trên một trang trống.

đăng ký một mô hình wpbakery

Đây cũng giống như cách mà bạn sẽ tìm thấy các mô hình khác nhau mà bạn đã lưu, sâu hơn trong cùng một cửa sổ trong phần "Tải một mô hình".

mô hình của tôi wpbakeryTất cả những gì bạn phải làm trong trường hợp này là tạo một trang mới, sau đó đi tới các mẫu và chọn một mẫu bạn muốn cung cấp cho trang của mình.

Với biên tập viên văn phòng

Biên tập viên văn phòng phía trước có lợi thế de cho phép bạn chỉnh sửa trang của mình trong thời gian thực. Nói cách khác, nó cho phép bạn xem mọi thay đổi bạn thực hiện đối với trang web của mình sẽ như thế nào khi sử dụng Visual Composer. Ưu điểm của cách tiếp cận này là bạn không phải làm việc một cách mù quáng như khi làm với trình biên tập trang back-office.

Bạn có thể chuyển từ tùy chọn này sang tùy chọn khác bất kỳ lúc nào (Văn phòng trở lại văn phòng hoặc cạnh).

Biên tập viên văn phòng chính không khác gì so với biên tập viên văn phòng, ở chỗ có một thanh người sử dụng giống hệt nhau, nhưng tất cả các tùy chọn của back office editor đều giống như trên front office editor.

thanh công cụ wpbakeryTuy nhiên, năm nút mới đã được thêm vào, bao gồm:

  • Kích hoạt hoặc hủy kích hoạt hướng dẫn
  • Trình giả lập, cho phép bạn xem blog của mình trông như thế nào trên các thiết bị khác nhau
  • Nút quay lại để trụ lại
  • Nút lưu thay đổi
  • Nút thoát trực quan nhà soạn nhạc

tùy chọn wpbakeryMỗi phần tử của một trang có thể được sửa đổi, bạn sẽ có thể xem các tùy chọn có sẵn bằng cách di chuột qua từng phần tử. Nút có hình "CHƠI", sẽ cho phép bạn hiển thị nhiều tùy chọn hơn cho một phần tử.

tùy chọn-the-yếu tố-of-the-front văn phòng

Bước đầu tiên của bạn có thể khó khăn, nhưng với thực hành, bạn sẽ đạt được trang chủ như thế này.  Nếu bạn muốn, trước khi bạn nhận được Pluginbạn có thể kiểm tra nó miễn phí (đăng nhập, người dùng: demo, mật khẩu: demo).

Đây là những gì tôi có thể đạt được trong 1 phút ở nhà. Với thực hành, bạn có thể đạt được kết quả rất hài lòng. Và nếu bạn cần trợ giúp để xây dựng trang web WordPress của mình với plugin mạnh mẽ này, thì đừng ngần ngại liên hệ với nhóm BlogPasCherai sẽ hạnh phúc khi nhận ra dự án của bạn.

Tôi hy vọng hướng dẫn hoàn toàn bằng tiếng Pháp này sẽ giúp bạn thực hiện những bước đầu tiên với Plugin « Trực quan Composer '. Nếu bạn có vấn đề, chúng tôi (hoặc hỗ trợ) sẽ rất vui được giúp bạn. Đừng quên: một trang web đẹp chuyển đổi khách hàng tò mò hơn.

Tiện ích mở rộng được đề xuất

Đây là một số phần mở rộng của nhà soạn nhạc thị giác mà chúng tôi khuyên bạn nên:

Khám phá thêm các plugin trên Codecanyon

Chia sẻ hướng dẫn này với những người có nhu cầu.