Cách tạo đầu trang &chân trang tùy chỉnh với Elementor

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

Bạn không thích cách chủ đề WordPress hiện tại của bạn xử lý đầu trang hoặc chân trang chính của nó? Làm thế nào về việc tùy chỉnh nó với Elementor? Trong hướng dẫn này, chúng tôi cho bạn biết cách tạo đầu trang và chân trang tùy chỉnh với Elementor – từng bước và không yêu cầu kỹ năng viết mã. 🤓

Tại sao Elementor?

Elementor là yêu thích của chúng tôi plugin trình tạo trang cho WordPress và trên thực tế, một trong những công cụ tốt nhất mà bạn có thể sử dụng để tùy chỉnh trang web WordPress của mình mà không cần biết cách viết mã.

Elementor cũng là lựa chọn tốt nhất của bạn nếu bạn không thích đầu trang hoặc chân trang hiện tại của mình trông như thế nào nhưng bạn cũng không muốn thay đổi hoàn toàn chủ đề của mình.

Bạn có thể tìm hiểu thêm về Elementor tại đây 👈 trong bài đánh giá Chuyên sâu về Elementor của chúng tôi.

Những gì bạn cần để tạo đầu trang &chân trang tùy chỉnh với Elementor

Hai điều:

  • plugin Elementor chính – plugin miễn phí
  • Elementor Pro – bản nâng cấp cao cấp trên phiên bản miễn phí của Elementor

👉 Để có được Pro, bạn cần phải đăng ký ở đây. Phiên bản cơ sở của Elementor Pro (cho một trang web) là $ 49 / năm, nhưng đó là tiền được chi tiêu tốt, vì nó cung cấp cho bạn nhiều tính năng thú vị vượt lên trên chỉ đầu trang hoặc chân trang của bạn. Kiểm tra nó ra.

1. Cài đặt Elementor miễn phí và chuyên nghiệp

Quá trình cài đặt Elementor miễn phí cũng giống như bất kỳ plugin nào khác:

  1. Chỉ cần đi đến wp-admin → Plugins → Thêm mớivà nhập “Phần tử” vào hộp.
  2. Cài đặt và kích hoạt.

💡 Đây là một cái riêng biệt hướng dẫn cách cài đặt bất kỳ plugin WordPress nào trong trường hợp bạn cần thêm hướng dẫn.

Để cài đặt tiện ích bổ sung chuyên nghiệp, trước tiên bạn phải đi đến Elementor.com và mua đăng ký. Sau đó, bạn sẽ có thể tải xuống tiện ích bổ sung từ hồ sơ khách hàng của mình.

Tải xuống Elementor

Bạn cũng cần tạo khóa API mới cho bản sao Elementor Pro của mình. Đối với điều đó, nhấp vào các trang web xem trên cùng một trang (ảnh chụp màn hình ở trên), sau đó thêm địa chỉ trang web của bạn vào đó. Bạn sẽ nhận được khóa cấp phép mà bạn sẽ cần nhập khi kích hoạt Elementor Pro trên trang web của mình.

Quay lại wp-admin của bạn và tiếp tục Plugin → Thêm mới một lần nữa. Lần này tải lên kho lưu trữ Elementor Pro theo cách thủ công.
Tiến hành cài đặt và kích hoạt nó.

Sau khi hoàn tất, từ thanh bên chính của wp-admin, hãy chuyển đến Giấy phép → Elementor. Nhập mã giấy phép của bạn ở đó.

Elementor và Elementor Pro hiện đang hoạt động!

2. Tạo một mẫu đầu trang hoặc chân trang trống

Từ thanh bên wp-admin của bạn, hãy đi tới Mẫu. Có lẽ vẫn chưa có gì ở đó.

mẫu trống

Nhấp vào lớn THÊM MẪU MỚI nút.

Từ cửa sổ bật lên, hãy chọn một trong hai Tiêu đề hoặc Chân dựa trên những gì bạn muốn tạo và cũng đặt tên cho mẫu của bạn nếu bạn muốn.

chọn mẫu để tạo đầu trang &chân trang tùy chỉnh với Elementor

Đây là nơi niềm vui bắt đầu! Bạn sẽ thấy Elementor khởi chạy và bạn sẽ có thể bắt đầu làm việc.

Để làm cho mọi thứ nhanh hơn, Elementor sẽ hiển thị cho bạn danh sách các mẫu đầu trang và chân trang được tạo sẵn. Bạn có thể chọn một trong số chúng hoặc bắt đầu làm việc trên đầu trang hoặc chân trang của riêng bạn từ đầu. Sự lựa chọn là tùy thuộc vào bạn.

mẫu đầu trang

3. Đặt bố cục chung cho đầu trang / chân trang của bạn

Đầu tiên, để tạo đầu trang &chân trang tùy chỉnh với Elementor, bạn cần quyết định bố cục chính của đầu trang hoặc chân trang của bạn sẽ là gì.

Ví dụ, tôi sẽ xây dựng một tiêu đề trông hiện đại với logo ở giữa, một menu ở bên trái và một hộp tìm kiếm ở bên phải. Tuy nhiên, bạn có thể tự do xây dựng bất kỳ loại đầu trang nào khác, vì không có giới hạn về thiết kế hoặc những gì bạn có thể bao gồm trong đầu trang hoặc chân trang của mình.

Để bắt đầu, hãy nhấp vào chính nút tùy chỉnh trên đầu trang của bạn để xem Bố trí trong thanh bên:

bố trí đầu trang

Chọn cấu trúc có vẻ tối ưu nhất. Tôi sẽ chỉ đi với ba cột bằng nhau.

3 cột

Nếu bạn muốn, bạn cũng có thể quyết định stretch bố cục hoặc đặt chiều rộng cố định khi bạn tạo đầu trang &chân trang tùy chỉnh với Elementor. Các cài đặt cụ thể ở đây sẽ phụ thuộc vào chủ đề của bạn. Chọn những gì trông đẹp nhất.

bố trí kéo dài

Thêm logo là một bước rất đơn giản, nhưng chỉ với điều kiện là chủ đề hiện tại của bạn xử lý logo theo các nguyên tắc chính thức của WordPress.

Cách gán logo trong bất kỳ chủ đề WordPress nào

Để đảm bảo rằng logo của bạn sẽ được đặt chính xác, trước tiên bạn cần phải đi tới WordPress Customizer → Xác định trang web và gán logo từ đó.

logo trang web

Sau khi hoàn thành, Elementor sẽ có thể nhận nó một cách chính xác.

Trong Elementor, chọn nút Logo trang web chặn từ thanh bên. Đặt nó ở nơi bạn muốn. Nó sẽ tự động tìm nạp logo thực tế của bạn.

logo

Trong cài đặt, bạn có thể chọn cách biểu trưng sẽ hoạt động khi được nhấp vào, đồng thời điều chỉnh kích thước và căn chỉnh của nó.

cài đặt logo

5. Thêm menu

Lấy Menu Điều hướng chặn từ thanh bên Elementor và kéo nó đến nơi bạn muốn bên trong tiêu đề.

khối điều hướng

Dưới đây là những điều chính cần điều chỉnh:

  • Thực đơn – chọn menu cụ thể mà bạn muốn làm nổi bật (bạn có thể chọn từ bất kỳ thứ gì bạn đã đặt Menu giao diện →).
  • Bố tríNgang, Thẳng đứnghoặc Danh sách thả xuống
  • AlignBên trái, trung tâm, Bên phảihoặc Căng để lấp đầy toàn bộ khu vực có sẵn
  • Con trỏ – cách bạn muốn làm nổi bật liên kết hoạt động
  • Hoạt hình – cách bạn muốn con trỏ xuất hiện
thiết đặt điều hướng

Bạn cũng có thể đi vào hai tab khác – Phong cáchTiên tiến để điều chỉnh các chi tiết khác về thiết kế menu của bạn.

NavMenu Addon cho Elementor 🤓 Bạn muốn có nhiều tùy chọn tùy chỉnh hơn nữa? Nhận một plugin miễn phí có tên NavMenu Addon cho Elementor. Nó cung cấp cho bạn các khối menu bổ sung mà bạn có thể sử dụng khi tạo đầu trang và chân trang tùy chỉnh với Elementor. Các Mega Menu khối đặc biệt thú vị.

6. Thêm trường tìm kiếm

Để hoàn thiện thiết kế của mình, tôi sẽ chọn Biểu mẫu tìm kiếm chặn và kéo nó vào cột bên phải của thiết kế tiêu đề của tôi.

khối tìm kiếm

Một vài tùy chọn thú vị ở đó:

  • DaCổ điển, Tối thiểu, Toàn màn hình
  • Chỗ dành sẵn – có thể để trống hoặc đặt một cái gì đó như “tìm kiếm” ở đó
  • Chỉnh, Kích thước – cả hai đều khá tự giải thích
cài đặt tìm kiếm

7. Thêm các yếu tố bổ sung khác

Ngoài ra còn có một số khối khác mà bạn có thể sử dụng khi bạn đang tìm ra cách tạo đầu trang và chân trang tùy chỉnh với Elementor. Bạn có thể thử nghiệm với chúng một cách tự do để có được hiệu quả mà bạn mong muốn.

Elementor cũng cho phép bạn đặt bất kỳ khối Elementor nào khác vào đầu trang hoặc chân trang của mình. Điều này bao gồm văn bản tùy chỉnh, hình ảnh, biểu tượng, bất kỳ thứ gì có thể cải thiện tiêu đề của bạn hơn nữa.

khối đầu trang

8. Xuất bản đầu trang / chân trang của bạn

Điều cuối cùng cần làm là xuất bản tác phẩm của bạn trên trang web và gán nó để thay thế toàn bộ trang web đầu trang / chân trang mặc định của bạn hoặc chỉ trên các trang cụ thể. Có rất nhiều khả năng.

Để làm điều này, nhấp vào chính XUẤT BẢN trong Elementor. Bạn sẽ thấy một cửa sổ bật lên hỏi nơi bạn muốn hiển thị đầu trang hoặc chân trang mới của mình.

Điều kiện

Điều kiện cơ bản nhất là “Toàn bộ trang web”:

toàn bộ trang web

Bạn cũng có thể thử nghiệm với cài đặt này và chọn ra các trang, bài đăng, danh mục riêng lẻ, v.v. Ví dụ: đây là điều kiện để tiêu đề mới chỉ xuất hiện trên nút Sự tiếp xúc trang:

chỉ khi liên hệ

Khi hoàn tất, hãy nhấp vào LƯU &ĐÓNG.

Đầu trang hoặc chân trang mới của bạn hiện đã hoạt động! Ví dụ:

tiêu đề trong hành động

Bạn đã sẵn sàng xây dựng đầu trang &chân trang tùy chỉnh của mình bằng Elementor chưa?

Tôi hy vọng hướng dẫn này hữu ích và bạn đang trên đường đến một đầu trang hoặc chân trang mới tuyệt vời!

Nếu bạn có bất kỳ câu hỏi nào, vui lòng hỏi trong phần bình luận bên dưới. Chúng tôi cũng có nội dung khác liên quan đến Elementor trên blog để giúp bạn cải thiện thiết kế của mình:

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.