- Using Heading Block
- Buttons
- Post Grid
- Content Timeline
- Social Share
- Google Map
- Add Testimonials
- Info Box
- Team
- Icon List
- Price List
- Post Masonry
- Post Carousel
- Post Timeline
- Call To Action
- Advanced Columns
- Blockquote
- Marketing Button
- Table Of Contents
- How-to Schema
- FAQ’s: Schema/Accordion
- Inline Notice
- WP – Search
- Review Schema
- Lottie
- Taxonomy List
- Tabs Block
- Create Contact Forms
- Star Rating
- Masonry Image Gallery
- Wireframe Blocks
- Heading Block
- Image Block
- Buttons Block
- Translate Everything WPML
- Container Block
- Taxonomy Styling Options
- Block Presets
- Image Gallery
- Counter Block
- Modal Block
- Registration Form Block
- Slider Block
- Pagel Level Custom CSS
- Countdown Pro
- Slider Custom Navigation
- Instagram Feed
- Loop Builder
- Animations
- Login Form Block
- Global Block Style Extension
- Create Popups
- Custom Blocks
- Move Block Patterns
- Grid Builder
- Newsletter Forms
- Register High-Privileged Users
- Hide Core Blocks
- Section
- Troubleshooting: Missing Icons
- Spectra Patterns
- Contact Form 7: Multiple Column Fields
- Contact Form 7: Checkbox / Radio / Acceptance Control
- Unable To Style Contact Form 7
- Tab Index For Multiple Gravity Forms
- Getting Started With Spectra
- Exclude Heading From TOC
- Block Display Conditions
- Transparent / Sticky Header
- Change Site Logo
- Change Global Styles
- Disable Title on Posts & Pages
- Transparent / Sticky Header For Single Page / Post
- Change Header & Footer Patterns
- Custom / Google Fonts
- Reset Global Default Styling
- Manually Install Spectra One Via FTP
- Enable / Disable Header & Footer On Specific Pages / Posts
Animations
Spectra offers a wide range of animations that can be applied to all blocks within its editor.
These animations are designed to bring life and interactivity to your website, making it more visually appealing and engaging for visitors.
This document guides you through the steps to use these animations seamlessly into your content.
Benefits of Using Animations in Spectra
There are many benefits of using animations in Spectra. Animations. Here are a few:
- Make your website more visually appealing and engaging.
- Help to draw attention to important content.
- Improve the user experience by making it easier to navigate your website.
- Create a sense of movement and dynamism on your website.
- Add a touch of personality and creativity to your website design.
Animations in Spectra Free version
If you opt for the free version of Spectra, then can access a selection of pre-defined animations that can be easily applied to any block.
These animations include:
- Fade
- Slide
- Zoom
- Flip
- Zoom in and
- Zoom out.
To use an animation, simply select the block you want to animate and then choose the animation from the dropdown menu.
You can also preview the animation before you apply it.
Animations in Spectra Pro version
If you have Spectra Pro, you can enjoy an expanded set of animation options and additional customization features.
That means you can modify animation duration, add delays in animations and use other settings to create unique and engaging effects.
You can also set the animation duration to be longer or shorter, and you can delay the animation so that it doesn’t start immediately.
Additionally, you can enable the toggle button to play the animation repeatedly on scroll.
How to Use Animations in Spectra
To use animations in Spectra, follow these steps:
- Open the block you want to animate.
- Go to the Advanced tab.
- Click on the Animations tab.
- Choose the animation you want to use from the dropdown menu.
- Fine-tune the animation settings as desired.
- Click on the Update/ Publish button.
That’s how easy it is to add animations to the elements on your website.
Frequently Asked Questions
We don't respond to the article feedback, we use it to improve our support content.