Cách tạo một Landing Page – Trò chơi xây dựng nội dung kéo và thả đã trở nên thực sự phổ biến trong những năm gần đây.
Chẳng hạn, nếu bạn truy cập CodeCanyon và thực hiện tìm kiếm nhanh về kéo và thả, bạn sẽ nhận được điều này.
Đó là hơn 220 plugin đáp ứng truy vấn tìm kiếm kéo và thả! Và đừng quên rằng CodeCanyon không phải là tất cả các plugin của WordPress. Có rất nhiều plugin kéo và thả khác có sẵn trên các trang web của bên thứ ba và trong kho lưu trữ plugin chính thức.
Vậy bạn sẽ làm gì khi bạn muốn một số phép thuật xây dựng nội dung kéo và thả?
Chà, nếu bạn có tiền để đầu tư, như tôi đã nói, có nhiều plugin cao cấp (một số trong số chúng tôi đã nói về một trong những đánh giá / so sánh của chúng tôi ). Ngoài ra, bạn có thể chọn một giải pháp tích hợp hơn và chọn toàn bộ chủ đề WordPress đã có sẵn một số chức năng kéo và thả (chúng tôi cũng có một danh sách các giải pháp cho bạn).
Nhưng.
Hôm nay, hãy giữ mọi thứ miễn phí!
Dưới đây là hướng dẫn của chúng tôi về cách tạo trang đích tuyệt vời trong WordPress với trình tạo nội dung kéo và thả miễn phí .
Bản demo
Hãy bắt đầu với phần thú vị. Đây là một ví dụ về những gì có sẵn trong lĩnh vực kéo và thả mà không cần đầu tư gì.
Không có gì quá phức tạp, được cấp, nhưng nó cũng không có gì giống như thiết lập mặc định mà WordPress cho phép bạn làm.
Chỉ để liệt kê một số chi tiết thú vị về trang demo nhỏ đó:
- không có thanh bên,
- phần anh hùng toàn chiều rộng,
- bố trí nhiều cột,
- cột có chiều rộng khác nhau,
- tiêu đề tùy chỉnh,
- cấu trúc đáp ứng đầy đủ.
Vì vậy, bạn có thể tự hỏi:
Cách tạo trang đích trong WordPress bằng cách kéo và thả
Trước tiên, chúng ta sẽ sử dụng hai plugin để thực hiện tất cả điều đó.
- Cái đầu tiên là plugin SiteOrigin Page Builder cùng với gói widget bổ sung .
(SiteOrigin thực sự đã được chỉ ra là giải pháp miễn phí tốt nhất trên thị trường khi so sánh các plugin xây dựng nội dung kéo và thả hàng đầu cho WordPress.)
- Cái thứ hai là plugin Shortcodes Ultimate .
(Có lẽ là plugin shortcodes miễn phí tốt nhất xung quanh. Chúng tôi sẽ sử dụng nó để thêm một số khối nội dung thú vị bổ sung vào cấu trúc trang đích được tạo trước đây của chúng tôi.)
Một số chi tiết khác về các plugin:
- Cả hai đều hoạt động với chủ đề WordPress hiện tại của bạn.
- Bạn có thể sử dụng chúng trên bài viết và trang.
- Bạn làm tất cả công việc của mình bên trong màn hình chỉnh sửa tiêu chuẩn trong WordPress.
- Đầu ra là đáp ứng và thân thiện với thiết bị di động.
- Bạn có thể sử dụng các widget như các khối nội dung trong SiteOrigin.
- Có kiểm soát phiên bản trong SiteOrigin.
Các yếu tố trang đích quan trọng
Hầu hết các trang đích chất lượng thường có các yếu tố sau:
- Trình bày tiêu đề tốt – lớn và táo bạo.
- Các yếu tố bên tối thiểu, chẳng hạn như thanh bên, nội dung chân trang hoặc bất kỳ thứ gì khác có thể gây mất tập trung cho khách truy cập.
- Rõ ràng tập trung vào chỉ một mục tiêu duy nhất. Đây có thể là bán hàng, nhấp vào liên kết hoặc đăng ký bản tin (thường).
- Thuyết trình theo câu chuyện – nơi khách truy cập được thực hiện bằng tay qua từng phần của trang cho đến khi họ đạt được lời kêu gọi hành động cuối cùng.
- Lời kêu gọi hành động – câu hỏi. Yếu tố này cho khách truy cập biết phải làm gì.
- Tốt tách hình ảnh của các phần riêng biệt trên trang.
Chúng tôi có thể liệt kê nhiều yêu cầu hơn nữa, nhưng tôi nghĩ rằng điều này sẽ đủ cho bản demo nhanh của chúng tôi ở đây.
-
Cài đặt plugin
Không có gì lạ mắt ở đây, chỉ cần tải chúng qua trình cài đặt WordPress ( wp-admin> Plugins> Add New ) hoặc qua WordPress.org (các liên kết ở trên). Cài đặt và kích hoạt.
(Đừng quên rằng bạn không chỉ cần plugin SiteOrigin chính mà còn cả gói widget bổ sung.)
-
Tạo một mẫu trang
Quyết định đầu tiên được đưa ra là liệu bạn sẽ tạo trang đích của mình dưới dạng bài đăng WordPress hay trang .
Về mặt kỹ thuật, không có sự khác biệt. Nhưng hãy nhớ rằng hầu hết các chủ đề cho phép bạn sử dụng mẫu toàn chiều rộng (không có thanh bên) cho các trang, trong khi rất ít cung cấp chức năng như vậy cho bài đăng.
Vì vậy, cuối cùng, bạn có thể muốn làm việc với một trang mới .
Khi đã ở trên màn hình Thêm Trang mới, hãy chuyển sang ngay lập tức
Từ đó, bạn có tùy chọn bắt đầu xây dựng một cái gì đó từ đầu hoặc sử dụng một trong các bố cục được xây dựng trước.
Với mục đích của hướng dẫn này, chúng tôi sẽ xây dựng một trang đích trong WordPress từ đầu, nhưng tôi rất khuyến khích bạn cũng nên kiểm tra các bố cục được xây dựng trước đó và xem loại cơ chế nào nằm dưới mui xe ở đó . Mỗi bố cục đó là hoàn toàn có thể chỉnh sửa, không có gì được ẩn.
Có hai loại vùng chứa chính trong SiteOrigin:
- hàng,
- vật dụng.
Về cơ bản, để đặt bất kỳ loại nội dung nào trên trang đích của bạn, trước tiên bạn cần tạo một hàng, sau đó thêm nội dung của bạn dưới dạng tiện ích.
-
Tạo hàng cho trang đích của bạn
Được rồi, vì vậy để bắt đầu, bạn cần có một ý tưởng chung về những gì bạn muốn trang đích của bạn trông như thế nào!
Vì tôi cần một ví dụ điển hình để làm việc ở đây, mục đích của trang đích này sẽ là để quảng bá hướng dẫn (không tồn tại) của bạn gái tôi trên cách làm thế nào để may một chiếc mũ beanie mát mẻ trong vòng chưa đầy 20 phút.
Vì vậy, bằng cách nhìn, tôi cần bốn hàng riêng lẻ:
- phần tiêu đề chính,
- phần chi tiết – phần có ba hình ảnh đó,
- phần về,
- phần chọn tham gia.
Bắt đầu từ đầu:
Hàng tiêu đề
Hàng tiêu đề là một điều rất đơn giản để làm, nhưng nó có thể trông thực sự tuyệt vời!
Đây là cách thực hiện:
Nhấp vào nút row trong giao diện SiteOrigin chính:
Sau đó, thay đổi bố cục thành 1 cột và bấm Chèn :
Bây giờ, hãy thêm một widget mới. Nhấp vào nút Thêm tiện ích :
Sau đó, chuyển sang Gói Widgets của Wikipedia, và chọn tiện ích của Trang web Khởi động Anh hùng:
Nhấp vào biểu tượng cờ lê ở góc trên bên phải của hàng mới của bạn:
Từ đó, đi tới phần Bố cục. Bố cục ở thanh bên phải và từ trình đơn thả xuống Bố cục của Bố cục, hãy chọn Toàn bộ Độ rộng kéo dài. Điều này sẽ kéo dài toàn bộ hàng, cuối cùng có thể có chiều rộng đầy đủ hình ảnh trong nền.
Tuy nhiên, để đạt được hiệu ứng toàn chiều rộng, chúng ta cần thêm một vài bước. Đầu tiên, hãy chỉnh sửa tiện ích của Hero:
Ở đó, thêm một khung hình Hero Hero mới:
Nhấp vào khung mới đó để chỉnh sửa nó.
Đây là nơi bạn có thể đặt tiêu đề của bạn.
Đây là của tôi.
Ngay bên dưới toàn bộ khối khung đó, có một phần được gọi là Nền Bối cảnh. Trong đó, bạn có thể đặt hình nền toàn chiều rộng của mình. Nó hoạt động giống như bất kỳ phần khác của phương tiện truyền thông trong WordPress. Chỉ cần nhấp vào nút Chọn Media và tải lên hình ảnh từ máy tính của bạn.
Sau khi hoàn tất, bạn chỉ cần nhấp vào nút Chính Done ở góc dưới bên phải. Khi thực hiện xong, bạn có thể nhấp vào nút Xem trước, xem trước trên toàn bộ trang của mình.
Mát mẻ! Đó là một khởi đầu tốt!
Các hàng chi tiết
Hàng này là nơi tôi đặt ba hình ảnh nhỏ trong thiết kế của mình. Đây cũng là nơi đầu tiên chúng tôi sẽ sử dụng plugin Shortcodes Ultimate.
Đây là cách tôi sẽ tạo ra nó.
Bắt đầu bằng cách thêm một hàng mới (giống như trước đây). Nhưng lần này, tôi muốn ba cột và tôi muốn chúng là số chẵn.
Sau đó, trong mỗi cái, tôi sẽ thêm một tiện ích đơn giản có tên là Site SiteOrigin Editor ‘:
Về cơ bản, đây là một cửa sổ soạn thảo tiêu chuẩn với tất cả khả năng chỉnh sửa văn bản của WordPress. Những gì tôi sẽ sử dụng nó là một khối nội dung rất đơn giản – chỉ là một hình ảnh và một số văn bản. Giống Như:
Tiếp theo, tôi sẽ thêm một số phép thuật Ultimate Shortcodes tại đây! Mục tiêu của tôi là làm cho hình ảnh đó xuất hiện trên màn hình sau một chút chậm trễ và sử dụng một hình ảnh động đơn giản.
Để thực hiện điều đó, tôi nhấp vào nút Chèn mã ngắn ở gần đầu màn hình trình chỉnh sửa:
Những gì bạn sẽ thấy là tất cả các mã ngắn của Ultimate. Điều này có thể hơi đáng sợ lúc đầu, nhưng thực sự nó là một hệ thống rất thân thiện với người dùng và có một số tài liệu thực sự tốt có sẵn .
Mã ngắn tôi sẽ sử dụng có tên là Animation:
Hãy thử nghiệm với các tùy chọn có sẵn trong cửa sổ cấu hình đó cho đến khi bạn thấy một cái gì đó mà bạn thực sự thích. Có một nút nhỏ Live Live Preview ở phía dưới để giúp bạn giải quyết.
Tuy nhiên, hiện tại, chúng tôi sẽ tăng tốc mọi thứ và chỉ cần sử dụng mã ngắn được tạo sẵn ngay bên trong cửa sổ trình chỉnh sửa. Chỉ cần đặt mã sau đây xung quanh hình ảnh của bạn:
[su_animate type=”flipInY” delay=”1″]YOUR_IMAGE_HERE[/su_animate]
Làm như thế này (vì vậy shortcode nằm xung quanh hình ảnh):
Điều quan trọng cần lưu ý là tham số độ trễ được đặt thành 1 giây .
Tiếp theo, tôi tạo thêm hai khối soạn thảo giống như khối này và thêm các mã ngắn tương tự ở đó, nhưng tôi đang gán các độ trễ khác nhau cho chúng ( 2 giây cho khối thứ hai và 3 giây cho khối thứ ba). Điều này sẽ cho chúng ta một sự tiến triển tốt đẹp.
Đây là những gì hàng mới của tôi trông giống như bây giờ:
Và đây là những gì nó trông giống như trên trang đích.
Tại thời điểm này, tôi có lẽ cũng nên đề cập rằng mọi tiện ích và mọi hàng có thể được sắp xếp với kéo và thả . Điều này làm cho mọi thứ thực sự đơn giản để chỉnh sửa công việc. Đây là bản demo:
Các hàng về Giới thiệu
Hàng về Giới thiệu về cơ bản, sử dụng các yếu tố phụ tùng cơ bản giống nhau – Các khối Chỉnh sửa Trang web Khởi động – nhưng nó có hai cột thay vì ba cột.
Vì vậy, tạo một hàng mới và đặt nó để chứa 2 cột. Sau đó, đặt các cột được chia theo tỷ lệ vàng và từ Từ phải sang trái. Khác Giống như vậy.
SiteOrigin rất hữu ích ở đây. Tỷ lệ vàng chỉ là một trong nhiều tỷ lệ được tạo sẵn để lựa chọn. Hãy thử nghiệm với những người khác là tốt:
Cuối cùng, đây là những gì nó trông giống như trên trang đích.
Hàng chọn tham gia
Đây là hàng cuối cùng của chúng tôi và thực sự là hàng quan trọng nhất cho bất kỳ trang đích nào – đó là nơi lời mời hành động.
Tôi đang sử dụng một hàng ba cột và bắt đầu với tỷ lệ được đặt thành Số chẵn. Tuy nhiên, tôi sẽ điều chỉnh cột giữa ngay lập tức để chỉ chiếm 20% toàn bộ chiều rộng. Thích như vậy:
Như bạn có thể thấy, SiteOrigin giúp điều chỉnh độ rộng của bất kỳ cột nào thực sự dễ dàng. Bạn chỉ cần nhấp vào chiều rộng hiện tại và nhập bất kỳ giá trị nào bạn muốn.
Bây giờ, các cột của tôi.
- Cột đầu tiên là nơi tôi đặt một đoạn văn bản ngắn mời mọi người rời khỏi địa chỉ email của họ để tải xuống. Chỉ cần một tiện ích đơn giản của Site SiteOrigin Editor tại đây.
- Khối thứ hai cũng không có gì lạ mắt. Tôi chỉ sử dụng biểu tượng mũi tên để trỏ đến hình thức chọn tham gia sẽ được đặt ở bên phải. Một lần nữa, được thực hiện với tiện ích của Trình chỉnh sửa trang web Siteigin
- Cột thứ ba là nơi phép màu xảy ra. Đây là nơi tôi sử dụng một widget từ plugin gửi email của mình. Tiện ích đó sẽ đảm nhiệm việc đặt biểu mẫu đăng ký hoạt động ngay trên trang và nối nó với phần mềm email của tôi (kiểm tra với nhà cung cấp email của riêng bạn để tìm hiểu cách làm cho phần này hoạt động).
Cuối cùng, đây là hàng cuối cùng của tôi trong trình tạo trang đích kéo và thả:
Và đây là những gì nó trông giống như trên trang đích trong WordPress:
Tất cả các trang đích cùng nhau
Ở giai đoạn này, công việc đã hoàn thành và bạn có thể tận hưởng trang đích mới của mình được xây dựng với một số thủ thuật kéo và thả. Của tôi đã trở nên khá đẹp, tôi nghĩ vậy. Kiểm tra xem nó:
Xây dựng một cái gì đó như thế này thực sự đơn giản với SiteOrigin và Shortcodes Ultimate. Khi bạn có ý tưởng của mình, bạn không cần sự giúp đỡ của nhà thiết kế. Việc bạn có thể tự tạo tất cả những thứ đó làm cho những plugin đó trở nên hữu ích.
Cuối cùng, quá trình Tạo Website miễn phí được miêu tả ở đây hoạt động với tất cả các chủ đề của chúng tôi, vì vậy điều duy nhất bạn bị hạn chế là sự sáng tạo của bạn.
Vui lòng xem mục này trong tài liệu ThemeIsle của chúng tôi để biết phiên bản ngắn hơn của hướng dẫn này.
Nhưng bạn nghĩ gì? Bạn có bất kỳ câu hỏi về cách quá trình này hoạt động? Hoặc có thể bạn có một trang đích của riêng mình mà bạn muốn cho chúng tôi xem.
