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:
- 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)
- 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.
- 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.
- 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,…
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.
- Qubely Full Width. Tạo trang với chiều rộng toàn trang và có header hay footer của theme.
- 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.
Bên cạnh đó theme WordPress cũng sẽ thường có sẵn 2 Page Attribute đó là
- Default template. Chiều rộng trang thường sẽ mặc định như cách post trình bày.
- 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
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 đó.
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.
- 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ó).
- 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.
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.
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.
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.
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.
