If you happen to’re utilizing our Sydney Pro theme (or have been contemplating making your buy), we’re glad to announce that we simply pushed an enormous new replace – Sydney Pro 4.0.
Sydney Pro 4.0 provides a ton of latest options that can assist you construct even higher WordPress websites. And on this submit, we’ll take you thru all of them intimately as a way to learn the way they work and get began with them in your website.
However earlier than we dig in, let’s go over a fast abstract of what to anticipate:
- Code-free WooCommerce customization – you’ll be capable to use the free model of Elementor to design customized single product and store templates, in addition to customise your cart and checkout pages.
- Mega menus – construct utterly customized mega menus utilizing the free model of Elementor – no mega menu plugin wanted!
- Off-canvas content material – create an off-canvas panel you could set off primarily based on any aspect in your website. Use it for navigation, product filters, login types, and much extra.
- Cellular-solely menu – create a particular menu that replaces the desktop menu for cell customers. Nice for creating a greater cell expertise in your website.
- Customized fonts – simply add your personal customized fonts and use them throughout your website.
- Extra header choices – past mega menus and off-canvas content material, we’ve got a couple of different upgrades to the header choices.
- Glassmorphism impact – add a cool Glassmorphism impact to any Elementor aspect.
- Two new starter websites – entry two model new starter websites – SaaS and Charity.
- A new backend theme dashboard – we re-designed the backend Sydney dashboard to make it even simpler to make use of.
If you happen to’re already utilizing Sydney Pro, you’ll be able to improve to Sydney Pro 4.0 as we speak to expertise all of those new options.
If you happen to haven’t made the improve but, buy your Sydney Pro license as we speak to entry all of those new options, plus all of the nice current options in Sydney Pro.
Now, let’s dig into the options in additional element…
Customized WooCommerce Templates by way of Elementor (Store, Single Product, Cart, and Checkout)
If you happen to’re utilizing Sydney to construct a WooCommerce retailer, we simply added some options to present you full code-free design management over key WooCommerce pages/templates together with the following:
- Store template
- Single product template
- Cart web page
- Checkout web page
With Sydney Pro 4.0, you’ll now be capable to customise all of those templates and pages utilizing Elementor – sure, even with the free model of Elementor.
To make that occur, Sydney Pro 4.0 provides a bunch of devoted WooCommerce widgets to Elementor.
Let’s have a look…
Store Template and Single Product Template
To get began, you’ll first need to allow the Templates Builder module in the Sydney dashboard (Look → Theme Dashboard).
Then, you’ll be able to go to Look → Sydney Templates → Add Template to create your first template.
Assuming you’ve gotten WooCommerce activated in your website, you’ll see template choices for Store and Product.
You can even use the show circumstances to solely use this template in sure conditions, corresponding to solely making use of it to particular merchandise.
When you’ve chosen the related template and saved your draft, you’ll be able to launch the Elementor interface.
That can assist you construct store templates and single product templates, Sydney Pro 4.0 provides a lot of new widgets that you need to use in Elementor. Yow will discover these in the Sydney Store Parts class.
Cart and Checkout Pages
To customise the cart and checkout pages, the course of is barely completely different as a result of you’ll be able to work instantly from the web page editor as an alternative of making a separate template.
Right here’s the way it works:
- Be certain to allow the Templates Builder module in Sydney’s settings.
- Edit the common web page in your cart or checkout.
- Delete all of the current content material (often it’s only a single shortcode).
- Launch the Elementor interface.
When you’re in the Elementor interface for that web page, all you should do is add the related widget from the Sydney Store Parts class – the Cart widget for the buying cart web page or the Checkout widget for the checkout web page.
Then, you need to use the widget’s detailed settings to customise the content material, format, fashion, and extra.
Customized Fonts Module: Add Any Customized Font and Use It Wherever
With Sydney Pro, you already had entry to lots of of font choices by way of Google Fonts, in addition to Adobe Fonts (with an lively Adobe Fonts token).
With Sydney Pro 4.0, you now get a brand new possibility that can assist you simply add and use your personal customized fonts, with no need to make use of any customized CSS.
If you activate the new Customized Fonts module, you’ll get a Customized Fonts possibility in the drop-down whenever you go to Typography → Normal in the WordPress Customizer.
If you select this selection, you’ll be capable to add a number of customized font recordsdata in numerous codecs together with .woff2, .woff, .ttf, and extra.
You may add customized font recordsdata from wherever on the net, whether or not that’s a premium font that you just’ve bought or a free font that you just discovered on certainly one of the many free font web sites.
You can even add as many customized fonts as you need – to proceed including fonts, simply click on the Add New Font button.
When you’ve added a customized font, you’ll be capable to choose it whenever you’re working with the different typography choices in Sydney.
Mega menus are an ideal possibility when you should embody loads of choices in your navigation menu. These expandable menus offer you the house you should assist your customers navigate successfully.
With the new launch, you now not want to make use of a separate mega menu plugin or buy Elementor Pro. As a substitute, now you can construct utterly customized mega menus utilizing Sydney Pro and the free model of Elementor.
To make use of this function, you’ll first need to activate the new Mega Menu module in the Sydney theme dashboard (Look → Theme Dashboard).
When you’ve activated the module, you’ll be able to create your first mega menu by following these directions:
- Go to Look → Menus (the “regular” WordPress menu space) and edit your main menu space.
- Select the menu merchandise that you just need to set off the expanded mega menu – you’ll be able to set off the mega menu primarily based on certainly one of your current menu gadgets or add a brand new one.
- Click on the Sydney Mega Menu button in that menu merchandise’s settings.
This may broaden a popup the place you’ll be able to allow the toggle to show this menu merchandise right into a mega menu.
Then, you’ll be able to click on the Create content material button to launch the Elementor interface and design the content material of your mega menu utilizing Elementor’s visible builder.
With Elementor, you’ll be able to arrange as many columns as you need and embody any design components. You might simply use a easy listing of hyperlinks otherwise you’re additionally free to incorporate different components corresponding to buttons, Google Maps embeds, and extra.
If you’re completed with the design, simply click on the shut icon in the prime-proper nook to return to the menu interface.
Be certain to click on the Save button and your mega menu will begin showing.
If you wish to add one other mega menu, you’ll be able to repeat the similar steps so as to add as many mega menus as wanted.
Off-Canvas Content material Module: Set off Off-Canvas Content material
Along with the new mega menu function, Sydney Pro additionally provides a brand new off-canvas content material module that allows you to show an off-canvas slideout primarily based on any set off in your website, corresponding to a navigation menu merchandise, a button, a picture, and extra.
You should utilize this in a ton of various methods – listed here are only a few concepts:
- Present further navigation choices.
- Present pricing particulars.
- Show product filters for an eCommerce retailer.
- Add a login kind that seems when customers click on the Login button.
- Add an e-mail decide-in kind or lead gen kind.
- Showcase particular provides or offers.
You may set off your off-canvas slideout to seem from the:
To manage the content material in your off-canvas slideout, you’ve gotten three choices:
- Elementor template – you’ll be able to create a template with Elementor after which assign that template to your off-canvas panel.
- Customized content material – you’ll be able to add your personal customized content material utilizing a textual content editor.
- Sidebar – you’ll be able to show a sidebar out of your website. You may management the sidebar content material utilizing widgets/blocks similar to another sidebar in your website.
To get began, ensure that to allow the Offcanvas Content material module in the Sydney theme dashboard. Then, click on the Customise hyperlink in the module to open the settings in the Customizer.
Or, you’ll be able to manually open the Customizer and go to Normal → Offcanvas Content material.
Then, right here’s what to do:
- Use the toggle to Allow Offcanvas Content material.
- Select the Mode to set your content material supply – an Elementor template, customized content material, or a sidebar.
- Choose the Place – Proper, Left, High, or Backside.
- Select your Set off Class. This CSS class is what’s going to set off the off-canvas menu.
- Optionally add Show Situations to solely show the off-canvas panel on sure content material. For instance, you would solely show it on the WooCommerce store web page so as to add off-canvas product filters.
- Use the Types to regulate the width and design of the off-canvas panel.
To set off the off-canvas content material, you should add the CSS class from the Set off Class field to the aspect that you just need to use.
For instance, to set off the off-canvas content material when a consumer clicks on a navigation menu merchandise, you are able to do the following:
- Go to Look → Menus.
- Click on the Display Choices and allow the CSS Lessons menu properties.
- Choose the menu merchandise that you just need to be your set off.
- Paste the set off class into the CSS Lessons field.
When customizing the responsive conduct of your website, you may need conditions the place you need to present a unique set of menu choices to cell customers than you do to desktop customers.
With Sydney Pro 4.0, now you can outline a novel menu that replaces the common desktop menu on cell units.
To set this up, you need to use the common WordPress menu system. Go to Look → Menus → Handle Areas.
You must see a brand new possibility for Cellular menu (non-obligatory). Any menu that you just assign to this location will exchange the default Main menu for cell units.
You may both assign certainly one of your current menus to this location or click on the Use new menu choice to create a brand new menu for cell customers.
When you create your menu, you’re free so as to add as many navigation gadgets as wanted.
And that’s it! When you save your menu, cell guests will see the navigation gadgets from this menu as an alternative of the Main Menu that seems to desktop guests.
Sydney Dashboard Redesign: Extra Simply Handle Every part
Along with including a bunch of options that can assist you create an excellent higher web site, Sydney 4.0 additionally brings enhancements to the backend Sydney dashboard expertise that can assist you extra simply use these options.
You’ll robotically see this new dashboard expertise whenever you go to Look → Theme Dashboard.
At the prime, you’ll see fast hyperlinks to key customizer areas, an choice to entry starter websites, and basic theme settings.
If you happen to scroll down, you’ll see all the modules which are obtainable in Sydney Pro. You may simply activate any module with a single click on. If relevant, you’ll then see a Customise hyperlink that takes you straight to that module’s settings.
Along with a few of the different navigation-centered options in Sydney 4.0, you additionally get two new header choices:
- Header background picture – you’ll be able to add a background picture to your menu bar.
- Social media integration – you’ll be able to show your social media profile proper subsequent to your menu.
You’ll discover each of those choices in the Header Customizer settings:
- To use the header background picture, go to Header → Principal header → Type in the Customizer. You must see a brand new Background Picture possibility along with the current background coloration choices.
- So as to add your social media profiles, you’ll get a brand new Social aspect that you need to use for various header places, together with the High Bar, Principal Header, and Cellular Header. If you happen to allow the Social aspect, you’ll see new choices so as to add a number of social profiles beneath.
New Glassmorphism Impact With Elementor
Glassmorphism is a more recent design fashion that’s quickly grown in recognition. In a nutshell, it includes including a frosted glass-like impact to interface components to make them seem translucent and layered.
For an instance, take into account this Glassmorphism-fashion web site from Sahid Aldi Susilo:
With Sydney Pro, now you can simply begin utilizing a lot of these Glassmorphism results in your Elementor designs due to a brand new glassmorphism device you could apply to any Elementor widget.
Right here’s how one can begin utilizing Glassmorphism with Sydney and Elementor:
- Just remember to’ve enabled Sydney Pro’s Elementor Instruments module (Look → Theme Dashboard).
- Open the Elementor editor for a bit of content material the place you need to experiment with Glassmorphism.
- Edit a piece, column, or widget to which you need to apply Glassmorphism.
- Go to the Superior tab of that aspect’s settings.
- Look for the Glassmorphism possibility – you must see the Sydney brand to the left of it. If you happen to don’t see this selection, just be sure you enabled the Elementor Instruments module in the Sydney theme dashboard.
- Use the toggle to allow Glassmorphism for that aspect.
- Regulate the blur and grayscale in response to your preferences to regulate the depth of the Glassmorphism impact.
New Starter Websites: SaaS and Charity
Along with plenty of new design choices, Sydney 4.0 additionally brings the launch of two model new starter websites:
- SaaS – this can be a nice possibility for any sort of software program product.
- Charity – this can be a nice possibility for any sort of charity, NGO, basis, fundraising platform, and so forth.
You may entry these two new starter websites, in addition to all of Sydney’s current starter websites, from the Starter Websites tab in the theme dashboard.
Get Began With Sydney Pro 4.0
That wraps up our tour of all the greatest new options in Sydney Pro 4.0.
It’s a giant launch and we predict it can aid you improve your website in some main methods.
As at all times, we’re dedicated to creating Sydney certainly one of the quickest, most light-weight themes on the market (which is backed up by the knowledge).
For that motive, all of those main new options are solely modular. You may select precisely which options to allow in your website, which ensures that your website stays as light-weight as doable.
If you happen to’re already a Sydney Pro license holder, you’ll be able to improve to Sydney Pro 4.0 as we speak to begin utilizing all of those options.
If you happen to’re not utilizing Sydney Pro but, buy your Sydney Pro license as we speak to entry the new options, in addition to all of the different useful options and starter websites that Sydney Pro provides.
