1. Home
  2. Other Content Items
  3. Add a Cover Banner Design to any content item

Add a Cover Banner Design to any content item

Using a Cover Banner adds visual flair to your website and add character to your content whether its a gallery, page, group or a blog.

Cover Banners can be placed either top or bottom of your content (under the website header) and are typically full-with banner image/image slideshow/video.

Under this Article : 

  1. Enable Cover Banner
  2. Add Image Slide
  3. Add Video Slide
  4. Add Text/HTML Slide

To enable cover banner, please follow these few easy steps:

1. Enable Cover Banner

For every content item, you will find the “Cover Banner” option next to its settings.

 

After clicking on Cover Banner you will have multiple options for your cover banner:

  1. Enable Cover Banner – Switch on this toggle if you want to have a cover banner on repective content item.
  2. Position on Page – You can set the position of the cover banner like on top or bottom.
  3. Banner Height – You can set the custom height (in Pixels) of the cover banner. All images/videos will be cropped from center if banner height is lesser then image height.
  4. Margin – You can set the margin (in Pixels) of the cover banner which is linked to position of cover banner (Top or Bottom)
  5. Base Color – You can set the base color and its opacity from here. All slides will come over the base color.
  6. Cast Color – You can set the cast color and its opacity from here. Cast Color will come on top of images and video slides only.
  7. Add Image Slide – Click here to add an Image slide as a cover banner. Scroll down the page to know more.
  8. Add Video Slide – Click here to add a Youtube/Vimeo video slide as a cover banner. Scroll down the page to know more.
  9. Add Text/HTML Slide – Click here to add a Text/HTML slide as a cover banner. Scroll down the page to know more.
  10. Cover Banner Text – You can specify the global text of cover banner which will show all over the slides (i.e. Images/Text/HTML/Video slides) irrespective of individual slide text. Click here to know more about editor.
  11. Full Screen Banner – You can override the custom banner height (point number 3)  with your browser height. System will automatically calculate your current browser available height (Excluding header) and extend your images (in height) accordingly. You can use this option to setup full-screen banners.
  12. Navigation – Enable this toggle to add cover banner slide arrows (Left < and Right >)
  13. Scroll Down Icon – Enable this toggle to add scroll down arrow on the cover page. ( V )
  14. Slideshow – Enable this toggle to make the slideshow play automatically.
  15. Slideshow Speed – Slideshow speed in seconds
  16. Slideshow Transition – Slideshow transition effect for images.
  17. Save your cover banner

 

 


2. How to Add Image Slide

Click on Add +Image button, you would see a pop up window. Click here to select image/images you want to upload. The upload will start automatically.

 

Once the images have finished uploading, click on the X or close button on the top right corner of the screen to return to the cover banner to continue to work.

 

Note: Images will be automatically sorted as newest first.


3. How to Add Video Slide

Click on Add +Video button, You would see a pop up window where you can:

  1. URL – Paste your YouTube/Vimeo URL
  2. Video Slide Text – Specify the slide text which will show on this video slide only if global cover banner text is not available. Click here to know more about editor.
  3. Link – Enter the absolute link if you want to link this video slide to any other page.
  4. Save -Save your video slide.
  5. Mobile Cover Image – Select an image from your computer to upload for mobile devices (Optional). If you do not upload any mobile image then will use default video screen shot which is automatically pulled from the Youtube/Vimeo link.
  6. Close – Click here to close the popup window.

 


4. Add Text/HTML Slide

Click on Add +Text button, You would see a pop up window where you can:

  1. Text/HTML – Specify the slide text which will show on this video slide only if global cover banner text is not available. Click here to know more about editor.
  2. Link – Enter the absolute link if you want to link this text/HTML slide to any other page.
  3. Cover Banner Image (Optional) – Select an image from your computer if you want to upload any image for this text slide. Slide text will come on top of this image.
  4. Mobile Banner Image (Optional) – Select an image from your computer to upload for mobile devices. If you do not upload any mobile image then will use above image only. (cover banner image)
  5. Save – Save your video slide.
  6. Close – Click here to close the popup window.

Create your portfolio website in minutes.

All-in-one platform with built-in client proofing, ecommerce and blogging tools.

Get Started

15 days free trial. No Credit Card required.