No results found. Try again with different words?
Search must be at least 3 characters.
- Using Spectra Heading Block
- Buttons
- Post Grid
- Content Timeline
- Social Share
- Google Map
- Add Testimonials to Your WordPress Website
- Info Box
- Team
- Icon List
- Price List
- Post Masonry
- Post Carousel
- Post Timeline
- Call To Action
- Advanced Columns
- Blockquote
- Marketing Button
- Gravity Form Styler
- Table Of Contents
- How-to Schema
- FAQ – Schema/ Accordion
- Inline Notice
- WP – Search
- Review Schema
- Lottie
- Taxonomy List
- Tabs Block
- How to Create Contact Forms for Your WordPress Website
- Star Rating
- Masonry Image Gallery
- Wireframe Blocks
- Spectra – Heading Block
- Spectra – Image Block
- Spectra – Buttons block
- ‘Translate Everything’ Feature in WPML
- Spectra – Container Block
- Spectra – Taxonomy Styling Options
- Spectra – Block Presets
- Image Gallery
- Counter Block
- Modal Block
- Registration Form Block
- Slider Block
- Custom CSS On Page Level
- Countdown Pro
- Designing Custom Navigation for Your Slider
- Instagram Feed
- Loop Builder
- Animations
- Using Spectra Login Form Block
- Global Block Style Extension
- How to Create Popups Using Spectra
- How to Add Custom Blocks Under Spectra Blocks
- Move Block Patterns from One Site to Another
- Getting Started with Grid Builder
- Adding a Newsletter Form to Your WordPress Site Footer
- How to Register High-Privileged Users on Your Website
- Section
- Troubleshooting – Icons missing from the blocks
- Spectra Patterns
- How to Set Multiple Column Fields in Contact Form 7 Styler of Spectra?
- Styling Checkbox / Radio / Acceptance control in Contact Form 7 Designer block of Spectra
- Unable to Style Checkbox / Radio Buttons / Acceptance Control using Contact Form 7 Styler of Spectra
- Tab Index – for multiple Gravity Forms
- How to Get Started with Spectra
- How to Exclude A Heading from Table of Contents?
- Spectra – Display Conditions for Blocks
- Installing and Importing Starter Templates
- How to Get Started with Spectra
- Manually Install Spectra via FTP
- Automatic Beta Updates for Spectra
- How to Rollback to Previous Spectra Versions
- How to Load Google Fonts Locally
- Activate the Spectra Pro License Key
- How to Install Spectra Pro Plugin
- Translate Spectra Strings using Loco Translate
- How to add a Transparent / Sticky header?
- How to Change the Site Logo?
- How to Change Global Styles?
- How to Disable Title on Posts, Pages?
- How to add a transparent/ sticky header for a single page/post?
- Change Header and Footer Patterns in Spectra One Theme
- Add Custom/Google Fonts In Spectra One
- How to reset global default styling?
- Manually Install Spectra One via FTP?
- Disable or Enable Header/Footer for 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.