How do I use LayerSlider to edit or create header banners?

Please note, this guide only applies to websites that have the LayerSlider software installed.

If your website uses header banners, such as this example below, you may be able to edit these blocks yourself.

If this system is installed on your website, you’ll see a link called “LayerSlider WP” in your website editor menu.

To edit image banners:

1. Go to “LayerSlider WP” in your website editor menu.
2. On the LayerSlider screen, you’ll see existing banners already setup. Click on the relevant banner to open the editing screen.
3. If your banner contains a carousel of multiple slides, on the next screen you will see a series of thumbnails. If this is applicable to your website, click on the relevant thumbnail to open a particular slide.
4. Change your background image by clicking on the box highlighted in red below:
   
5. Upload your new image. We recommend your images are no larger than 1800px wide, but the recommended dimensions will vary according to your particular website design. We may have provided you advice on this.
6. Click “Insert“.
7. Next, if you have any text overlaid on your banner, you can edit this further down the screen. Be careful to just edit the text and not touch any of the coding, otherwise your banner may not display properly.
   
8. We do not recommend you touch any other settings.
9. Click “Save Changes” at the bottom of the screen.

Creating new banners:

1. Go to “LayerSlider WP” in your website editor menu.
2. On the LayerSlider screen, you’ll see existing banners already setup. If they contain a background image, you’ll see a preview of this. If the banner says “No Preview”, it means the banner contains a video, or it’s empty.
   
3. To create a new banner, we recommend copying and editing an existing banner, rather than creating a new one from scratch. This is because we may have added special settings to the banners already setup. Hover your mouse over one of these existing banners and you’ll see an arrow appear (highlighted in red above). Click on “Duplicate“.
4. And now click on the banner you’ve just duplicated.
5. So you can easily refer to this banner in future, we recommend choosing a new title. Do this by clicking on “Slider Settings” at the top of the screen (highlighted in green below) and typing a new title (highlighted in blue below):
6. Follow the same steps as listed in the earlier section in this help guide. Remember to save your changes.
7. Next, leave the LayerSlider screen and find the page where you want to display this banner (e.g. under your “Pages” menu, or “Portfolio” menu).
8. At the bottom of your page, there’s an option to “Choose the slider“. Select the banner you have just created:
9. Finally, click “Publish” or “Update” on your page. Your new banner should now be displaying.

To edit video banners:

1. Firstly, upload your video file to a video hosting provider. For video banners, we recommend you sign-up to Vimeo Pro (this is a paid service), which ensures your videos display without adverts and watermarks.
2. Next, in your website editor, go to “LayerSlider WP” in the menu.
3. To create a new video banner, we recommend copying and editing an existing banner, rather than creating a new one from scratch. This is because we may have added special settings to the banners already setup. Look for a banner that says “No Preview“. This means it doesn’t contain a background image, so it’s likely this banner will already contain a video (assuming we’ve already created a video banner for you). Hover your mouse over one of these existing banners and you’ll see an arrow appear (highlighted in red below). Click on “Duplicate“.
4. Click on the banner you’ve just duplicated.
5. On the next screen, find the video layer (which will have a video icon, highlighted in orange below), then click on the “Change Media” button (shown in red below):
6. Paste your video embed code into the box (which you created in Step #1):
   If relevant, you may want to refer to the embed code we’ve already used on your existing video banners and just change the video ID number. If you’re using Vimeo, they have their own technical guide on embedding Vimeo videos, which will control things such as whether the video automatically plays, whether the video name is hidden, etc.
7. Then click the “Add Media” button.
8. Next, if you have any text overlaid on your banner, you can edit this in the text layers. Be careful to just edit the text and not touch any of the coding, otherwise your banner may not display properly.
   
9. So you can easily refer to this banner in future, we recommend choosing a new title. Do this by clicking on “Slider Settings” at the top of the screen (highlighted in green below) and typing a new title (highlighted in blue below):
10. We do not recommend you touch any other settings.
11. Click “Save Changes” at the bottom of the screen.
12. Next, leave the LayerSlider screen and find the page where you want to display this banner (e.g. under your “Pages” menu, or “Portfolio” menu).
13. At the bottom of your page, there’s an option to “Choose the slider“. Select the banner you have just created:
14. Click “Publish” or “Update” on your page. Your new banner should now be displaying.
15. If you’re using Vimeo and have a paid account, you can also choose to hide your video from being watched directly on Vimeo’s own website (see https://help.vimeo.com/hc/en-us/articles/224817847-Privacy-settings-overview for further instructions).