Marquee Element

What is the Marquee element?

Marquee element is used to create the horizontal scrolling-like effect for a row that contains other elements.

Here are some key features of the Marquee element that might have been utilized to:

• Highlight Promotions and Special Offers: E-commerce websites might have used the Marquee element to highlight special promotions, discounts, or limited-time offers. The scrolling effect could draw attention to these offers, making them more visible to users visiting the site.
• Display Brand Partnerships: E-commerce sites might have used the Marquee element to display a scrolling list of partner logos. This can showcase relevant brands and increase the credibility of the site, building trust with users through recognizable logos.
• Scrolling Customer Testimonials: The Marquee element could also have been used to feature scrolling customer reviews. This dynamic display can highlight positive feedback, enhancing the site’s trustworthiness by showcasing satisfied customer experiences.
• Display Call to Action: In some cases, e-commerce sites might have used the Marquee element to display scrolling CTAs. This can draw user attention to important actions like ‘Sign Up Now’ or ‘Learn More,’ prompting engagement and improving conversion rates through clear, visible prompts.

How to add the Marquee element to your product page with GemPages Editor V7?

Step 1: Go to the GemPages Editor V7 and find the Marquee element in the search bar.

Step 2: Drag and drop the element to the desired area.

Configure the settings tab

Item management 

In the Item Management section, you can:

• Re-order items.
• Add items.
• Set max width for each item.
• Change spacing between items.

Icon separator

You can add an icon as a separator between each item and change its type, size, and color. 

Interaction 

Coming to the Interaction section, you are allowed to:

• Set up whether it should stop the marquee when a user hovers over it.
• Change marquee speed.
• Change marquee scrolling-like effect direction.
• Preview/Pause marquee animation in the design area.

Size

Customize the width and height of the Marquee element as you prefer. 

Item shape

You can edit the item shape in the Marquee element, such as Border, Corner, and Shadow. 

Color 

You can change the item background and Marquee background color in this section. 

Kindly note that:

• You can drop any element into a marquee except the following ones: Tabs, Accordion, Contact Form, Product, Hero Banner, Product List, Article List, and Carousel. 
• Too many marquees on the same page may cause lagging issues (>20). 
• Too many elements inside a marquee may cause lagging issues. 
• In case of a slow network that leads to slow image loading,the marquee size to change after the image has successfully loaded.

Configure the advanced tab

Display on

You can decide which devices the Marquee element will be shown on: Desktop, Tablet, and Mobile. Simply toggle each option to show or hide the element on specific devices.

Spacing (px)

Adjust the margin and padding values around the Marquee element using the visual box model:

• Outer values (top, right, bottom, left) control the margin (the space outside the element)
• Inner values control the padding (the space inside the element’s container)
• Click the link icon in the center to sync/unlink values.

Shape

In the Shape section, you’re able to:

• Add a border to the element and select from different styles (solid, dashed, dotted).
• Customize the corner radius: choose between square, rounded, or pill-style corners.
• Enable a shadow to help the element stand out from the background.

Position

Change how the Marquee is positioned within its section or relative to other elements, including:

• Static
• Relative
• Absolute
• Sticky
• Fixed

Opacity

Adjust the element’s transparency level:

• 100% = fully visible
• 0% = fully transparent

Use the slider or input box to fine-tune the visibility. Helpful when layering elements or creating subtle visual effects.

Animation

Enable this option to add an entrance or hover animation to the Marquee element. Once turned on, you can customize the animation behavior with the following options:

• When Appear/When Hover: Choose whether the animation should be triggered when the element appears on the screen or when a user hovers over it
• Animation types: You can choose from several animation styles: None, Fade, Slide, Zoom, Shake
• Speed: Adjust the animation speed using the slider. Moving it to the right will make the animation play faster
• Show more: Click this button to access additional animation effects (if available).
• Preview: Use the Preview button to test how the animation looks directly in the editor.
• Delay: Set a delay (in seconds) before the animation starts. This is useful if you want to stagger animations across multiple elements.
• Easing: Choose how the animation progresses over time, available options include: Ease in out, Ease in, Ease out, Linear
• Preview: Click the Preview button to instantly test the animation in the editor.

Overusing it can affect performance and distract users..

Interaction

Create custom behaviors for your Marquee element without coding. Click Create to open the Interaction Settings panel.

You’ll set up:

• Trigger: Choose when the interaction starts – Click on element or Hover element
• Action: Select a target element on the page and define what happens, including change text style, change content, show/hide, or scroll to.

CSS class

Enter custom CSS class names (separated by spaces) to apply your own styling rules to the element. This is helpful if you want to add advanced styling through custom CSS in your theme or inside the GemPages Global Style.