Cách tạo layout WordPress custom với Elementor

Mục lục

Bạn có muốn tạo layout trang custom của riêng mình trong WordPress không?

Elementor là page builder WordPress kéo và thả cho phép bạn dễ dàng thiết kế layout WordPress custom mà không cần bất kỳ kiến ​​thức lập trình nào.

Trong bài viết này, WPBeginner Việt Nam sẽ chỉ cho bạn cách dễ dàng tạo layout WordPress custom bằng Elementor chỉ với vài cú nhấp chuột.

Cách tạo layout WordPress custom bằng Elementor

Tại sao và khi nào bạn cần giao diện WordPress custom?

Nhiều theme WordPress miễn phí và cao cấp có nhiều lựa chọn layout cho các loại trang khác nhau. Tuy nhiên, đôi khi, không có layout nào trong số này đáp ứng được yêu cầu của bạn.

Nếu bạn biết cách lập trình PHP, HTML và CSS, thì bạn có thể tạo mẫu trang của riêng mình hoặc thậm chí xây dựng theme con cho website của mình. Tuy nhiên, phần lớn người dùng WordPress không phải là developer, vì vậy option này không phù hợp với họ.

Sẽ thật tuyệt nếu bạn có thể thiết kế layout trang chỉ bằng giao diện kéo và thả phải không?

Đây chính xác là những gì Elementor làm. Đây là plugin xây dựng trang WordPress kéo và thả cho phép bạn dễ dàng tạo layout WordPress custom của riêng mình mà không cần bất kỳ kỹ năng lập trình nào.

WordPress + Elementor là sự kết hợp mạnh mẽ cung cấp giao diện người dùng trực quan cho phép bạn xây dựng layout custom với bản xem trước trực tiếp. Nó đi kèm với nhiều mô-đun sẵn sàng sử dụng cho mọi loại thành phần thiết kế web.

Elementor có một số mẫu được thiết kế chuyên nghiệp mà bạn có thể tải ngay lập tức và sử dụng làm điểm khởi đầu. Nó hoạt động với tất cả các theme WordPress tuân thủ tiêu chuẩn và tương thích với tất cả các plugin WordPress phổ biến. Để biết thêm chi tiết, hãy xem bài đánh giá Elementor đầy đủ của WPBeginner Việt Nam.

Sau khi đã nói như vậy, chúng ta hãy cùng xem cách tạo layout WordPress custom bằng Elementor.

Bắt đầu với Elementor

Đầu tiên, bạn sẽ cần mua plugin Elementor Pro. Đây là phiên bản trả phí của plugin Elementor miễn phí và cho phép bạn truy cập vào các tính năng bổ sung và 1 năm hỗ trợ.

Tiếp theo, bạn sẽ cần cài đặt và kích hoạt plugin Elementor. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của WPBeginner Việt Nam về cách cài đặt plugin WordPress.

Khi kích hoạt, bạn phải truy cập Elementor » Settings trang để cấu hình cài đặt plugin.

Bật Elementor cho các bài đăng khác nhau

Tại đây, bạn có thể bật Elementor cho các loại bài đăng khác nhau. Theo mặc định, nó được bật cho các bài đăng và trang WordPress của bạn. Nếu bạn có các loại bài đăng custom trên website của mình, thì chúng cũng sẽ xuất hiện ở đây và bạn cũng có thể bật chúng.

Bạn có thể loại trừ hoặc bao gồm các vai trò người dùng có thể sử dụng Elementor khi viết bài đăng hoặc trang. Theo mặc định, page builder chỉ được bật cho quản trị viên.

Sau đó, đừng quên nhấp vào nút ‘Lưu thay đổi’ để lưu cài đặt của bạn.

Tạo layout WordPress custom với Elementor

Đầu tiên, bạn cần tạo một trang hoặc bài đăng mới trên trang WordPress của mình. Trên màn hình chỉnh sửa bài đăng, bạn sẽ thấy nút ‘Chỉnh sửa bằng Elementor’ mới.

Chỉnh sửa bằng Elementor

Khi nhấp vào đó, giao diện người dùng Elementor sẽ được mở, tại đây bạn có thể chỉnh sửa trang của mình bằng page builder kéo và thả của Elementor.

Bạn có thể thêm các phần và xây dựng trang của mình từ đầu hoặc có thể chọn một mẫu.

Chỉnh sửa trang bằng Elementor

Mẫu cung cấp cho bạn cách nhanh chóng và dễ dàng để bắt đầu. Elementor đi kèm với một số mẫu được thiết kế chuyên nghiệp mà bạn có thể custom nhiều như bạn muốn.

Hãy bắt đầu với một mẫu bằng cách nhấp vào nút ‘Thêm mẫu’.

Thao tác này sẽ mở ra một popup nơi bạn có thể xem các mẫu khác nhau có sẵn. Bạn nên tìm mẫu tương tự với mẫu bạn muốn cho layout trang của mình.

Trong ví dụ này, chúng ta sẽ xem xét các mẫu trang 404.

Chọn một mẫu trong Elementor

Bây giờ, bạn cần nhấp để chọn mẫu bạn thích, sau đó nhấp vào nút ‘Chèn’ để thêm vào trang của bạn.

Elementor sẽ tải mẫu cho bạn.

Bây giờ bạn có thể bắt đầu chỉnh sửa mẫu để phù hợp với nhu cầu của mình. Chỉ cần trỏ và nhấp vào bất kỳ phần tử nào để chọn nó và Elementor sẽ hiển thị cho bạn các cài đặt của nó ở cột bên trái.

Trỏ đến bất kỳ phần tử nào và chỉnh sửa nó

Cách bố trí Elementor hoạt động

Bây giờ, chúng ta hãy nói về cách hoạt động của layout Elementor.

Bố cục Elementor được xây dựng bằng các phần, cột và tiện ích. Các phần giống như các hàng hoặc block mà bạn đặt trên trang của mình.

Mỗi phần có thể có nhiều cột và mỗi phần, cột có thể có kiểu dáng, màu sắc, content riêng, v.v.

Bạn có thể thêm bất cứ thứ gì vào cột và phần của mình bằng cách sử dụng tiện ích Elementor. Các tiện ích này là các loại block content khác nhau mà bạn có thể đặt trong các phần Elementor của mình.

Chỉ cần chọn một tiện ích và thả vào phần hoặc cột của bạn. Có một bộ tiện ích mở rộng có sẵn bao gồm tất cả các yếu tố thiết kế web phổ biến mà bạn có thể nghĩ đến.

Thêm block vào layout

Bạn có thể thêm hình ảnh, văn bản, tiêu đề, thư viện ảnh, video, bản đồ, icon, lời chứng thực, slider, vòng quay và nhiều hơn nữa.

Bạn cũng có thể thêm các tiện ích WordPress mặc định và thậm chí cả các tiện ích được tạo bởi các plugin WordPress khác trên website của bạn. Ví dụ, nếu bạn đang sử dụng Biểu mẫu WP để tạo các form khác nhau cho website của bạn, bạn có thể sử dụng tiện ích của nó trong Elementor.

Sau khi chỉnh sửa xong, bạn có thể nhấp vào mũi tên bên cạnh nút ‘Xuất bản’ để xem các option lưu khác nhau.

Nhấp vào option lưu

Ghi chú: Việc lưu layout trang sẽ không xuất bản trang đó trên trang WordPress của bạn, nhưng sẽ lưu trang đó.

Bây giờ bạn có thể xem trước trang của mình hoặc đi tới dashboard WordPress.

Thao tác này sẽ đưa bạn trở lại trình chỉnh sửa bài đăng WordPress. Bây giờ bạn có thể lưu trang WordPress của mình hoặc xuất bản nó trên website của bạn.

Cập nhật hoặc xuất bản trang đã chỉnh sửa bằng Elementor

Tạo mẫu của riêng bạn trong Elementor

Elementor cho phép bạn lưu các layout custom của riêng bạn dưới dạng mẫu. Theo cách này, bạn có thể sử dụng lại các mẫu của riêng mình để tạo các trang mới thậm chí còn nhanh hơn trong tương lai.

Chỉ cần chỉnh sửa trang bạn muốn lưu dưới dạng mẫu bằng Elementor.

Trong giao diện trình xây dựng Elementor, hãy nhấp vào mũi tên bên cạnh nút ‘Xuất bản’. Bây giờ bạn sẽ thấy nhiều option hơn để lưu bài đăng của mình. Chỉ cần nhấp vào option ‘Lưu dưới dạng Mẫu’.

Tùy chọn lưu dưới dạng mẫu trong Elementor

Thao tác này sẽ mở ra một popup yêu cầu bạn nhập tên cho mẫu của mình.

Sau khi nhập tên, hãy nhấp vào nút ‘Lưu’.

Lưu trang của bạn vào thư viện

Lần tới khi bạn tạo layout trang custom, bạn sẽ có thể chọn layout đó từ tab ‘Mẫu của tôi’.

Tất cả những gì bạn phải làm là nhấp vào nút ‘Chèn’ để có layout trang custom.

Xem layout trang trong thư viện

Bạn cũng có thể xuất mẫu này và sử dụng trên các website WordPress khác bằng Elementor.

Chỉ cần nhấp vào icon 3 chấm rồi nhấp vào option ‘Xuất’.

Xuất mẫu layout trang

Từ đây, bạn có thể tải mẫu xuống máy tính của mình.

Các lựa chọn thay thế Elementor để tạo layout custom

Bên cạnh Elementor, còn có nhiều page builder đích và website khác cho phép bạn tạo layout custom cho website của mình.

Sau đây là một số lựa chọn thay thế Elementor tốt nhất mà bạn có thể sử dụng:

  • Hạt giống là trình xây dựng website WordPress kéo và thả tốt nhất cho phép bạn tạo layout custom cho các landing page của mình. Có hơn 300 mẫu theme hoặc landing page để lựa chọn. SeedProd cũng cung cấp nhiều option custom và block để tạo các trang tuyệt đẹp. Để biết thêm chi tiết, bạn có thể xem bài đánh giá SeedProd đầy đủ của WPBeginner Việt Nam.
  • Divi là một theme trực quan và page builder. Nó đã có mặt trong ngành hơn 14 năm và cung cấp các tính năng khác nhau để tạo layout WordPress, bao gồm thư viện layout. Có rất nhiều option custom trong trình tạo trực quan và bạn không phải chỉnh sửa bất kỳ code nào.
  • Kiến trúc sư phát triển là page builder mạnh mẽ và tối ưu với người mới bắt đầu mà bạn có thể sử dụng để tạo layout đẹp. Nó đi kèm với hơn 352 mẫu và nhiều option custom. Bạn có thể sử dụng trình tạo hình ảnh giao diện người dùng để chỉnh sửa bất kỳ thành phần nào trên trang. Để biết thêm chi tiết, hãy xem bài đánh giá Thrive Architect của WPBeginner Việt Nam.
  • Beaver Builder là một page builder kéo thả phổ biến khác dành cho WordPress. Nó dễ sử dụng và bạn có thể dễ dàng thiết lập layout cho các trang và bài đăng bằng Beaver Builder. Nó cũng cung cấp các mẫu dựng sẵn cho các landing page, nhưng không nhiều như SeedProd hoặc Divi.

Chúng tôi hy vọng bài viết này giúp bạn học cách tạo layout WordPress custom bằng Elementor. Bạn cũng có thể muốn xem so sánh chuyên gia của WPBeginner Việt Nam về Elementor so với Divi so với SeedProd và lựa chọn của WPBeginner Việt Nam cho phần mềm thiết kế web tốt nhất.

Nếu bạn thích bài viết này, vui lòng đăng ký theo dõi WPBeginner Việt Nam Kênh Youtube cho các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy WPBeginner Việt Nam trên TwitterFacebook.

5/5 - (114 bình chọn)
Facebook
Twitter
LinkedIn
Telegram
Email
Đội Ngũ Biên Tập