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. 1.
    Upload Image - You can upload your banner image here.
  2. 2.
    Link - Enable or disable the banner link. When the option is enabled, you can select from the following settings:
    1. 1.
      Custom Link - Enable or disable a custom link.
    2. 2.
      Existing page - Link to an existing page.
    3. 3.
      Link Title -Add a text to the links title attribute.
    4. 4.
      New Tab - Open in New Tab.
    5. 5.
      Nofollow Option - Enable or disable Nofollow.
  3. 3.
    Effect - You can customize from different predefined hover effects for the banner.
  4. 4.
    Always Hovered - Enable this option if you want to use these effects without hovering over the image.
  5. 5.
    Hover Effect - Add various effects for hovering on the banner.
  6. 6.
    Height - Set a custom height for the banner.
  7. 7.
    Enable Mouse Tilt - Enable / Disable mouse tilt effect.
  8. 8.
    Extra Class - Add an extra CSS class name that will be applied to the banner.

Content

  1. 1.
    Title - Allows you to change the title of the banner.
  2. 2.
    HTML Tag - You can choose from H1-H6 HTML tags for Title.
  3. 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. 4.
    Button - Enable or disable. When the option is enabled you can change Text and Link properties.
  5. 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. 1.
    Background Color - You can select the background color for the banner.
  2. 2.
    Image Opacity - You can select the image opacity for the banner image.
  3. 3.
    Hover Opacity - You can select the hover opacity for the banner image.
  4. 4.
    CSS Filters - You can select the CSS filters like blur, contrast, brightness for the banner.
  5. 5.
    Border Type - You can add the border for the banner.
  6. 6.
    Border Radius - You can adjust the border radius for the banner.
  7. 7.
    Blend Mode - You can describe how images should appear when elements overlap the background.

Title

  1. 1.
    Color - You can choose the color for the title.
  2. 2.
    Typography - Adjust the font size, transform to uppercase, font family.
  3. 3.
    Shadow - You can add text shadow to the Title.
  4. 4.
    Margin - You can set the margin to the Title.

Description

  1. 1.
    Color - You can choose the color for the description.
  2. 2.
    Typography - Adjust the font size, transform to uppercase, font family.
  3. 3.
    Shadow - You can add text shadow to the description.
  4. 4.
    Margin - You can set the margin to the description.

Button

  1. 1.
    Color - Change the button text color.
  2. 2.
    Hover Color - Change the button text color when it is hovered upon.
  3. 3.
    Typography - Change button text styling properties.
  4. 4.
    Background Color - Change button background color.
  5. 5.
    Hover Background Color - Change button background color when it is hovered upon.
  6. 6.
    Border Type - Apply various types of borders and change its width and visual properties with this setting.
  7. 7.
    Border Radius - Adjust the border radius of the button to make it appear as square or have rounded corners.
  8. 8.
    Shadow - Apply a box shadow to the button.
  9. 9.
    Margin - Change the margin of the button.
  10. 10.
    Padding - Change the padding of the button.

Container

  1. 1.
    Border Type - You can add the border type to the REA Banner container.
  2. 2.
    Border radius - You can adjust the border radius for the banner container.
  3. 3.
    Box shadow - You can add box shadow to the banner container.