For those who’re utilizing our Sydney Pro theme (or have been contemplating making your buy), we’re joyful to announce that we simply pushed an enormous new replace — Sydney Pro 4.
Sydney Pro 4 provides a ton of latest options that can assist you construct even higher WordPress websites. On this submit, we’ll take you thru all of them intimately so that you could find out how they work and get began with them in your web site.
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!
- Offcanvas content material – Create an offcanvas panel that you may set off primarily based on any component in your web site. Use it for navigation, product filters, login varieties, and much extra.
- Cell-only menu – Create a particular menu that replaces the desktop menu for cell customers. Nice for creating a greater cell expertise in your web site.
- Customized fonts – Simply add your individual customized fonts and use them throughout your web site.
- Extra header choices – Past mega menus and offcanvas content material, we now have a number of different upgrades to the header choices.
- Glassmorphism impact – Add a cool Glassmorphism impact to any Elementor component.
- 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.
For those who’re already utilizing Sydney Pro, you’ll be able to improve to Sydney Pro 4 at present to expertise all of those new options.
For those who haven’t made the improve but, buy your Sydney Pro license at present to entry all of those new options, plus all of the nice present 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)
For those who’re utilizing Sydney to construct a WooCommerce retailer, we added some options to offer 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, 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 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 web site, you’ll see template choices for Store and Product.
It’s also possible to use the show circumstances to solely use this template in sure conditions, comparable 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 provides a variety of new widgets that you should utilize in Elementor. You 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 totally different as a result of you’ll be able to work immediately from the web page editor as an alternative of making a separate template.
Right here’s the way it works:
- Be sure that to allow the Templates Builder module in Sydney’s settings.
- Edit the common web page in your cart or checkout.
- Delete all of the present content material (normally it’s only a single shortcode).
- Launch the Elementor interface.
When you’re in the Elementor interface for that web page, all it’s worthwhile to do is add the related widget from the Sydney Store Parts class — the Cart widget for the procuring cart web page or the Checkout widget for the checkout web page.
Then, you should utilize 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 a whole bunch of font choices by way of Google Fonts, in addition to Adobe Fonts (with an lively Adobe Fonts token).
With Sydney Pro 4, you now get a brand new possibility that can assist you simply add and use your individual customized fonts, while not having to make use of any customized CSS.
Whenever you activate the new Customized Fonts module, you’ll get a Customized Fonts possibility in the drop-down if you go to Typography → Common in the WordPress Customizer.
Whenever 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 possibly can 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 one among the many free font web sites.
It’s also possible to add as many customized fonts as you need — to proceed including fonts, click on the Add New Font button.
When you’ve added a customized font, you’ll be capable to choose it if you’re working with the different typography choices in Sydney.
Mega menus are an awesome possibility when it’s worthwhile to embrace a number of choices in your navigation menu. These expandable menus provide you with the house it’s worthwhile to assist your customers navigate successfully.
With the new launch, you not want to make use of a separate mega menu plugin or buy Elementor Pro. As an alternative, 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 major 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 one among your present menu gadgets or add a brand new one.
- Click on the Sydney Mega Menu button in that menu merchandise’s settings.
It will develop 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 embrace any design components. You would use a easy record of hyperlinks otherwise you’re additionally free to incorporate different components comparable to buttons, Google Maps embeds, and extra.
Whenever you’re completed with the design, simply click on the shut icon in the top-right nook to return to the menu interface.
Be sure that 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 identical steps so as to add as many mega menus as wanted.
Offcanvas Content material Module: Set off Offcanvas Content material
Along with the new mega menu function, Sydney Pro additionally provides a brand new offcanvas content material module that permits you to show an offcanvas slideout primarily based on any set off in your web site, comparable to a navigation menu merchandise, a button, a picture, and extra.
You need to use this in a ton of various methods — listed below are a number of concepts:
- Present further navigation choices.
- Present pricing particulars.
- Show product filters for an eCommerce retailer.
- Add a login type that seems when customers click on the Login button.
- Add an electronic mail opt-in type or lead gen type.
- Showcase particular presents or offers.
You possibly can set off your offcanvas slideout to seem from the:
To manage the content material in your offcanvas slideout, you’ve gotten three choices:
- Elementor template – You possibly can create a template with Elementor after which assign that template to your offcanvas panel.
- Customized content material – You possibly can add your individual customized content material utilizing a textual content editor.
- Sidebar – You possibly can show a sidebar out of your web site. You possibly can management the sidebar content material utilizing widgets/blocks similar to every other sidebar in your web site.
To get began, ensure 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 Common → 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 is going to set off the offcanvas menu.
- Optionally add Show Situations to solely show the offcanvas panel on sure content material. For instance, you possibly can solely show it on the WooCommerce store web page so as to add offcanvas product filters.
- Use the Types to regulate the width and design of the offcanvas panel.
To set off the offcanvas content material, it’s worthwhile to add the CSS class from the Set off Class field to the component that you just need to use.
For instance, to set off the offcanvas content material when a person clicks on a navigation menu merchandise, you are able to do the following:
- Go to Look → Menus.
- Click on the Display screen 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 habits of your web site, you may need conditions the place you need to present a distinct set of menu choices to cell customers than you do to desktop customers.
With Sydney Pro 4, now you can outline a singular menu that replaces the common desktop menu on cell units.
To set this up, you should utilize the common WordPress menu system. Go to Look → Menus → Handle Areas.
You need to see a brand new possibility for Cell menu (optionally available). Any menu that you just assign to this location will change the default Main menu for cell units.
You possibly can both assign one among your present 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 thing
Along with including a bunch of options that can assist you create a good higher web site, Sydney Pro 4 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 if you go to Look → Theme Dashboard.
At the high, you’ll see fast hyperlinks to key Customizer areas, an choice to entry starter websites, and normal theme settings.
For those who scroll down, you’ll see all the modules which might be obtainable in Sydney Pro.
You possibly can simply activate any module with a single click on. If relevant, you’ll see a Customise hyperlink that takes you straight to that module’s settings.
Along with a few of the different navigation-focused options in Sydney Pro 4, you additionally get two new header choices:
- Header background picture – You possibly can add a background picture to your menu bar.
- Social media integration – You possibly can 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 → Major header → Type in the Customizer. You need to see a brand new Background Picture possibility along with the present background coloration choices.
- So as to add your social media profiles, you’ll get a brand new Social component that you should utilize for various header areas, together with the High Bar, Major Header, and Cell Header. For those who allow the Social component, you’ll see new choices so as to add a number of social profiles under.
New Glassmorphism Impact With Elementor
Glassmorphism is a more moderen 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, think about this Glassmorphism-style web site from Sahid Aldi Susilo:
With Sydney Pro, now you can simply begin utilizing these kind of Glassmorphism results in your Elementor designs due to a brand new Glassmorphism instrument that you may apply to any Elementor widget.
Right here’s how one can begin utilizing Glassmorphism with Sydney and Elementor:
- Just be sure you’ve enabled Sydney Pro’s Elementor Instruments module (Look → Theme Dashboard).
- Open the Elementor editor for a chunk 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 component’s settings.
- Look for the Glassmorphism possibility — it is best to see the Sydney emblem to the left of it. For those who 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 component.
- Regulate the blur and grayscale in accordance with your preferences to regulate the depth of the Glassmorphism impact.
New Starter Websites: SaaS and Charity
Along with numerous new design choices, Sydney Pro 4 additionally brings the launch of two model new starter websites:
- SaaS – It is a nice possibility for any sort of software program product.
- Charity – It is a nice possibility for any sort of charity, NGO, basis, fundraising platform, and so forth.
You possibly can entry these two new starter websites, in addition to all of Sydney’s present starter websites, from the Starter Websites tab in the Theme Dashboard.
SaaS Starter Website
Charity Starter Website
Get Began With Sydney Pro 4
That wraps up our tour of all the largest new options in Sydney Pro 4.
It’s a giant launch, and we predict it is going to assist you improve your web site in some main methods.
As all the time, we’re dedicated to creating Sydney one among the quickest, most light-weight themes on the market (which is backed up by the information).
For that motive, all of those main new options are solely modular. You possibly can select precisely which options to allow in your web site, which ensures that your web site stays as light-weight as attainable.
For those who’re already a Sydney Pro license holder, you’ll be able to improve to Sydney Pro 4 at present to begin utilizing all of those options.
For those who’re not utilizing Sydney Pro but, buy your Sydney Pro license at present to entry the new options, in addition to all of the different useful options and starter websites that Sydney Pro presents.
