Are you looking to add a marquee text effect in WordPress? Marquee text, also known as scrolling or ticker text, adds motion to your webpage, grabbing visitors’ attention. This eye-catching effect is great for highlighting important information or announcements.
With the Advanced Typography block from Nexter Blocks, you can easily create a marquee text in WordPress.
To check the complete feature overview documentation of the Nexter Blocks Advanced Typography block, click here.
Requirement – This block is a part of the Nexter Blocks, make sure it’s installed & activated to enjoy all its powers.
To do this, add the Advanced Typography block to the page and follow the steps –
1. In the Advanced Typography tab, select Normal or Multiple from the Select Option section.
Let’s select Normal.
2. Then add the text in the Text field.
3. After that, enable the Marquee toggle from the Marquee tab.
Note: In the Multiple option you’ll find the Marquee option in each text repeater item.
Then from the Type section, you can select the marquee type. Here you’ll find two options –
- Default – This will add a marquee tag to create the marquee effect.
- On Transition – This will create the marquee effect using CSS transition.
Note: We recommend using the On Transition option as the marquee tag is not very SEO-friendly.
Let’s select Default here.
From the Direction dropdown, you can select the marquee scrolling direction. From here you can set the marquee direction to left, right, top and bottom.
Then, from the Behavior section, you can set the scrolling behavior. Here you’ll find three options –
- Scroll – This will add a scrolling effect.
- Slide – This will create a sliding effect.
- Alternate – This will make the text move in both directions alternatively.
In the Loop field, you can set how many times the animation will play.
Note: You can set the loop to 0 or -1 to set an infinite loop.
From the Scroll Amount field, you set the animation speed.
Then, from the Animation Duration field, you can set the animation duration.
You can set the marquee animation horizontal area for responsive devices in the Marquee Text Width field.
Based on your settings, you’ll see a beautiful marquee text.
