What is the Beam Background effect?
The Beam Background effect is an animated background option available in the MA Background extension of Marquee Addons Pro. It adds moving streaks of light (“beams”) that travel across an Elementor Container, creating depth and motion without using videos or heavy assets. This effect is ideal for adding subtle visual energy while keeping performance lightweight.
Common use case
A common use case for the Beam Background effect is in hero sections or feature banners, where gentle motion helps draw attention to headings, CTAs, or key messaging without distracting users from the content.
Additional use cases
- SaaS landing pages: Add modern motion to pricing or feature sections.
- Call-to-action sections: Guide the user’s eye toward buttons or forms.
- Footers: Create subtle directional movement toward contact links or social icons.
- Section separators: Visually differentiate content blocks without adding images.
Requirements
To use the Beam Background, you need to have the following:
- You need the Marquee Addons Pro plugin installed and activated on your website.
- You can find detailed installation instructions in our installation guide.
- Make sure that this addon is enabled so you can find it in the Elementor editor.
- Marquee Addons works only with the Elementor Page Builder plugin, so you will need to have it installed and activated as well.
Add the extension
The Beam Background isn’t a standalone widget; it is an enhancement found within the settings of any Container.
- Open your Elementor editor and select an existing Container or drag a new one onto the canvas.
- Go to the Style Tab in the panel.
- Locate the section labeled MA Background.
- Toggle the Background Effects dropdown to choose Beam.
Video Tutorial for Beam Background effect
See a video demonstrating the effect in action.
Settings for the Beam Background effect
All Beam Background controls are located in the Style tab of the selected Container.
- Head color: Set the color of the leading edge of the beam.
- Tail color: Set the color of the trailing edge.
- Direction: Choose the travel path (Left, Right, Top, Bottom).
- Size: Adjust the thickness of the beams.
- Count: Control how many beams appear at once (Recommended maximum: 50).
- Speed: Adjust how fast the beams travel.
