Hướng dẫn cách tạo landing page bằng Gutenberg miễn phí

Hướng dẫn cách tạo landing page bằng Gutenberg miễn phí

Suki Theme Banner 728x90 1

Hướng dẫn cách tạo một landing page bằng Gutenberg miễn phí trong những trường hợp bạn chỉ cần tạo những trang đơn giản, không cần đến một Page Builder plugin để giảm tải cho WordPress.

Page builder đôi khi sẽ trở thành quá thừa khi bạn chỉ mong muốn tạo nhanh một vài trang đơn giản cho blog.

Để tránh dùng “đại bác bắn ruồi” bạn có thể sử dụng luôn trình soạn thảo Gutenberg của WordPress để thiết kế landing page.

Ưu điểm của cách này là:

  • Hạn chế cài các plugin page builder quá nặng nề cho website.
  • Biết được thêm một cách đơn giản để tạo trang trong WordPress.
  • Trang tạo bằng Gutenberg có tốc độ load SIÊU TỐT so với các Page Builder.
  • Miễn phí.

Gutenberg vẫn chỉ là một… trình soạn thảo

Dành cho những bạn chưa biết thì Gutenberg là một trình soạn thảo editor hoàn toàn mới của WordPress “Bebo” 5.0 trở lên.

Trước khi ra mắt thì rất nhiều chuyên gia rất quan ngại Gutenberg sẽ đoe dọa các Page Builder Plugin khi ra mắt. Nhưng như bạn đã thấy, Gutenberg cũng vẫn chỉ là một editor và còn khá lâu để bắt kịp các page builder đã có trên thị trường.

Một số khuyết điểm của Gutenberg bạn gần như ngay lập tức nhận ra khi dùng để tạo trang:

  1. Khó sử dụng. Không có thao tác kéo thả, không thể tạo ở frontend (bạn phải tạo ở backend WordPress)
  2. Không hỗ trợ giao diện di động. Sẽ không có lựa chọn cho bạn tùy chỉnh hay xem trước ở giao diện di động thường thấy. Trong khi đó, giao diện di động lại cực quan trọng hiện nay.
  3. Không có mẫu tạo sẵn. Trong khi các page builder luôn có thư viện được tạo sẵn để giúp dùng tham khảo hay tạo nhanh được trang trong 5 phút.
  4. Tính năng đơn giản. Các Gutenberg block đa phần là đơn giản nên bạn không thể tạo được Layout, Section, hoặc những phần khá phức tạp khác như Slide, Pop-up, Form,…
Tham khảo thêm:  Cách cấu hình SEOPress Pro từ A-Z để SEO website hiệu quả

Dù vậy, Gutenberg có một điểm sáng so với tất cả các Page Builder khác đó là TỐC ĐỘ front end.

Nếu bạn không quá đòi hỏi tạo ra những trang quá phức tạp, thì dùng Gutenberg tạo trang sẽ giúp bạn tiết kiệm được tài nguyên hệ thống.

Cách tạo một landing page đơn giản với Gutenberg miễn phí

Do có khá nhiều khuyết điểm, nên bạn phải cần tới một plugin bổ trợ (Gutenberg Add-on) để khắc phục những điểm yếu của Gutenberg.

Một trong những lựa chọn tốt nhất hiện nay là Qubely plugin (Free).

Bước #1: Cài đặt Qubely miễn phí

Qubely sẽ giúp bạn khắc phục những yếu điểm của Gutenberg bằng bổ sung những tính năng hữu ích như sau:

  • Tùy chỉnh Responsive (tùy chỉnh giao diện di động)
  • Tạo được Section
  • Hỗ trợ hiệu ứng động (animated)
  • Hỗ trợ hiệu ứng chia trang (section divide)
  • Mẫu tạo sẵn (tempalte)

Bạn có cần đến Qubely Pro?

Không nhất thiết, Qubely miễn phí đã đủ dùng để tạo trang đơn giản. Tuy nhiên, nếu bạn muốn dùng Qubely block đẹp hơn hay tính năng nâng cao hơn cho cả viết blog (Gutenbeg dùng cho viết blog là chính) thì hãy xem xét. Nếu không, bạn có thể bỏ qua.

Bước #2: Cấu hình “nhẹ” cho WordPress Page trước khi bắt đầu

Bạn cần chú ý Page Attribute, đây là nơi nhiều bạn bị mất phương hướng.

Khi cài đặt Qubely thì tự động Qubely sẽ tạo ra thêm 2 loại Page Attribute cho WordPress.

  1. Qubely Full Width. Tạo trang với chiều rộng toàn trang và có header hay footer của theme.
  2. Qubely Canvas. Tạo trang với chiều rộng dựa theo tuỳ chỉnh của Qubely và không có header hay footer.
Tham khảo thêm:  Hướng dẫn sử dụng Thrive Leads [Thrive Themes] để xây dựng Email List hiệu quả

Bên cạnh đó theme WordPress cũng sẽ thường có sẵn 2 Page Attribute đó là

  1. Default template. Chiều rộng trang thường sẽ mặc định như cách post trình bày.
  2. Page Builder (theme). Chiều rộng trang sẽ tuỳ chỉnh kết hợp theo Page Builder và Theme đang dùng. Một số theme sẽ không có Page Attribute này.

Để cho bạn hiểu rõ hơn tôi, bạn hãy xem ảnh minh hoạ bên dưới

Default Template Layout
Default template
Page Builder Cua Theme
Page Builder (theme) (có header và footer)
Qubely Fullwidth Atribute
Qubely Full Width (có header và footer)
Qubely Canvas
Qubely Canvas (không có header và footer)

Vậy tóm lại bạn nên chọn Page Attribute nào?

Đa số theme nếu được thiết kế thân thiện với các Page Builder plugin như Astra hay Suki (hoặc các theme thương tự) thì bạn nên chọn Page Builder (theme) attribute, bởi vì các tuỳ chỉnh cho header như Transparent Header, Sticky Header,…sẽ tương thích rất tốt với Qubely và cũng hạn chế được lỗi xảy ra.

Với những theme khác không có Page Builder (theme), bạn nên chọn Qubely Full Width thay vào đó.

Chon Page Atributes
Chọn Page Builder (theme) nếu có

Bước #3: Bắt đầu tạo landing page với Qubely Gutenberg

Giống như các Page Builder khác, bạn có 2 cách bắt đầu khi tạo một trang mới.

  1. Bắt đầu với mẫu thiết kế sẵn. Qubely Gutenberg cho phép bạn IMPORT mẫu tạo sẵn với thư viện mẫu tích hợp bao gồm từng section và toàn trang. Điều tôi thích là khi bạn IMPORT các hình ảnh minh hoạ sẽ không tự động thêm vào media của WordPress (Các Page Builder khác tự động sideload luôn ảnh vào media của WordPress và bạn phải tốn thời gian xoá nó).
  2. Bắt đầu với trang trắng. Bạn tự thiết kế theo ý thích sáng tạo của mình. Tuy nhiên, bạn cần ghi nhớ là ROW block đóng vai trò như section. Tất cả các Gutenberg block phải được nằm trong vùng chứa ROW block.
Tham khảo thêm:  Cách tạo BLOG – [Phần 2]: Học Wordpress Căn Bản
Trang Tao San Trong Qubely
Các trang mẫu được thiết kế sẵn (Starter Pack)
Section Tao San Trong Qubely
Các Section mẫu được thiết kế sẵn (Sections)

Row block là block cực quan trọng khi bạn thiết kế trang bằng Qubely Gutenberg bởi vì nó giúp bạn kiểm soát giao diện di động (Reponsive), tách biệt từng section với nhau, tạo được các hiệu ứng separate divide, tùy chỉnh vùng đệm và… Fullwidth.

Row Block Trong Qubely
Row Block (Qubely)
Luon Chon Full Width Row Block
Luôn chọn FULLWIDTH ở Block ROW (Qubely)

Hầu hết các bạn mới thường có thói quen thêm block vào trang theo trình bày từ trên xuống. Gây ra tình trạng rối mắt, không kiểm soát được vùng đệm (padding) hay lề (margin). Dẫn đến không kiểm soát được cả giao diện di động.

Co Row Block Va Khong Co Row Block
Nếu không bỏ vào Row Block bạn sẽ không kiểm soát được vùng đệm padding, margin, content position,…

Quy tắc nằm lòng với mọi Page Builder và cả Qubely Gutenberg là luôn nhóm các block (hay element) vào từng section riêng biệt để kiểm soát.

Giao Dien Di Dong
Kiểm soát hiển thị trang trên di động và máy tính bảng (Responsive)
Chú Ý

Nhớ bỏ block đầu và cuối để tránh bị “count” một block element và dẫn đến có một khoảng trắng trên cùng sau khi bạn tạo xong trang.

Lời kết…

Bạn không thể đòi hỏi Gutenberg giống như với các Page Builder quá ổn định sau thời gian dài phát triển trên thị trường như Elementor, Beaver Builder, Brizy, Thrive Architect hay Divi.

Những trang đã tạo bằng Gutenberg cũng sẽ KHÔNG gây xung đột một khi bạn cài đặt những Page Builder sau này (khi bạn có ý định chuyển sang dùng sang Page Builder cho dễ hơn).

Bạn có thể tham khảo trang Sales Page Shortpixel của CuongThach. Tôi dùng Qubely để thiết kế khá đơn giản.

Trong quá trình thực hiện, nếu bạn có những thắc mắc hãy để lại bình luận bên dưới, tôi sẽ cùng thảo luận với bạn.

5 1 vote
Đánh Giá Bài Viết
Hướng dẫn cách tạo landing page bằng Gutenberg miễn phí

Tham gia cộng đồng blogger

Cùng học hỏi và chia sẻ kinh nghiệm blogging từ cộng đồng blogger trên khắp mọi miền đất nước.

Theo dõi
Thông báo qua email khi
guest
Đánh Giá Bài Viết
Cảm nhận của bạn về bài viết
Lưu ý: Nếu đây là lần đầu tiên bình luận trên blog CuongThach thì bình luận của bạn sẽ cần phê duyệt để hạn chế spammer bot. Bạn sẽ nhận được email thông báo ngay khi bình luận của bạn được phê duyệt và mỗi khi bình luận của bạn được trả lời. Xin lỗi nếu bạn cảm thấy không hài lòng trong trường hợp này!
Banner 1
2 Bình luận
Inline Feedbacks
View all comments
Chinh
Chinh
Khách
21/03/2020 5:15 Chiều
Đánh Giá Bài Viết :
     

Quy tắc nằm lòng với mọi Page Builder và cả Qubely Gutenberg là luôn nhóm các block (hay element) vào từng section riêng biệt để kiểm soát.

Cái này là sao chưa hiểu Cường ơi?