- Importing Starter Templates With Spectra
- Filters/Actions For Post
- Spectra Patterns
- Contact Form 7: Checkbox / Radio / Acceptance Control
- Getting Started With Spectra
- WP – Search
- Create Contact Forms
- Import Single Pages, Templates, & Block Patterns
- Assets API For Third-Party Plugins
- Copy & Paste Style
- Troubleshooting: Missing Icons
- Contact Form 7: Multiple Column Fields
- Unable To Style Contact Form 7
- Tab Index For Multiple Gravity Forms
- Manually Install Spectra Via FTP
- Enable/Disable Design Library Button
- Update Folder File Permissions
- Resolving Container Layout Conflicts
- Database Update Instructions (Below 2.0.0)
- Using Heading Block
- Buttons
- Post Grid
- Content Timeline
- Social Share
- Google Map
- Add Testimonials
- Info Box
- Section
- 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
- Exclude Heading From TOC
- Review Schema
- Lottie
- Taxonomy List
- Tabs Block
- Block Display Conditions
- Star Rating
- Masonry Image Gallery
- Wireframe Blocks
- Copy & Paste Style
- Container Flex Property
- Default Content Width
- Heading Block
- Image Block
- Buttons Block
- Container Block
- Responsive Conditions
- Taxonomy Styling Options
- Block Presets
- Image Gallery
- Counter Block
- Modal Block
- Registration Form Block
- Dynamic Content Extension
- Slider Block
- Pagel Level Custom CSS
- Countdown Pro
- Slider Custom Navigation
- Loop Builder
- Animations
- Login Form Block
- Global Block Style Extension
- Create Popups
- Grid Builder
- Pixabay Image Search Feature
- Â Getting Started with Instagram
- Advanced Loop Builder
- 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.