Ở bài trước mặc dù chúng ta chỉ đang thực hành xây dựng một giao diện Landing Page rất cơ bản bằng Elementor nhưng thông qua đó bạn đã biết qua hầu hết các thao tác sử dụng Elementor mà sẽ sử dụng thường xuyên.
Ngoài các thao tác cơ bản ấy thì Elementor cũng có rất nhiều tính năng khác mà trong khuôn khổ bài thực hành có thể chưa có dịp sử dụng, nhưng mình sẽ giới thiệu ở đây vì rất có thể nó sẽ có ích cho bạn trong nhiều trường hợp. Các mẹo hay thao tác dưới đây hoàn toàn miễn phí, sẽ không bao gồm những mẹo hay chỉ có ở trên phiên bản Elementor Pro.
Lưu template cho trang và container
Nếu bạn có nhiều trang sử dụng lại một thiết kế nào đó nhiều lần thì nên lưu lại thiết kế đó thành một template riêng để bạn có thể tái sử dụng lại nhanh mà không cần thao tác lại từ đầu, điều này cũng giúp các thiết kế trong website trở nên đồng nhất.
Để lưu template của một thiết kế nào đó, bạn chọn container chứa nó hoặc cả vùng, sau đó ấn chuột phải và chọn Save as Template, rồi đặt tên và lưu lại.
Hoặc bạn cũng có thể lưu lại thiết kế của cả trang thành một template riêng bằng cách ấn vào nút mở rộng kế bên nút Publish sẽ thấy.
Về sau muốn sử dụng lại template này thì chỉ cần bấm vào nút chèn template với biểu tượng thư mục trên giao diện chỉnh sửa Elementor là được.
Chuyển đổi trang thiết kế với Finder
Elementor có trang bị công cụ Finder giúp bạn dễ dàng thực hiện thao tác thêm một bài viết hay trang mới, mở giao diện chỉnh sửa với Elementor trên một trang khác mà không cần thoát ra ngoài giao diện quản trị. Tính năng này khi dùng quen rồi sẽ rất có ích trong trường hợp bạn có nhiều trang cần làm việc.
Để kích hoạt tính năng này, bạn dùng phím tắt Cmd/Ctrl + E hoặc ấn vào biểu tượng Finder trên thanh cụ.
Thêm hiệu ứng chuyển động khi cuộn trang đến
Tính năng này gọi là Entrance Animation, nghĩa là hiệu ứng của một thành phần nào đó khi bạn cuộn trang đến. Nếu bạn muốn trang của mình trông bắt mắt và gây ấn tượng cho người dùng thì đừng nên bỏ qua tính năng này.
Bạn có thể kích hoạt tính năng này cho cả một container, hoặc chỉ một widget nào đó bằng cách chỉnh sửa lại thành phần cần thêm hiệu ứng, chuyển qua mục Advanced và chọn hiệu ứng ở mục Entrance Animation. Bạn có thể thiết lập thời gian chuyển động của hiệu ứng là Slow, Normal và Fast, hoặc có thể thêm độ trễ hiệu ứng (Animation Delay) nếu cần thiết.
Sử dụng Shape Divider để làm đẹp container
Mỗi container sẽ có đường cắt bắt đầu và kết thúc của container là một đường thẳng, và bạn có thể biến đổi các điểm cắt này thành những hình dạng khác nhau cho thiết kế của mình trở nên sống động.
Bạn có thể sử dụng tính năng này bằng cách sửa container => Style và chọn Shape Devider để xem kết quả.
Tự do đặt vị trí với absolute position
Mặc định mỗi widget bạn thêm vào container thì nó đều hiển thị với dạng là một khối (block) và hiển thị theo hàng dọc, trường hợp nếu bạn đặt Direction cho container nó là hàng ngang thì nó sẽ hiển thị kiểu khác. Nhưng nếu một widget bạn thiết lập vị trí (thuộc tính position) là absolute thì bạn có thể tự do muốn đặt nó bất kỳ chỗ nào trên trang.
Ví dụ mình đặt cái đè lên tấm ảnh như hình minh hoạ dưới.
Để thiết lập position cho widget, bạn chọn sửa widget và vào Advanced => Position và chọn giá trị là Absolute. Sau khi chọn bạn có thể kéo widget đó chạy đi đâu tuỳ ý.
Lưu ý là nó sẽ hiển thị cố định theo vị trí dựa vào kích thước của trang, vì vậy nếu bạn có ý định sử dụng position absolute cho widget nào đó thì sau khi thêm, bạn sửa trên giao diện điện thoại và điều chỉnh lại tuỳ chọn Horizontal Orientation và Vertical Orientation lại cho phù hợp nhé, vì chắc chắn nó sẽ hiển thị sai trên điện thoại nếu không chỉnh lại.
Cố định vị trí hiển thị của widget
Ở trên bạn có thể tự do đặt vị trí hiển thị của widget trên bất cứ đâu trong container bằng việc đưa thiết lập Position về Absulute, tương tự như vậy bạn có thể thiết lập giá trị là Fixed nếu như muốn widget đó hiển thị cố định trên trình duyệt, và vẫn chạy theo trang khi người dùng cuộn trang.
Điều chỉnh lại chiều rộng của cả trang
Nếu bạn có để ý thì bài trước chúng ta thực hành khi thêm bất kỳ một container nào, thì mình cũng không thay đổi giá trị chiều rộng của container chính của phần đó, lý do là để nó sử dụng thiết lập chiều rộng mặc định của Elementor và sau này nếu muốn tăng lên hay thu nhỏ lại thì chỉ cần sửa lại ở trong phần Site Settings là xong.
Bây giờ bạn truy cập vào mục Site Settings trên Elementor.
Tìm mục Layout và chỉnh lại giá trị chiều rộng để xem kết quả nhé. Bên cạnh đó, bạn cũng có thể khai báo padding mặc định của các container, mà ở bài thực hành thì mình đều đặt giá trị padding cho mỗi container chính là 100px 0px 50px 0px, bạn có thể khai báo sẵn ở đây cũng được để thiết kế được đồng nhất.
Vô hiệu hoá các Widget không sử dụng
Một tính năng mà mình để ý mới được Elementor bổ sung gần đây là cho phép vô hiệu hoá hoàn toàn những widget không sử dụng, điều này sẽ giúp ích khi website sử dụng nhiều addon hỗ trợ bổ sung nhưng lại có quá nhiều widget dư thừa.
Việc vô hiệu hoá bớt không chỉ giúp giao diện sử dụng gọn gàng hơn, mà nó còn giúp cải thiện hiệu năng khi giảm bớt các thành phần CSS/JS không sử dụng tải ra ngoài website.
Để sử dụng tính năng này bạn chỉ cần truy cập vào trang quản trị, vào Elementor => Element Manager.
Sử dụng chế độ bảo trì trong Elementor
Trong khi sử dụng Elementor, nếu bạn không muốn người truy cập thấy cảnh website đang lộn xộn trong thời gian thiết kế dang dở, thì có thể sử dụng tính năng Maintenance Mode được tích hợp sẵn trong Elementor. Ở tính năng này sẽ có hai chế độ là Maintenance Mode (chế độ bảo trì, trạng thái HTTP của website sẽ là 503) và Coming Soon (sắp ra mắt, trạng thái HTTP của website sẽ là 200).
Truy cập vào tính năng này tại Elementor => Maintenance Mode. Khi sử dụng tính năng này, bạn có thể sẽ cần thiết kế một trang hiển thị thông báo tương ứng.
Xoá bộ nhớ đệm (cache) của Elementor
Elementor có một cơ chế lưu bộ nhớ đệm riêng cho những thành phần thiết kế bên trong, điều này giúp website vẫn đạt được hiệu năng tốt chứ không phải sử dụng Elementor gây nặng website như các lầm tưởng.
Thế nhưng chính điều này sẽ có một bất cấp là đôi khi các sự thay đổi trên website sẽ không hiển thị ra ngay vì cơ chế lưu bộ nhớ đệm này, ví dụ như thao tác sửa lại menu bạn đã làm phần trước. Vì vậy trong nhiều trường hợp, nếu bạn cảm thấy các thiết kế của mình đã thay đổi nhưng không hiển thị ra, thì có thể sẽ phải cần xoá bộ nhớ đệm của Elementor.
Thực hiện xoá bộ nhớ đệm tại Elementor => General và ấn vào nút Regenerate Files & Data.
Kết thúc hướng dẫn Elementor
Dựa theo những gì mình đã biết được về Elementor thì đã hướng dẫn đầy đủ chi tiết thông qua bài này và các bài trước. Hy vọng với những kiến thức ít ỏi này có thể giúp bạn làm quen với công cụ này dễ dàng hơn, để có thể sớm đạt được mong muốn xây dựng một giao diện website theo ý mình. Hướng dẫn về Elementor cơ bản sẽ kết thúc tại đây, có thể sau đó mình sẽ viết bổ sung thêm một số hướng dẫn về Elementor Pro sau cũng như các thông tin khác nếu cần thiết.
Tiếp tục chuỗi bài viết hướng dẫn về WordPress, thì ở bài sau chúng ta sẽ đi qua một hướng dẫn khác trong WordPress, đó là tìm hiểu về plugin WooCommerce để giúp biến website WordPress của bạn thành một trang bán hàng khá là chuyên nghiệp nhé.
