- 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
- Importing Starter Templates With Spectra
- Post Timeline
- Call To Action
- Advanced Columns
- Troubleshooting: Missing Icons
- Filters/Actions For Post
- Blockquote
- Spectra Patterns
- Contact Form 7: Multiple Column Fields
- Contact Form 7: Checkbox / Radio / Acceptance Control
- Unable To Style Contact Form 7
- Marketing Button
- Tab Index For Multiple Gravity Forms
- Getting Started With Spectra
- Manually Install Spectra Via FTP
- Table Of Contents
- How-to Schema
- FAQ’s: Schema/Accordion
- Inline Notice
- WP – Search
- Exclude Heading From TOC
- Review Schema
- Lottie
- Taxonomy List
- Tabs Block
- Block Display Conditions
- Create Contact Forms
- Import Single Pages, Templates, & Block Patterns
- Enable/Disable Design Library Button
- Update Folder File Permissions
- Assets API For Third-Party Plugins
- Star Rating
- Masonry Image Gallery
- Wireframe Blocks
- Copy & Paste Style
- Coming Soon Mode
- Load Google Fonts Locally
- Container Flex Property
- Default Content Width
- Blocks Editor Spacing
- Heading Block
- Image Block
- Buttons Block
- Translate Everything WPML
- Container Block
- Collapse Panels
- 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
- Instagram Feed
- Loop Builder
- Animations
- Login Form Block
- Site Visibility
- Global Block Style Extension
- Spectra Actions: Clear Cache
- Create Popups
- Quick Action Bar
- Custom Blocks
- Move Block Patterns
- Grid Builder
- Move Title Bar To Top
- Resolving Container Layout Conflicts
- Newsletter Forms
- Register High-Privileged Users
- User Roles Access To AI
- Database Update Instructions (Below 2.0.0)
- FAQ's: VIP Priority Support
- Whitelist Email Address
- Hide Core Blocks
- Regenerate Assets With Code
- Using ACF Repeater Field in Spectra
- Pixabay Image Search Feature
- Â Getting Started with Instagram
- How to Fix Stretched Spectra Images in WordPress 6.7
- How to Change Breakpoints in Spectra?
- Controlling Access to the Spectra Design Library Based on User Roles
- Advanced Loop Builder
- Multi-Column Form Block Using Utility Classes
- Why Am I Seeing Mixed Content or Non-HTTPS Errors?
- Preview Options (Desktop, Tablet & Mobile)
- 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.