Cách tạo trang đích bằng Trình chỉnh sửa khối trong WordPress

Chưa được phân loại

Tự hỏi liệu có thể tạo một trang đích với trình chỉnh sửa khối được phát hành như một phần của WordPress 5.0 không? Nó thực sự là, và bài đăng này sẽ chỉ cho bạn cách thực hiện.

Nhờ vào cách tiếp cận “khối” mới, giờ đây bạn có thể thiết lập các phần anh hùng, lời kêu gọi hành động (CTA) và các yếu tố quan trọng khác của trang đích.

Để giúp bạn tận dụng chức năng mới này, tôi sẽ chỉ cho bạn chính xác cách tạo trang đích bằng trình chỉnh sửa khối – từng bước.

Trình chỉnh sửa khối mới trong WordPress là gì?

Trình chỉnh sửa khối là một trình chỉnh sửa nội dung hoàn toàn mới trở thành trình chỉnh sửa mặc định kể từ WordPress 5,0. Trong quá trình phát triển, biên tập viên mới được gọi là “Gutenberg”. Tuy nhiên, vì nó đã trở thành một phần của cốt lõi, bây giờ nó chỉ là “Trình chỉnh sửa WordPress” hoặc “trình chỉnh sửa khối” nếu bạn muốn cụ thể hơn.

Nếu bạn không chắc tôi đang nói về điều gì, chúng tôi đã viết một số bài đăng trên trình chỉnh sửa mới. Bạn có thể nhận được giới thiệu cơ bản ở đây, và một hướng dẫn chung hơn ở đây.

Hoặc, nếu bạn đã quen thuộc với trình chỉnh sửa mới, chỉ cần tiếp tục đọc để tìm hiểu cách sử dụng nó để tạo trang đích…

Một chuyến tham quan nhanh về giao diện trình chỉnh sửa khối

Bây giờ trước khi chúng ta bắt đầu với quá trình xây dựng, đây là một chuyến tham quan nhanh có giao diện người dùng của trình chỉnh sửa khối.

Để thêm các khối mới, bạn sẽ làm việc trong cửa sổ bật lên ở bên trái. Và khi bạn đã thêm một khối, bạn sẽ có thể tùy chỉnh thông tin quan trọng, chẳng hạn như màu sắc, trong thanh bên ở bên phải:

Có năm phần duy nhất để phân chia các khối mà bạn có thể sử dụng:

  • Các khối phổ biến – chứa tất cả các yếu tố phổ biến như đoạn văn, tiêu đề, danh sách, trích dẫn và các yếu tố nội dung cơ bản khác.
  • Định dạng – tốt cho việc thêm mã tùy chỉnh, chỉnh sửa khối bằng trình chỉnh sửa WP (cổ điển) hoặc thêm bảng.
  • Các yếu tố bố cục – có các yếu tố để cải thiện bố cục tổng thể, như các cột.
  • Widget – cho phép bạn thêm các widget WordPress thông thường vào thiết kế của mình.
  • Embeds – giúp bạn nhúng nội dung từ các nền tảng bên ngoài, như YouTube, Twitter, v.v.

Bạn cũng có thể thêm các khối và chức năng mới thông qua các plugin của bên thứ ba. Ví dụ, với Khối rái cá plugin, bạn có thể nhận được các khối mới như bảng giá, lời chứng thực, Google Maps và hơn thế nữa.

Cách tạo trang đích bằng trình chỉnh sửa khối trong WordPress

Để cung cấp cho bạn ý tưởng về những gì bạn sẽ học, đây là trang đích cơ bản mà chúng tôi sẽ xây dựng với trình chỉnh sửa khối mới:

Ngoài vẻ ngoài, thời gian tải nhanh là điều cần thiết cho một trang đích chất lượng tốt. Vì vậy, hãy đảm bảo rằng chủ đề bạn sử dụng tương thích với trình chỉnh sửa khối mới và tải nhanh.

Trang đích cuối cùng sử dụng Trình chỉnh sửa khối mới trong WordPress

Tôi đã chọn Themeisle’s chủ đề Neve miễn phí để tạo trang đích bằng trình chỉnh sửa khối. Ngoài việc miễn phí và nhẹ, Neve được xây dựng để hoạt động tốt với trình chỉnh sửa khối mới và cung cấp cho bạn nhiều tùy chọn bố cục để bạn có thể tạo một trang đích thực sự.

Một khi bạn có thiết lập trang web của bạn, tất cả những gì bạn cần làm là truy cập Trang → Thêm mới và bắt đầu công việc của bạn.

Bước 1: Chọn bố cục trang của bạn

Bố trí

Để cung cấp cho trang đích của bạn đủ không gian, bạn sẽ muốn chọn bố cục không có thanh bên. Một lợi ích khác của việc sử dụng chủ đề Neve là bạn có thể làm điều này khá dễ dàng.

Bạn có thể chọn một bố cục từ phía bên phải trong phần tài liệu. Sử dụng một trong hai bố cục với không có thanh bên là một lựa chọn tốt. Đối với thiết kế thử nghiệm, tôi đã chọn không có thanh bên nào có nội dung được căn giữa (thay vì toàn chiều rộng).

Bước 2: Lập kế hoạch thiết kế trang đích cơ bản của bạn

Tiếp theo, bạn muốn lập kế hoạch cho thiết kế chung của trang đích của mình để bạn biết mình sẽ cần đưa vào những yếu tố nào.

Ví dụ: nếu bạn đang cố gắng bán một dịch vụ, điều cần thiết là trang đích của bạn phải có bảng giá (nếu vậy, plugin Otter Blocks cung cấp cho bạn một khối cho điều đó). Hoặc, nếu bạn đang cố gắng phát triển danh sách email của bạn, bạn có thể muốn có một biểu mẫu chọn tham gia email ở phía trước và trung tâm.

Đối với hướng dẫn này, tôi sẽ sử dụng một ví dụ về một đơn giản trang đích cho hội thảo trên web.

Ngoài việc suy nghĩ về những yếu tố bạn sẽ cần, hãy xem xét cách bạn muốn sắp xếp các yếu tố đó.

Một cách tiếp cận phổ biến là sử dụng mẫu chữ Z. Mẫu này tốt cho các trang có nội dung tối thiểu.

Quy tắc Z dựa trên thực tế là người dùng bắt đầu xem trang từ trái sang phải trên thanh menu, sau đó chuyển đến góc dưới cùng bên trái và sau đó lại chuyển sang phía bên phải (với điều kiện trang không nặng nội dung). Thiết kế này được sử dụng bởi một số nền tảng phổ biến như Shopify, Facebook và nhiều nền tảng khác.

mô hình z

Hãy thoải mái sử dụng bất kỳ loại thiết kế nào cho trang đích của bạn miễn là nó tuân theo các nguyên tắc thiết kế web cơ bản tốt.

Bước 3: Sử dụng các khối để thêm phần tử vào trang đích của bạn

Bây giờ bạn đã có thông tin quan trọng, bạn đã sẵn sàng để bắt đầu xây dựng trang của mình. Thông thường, dễ dàng nhất là chỉ cần bắt đầu xây dựng ở đầu trang và di chuyển xuống.

Đối với ví dụ của chúng tôi, tôi sẽ bắt đầu với dòng tiêu đề chính và tiêu đề phụ.

Đầu đề, tiêu đề phụ và hình nền

chọn bìa

Các Che khối là một lựa chọn tốt cho đầu trang của bạn vì nó cho phép bạn bao gồm một hình ảnh lớn, cũng như văn bản trên đầu trang của hình ảnh đó.

Tôi sẽ sử dụng nó để bao gồm một tiêu đề và tiêu đề phụ trên đầu hình nền với lớp phủ màu cam.

thêm khối

Khi bạn đã thêm khối bìa, hãy tải lên một hình ảnh đẹp cho trang đích của bạn. Để làm cho văn bản của bạn hiển thị rõ hơn, bạn có thể sử dụng thanh bên phải để thêm màu lớp phủ và độ mờ của nền.

Để thêm văn bản, bạn chỉ cần nhấp và nhập.

Lời kêu gọi hành động chính (CTA)

Khi bạn đã hoàn thành với Che khối, bạn có thể thêm CTA chính bên dưới bằng cách sử dụng Nút khối. Bạn có thể sử dụng thanh bên phải để tùy chỉnh màu sắc của nút. Bạn có thể thấy rằng tôi đã thêm một Bắt Đầu nút bên dưới nắp:

cấu trúc bìa

Và đây là cách mọi thứ cho đến nay kết hợp với nhau trong bản xem trước trực tiếp:

xem trước bìa

Chi tiết sản phẩm / hộp tổng quan

Để thêm hộp chi tiết sản phẩm đẹp mắt, bạn có thể sử dụng Phương tiện & Văn bản hộp. Như tên cho thấy, khối này tạo ra một bố cục hai cột với một hình ảnh ở một bên và bất kỳ loại văn bản nào ở bên kia. Tôi quyết định sử dụng một danh sách cho văn bản. Bạn có thể thấy nó dưới đây:

Realign

Để cải thiện bố cục, bạn có thể thêm khoảng trắng giữa phần trước và phần này bằng cách thêm một Spacer khối. Bạn có thể điều chỉnh khoảng cách giữa hai khối thông qua chấm màu xanh lam trên khối miếng đệm.

khối tiếp theo

Sau khi bạn đã thêm nội dung và hình ảnh vào Phương tiện & Văn bản khối. Nó sẽ trông như thế này:

phương tiện và văn bản

Lời kêu gọi hành động cuối cùng (CTA)

Để thêm CTA cuối cùng vào cuối trang đích, bạn có thể sử dụng một CTA khác Nút khối. Hoặc, nếu bạn muốn sử dụng biểu mẫu để thay thế, biểu tượng Plugin WPForms bao gồm riêng của nó Biểu mẫu WPForms khối mà bạn có thể sử dụng để nhúng bất kỳ loại biểu mẫu nào.

Kết hợp tất cả lại với nhau

Sau khi sử dụng tất cả các khối đó để tạo trang đích bằng trình chỉnh sửa khối, đây là một cái nhìn khác về thiết kế trang đích cuối cùng:

Trang đích cuối cùng sử dụng Trình chỉnh sửa khối mới trong WordPress

Mặc dù bạn không thể nhìn thấy nó khi làm việc trong trình chỉnh sửa khối, nhưng mẫu không có thanh bên của Neve cung cấp thiết kế cuối cùng của bạn nhiều khoảng trắng trên giao diện người dùng. Và đó là tất cả để có nó!

Trình chỉnh sửa khối mới không chính xác một trình tạo trang – các tùy chọn tùy chỉnh hiện tại không thể cạnh tranh với các nhà xây dựng trang về mặt bố cục và phong cách. Tuy nhiên, chúng ta sẽ thấy một số tiện ích bổ sung tuyệt vời được phát hành dần dần khi các nhà phát triển quen với trình chỉnh sửa mới vào năm 2019, điều này sẽ thu hẹp khoảng cách và giúp việc tạo trang đích bằng trình chỉnh sửa khối trở nên dễ dàng hơn.

Nếu bạn muốn xem trình chỉnh sửa khối mới so với các trình tạo trang khác cho trường hợp sử dụng này như thế nào, chúng tôi cũng có hướng dẫn về cách xây dựng trang đích với:

Bạn có bất kỳ câu hỏi nào khác về cách tạo một trang đích với trình chỉnh sửa khối trong WordPress 5.0? Hãy cho chúng tôi biết trong các ý kiến!

bởi Pulkit Bhardwaj

Hướng dẫn miễn phí

5 mẹo cần thiết để tăng tốc độ
Trang web WordPress của bạn

Giảm thời gian tải của bạn thậm chí 50-80%
chỉ bằng cách làm theo các mẹo đơn giản.

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai.