You can convert any type of layout into a WordPress Pattern and use it multiple times on your site. While this is a great feature but adding multiple Patterns with complex layouts, especially with images on a page can impact the page load time.
With the AJAX Templates feature from Nexter Blocks, you can make the Patterns load on the viewport, on click or hover instead of loading on the initial page load, thus improving the page load time.
Activate the Enable Ajax Templates
To use the AJAX load feature, you have to enable the Enable Ajax Templates option.
To do so, go to
- Nexter Blocks → Extra Options → Settings.
- Go to the Enable Ajax Templates section and enable the toggle.
- Then click on the Save Settings button to save the settings.
How to Use the AJAX Templates Feature?
First, make sure you’ve created at least one WordPress Pattern, once done
From the Dashboard, go to Nexter Blocks > Patterns.
Then scroll down to the Pattern that you want to load with AJAX, and click on the AJAX Shortcodes button.
It will open a popup, in the Shortcode for Ajax render: field you’ll find the shortcode that you have to use on the location where you want the Pattern to load with AJAX.
In the AJAX Class section, you’ll find three CSS classes –
Hover trigger: With this class, you can load the pattern on mouse hover.
Click trigger: With this class, you can load the pattern on click.
On view trigger: With this class, the pattern will load on entering the viewport.
Use the class as per your requirements.
Load Pattern On Mouse Hover
To load a WordPress Pattern on mouse hover, follow the steps –
1. Add the WordPress Shortcode block and add the shortcode of the Pattern where you want to load it.
2. Then add the element to the same location, hovering on which you want to load the Pattern.
For instance, we will use the Button block from Nexter Blocks.
3. Go to the Advanced tab, and add the Hover trigger class name from the Pattern shortcode popup, in the ADDITIONAL CSS CLASS(ES) field.
Now the Pattern will load once you mouse hover the button.
Load Pattern On Mouse Click
To load a WordPress Pattern on mouse click, follow the steps –
1. Add the WordPress Shortcode block and add the shortcode of the Pattern where you want to load it.
2. Then add the element to the same location, by clicking on which you want to load the Pattern.
For instance, we will use the Button block from Nexter Blocks.
3. Go to the Advanced tab, and add the Click trigger class name from the Pattern shortcode popup, in the ADDITIONAL CSS CLASS(ES) field.
Now the Pattern will load once you click the button.
Load Pattern On Viewport
To load a WordPress Pattern on the viewport, follow the steps –
1. Open the page, post or template in the WordPress editor where you want to load the Pattern. Add a container.
For instance, we’ll use the Container block from Nexter Blocks here.
2. Then add the WordPress Shortcode block and add the shortcode of the Pattern.
3. Now select the container containing the shortcode and go to the Advanced tab and add the On view trigger class name from the Pattern shortcode popup, in the ADDITIONAL CSS CLASS(ES) field.
Note: Although the view trigger will work on other elements as well, but it is ideal to use it on a container.
That’s it, now the Pattern will only load once it enters the viewport.
