Presenting the latest Qubely block “Animated Headline”. Due to the popular demand, we are adding a fully customizable animated headline builder to let you bring a new way of presenting prominent content. Create a more engaging site experience with animated headlines.
Before Animated Headline block, we only had the Heading block which was built simple usage. But with the latest block, you can choose from a wide range of animations and personalize it to suit your needs. And the most interesting part of this block release is that it is available for free to both the Qubely Free & Pro version.
Animated headlines are useful because they help your site in multiple ways. Such as
- Draw your website visitors focus to specific areas
- Helpful for increasing the conversion rate on your site
- Deliver more messages in an intuitive manner
- Brings life to your landing page design
With the latest Animated Headline block in Qubely, you will have full control over how you want to make your headings look & feel.
- You can choose the headline level from H1 to H6
- Set multiple texts that you want to animate
- Define what type of animation you want to set
- Choose the color of the text and the background
- Customize padding, spacing, typography, etc.
We have created several demo sections with the Qubely Animated Headline block for your inspiration. Click here to view them.
Choose the Headline Level
You can choose from multiple headline levels for your animated text. Just click on it and it will be applied. You can choose from H1 to H6 as your headline level.
Set Multiple Animated Texts
After you chose your animated texts you can define what texts will show up before or after your animated text. You can add multiple words that you want to animate in your Animated Headline Qubely block. Add words that attract users’ attention and write it here. Once you decided to add a word, hit enter/write comma and it will be added to the animated headline que.
The words will follow the first input first output order. Meaning the first word that you add will be the first that comes up during the animation.
Define the Animation Type
With the Animated Headline block, you get preset animations that you will be able to use with just one-click. You can choose from blinds, clip, flip, fade, scale, push, twist/wave as your animation type. From the drop-down menu choose your desired animation and select the one you like.
Set the Final Design
From the design settings, you will be able to specify the design elements of the Animated Headline block. Set specific typography, use the slider to set the size of the fonts, select the font family and more.
If you want to go further with the customization you can enable the advanced typography. Set line-height, letter-spacing, set the color of the text as well. Choose any color from a wide color palette.
If you want to learn-in-depth about all the available features check out the Qubely Animated Headline documentation.
Both Qubely Free & Pro Updated
You will be able to start using the Animated Headline block with the Qubely free & pro. The update should be available to you right now. Along with the free version update (v1.3.0) we have also released a new version of Qubely Pro (v1.1.0).
Here’s what you get with the latest versions of Qubely:
- New: Animated Headline block
- Update: Block specific script loading on the frontend
- Update: Conditional script loading for interactions, animations, and parallax
- Update: Optimised CSS files on the frontend
- Update: Infobox block – External image option
- Update: Conditional Block Script Loading (Pro)
- Fix: Qubely Free version installer issue (Pro)
- Fix: BuddyBoss conflict issue
- Fix: Row block – Background overlay issue
- Fix: Gradient field – Default preview issue
What Are Your Thoughts
No matter what type of design you can think of with your animated heading text, you will be able to build it with the new “Animated Headline” block. Saving you the time needed to code for implementing animation to your headlines.
If you want to learn in-depth about the available Qubely features you can always check out the documentation. As you might already know, Qubely now has 34+ Gutenberg blocks with more on the way. Our goal is to make Qubely the ultimate Gutenberg toolkit for you. And if you want to be a part of that journey stay tuned.
ColleenHF
I am using this on a site right now and it shows up beautifully in the editor, but is frozen on the site. Any suggestions to troubleshoot?
ColleenHF
I disabled the Brizy plugin and it seems to be working fine now. Is there a way to decrease the speed of the animation?
Sekander
Hi,
I am sorry to inform you that we do not have the feature to control the animation speed in the animated header at this moment. I have added this as a feature request. I hope we will be able to work on this soon.
i love cheese
Looks great are Joomshaper and Themeum related to each other?
Sekander
Yes, JoomShaper is our parent company. Themeum is just a brand of JoomShaper.