Banner Widget

πŸ“ Note: The Banner widget is part of Neve PRO's Elementor Booster module

The Banner works like a section that can bear an image, description that can catch the attention of the users.


Adding the widget

1
Once the Elementor Editor has been opened, click on the βž• button to add a new section on the page.

2
Add the Banner  widget from the Elementor Library by clicking on the βž• button and  navigating to the Neve PRO Addon Widgets.

3
Drag and drop the Banner widget  into the selected area.

Customizing the widget

The Banner component is easily customizable and its options cover three areas:

πŸ“·Image

  • Upload image - choose the image that you want to be displayed on the banner.
    • Link - you can link the image to a custom URL or to an existing page, modify its title, choose to open it in a new tab, or convert it to a nofollow option.
  • Effect - something very interesting for the banner widget is that you can choose a hover effect for it, from six available types.
    • You can also decide if the hover effect should be always applied, which will make the hover effect appear at all times, no matter if the banner is hovered or not, and how it should behave ( zoom in / out, blur, sepia ).
  • Height - set a custom height for the banner.
  • Extra Class - add an extra class name for the banner.

πŸ–ŒοΈ You can also  style its appearance by navigating into the Style tab and exploring the options, such as Background Color, opacity, CSS and Hover Filters, Border, or Blend Mode.

πŸ“ Note: Some CSS filters might prevent hover effects from applying on the banner.


πŸ“–Content

  •  Title - the title's appearance inserted here depends on the Effect established earlier, into the Image section. It appears on hover over the banner.
    • You can pick an HTML Tag, to increase the title's size. 
  • Description - insert a description of the banner here, using the text settings provided. Its appearance also depends on the Effect selected earlier. It appears on hover over the banner.
  • Button - enable a button linked to a certain page and customize its text.
  • Alignment - select one of the three orientations ( left / center / right ) for the title and description.

πŸ–ŒοΈ You can style content's  appearance by navigating into the Style tab and exploring the options, available not only for the title, but for the description too, such as text color, background color, typography, and shadow.

Something interesting is that in the Style tab you can also find options for the container, which is different from the border of the banner.

πŸ“Œ 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.

After finishing all the editing, click on  Update 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.