Page transitions and animations
Posted: Sun Dec 22, 2024 8:38 am
Salient includes a number of page transition and animation effects for your site.
By default, the current page will fade out when a link is clicked. An animated loading icon will then appear until the next page loads.
You can change the fade effect to a “center mask reveal” effect, revealing the new page expanding from the center.
If you stick with the loading icon, you can change the icon color or upload your own custom icon (such as your logo). You can also customize the icon animation, from a default spin to a “smooth spinning” effect.
Salient review - page transitions
Global call to action button
In the Outgoing » Call to Action menu, you can enable a “call to action” section that will appear just above the footer on all pages of your site. You can customize the text, button color, link, and exclude it from appearing on specific pages.
Salient review - call to action button settings
Built-in slider
After installing the theme , you will notice some italy phone number new menu options including Home Slider and Nectar Slider .
To enable the home slider, you will need to create a page using one of the “Home” page templates.
Salient review - page templates
You will then need to go to Settings » Reading and set that page as your static home page.
You can add slides to your home page slider by going to Home Slider » Add New . Here you can select images or videos to add and enter caption text and buttons if you wish.
Images should be 1600-2000px wide and 700px high. Any larger than 700px will be cropped on wider screen sizes. Regardless of width, the image will be stretched to fit the entire screen, so smaller images will look very pixelated on larger screens.
To change the style and functions of the slider, you need to go to Salient » Home Slider . This is where you can adjust animations, autoplay settings, speed, etc.
Nectar Slider
The Nectar Slider can be used in other places besides the homepage. It includes many more options than the Home Slider.
Your slides are displayed by Location (locations act as categories). So to create a slider, you need to add all the slides to a specific location.
To use your Nectar Slider, you need to embed it with a shortcode.
When editing any post or page, you will see a blue Nectar Shortcode button .
Salient review - nectar shortcodes
You can click on it and select the options to display the Nectar slider you created. Select “Nectar Slider” under “Elements” and then under “Location” select the location where you added all your slides.
Salient review - nectar slider
(If you're looking for an easier way to create sliders that you can use with any theme, we recommend the Soliloquy plugin .)
Custom Post Type Portfolio
Salient comes with a custom post type for your portfolio. You can customize the style and appearance of your portfolio items in Salient » Portfolio , and add your portfolio items by navigating to Portfolio » Add New . Portfolio items can be assigned categories and tags, just like posts.
It's important to note that since this type of custom post is theme-specific, you will lose all of your portfolio information if you switch themes.
By default, the current page will fade out when a link is clicked. An animated loading icon will then appear until the next page loads.
You can change the fade effect to a “center mask reveal” effect, revealing the new page expanding from the center.
If you stick with the loading icon, you can change the icon color or upload your own custom icon (such as your logo). You can also customize the icon animation, from a default spin to a “smooth spinning” effect.
Salient review - page transitions
Global call to action button
In the Outgoing » Call to Action menu, you can enable a “call to action” section that will appear just above the footer on all pages of your site. You can customize the text, button color, link, and exclude it from appearing on specific pages.
Salient review - call to action button settings
Built-in slider
After installing the theme , you will notice some italy phone number new menu options including Home Slider and Nectar Slider .
To enable the home slider, you will need to create a page using one of the “Home” page templates.
Salient review - page templates
You will then need to go to Settings » Reading and set that page as your static home page.
You can add slides to your home page slider by going to Home Slider » Add New . Here you can select images or videos to add and enter caption text and buttons if you wish.
Images should be 1600-2000px wide and 700px high. Any larger than 700px will be cropped on wider screen sizes. Regardless of width, the image will be stretched to fit the entire screen, so smaller images will look very pixelated on larger screens.
To change the style and functions of the slider, you need to go to Salient » Home Slider . This is where you can adjust animations, autoplay settings, speed, etc.
Nectar Slider
The Nectar Slider can be used in other places besides the homepage. It includes many more options than the Home Slider.
Your slides are displayed by Location (locations act as categories). So to create a slider, you need to add all the slides to a specific location.
To use your Nectar Slider, you need to embed it with a shortcode.
When editing any post or page, you will see a blue Nectar Shortcode button .
Salient review - nectar shortcodes
You can click on it and select the options to display the Nectar slider you created. Select “Nectar Slider” under “Elements” and then under “Location” select the location where you added all your slides.
Salient review - nectar slider
(If you're looking for an easier way to create sliders that you can use with any theme, we recommend the Soliloquy plugin .)
Custom Post Type Portfolio
Salient comes with a custom post type for your portfolio. You can customize the style and appearance of your portfolio items in Salient » Portfolio , and add your portfolio items by navigating to Portfolio » Add New . Portfolio items can be assigned categories and tags, just like posts.
It's important to note that since this type of custom post is theme-specific, you will lose all of your portfolio information if you switch themes.