12 điểm chung cơ bản cần biết để sử dụng trình tạo trang WordPress

Bạn có muốn sử dụng trình tạo trang (Page Builder Plugin) WordPress như một chuyên gia thiết kế Web không?

Với hầu hết người dùng WordPress chắc chắn bạn không thể bỏ qua công cụ tuyệt vời này. Thứ giúp bạn xây dựng các trang đẹp mắt và chuyên nghiệp chỉ với thao tác kéo thả.

Thực tế, sử dụng trình tạo trang cũng không quá phức tạp như bạn nghĩ. Tuy nhiên khi mới bắt đầu mình đảm bảo bạn sẽ mất khá nhiều thời gian tìm hiểu về từng đặc điểm của plugin đó.

Mình đã mất khoảng 3 tháng mới có thể hiểu rõ về Page Builder Plugin và 3 tháng sau mới nắm được cách dùng cơ bản. Vậy là, mình mất nửa năm để trở thành một người mới về sử dụng trình tạo trang.

Tuy nhiên nếu như bạn quan tâm về cách dùng Page Builder Plugin thì không cần lãng phí nhiều thời gian như vậy.

Trong nhiều năm qua mình đã làm việc với hàng chục trình tạo trang khác nhau. Và mình nhận thấy hầu hết chúng đều có những nét chung nhất định. Chỉ cần nắm bắt được chúng thì có thể sử dụng bất kỳ plugin nào một cách dễ dàng.

Có thể nói bạn sắp lấy được hơn 6 tháng kiến thức về cách dùng Page Builder Plugin của mình chỉ bằng một bài viết vài chục phút đọc (nếu bạn nghiêm túc suy ngẫm)

Dựa vào nó bạn không cần lo lắng với các thiết kế web sau này.

Với hầu hết lời khuyên của các Blogger, sau khi tạo Website WordPress bạn thường được khuyến nghị dùng trình soạn thảo cổ điển (Classic editor).

Nó là một giao diện soạn thảo khá giống với Microsoft Word ngoại trừ có ít định dạng hơn. Vì vậy bạn chỉ cần tạo được những trang cơ bản với văn bản và hình ảnh.

vi-du-trang-duoc-xay-dung-bang-trinh-soan-thao-co-dien
  • Save

(Ví dụ trang này được xây dựng bằng trình soạn thảo Classic Editor)

Tuy nhiên trong quá trình phát triển đôi khi bạn cần xây dựng các trang chuyên nghiệp hơn như trang chủ, liên hệ, giới thiệu,...với các thiết kế phức tạp.

Ví dụ như trang chủ của mình bạn không thể sử dụng trình soạn thảo cổ điển để xây dựng.

vi-du-homepage-namdenroi
  • Save

Trình tạo trang hoạt động giúp bạn thêm các tính năng thiết kế trang chuyên nghiệp cho Website WordPress. (Mình yêu thích WordPress cũng vì tiện ích này.)

Khi cài đặt Page Builder Plugin giao diện soạn thảo của bạn sẽ bổ sung các tùy chọn xây dựng trang như button (nút), icon, thanh trượt, tab, bộ đếm ngược,...

Qua đó bạn sẽ dễ dàng tạo các trang như mong muốn với bố cục & hiển thị độc đáo.

Và trước khi sử dụng trình tạo trang như một chuyên gia bạn cần phải nắm được những điều cơ bản về Page Builder Plugin. Trong phần bên dưới mình sẽ chỉ cho bạn.

Trình tạo trang với trình soạn thảo Gutenberg khác nhau ra sao?

Mình tin rằng nhiều bạn dùng WordPress rất dễ nhầm lẫn giữa 2 trình tạo nội dung này.

Gutenberg thực chất là một trình soạn thảo nội dung được xây dựng trên các khối (block). Nó đã thay thế classic editor trước đây trong soạn thảo văn bản.

Mặc dù Gutenberg đủ khả năng tạo ra trang có thiết kế độc đáo cho bạn, tuy nhiên do làm việc trên giao diện soạn thảo nên khá khó khăn cho những bạn mới hoặc ít kinh nghiệm thiết kế web.

Nhưng với trình tạo trang nó cho phép bạn thiết kế ở giao diện trực quan và dễ dàng hơn với thao tác kéo thả.

Tóm lại cho dù bạn đang sử dụng Gutenberg để soạn thảo nội dung nhưng mình vẫn khuyên bạn nên dùng trình tạo trang phục vụ mục đích thiết kế trang trên WordPress.

Những điều cơ bản để bạn sử dụng được mọi trình tạo trang WordPress

Hoạt động trên cả Posts & Pages

Mặc dù trình tạo trang hoạt động chủ yếu để các bạn xây dựng trang cho Website WordPress. Ví dụ như các trang đích, trang bán hàng, trang chủ, trang liên hệ,...

Tuy nhiên thực tế nó cũng có thể được dùng để soạn thảo để bài viết trở nên bắt mắt và sinh động.

Chẳng hạn như bài viết này được mình dùng Page Builder Plugin soạn thảo.

Nhưng mình thấy rất ít người sử dụng và mình cũng không khuyến khích bạn làm theo mình, lý do bởi việc viết bài bằng Page Builder khá mất thời gian.

Ví dụ như bạn có một Website tin tức mà sử dụng trình tạo trang để soạn thảo bài viết thì quả thực rất kinh khủng.

Chưa kể trường hợp khi bỏ plugin trình tạo trang đó thì một rắc rối cực kỳ lớn về giao diện xảy ra với các shortcode để lại. (Bạn có thể mất vài ngày để xóa)

Nếu bạn muốn nhiều tính năng cho soạn thảo bài viết mình đề xuất bạn nên dùng những plugin shortcode chuyên dụng. Ví dụ như Shortcodes Ultimate.

Giao diện Front-end được yêu thích

Khi sử dụng plugin Page Builder bạn nhất định phải biết có 2 loại giao diện thiết kế phổ biến.

  • Giao diện Back-end: Thiết kế nằm trong giao diện soạn thảo
  • Giao diện Front-end: Thiết kế trực quan dưới góc nhìn của người truy cập

Với mọi người dùng trình tạo trang họ thường lựa chọn thiết kế trang trên giao diện front-end. Vì qua đó bạn sẽ biết chính xác giao diện hiển thị dưới mắt người dùng.

Mỗi Page Builder Plugin đều có hỗ trợ giao diện thiết kế khác nhau, một số chỉ hỗ trợ Back-end. Và mình không khuyên dùng loại này, nó chẳng khác gì Gutenberg.

Trong khi đó có những nhà cung cấp hỗ trợ cả 2 giao diện thiết kế. Divi Builder là plugin nổi tiếng nhất cho phân khúc này, ngoài ra còn có WPBakery Page Builder.

Đặc biệt một số nhà cung cấp coi trọng hiệu suất và loại bỏ tính năng dư thừa nên họ chỉ hỗ trợ mỗi giao diện thiết kế front-end. Ví dụ như Elementor, Beaver Builder, Thrive Architect.

Section là khu vực bắt đầu của mọi thiết kế

Khi sử dụng trình tạo trang, điều cơ bản nhất của thiết kế chính là Section (có thể coi như một hàng). Nó được hiểu như một khu vực lớn nhất dùng để trình bày một nội dung cụ thể.

Ví dụ với trang chủ của mình bạn có thể thấy khu vực Background màu xanh đầu tiên là một section, tiếp đó là section chứa các logo đặc trưng,...

Thông thường một section được ngăn cách bởi những màu sắc khác nhau giúp thiết kế của bạn dễ dàng phân biệt cũng như dễ nhìn hơn.

Section thường chứa nội dung hiển thị, hoặc đôi khi là các columns sau đó mới tới nội dung hiển thị.

Tóm lại khi sử dụng Page Builder Plugin, nội dung trên trang thiết kế sẽ được phân cấp như thế này:

Sections -> Columns -> nội dung hiển thị

Các tiện ích quy định tính năng hiển thị

Cốt lõi để tạo nên sự khác biệt giữa Page Builder và trình soạn thảo cổ điển khác nhau chính là bởi các tiện ích hiển thị (thường gọi là widget hoặc element).

widget-elementor-plugin
  • Save

(Một số Widgets của Plugin Elementor)

Trong mỗi giao diện thiết kế của trình tạo trang thường mang theo rất nhiều tiện ích chứa từng tính năng riêng biệt. Ví dụ một số tiện ích phổ biến:

  • Hình ảnh: Dùng để thêm hình ảnh
  • Tab: Dùng để tạo các tab chứa nội dung bên trong
  • Tiện ích Table: Dùng để tạo bảng
  • Tiện ích text:  Dùng chèn văn bản trong thiết kế
  • Tiện ích icon: Dùng chèn các biểu tượng đặc biệt
  • Tiện ích Divide: Thêm dấu gạch phân cách nội dung
  • ...

Tóm lại còn vô số tiện ích khác, chúng ít hay nhiều còn phụ thuộc vào plugin Page Builder bạn đã cài đặt và là bản miễn phí hay trả phí.

Bảng tùy chỉnh

Với mỗi mục phân cấp từ Section cho tới Widget, khi nhấp vào chúng thì sẽ có một bảng hiển thị các tùy chỉnh.

Ví dụ khi click vào tiện ích hình ảnh thì hệ thống sẽ hiện ra các tùy chỉnh cho nó.

Trong bảng tùy chỉnh có rất nhiều thứ thay đổi hiển thị (phụ thuộc vào plugin bạn cài đặt), tiêu biểu như màu sắc chữ, màu nền, đường viền, margin, padding, hiệu ứng đổ bóng,...

Nó chung để sử dụng thành thạo trình tạo trang bạn cần phải dành nhiều thời gian tìm hiểu các tùy chọn này. Nó quyết định rất lớn đến giao diện thiết kế của bạn.

Kéo thả để sắp xếp vị trí 

Những Page Builder Plugin hiện đại cho phép bạn sắp xếp thứ tự các section hoặc vị trí các tiện ích chỉ bằng thao tác kéo thả. 

Ví dụ bạn có thể kéo một widget hình ảnh từ Section đầu đến một section cuối trên trang.

Tính năng này được coi như đặc trưng của Page Builder Plugin vì nó giúp bạn linh hoạt trong thiết kế web.

Nhân bản nội dung

Với nội dung cơ bản trên WordPress hầu như bạn chỉ sao chép được văn bản. Tuy nhiên khi sử dụng Page Builder Plugin bạn còn có thể sao chép bất kỳ yếu tố thiết kế của trang.

su-dung-trinh-tao-trang-wordpress-de-nhan-ban-noi-dung-page-builder-plugin
  • Save

Thông thường trên một trang có rất nhiều phần tử lặp lại nhiều lần, vì vậy tính năng nhân bản nội dung rất hữu ích trong trường hợp này.

Nó giúp bạn tiết kiệm rất nhiều thời gian khi không phải thiết kế lại từ đầu, đồng không cần chỉnh sửa lại.

Kết hợp với tính năng sắp xếp vị trí ở trên bạn sẽ giảm hơn 40% thời gian thiết kế.

Có thể kiểm tra hiển thị trên thiết bị di động

Trong quá trình thiết kế, ngoài việc có thể xem hiển thị kích thước máy tính thì bạn có thể dễ dàng chuyển đổi góc nhìn trên máy tính bảng hoặc thiết bị di động.

Điều này đảm bảo thiết kế của bạn hoạt động tốt và đưa chỉnh sửa trong trường hợp hiển thị không như ý muốn.

Với những trình tạo trang bạn dễ dàng làm điều này bằng cách tìm và click vào biểu tượng hiển thị tương ứng.

xem-tren-kich-thuoc-di-dong-tren-elementor
  • Save

(Kiểm tra hiển thị trên Elementor)

xem-hien-thi-di-dong-tren-divi
  • Save

(Kiểm tra hiển thị trên Divi)

Lưu trữ các mẫu để dùng lại

Những chuyên gia thiết kế trang bằng Page Builder thường hay áp dụng phương pháp lưu lại các mẫu sau đó tái sử dụng trên trang khác.

Vì trong giao diện thiết kế đôi khi có một số tiện ích (hoặc section hoặc cả trang) có những yếu tố chung trên trang khác.

Nếu như thiết kế lại bạn sẽ mất thời gian.

Tuy nhiên Page Builder Plugin cho phép bạn lưu chúng dưới dạng các mẫu (thường gọi là template hoặc layout). Những mẫu này sẽ được lưu lại trong thư viện thiết kế và sẵn sàng sử dụng khi bạn muốn dùng lại.

luu-lai-cac-thiet-ke-page-builder-plugin
  • Save

Nhập demo có sẵn từ thư viện

Khi sử dụng trình tạo trang, bạn không nhất thiết phải có kiến thức về thiết kế Web. Thay vào đó bạn có thể dùng các mẫu được thiết sẵn trong thư viện mẫu của nhà cung cấp chỉ bằng cú click chuột.

elementor-template
  • Save

Họ là các chuyên gia nên tất nhiên giao diện trang đó cực kỳ đẹp.

Chỉ cần thay đổi nội dung theo ngôn ngữ và lĩnh vực của bạn đã xong một trang.

Nếu như bạn mới bắt đầu học sử dụng Page Builder thì nên nhập các mẫu demo sau đó chỉnh sửa nội dung cho phù hợp với Website của bạn.

Lưu lại lịch sử thiết kế

Trong quá trình thiết kế trang với Page Builder bạn không thể tránh khỏi những sai lầm. 

Tuy nhiên bạn không phải lo!

Bất kỳ trình tạo trang hiện đại nào hiện nay đều có tính năng lưu lại lịch sử thiết kế của bạn. Chỉ cần chọn phiên bản muốn khôi phục hoặc undo, redo.

undo-redo-divi
  • Save

(Lùi lại hoặc tiến tới lịch sử thiết kế trên Divi)

xem-lich-su-thiet-ke-elementor
  • Save

(Toàn bộ lịch sử thiết kế trên Elementor)

Vì vậy hãy thoải mái làm những thứ bạn muốn và khôi phục bất kỳ khi nào bạn cần.

Thay đổi sẽ không được áp dụng cho đến khi bạn chủ động lưu thủ công

Tương tự như khu vực Customize của Theme, với trình tạo trang cho dù bạn thiết kế nhiều đến mức nào nhưng không nhấn vào nút lưu thì chúng sẽ không được áp dụng.

Vì vậy khi đã chắc chắn một thiết kế bạn hãy nhấn lưu lại để đảm bảo nó không bị mất.

Ngoài ra, trước khi thoát nếu bạn chưa lưu thì hệ thống sẽ nhắc nhở bạn.

Lời kết

Hy vọng qua bài viết này bạn đã biết được các kiến thức cơ bản để sử dụng  trình tạo trang WordPress. Nắm bắt được 12 điểm trên bạn sẽ dễ dàng tiếp xúc và sử dụng với bất kỳ Page Builder WordPress nào.

Ngoài ra, mình cũng đã cung cấp một số kinh nghiệm lựa chọn cho bạn trong phần trên để có được trình tạo trang tốt nhất.

Vì đây là một khía cạnh cực kỳ lớn của WordPress cũng như thiết kế Web nên bạn cần phải tự vọc vạch & học tập thêm kiến thức bên ngoài mới có thể sử dụng nhuần nhuyễn. 

Nào! Bạn đã sử dụng được trình tạo trang WordPress chưa? Hãy cho mình biết câu trả lời hoặc bất kỳ ý kiến nào về bài viết này. Mình sẽ phản hồi nhanh chóng cho bạn!

  • Save
post_author; ?>

Nhận nội dung tốt nhất từ mình

Bao gồm các hướng dẫn WordPress, mẹo, công cụ & ưu đãi tốt nhất để phát triển doanh nghiệp trực tuyến của bạn.

>
Share via
Copy link