Thiết kế một trang web chuyên nghiệp không phải dành cho tất cả mọi người, đặc biệt là tất cả chúng ta đều cảm thấy rằng chúng ta hoàn toàn cần phải trở thành một chuyên gia viết mã và thiết kế web. Ngày nay, chúng tôi thấy các công cụ mới xuất hiện cho hệ sinh thái WordPress, nhằm cung cấp giải pháp thiết kế trang web dễ dàng hơn bao giờ hết và điều này nằm trong tầm tay của hầu hết những người mới bắt đầu.
Về thiết kế bố cục WordPress, chúng tôi đã phải gửi plugin Trực quan Composer, đây chắc chắn là một trong những công cụ tốt nhất khi nói đến thiết kế bố cục. Tuy nhiên, cần lưu ý rằng giải pháp này không phù hợp cho tất cả mọi người. Đây là lý do tại sao trong hướng dẫn này, chúng tôi sẽ giới thiệu cho bạn nhiều hơn về Plugin WordPress Elementor, là một Plugin WordPress freemium (miễn phí, nhưng có thể mở rộng theo đăng ký).
Nơi nhận Elementor cho WordPress
Chúng tôi nghiêm túc xem xét việc giúp bạn thấy tiềm năng của plugin và giải pháp miễn phí sẽ giúp bạn bắt đầu mà không phải trả một xu nào. Giải pháp miễn phí này có sẵn trên WordPress.org. Là một Plugin WordPress, cái sau được cài đặt giống như bất kỳ cái nào khác plugin từ bảng điều khiển.
Nếu plugin quản lý để đáp ứng hoàn toàn cho bạn, bạn sẽ có thể có được giấy phép hoàn chỉnh với tất cả các chức năng trên trang web nguyên tố chính thức.
Các tính năng chính của Elementor
Trước khi bắt đầu hướng dẫn với tổng quan về plugin, trước tiên chúng tôi sẽ giới thiệu cho bạn các tính năng chính của plugin (phiên bản miễn phí và phiên bản đầy đủ).
| phiên bản miễn phí | Phiên bản đầy đủ |
|---|---|
| Nhiều cột | Menu điều hướng, bài viết |
| Mô-đun nội dung, tiêu đề | Mô-đun WooCommerce (sản phẩm, danh mục) |
| Mô-đun video, hình ảnh, băng chuyền, phòng trưng bày, Soundcloud | Tích hợp Facebook (trang, nút, bình luận) |
| Mô-đun chia sẻ | giá bảng |
| Mô-đun HTML | Danh mục đầu tư, Biểu mẫu |
| Module cho widget WordPress | Mô-đun nghiên cứu |
Lưu ý rằng đây là danh sách đầy đủ các tính năng khác nhau được cung cấp bởi plugin. Bạn sẽ tìm thấy thêm chi tiết trong khám phá trang web của họ.
Bắt đầu với Elementor
Chúng tôi sẽ không trình bày toàn bộ quá trình cài đặt ở đây. Vì đây là một plugin WordPress, quy trình cài đặt đã được giải thích trong một hướng dẫn trước. Tuy nhiên, sau khi cài đặt, bạn sẽ được đưa đến trang chủ của plugin.
Nếu bạn có trang này trên màn hình, thì bạn đã cài đặt thành công Plugin phần tử. Chúng tôi hiện đang sử dụng phiên bản đầy đủ cho hướng dẫn này, nhưng giao diện không được quá khác so với phiên bản miễn phí.
Trước khi đến giao diện chỉnh sửa, tôi sẽ mời bạn đăng ký bản quyền. Điều này chỉ hợp lệ cho những người đã chọn phiên bản đầy đủ. Nếu bạn có phiên bản miễn phí, bạn có thể đi đến phần tiếp theo. Để đăng ký giấy phép, bạn sẽ thấy một thông báo trên WordPress sẽ nhắc bạn đăng ký giấy phép của mình.
Vì vậy, chỉ cần nhấp vào nó để chuyển đến trang đăng ký và nhấp vào Kích hoạt.
Thông thường, bạn sẽ cần trang xác nhận của mình nếu giấy phép của bạn hợp lệ.
Nếu bạn không đến trang này, tôi mời bạn liên hệ với các nhà phát triển của plugin để biết thêm hỗ trợ với vấn đề.
Cách sử dụng Elementor
Elementor hoạt động trên Trang và Bài đăng trên WordPress. Cho dù bạn đang sử dụng giao diện cổ điển hay giao diện Gutenberg mới, bạn sẽ thấy một nút nhắc bạn sử dụng trình tạo Elementor.
Trên thực tế, bạn sẽ không cần phải chỉnh sửa bài viết của mình bằng Elementor. Do đó, tôi mời bạn chỉ sử dụng plugin trên các trang. Bằng cách nhấp vào nút, bạn sẽ truy cập vào giao diện thiết kế Elementor mang đến không khí vui nhộn (dành cho những người sử dụng WordPress Customizer).
Vì vậy, bạn có ở bên trái các điều khiển khác nhau do plugin cung cấp và ở bên phải, bạn có bản xem trước trực tiếp các thay đổi của mình. Trong hướng dẫn này, chúng tôi đang sử dụng chủ đề WordPress Twenty Sixteen.
Phần tử
Các phần trong Elementor là các nhóm khối chức năng mà Elementor cung cấp. Số lượng phần phụ thuộc vào việc bạn có đang sử dụng phiên bản đầy đủ hay không và liệu bạn có đang sử dụng WooCommerce, Yoast SEO hoặc các plugin tương thích khác. Tùy thuộc vào những điều kiện này, bạn sẽ có nhiều hay ít phần trên giao diện của mình. Vì chúng tôi đang sử dụng phiên bản đầy đủ với plugin WooCommerce được kích hoạt, giao diện của chúng tôi trông như thế này.
Cách đặt khối Elementor
Khi bạn mở rộng một phần, bạn sẽ tìm thấy các Khối nguyên tố. Các khối Elementor khác nhau được đặt bằng cách "Kéo & Thả" trên khu vực được đánh dấu bằng các đường chấm.
Cách chọn bố cục trên Elementor
Trước khi thêm khối trên Elementor, bạn cần nhớ chọn bố cục bằng cách nhấp vào nút "+" trên phần được đánh dấu.
Tùy theo nhu cầu mà bạn sẽ lựa chọn cách bài trí sao cho phù hợp nhất. Khi bạn đã chọn một bố cục, bạn sẽ có một hình đại diện của phần đó trên cùng một khu vực được đánh dấu. Phần này sẽ hiển thị cùng một số cột tương ứng với sự lựa chọn của bạn. Trong trường hợp của tôi, tôi đã chọn một cột có 3 cột.
Các khối khác nhau có dấu "+" bên trong, là các khu vực có thể chấp nhận các khối Elementor. Nếu bạn thêm khối Elementor mà không chọn bố cục trước, bố cục cột đơn sẽ được chọn theo mặc định.
Các phần của phần tử có thể được sắp xếp lại thứ tự với nhau, tuân theo cùng một nguyên tắc “kéo và thả”. Bạn cũng có thể xóa một phần, nếu bạn không muốn sử dụng nó nữa.
Đây là ví dụ về một phần chứa 2 khối là khối tiêu đề và khối văn bản.
Cách sử dụng các công cụ thiết kế khác
Sau khi bạn hoàn thành thiết kế của mình, một trong những điều bạn muốn làm là lưu công việc của mình. Bạn sẽ tìm thấy tùy chọn này ở cuối phần hiển thị các phần Elementor khác nhau.
Bạn có thể chọn lưu trực tiếp (Xuất bản) và lưu dưới dạng bản nháp hoặc dưới dạng mẫu. Chúng ta sẽ khám phá thêm những điểm khác nhau này ở phần sau.
Trong quá trình thiết kế của mình, bạn cũng có thể muốn xem trước các thay đổi mà không có giao diện bổ sung của Elementor. Tất cả những gì bạn phải làm là nhấp vào biểu tượng con mắt.
Nó xảy ra rằng trong quá trình thiết kế, xảy ra lỗi (một hành động không tự nguyện). Trong trường hợp này, Elementor cung cấp một lịch sử, cho phép bạn điều hướng qua tất cả các hành động của mình.
Điều này sẽ cho phép bạn dễ dàng quay trở lại.
Tùy chọn “Trình duyệt”, xuất hiện ngay trước nút lịch sử, cho phép bạn sửa đổi thêm các phần khác nhau liên quan đến trình duyệt mà khách truy cập sử dụng. Tùy chọn này cho phép bạn truy cập vào việc sửa đổi nâng cao cấu trúc phần (chiều rộng cột). Bạn phải thực hiện các thay đổi ở đây rất cẩn thận.
Nút "Cài đặt" cho phép bạn sửa đổi một số tùy chọn cụ thể cho trang như tiêu đề, hình ảnh nổi bật hoặc trạng thái trong số những tùy chọn khác.
Đó là nó cho hướng dẫn này, chúng ta sẽ khám phá Elementor nhiều hơn trong hướng dẫn tiếp theo của chúng tôi. Đừng ngần ngại xem qua Trang web chính thức cung cấp nhiều ví dụ thành công hơn.
