CẬP NHẬT CÁC TÍNH NĂNG MỚI NHẤT CỦA YOOTHEME PRO 3.0

YOOtheme Pro 3.0 mang đến tính năng thiết kế menu được chờ đợi từ lâu. Giờ đây, bạn có thể sử dụng  trình tạo trang YOOtheme Pro để thiết kế danh sách thả xuống cho từng mục menu. Bạn có thể thấy nút Builder bên cạnh tất cả các mục trình menu đơn cấp một để mở trình tạo trang. Nó hoạt động giống như trình tạo trang thông thường, nhưng thay vì các section, bố cục chỉ bao gồm các hàng và cột. Tại đây, bạn có thể thêm các element, sử dụng các thư viện thành phần và layout, cũng như tạo các layout thả xuống phức tạp.

Menu item và Nav element

Vậy làm cách nào để chúng tôi đưa các menu items vào trình tạo menu lớn của bạn? Chúng tôi đã thêm mục Custom Menu Items mới để tải tất cả các menu iteems từ mục chính. Giờ đây, bạn có thể map tiêu đề, hình ảnh, biểu tượng, phụ đề và link liên kết của các menu item. Bạn thậm chí còn có thể tạo cả headings và dividers.

Tất cả các menu item giờ đã có thể có hình ảnh, icon và subtitle, bất kể loại menu và cấp độ của mục.

Ngoài ra, phiên bản mới đã thêm nhiều tùy chọn để tùy chỉnh danh sách dropdown: Stretch, width, padding, alignment, và style.

Danh sách dropdown ở mọi nơi

Không chỉ thanh điều hướng mới có thể có menu thả xuống. Subnav và iconnav giờ đây cũng có thể hiển thị các menu con của chúng trong danh sách thả xuống. Ví dụ: bạn có thể sử dụng Builder để tạo ra danh sách dropdown trên toolbar.

Header Layouts

Có một bố cục mới được bổ sung vào YOOtheme Pro 3.0 là Stacked Center Split B, trong đó các mục của thanh điều hướng được phân chia và định vị ở hai đầu của thanh điều hướng.

Bạn còn có thể sử dụng tùy chọn Split Items và Push Items để chia các mục hoặc hợp nhất các bố cục làm một.

Ngoài ra, có một tùy chọn để hiển thị các biểu chỉ dẫn nếu các mục chính menu có dropdown.

Dialog Layouts

Bạn có nhận thấy tất cả các bố cục tiêu đề offcanvas và modal bị thiếu không? Các bố cục này hiếm khi được sử dụng làm bố cục tiêu đề vì chúng chỉ hiển thị logo và chuyển đổi hộp thoại trong tiêu đề và mọi thứ khác trong offcanvas sidebar hoặc modal window.

Các website hiện đại, đặc biệt là những trang có điều hướng nội dung phong phú, thường có cả hai, menu thanh điều hướng và chuyển đổi hộp thoại để hiển thị toàn bộ điều hướng trang trong hộp thoại. Đó là lý do tại sao phiên bản YOOtheme Pro 3.0 được thêm vị trí module hộp thoại mới và tách bố cục hộp thoại khỏi bố cục tiêu đề. Nhờ đó, nếu bạn xuất bản một menu hoặc một module ở vị trí này, một hộp thoại chuyển đổi sẽ tự động xuất hiện trong thanh điều hướng. Điều đó thực sự tuyệt vời vì bạn có thể giữ bố cục tiêu đề yêu thích của mình và có một hộp thoại offcanvas hoặc modal với nội dung khác.

Ngoài ra, bạn còn có thể hiển thị logo trong dialog khi add logo trong Site panel.

Dropbar Dialog Layout

YOOtheme Pro 3.0 có hai bố cục hộp thoại mới là Dropbar Top và Dropbar Center. Tương tự như danh sách thả xuống, dropbar mở ra bên dưới thanh điều hướng nhưng kéo dài đến toàn bộ chiều rộng và chiều cao của chế độ xem. Bạn có thể làm mờ dropbar hoặc trượt nó từ các hướng trên cùng, bên trái hoặc bên phải.

Search, Socials và chuyển đổi hộp thoại

Trong YOOtheme Pro, bạn có thể xuất bản công cụ tìm kiếm và biểu tượng mạng xã hội trong tiêu đề và thanh điều hướng mà không phải tạo module hoặc tiện ích con. Giờ đây, bạn cũng có thể xuất bản chúng ở vị trí hộp thoại và logo và thậm chí chỉ định hiển thị chúng ở đầu hay cuối vị trí. Dialog toggle mới cũng được định vị như vậy.

Mobile Header

Trong YOOtheme Pro 3.0, mobile header đã được tái cấu trúc hoàn toàn. Nó hoạt động giống như tiêu đề mặc định và có tất cả các tính năng cần có. Bạn có thể chọn giữa các bố cục hộp thoại khác nhau, bao gồm cả bố cục thanh thả xuống mới.

Ngoài ra, bạn có thể xuất bản tính năng tìm kiếm chỉ bằng một cú nhấp chuột và thêm các biểu tượng xã hội cho mobile header. Bạn cũng có thể chọn bật / tắt tính năng transparent header. Thậm chí, có thể tắt hoàn toàn mobile header nếu tiêu đề mặc định đã trông đẹp mắt trên các thiết bị nhỏ.

Ngoài ra, bạn có thể thêm một logo đảo ngược trên thiết bị di động mới trong bảng điều khiển Trang web.

Với YOOtheme Pro 3.0, bạn có thể thiết kế sidebars, toolbars, và cả dialog layouts bằng builder. Giống như với trình tạo menu lớn, module builder được xuất bản ở những vị trí này sử dụng các hàng và cột của trình tạo thay vì section.

YOOtheme Pro 3.0 đi kèm với Sublayout element mới cho phép bạn tạo các bố cục con trong trình tạo trang. Bố cục con là bố cục trình tạo trang thông thường nhưng không có section. Bạn có thể lồng các hàng của trình tạo trang vào nhau và tạo các bố cục nâng cao thực sự.

Bạn cũng có thể lưu các sublayout của mình vào thư viện bố cục và sử dụng lại chúng sau này.

Tính năng chính tiếp theo của YOOtheme Pro 3.0 là hiệu ứng parallax. Nhờ các bản phát hành UIkit mới nhất, giờ đây bạn có thể đạt được các hiệu ứng parallax tuyệt đẹp trực tiếp trong YOOtheme Pro.

Chúng tôi đã cấu trúc lại hoàn toàn các cài đặt parallax. Khi tạo hoạt ảnh cho một thuộc tính, giờ đây bạn có thể thêm nhiều điểm dừng để xác định giá trị bắt đầu, trung gian và kết thúc dọc theo trình tự hoạt ảnh. Hoạt ảnh sẽ được phân bổ đều giữa các điểm dừng. Bạn thậm chí có thể chỉ định tỷ lệ phần trăm để định vị các điểm dừng dọc theo chuỗi hoạt hình.

YOOtheme Pro 3.0 thực hiện tất cả các tính năng hình ảnh UIkit mới. Giờ đây, YOOtheme Pro sử dụng thuộc tính native loading lazy để tải hình ảnh khi chúng vào chế độ xem. Ngay cả những ảnh nền cũng được tải chế độ này. Ngoài ra, YOOtheme Pro tự động thêm các thuộc tính chiều rộng và chiều cao cho hình ảnh để tránh thay đổi bố cục. Lazy loading được bật theo mặc định. Để vô hiệu hóa chúng, bạn có thể sử dụng tùy chọn.

Builder elements như slideshow và slider được tự động tải hình ảnh một cách nhanh chóng để chúng được hiển thị ngay lập tức.

Hình ảnh thế hệ mới

YOOtheme Pro hiện sử dụng element <picture> để phục vụ các định dạng hình ảnh thay thế như WebP. Vì UIkit có thể mô phỏng các tính năng hình ảnh và srcset cho hình nền, nên YOOtheme Pro thậm chí còn cung cấp hình ảnh WebP ở các kích cỡ khác nhau cho hình ảnh nền của bạn. Điều này có tác động thật tuyệt vời đối với thời gian tải trang của bạn.

Đặc biệt hơn, YOOtheme Pro còn được thêm hỗ trợ cho định dạng hình ảnh AVIF mới có khả năng nén thậm chí còn tốt hơn cả WebP. Nhưng xin lưu ý rằng đây là một tính năng vượt trội, bạn cần tiện ích mở rộng GD trong PHP 8.1 được biên dịch với hỗ trợ AVIF.

Element Bản đồ hiện có thể hiển thị các điểm ưa thích trên Google Maps và thư viện Google Maps MarkerClusterer đã được cập nhật. Nếu bạn sử dụng OpenStreetMap và Leaflet, bạn sẽ có giao diện mới nhờ thư viện Leaflet được cập nhật.

Overlay và Gallery elements hiện đã có tùy chọn đường viền cho các hình ảnh.

Ngoài ra, tất cả các element đều có thêm các tùy chọn cỡ chữ để tạo kiểu cho tiêu đề, meta và nội dung.

YOOtheme Pro 3.0 kết hợp tất cả các cải tiến về style từ UIkit vào bộ tùy chỉnh kiểu dáng. Giờ đây, bạn có thể tạo kiểu phụ đề khác nhau cho các thành phần Nav, Dropdown and Navbar.

Trong Thanh điều hướng, bạn cũng có thể đặt khoảng cách giữa các mục cho thanh điều hướng chính và mặc định cũng như các phần padding khác nhau cho các breakpoint khác nhau.

Và tất nhiên, bạn cũng có thể tạo style mới cho Dropbar.

Ngoài ra, có nhiều tùy chọn mới khác để đặt background, border, box shadow,… trên tất cả các thành phần.

YOOtheme Pro 3.0 đi kèm với một số cải tiến và sửa lỗi nhỏ hơn nữa. Ví dụ: thêm tính năng cuộn mượt mà vào tất cả các liên kết có đoạn URL trong bất kỳ menu YOOtheme Pro nào, không cần JavaScript của bên thứ 3.

Ngoài ra, các biểu tượng gốc của điều hướng hiện được đưa vào đánh dấu trang và kế thừa màu di chuột và hoạt động của mục điều hướng của chúng.

Mục tìm kiếm hiện có chiều rộng đầy đủ khi được sử dụng trong dialog layouts.

YOOtheme Pro 3.0 cũng đã tái cấu trúc bộ tùy chỉnh style để hiển thị các biến trong trường hợp có lỗi và khắc phục sự cố với của bên thứ ba. Ngoài ra, phiên bản mới còn cho phép map các trường Url, Alt và Caption cho công cụ hình ảnh. Cuối cùng nhưng không kém phần quan trọng, phiên bản PHP được yêu cầu được nâng lên từ 5.6 lên 7.2.