The Banner section in Pixpa lets you add a visually engaging area to your pages while also enhancing SEO. Whether you’re working on a gallery, page, folder, client album, or blog, the banner helps set the tone and highlight important content.
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.
In this article
What is a Banner
A Banner is used to show a full-width banner image/image slideshow/video at the top/bottom of your content.
Add Banner Section to a Page
- A section can be added to a page. You can either add a section to an already existing page or create a new page within your website.
- On your page, click on the blue + icon to add a New Section to your page.
- You will now see the section categories on the left side.
- Click on the Banner (1) section and select any desired banner layout (2) for your page.
- Click on it to add the banner section to your page.
Banner Section Content
The Content tab under the Edit Banner section allows you to add and customize the content of your banner, whether it’s image-based or video-based.
Banner Type
Select the type of banner. You can choose any of the following options:
- Slides – Select Slides option if you want to display images in the banner. You can add multiple image slides under one banner.
- Video – If you want to display videos as banner slides, then select this option. Under each banner, you can add multiple video slides.
You can add up to 25 slides within a banner section..
Image Slides
When Slides is selected under Banner Type, you can create a slideshow by uploading multiple images as banner slides.
- Add multiple slides by clicking the + Add Slides button.
- Reorder them using the drag handles.
- Edit or delete individual slides using the respective icons.
Edit Image/Text Slide
- 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.
- Mobile Image – Upload a mobile banner image. We recommend adding portrait images here.
- Specify the Alt Text for the image slide. This helps for SEO purposes.
- 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.
- 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
- 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
- Hit the Save button to save your changes.
The complete slide will convert into link only when Banner Text and Buttons option is selected as Different for each slide.
Video Slides
When the Video slide option is selected, you can embed a YouTube or Vimeo video in your banner. The following configuration options are available:
1. YouTube/Vimeo Link – Enter a direct link to your video. Supported formats include:
- YouTube: https://www.youtube.com/watch?v=XXXXXXXXXXX
- Vimeo: https://vimeo.com/XXXXXXXXXXX
2. Show Video – Choose how the video appears on your site:
- Autoplay: Video will be embedded directly and autoplay on desktop (muted by default).
- Open in Lightbox: Clicking the video preview will open it in a popup.
3. Mobile Image – Upload a fallback image that will appear on mobile devices where autoplay video may not work or be supported. This ensures your banner remains visually appealing across all screen sizes.
4. Specify Alt Tag (Optional) – Add an alt tag to improve SEO and accessibility. This describes the fallback image for screen readers or in cases where the image cannot be displayed.
5. 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
6. 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
7. 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
8. Save – Hit the Save button to save your changes
Banner Text and Buttons
- 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 Buttons 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.
Banner Text
- Enter the banner text which will be common for all the slides.
Also See: The Pixpa text editor
Buttons & Links
- These buttons/links appear over your banner slides (common for all slides).
Also Check: Button & Links - After making your changes, click the Save button on the top right to apply them to your banner.
Banner Settings
Under Banner Settings tab, you get the following options:
Banner Display Mode
-
- 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.
- 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.
- Banner Mobile Height – Specify the mobile banner height.
Banner Styling
- Content Position – Specify the position of content inside the banner.
- Content Width – Specify the width for the banner content.
- Background Color – Set the background color for the banner.
- Overlay Color – Set the overlay color for the banner.
- 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.
- Navigation Color – Specify the color of navigation controls on the banner.
- Scroll-down Arrow – Select this option to show a scroll-down arrow over the banner.
- Corner Radius – Customize the roundness of the banner slide’s corners. You can either apply the same radius to all corners or specify different values for each corner individually.
Autoplay Transition / Slide Configuration
This section lets you control how your slides appear and behave within supported layouts. You can customize the transition style, set the number of visible slides, adjust spacing, and enable autoplay with progress indicators for a dynamic viewing experience.
-
Transition – Choose how the slides should change. You can select options like Fade, Horizontal Slide or Vertical Slide for a smooth transition between slides.
-
Slides Row – Specify how many rows of slides should be visible at once.
-
Slides Column – Define how many columns of slides should appear. This controls how many slides appear side-by-side in each row.
-
Space Between Slides – Adjust the gap between individual slides using this setting. You can increase the spacing in pixels to control the visual separation between slides.
-
Enable Autoplay – Toggle this to automatically play the slides without user interaction. When enabled, slides will start cycling on their own.
-
Show Autoplay Progress – Turn this on to display an indicator that visually shows how long each slide stays before switching to the next.
-
Autoplay Delay – Set the duration (in seconds) each slide should remain visible before transitioning to the next slide during autoplay.
These settings are layout-specific and available only with selected banner layouts.
Buttons & Links
You can customize the appearance of buttons and links inside the banner section to better match your site’s design and enhance the user experience.
Learn more about styling buttons and links.
Banner Layout
You can easily change the layout of a Banner. Know more about the banner layouts.
