Banner Widget

The Banner widget is part of Neve PRO's Elementor Booster module

Check out the video below or follow the short tutorial on how to use the widget to create a great looking banner with awesome hover effects.

Step 1

Select the Banner widget from the menu bar on the left-hand side of your screen and drag and drop it in the selected area.

Step 2

Choose an image of your banner. You can also set the size of the image.

Step 3

You can also link the banner to an existing page from your site, or to a custom link.

Now is the time to customize the hover effect for the banner. You can choose from the six options available in the Effect dropdown. Enabling the Always Hovered toggle will make the hover effect appear at all times, no matter if the banner is hovered or not.

Apart from the Effect option, you can also customize the Hover Effect, which has options for Zoom In, Zoom Out, Scale, Grayscale, Blur, Bright and Sepia.

Step 4

In the Content panel, you will find options to customize all the content that appears on hover over the banner, according to the hover effect you've selected.

Step 5

After building the widget content, you can go ahead and customize it. Click on the Style tab to explore the options. There you will find options for Image, Title, Description, and Container. 

For each element of the widget, you can customize the color, font family and size, padding, margin and so on. The image has special options for Opacity and CSS Filters like Blur, Brightness, Contrast, Saturation, and Hue. 

Note: Some CSS filters might prevent hover effects from applying on the banner.

Step 6

Now, that the widget is almost ready, you can go on to the Advanced tab, if you want to add motion effects, advanced effects, content protection, background or make the page responsive.

Step 7

After finishing all the editing, click on Publish to see your work live.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.