EN
Searching...

The Banner

Using a Banner adds visual flair to your website and adds character to your content whether it’s a gallery, page, folder, client album, or blog. You can add the image alt text to the banner images, this helps in SEO.

Banners can be placed either on top or bottom of your content (under the website header) and are typically used to show a full-width banner image/image slideshow/video.

Tip

In case you want to just show a text message at the top of your website, use the Announcement bar. Or if you want to create a pop-up that appears when visitors view your website, you can try the Marketing Popup.

Here’s what a Banner looks like: 

Check a live demo site.

The Banner settings are categorized as: 

  1. Slides
  2. Settings
  3. Layout

1. Slides

The options under the slides category are: 

Select the type of banner. You can choose from a custom banner, auto banner, and inactive.

  • Custom Banner – Custom slides will be used for the banner.
  • Auto Banner – The gallery’s featured image, headline, and description will be used for the banner.
  • Inactive – Banner will not be visible on the website.

Slides
  • Click on the +Add Slides (1) button in order to add the custom slides to the banner.
  • Once you have uploaded the slides, you can edit (2) or delete (3) the slide.

Points to remember: 

  • The ideal size of a Banner image will be 2000 pixels X 2000 pixels. 
  • Supported image file formats for the banner are JPG, JPEG, PNG, and GIF. 
  • We recommend you upload landscape images rather than portrait ones.
  • Add the text over the images from the Master/Slide text field. Do not upload images with text in them.

Edit Image/Text Slide 

  • Once you have clicked on the edit icon, you would see the Image/Text Slide drawer.

The options available here are: 

  1. Image 
    • Click on the Upload button to change the image/slide. Click on the Delete button to delete the slide.
    • Change the focal point of the image just by clicking on the image anywhere.
  2. Mobile Image – Upload a mobile banner image. We recommend adding portrait images here.
  3. Specify the Alt Text for the image slide. This helps for SEO purposes.

  1. Slide Text – Enter the slide text which will appear over the slide. You can make the text bold, italic, underlined, link it, and do much more.
    Also See: The Pixpa text editor.

  1. Slide Link
    • Click on the settings icon and enter the overlay link for the slide.
    • You can specify any page inside/outside your website, your email, or a contact number.

Also Check: Linking text/button.

Note

The complete slide will convert into link only when Banner Text and Buttons option is selected as Different for each slide.

  1. Button & Links
    • Add up to 10 buttons/links to the slide content.
    • You can add a normal button, text link or use an image/icon as a button.
      Also Check: Button & Links.
  1. Hit the Save button to save your changes.

  • Specify whether the text and the buttons will be the same for all the slides or different for each slide. When you select the Same for all slides option, the banner text and Button 1 & 2 will be used.
  • When you have selected the Different for each slide option, the text and buttons specified for a particular slide will be used.

  • These buttons/links appear over your banner slides (common for all slides).
    Also Check: Button & Links.

2. Settings

Under the Banner Settings tab, you get the following options:

  1. Banner Width – Specify the width of the banner.
    • ‘Full width‘ will display the banner while covering the entire width without leaving any margin.
    • ‘Boxed‘ will display the banner while leaving some amount of padding on right and left of the screen.
    • ‘Site width‘ can be specified in the Design section. You can specify a fixed width there.
      It will display the banner by adhering to the fixed width specified.
    • Scale and Fit – Images will fit within the banner width and height.
    • Fit to Width (Desktop Only) – Images will be scaled to banner width. Banner height will inherit the image height.
  1. Banner Desktop Height – Specify the desktop banner height if you have chosen the full bleed or scale and fit option in the Display Mode field.
  2. Banner Mobile Height – Specify the mobile banner height.
Note:

If the banner section is added to a page, then the banner height would be inherited from the section height.

  1. Page Header – Select the header style that will be applied over the banner.
    • In case, you have selected Default, the header will use the default website header style and the banner will be placed after the header. Check out a live example.
    • In case, you have selected Transparent, the header background will be set as transparent and the header elements will be white. The banner will be placed under the header. Check out a live example. 
  2. Header Items – If you have set the header to be transparent, you can choose the header items/menu items color:
    • In case Default Color is selected, the header items color is inherited from the Design section.
    • In case Specify Color is selected, you can click and choose the header items color.

Also Check: Styling the Header items of any page.

  1. Visibility – Set the visibility of the banner.
  2. Position – Specify the position of the banner.

  1. Content Position – Specify the content position over the banner.
  2. Content Width – Specify the width for the banner content.
  3. Background Color – Set the background color for the banner.
  4. Overlay Color – Set the overlay color for the banner.
  5. Navigation Style – Specify the navigation style of the banner. You can select from Chevron, Long Arrows, and Short Arrows. Select None if you want to disable the navigation controls.
  6. Navigation Color – Specify the color of navigation controls on the banner.
  7. Outer Margin – Apply the outer margin for the banner. When the outer margin is applied, free space occurs at the bottom of the banner.
  8. Scroll-down Arrow – Select this option to show a scroll-down arrow over the banner.

  1. Slideshow – Choose the Autoplay option to enable slideshow for the banner.
  2. Slideshow Speed – Specify the slideshow speed (in seconds).
  3. Slideshow Transition – Specify the image transition style for the banner.
  4. Finally, hit the Save button.

  1. Align the button/links to be left, right, or center aligned.
  2. Specify the Space Between the Button/Links that have been added.
  3. Specify the Space Above the Button/Links.
  4. Choose the Hover Effect for the button/links.

  1. Choose the size of the Normal Button that you have added in the Button/Links. 
  2. Specify the height of the Image Button if you have added an image link in the Button/Links. 
  3. Specify the size of the Icon Button if you have added a social icon in the Button/Links.  

If you have added a social icon in the Button/Links, then:

  1. Choose the Social Icon Type/Shape.
  2. Choose the Social Icon Color Style.
    If you have chosen the Selected Color option above then:

    1. Specify the Social Icon Color.
    2. Specify the Social Icon Background Color.

3. Layout

You can easily change the layout of a Banner. Know more about the banner layouts.

Tagged:

Can't find what you're looking for?

Get in touch with a Pixpa Expert.

Contact Us