We have updated the Marquee effect to expand its functionality for elements, offering more ways to add a professional, dynamic touch to your layout.
The marquee effect is a continuous scrolling animation that allows elements to glide smoothly across your page in a loop. It is an ideal way to highlight client logos, testimonials, or other trust elements, ensuring they capture your visitors' attention through fluid motion.
🎬 At the end of the article, you'll find our latest video tutorial!
How to add a Marquee
Setting up a marquee starts with choosing the right section type and switching the layout.
Step 1: Add a new section
Click on Add Section and navigate to Blueprints in the left menu. Select a suitable blueprint and click to add it to your page.
Step 2: Open Layout settings
Hover over the section. A control panel will appear on the left. Click the Layout icon (the right-most symbol in that panel) to open the settings.
Step 3: Select Marquee
In the settings, click on the current Layout Type (which is usually set to "Columns" by default) and select Marquee from the dropdown menu.
Customizing the Structure
Once the marquee is active, you can define how many items appear and how large they are.
Step 1: Add boxes
Hover over the section to reveal the "Add New" button below. Click this to add as many boxes as you need.
📌 Please note: You can start adding elements (like images or text) to your columns immediately to see how they look in motion.
Step 2: Edit column count
This determines how many full boxes are visible on the screen at once (between 2 and 6). To adjust this, open the Layout settings and find the Columns section to choose your preferred amount.
Step 3: Define box width
Instead of every box being the same size, you can customize the width of individual boxes using a grid-based system. By default, every box is 1x1.
Hover over a box until you see the 1x1 button in its specific control panel. Click it to choose if the box should span across more units (2x, 3x, etc.). The maximum width available depends on the total column count you set in the previous step.
Refining Animation & Motion
In the layout settings, you’ll find further options for the marquee. Let’s take a look at the key features.
Speed: Select a speed between 0 and 4.
Reverse: By default, the marquee moves from left to right. Toggle this to send your elements in the opposite direction.
Fade Edge: This creates a soft gradient transition on the left and right sides of the section, making elements appear to "fade in" and "fade out" rather than cutting off abruptly.
Pause on Hover: If enabled, the animation will stop whenever a visitor hovers their mouse over the marquee, allowing them to take a closer look at specific content.
Styling the Frame
You can style the marquee as one cohesive unit or give each item its own distinct look.
Global Marquee Frame
To surround the entire scrolling area with a frame, open Layout Settings, switch to the Design tab ("paint brush" symbol), and choose between solid, outline, or transparent frames.
You can also set a global background using a color, gradient, image, or even video. This option is available in the solid frame.
Single Box Frame
To highlight a specific box, hover over that individual box to reveal its control panel. Click the Brush (Design) symbol to apply a unique frame or background specifically to that box.
Video Tutorial
For a clearer overview of the process, you can also watch our video tutorial below:
Frequently Asked Questions (FAQ)
Can I mix different elements in one marquee?
Can I mix different elements in one marquee?
Absolutely! You can place text, images, buttons, icons, or any other element inside the marquee boxes just like a standard column.
Is there a limit to how many boxes I can add?
Is there a limit to how many boxes I can add?
There is no hard limit, but we recommend keeping it reasonable to ensure smooth performance and the best user experience.
💡Do you have any feedback concerning this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂