REA Banner

REA Banner widget enables you to create eye-catching interactive banners with multiple interactive styles and tons of customization options without any coding.

Content

Image

Option to set the Banner image and customize it:

  1. Upload Image - You can upload your banner image here.

  2. Link - Enable or disable the banner link. When the option is enabled, you can select from the following settings:

    1. Custom Link - Enable or disable a custom link.

    2. Existing page - Link to an existing page.

    3. Link Title -Add a text to the links title attribute.

    4. New Tab - Open in New Tab.

    5. Nofollow Option - Enable or disable Nofollow.

  3. Effect - You can customize from different predefined hover effects for the banner.

  4. Always Hovered - Enable this option if you want to use these effects without hovering over the image.

  5. Hover Effect - Add various effects for hovering on the banner.

  6. Height - Set a custom height for the banner.

  7. Enable Mouse Tilt - Enable / Disable mouse tilt effect.

  8. Extra Class - Add an extra CSS class name that will be applied to the banner.

Content

  1. Title - Allows you to change the title of the banner.

  2. HTML Tag - You can choose from H1-H6 HTML tags for Title.

  3. Description - You can add the content of your Banner in the Richtext editor. You can edit the text visually or with code, and add images from the media library.

  4. Button - Enable or disable. When the option is enabled you can change Text and Link properties.

  5. Alignment - Align the title and content to the left, center, or right.

Responsive

Responsive Controls - If the description text is not suiting well on specific screen sizes, this option will hide the description text.

Style

General

  1. Background Color - You can select the background color for the banner.

  2. Image Opacity - You can select the image opacity for the banner image.

  3. Hover Opacity - You can select the hover opacity for the banner image.

  4. CSS Filters - You can select the CSS filters like blur, contrast, brightness for the banner.

  5. Border Type - You can add the border for the banner.

  6. Border Radius - You can adjust the border radius for the banner.

  7. Blend Mode - You can describe how images should appear when elements overlap the background.

Title

  1. Color - You can choose the color for the title.

  2. Typography - Adjust the font size, transform to uppercase, font family.

  3. Shadow - You can add text shadow to the Title.

  4. Margin - You can set the margin to the Title.

Description

  1. Color - You can choose the color for the description.

  2. Typography - Adjust the font size, transform to uppercase, font family.

  3. Shadow - You can add text shadow to the description.

  4. Margin - You can set the margin to the description.

Button

  1. Color - Change the button text color.

  2. Hover Color - Change the button text color when it is hovered upon.

  3. Typography - Change button text styling properties.

  4. Background Color - Change button background color.

  5. Hover Background Color - Change button background color when it is hovered upon.

  6. Border Type - Apply various types of borders and change its width and visual properties with this setting.

  7. Border Radius - Adjust the border radius of the button to make it appear as square or have rounded corners.

  8. Shadow - Apply a box shadow to the button.

  9. Margin - Change the margin of the button.

  10. Padding - Change the padding of the button.

Container

  1. Border Type - You can add the border type to the REA Banner container.

  2. Border radius - You can adjust the border radius for the banner container.

  3. Box shadow - You can add box shadow to the banner container.

Last updated