Marquee Text is an innovative module from DiviFlash that effectively captures attention and instills a sense of urgency. It allows users to display crucial or timely information, such as news headlines or announcements, in a visually compelling manner.
DiviFlash’s Marquee Text provides flexibility by enabling users to customize every aspect while also allowing the application of custom CSS to individual content elements. Learn about the advanced features and customization options in this comprehensive Marquee Text overview.
Marquee Text Settings
Marquee Text module allows you to add text, images, and even icons, while enabling customization of design, size, spacing, and other options. You can also apply custom CSS to the marquee text, text icon, and text image to further enhance their appearance.
Content Tab
On module launch, you’ll encounter a couple of pre-made content items and an ‘’Add New Item’’ option. Click on ‘’Add New Item’’ to add and design content elements as needed, or edit the existing premade items.
Add New Item
Content Tab:
- Content
- Text: Enter the main text that will appear as scrolling marquee text on the web page.
- Text Tag: Choose the text tag type from the available nine options.
- Image & Icon
- Enable Icon: Toggle on the button to enable or display an icon in the marquee text
- Image: Upload an image that you want to display in the scrolling marquee text.
- Image Alt Text: This image alt text promotes short, descriptive text that effectively conveys the image’s information.
- Background
Use color, gradient, image, video, pattern, or mask on the whole content element area to personalize the marquee text’s visual appearance.
Design Tab:
- Content:
This content option allows you to change the background appearance by applying a color, gradient, or image to the entire background. Here you will find three containers for color, gradient, and image with various styling options, including:
- Background Color:
Background Color: Apply the background color of your choice to the marquee text’s background.
Enable Clip: To apply clipping to the text, you can also apply background color as a clipping path, adjust the fill color and stroke color, and modify the stroke width.
- Background Gradient:
Use gradient background: Enable the gradient background option and customize the gradient color, type, direction, position and more to your liking.
Enable Clip: Enable this option to apply a clipping effect to the text. You can also enable the background clipping effect and customize the fill color, stroke color, and stroke width.
- Background Image:
Background Image: Insert an image of your choice in the background of the marquee text.
Background Image Size: Choose the background image size from cover, fit, actual size to custom size options.
Background Image Position: Select the background image alignment from 10 alignment options.
Background Image Repeat: 5 background image repeat options, including no repeat.
Enable Clip: Clip the marquee text. You can also use the image as a clipping mask with options to customize the fill, stroke, and stroke width.
Besides changing the background, you’ve got lots of other ways to style and customize the content area. You will find options like text padding and margin, font family, font weight, font style, text color, text size, line spacing, and so on.
- Image & Icon:
Like the content option, image and icon also offer three containers for making changes to the image or icon’s background: color, gradient, and image. Each of these containers comes with multiple styling options, including:
- Background Color:
Use Gradient Background: Choose any color for the marquee text icons’ background.
Icon Color: Choose your preferred icon color.
Icon Size: Resize the icon to fit your design needs.
After Text: Toggle it to place the icon after the text instead of the default front position.
- Background Gradient:
Enable the gradient feature. You can further personalize the gradient by adjusting options like color selection, gradient style, and placement. You can also select the color of the icon, resize it, and select its placement, just like you can with the background color.
- Background Image:
Instead of color and gradient, you can also use an image for the icon. Add an image and then change its size, position, and image repeat options. Here, you can also change the icon color, size, and placement.
Note: Both icons and images share the same styling and customization options. However, all containers share common customization options such as wrapper padding and margin, rounded corners, border style, box shadow, and so on.
- Spacing:
Customize the padding and margins on all sides (top, bottom, left, and right) of the marquee text to suit your needs.
- Border:
Style the appearance of marquee text borders by adjusting rounded corners, border type, border width, color, and style.
- Box Shadow:
You can add box shadows to the entire marquee text area. There are a total of 7 box shadows with various customization options for each to further enhance the style. Use the ‘none’ option to remove all box shadows from this content element.
- Filters:
Enhance the appearance of your text by applying color filters to the marquee text. You can adjust hue, saturation, brightness, contrast, invert, sepia, opacity, and blur in 16 different blend modes.
- Transform:
Transforms allow you to manipulate marquee text using five types of transformation options: scale, translate, rotate, skew, and origin.
Advanced Tab:
Advanced Tab contains all the standard design and customization options available for Divi modules. You can use these same features in this module as well.
Settings
In the settings option, you’ll find some advanced options to make the marquee text look functional and work more efficiently.
Pause On Hover: Enable pausing when the mouse hovers over the text.
Loop: Enable continuous scrolling of the marquee text.
Gap: Determine the desired spacing (in pixels) between marquee text items.
Speed (ms): Adjust the scrolling speed of the marquee text.
Animation Direction Reverse: Toggle it on to enable reverse scrolling of the marquee text.
Background
Add color, gradient, image, video, pattern, or mask to the entire module’s background to customize the module’s look and feel.
Admin Label
By default, the admin label matches the module’s name, but you can set a preferred name to easily identify the module in the admin area without affecting the front end area.
Design Tab
Content
Similar to the design options in the child item’s design tab, the parent or global design tab offers almost the same functionalities. Here, you’ll also find three containers for color, gradient, and image. You can use color, gradient, or image for the text background, and adjust padding, margin size, as well as make changes to the font and text.
Image & Icon
Like the content option, image and icon options also offer comprehensive customization and styling options for icons and images. Make changes to align with your site’s design aesthetic or meet your styling requirements.
Sizing
Globally customize width, maximum width, module position, and height (Min, Normal, Max) to suit your needs.
Spacing
Adjust the global padding and margin across all sides of the marquee text module to craft visually appealing layouts.
Border
Customize the border of the entire marquee text module area. Adjust the rounded corners, border styles, border width, color, and other properties.
Box Shadow
There are a total of seven box shadow options, each offering multiple customization choices. You also have the option to select none if you prefer not to use any box shadows on the entire module area.
Filters
Apply color filters globally to the entire module, adjusting parameters such as hue, saturation, brightness, contrast, invert, sepia, opacity, and blur. You can explore these adjustments in 16 different blend modes.
Transform
Use five distinct transform features: scale, translate, rotate, skew, and origin options for visual adjustments
Animation
Enhance the visual appeal of the marquee text by applying one of seven animation styles: Fade, Slide, Bounce, Zoom, Flip, Fold, or Roll.
Advanced Tab
Advanced Tab contains all of the standard Divi module options, and these options are also available in our module. Additionally, here you’ll find extra custom CSS options for the text, icon, and image elements, empowering users to apply custom styling for a more personalized and responsive website.
