To create a new banner you first need to log into the admin area of your Liquidshop V3 website and select “NWDThemes” > “Slider Overview” from the menu structure on the left.
From here you have the ability to either create a new slider or edit / add to an existing banner series, for the purpose of this introduction we are going to assume you already have some banners created and want to add a new banner. What you will need to do is click on the existing series of banners which will then take you into the slider and show you a preview of all the banners currently within that series (regardless of if they are marked to show on the site or not.)
As you can see at this point you have many options available to you, not limited to, but including :
- Adding a new slide
- Duplicating an existing slide
- As shown on Slide #3 the ability to disable a slide (top right corner of the preview)
- Remove or change the order of slides once created
For this I will be creating a new banner to add to the slider which to do so you will need to hover over the “+ Add Slide” and then click “Add Blank Slide” this will then reload the page with a blank slide created.
You will now see that you have lots of options like “Main Background”, “General Settings” etc, for this example I will be leaving everything other than “Main Background” as it is by default. Starting with 'Main Background', this has an option to pick a “Source” and this is where you select the image to be the background of the banner, you can upload your own image using the “Media Library” button but you do have options to use videos or a solid colour from the colour picker. (Be aware that if you are going to design a single banner for multiple devices then the background will be cropped on tablet / mobile devices which might cut off important imagery.)
To upload an image you will need to click on the “Media Library” button which will open a new pop-up and you will be able to choose a file(s) and upload them to the media gallery (if not already done), from there you can highlight an image and “Insert File” or double click to insert. Once this has been inserted you will have the ability to scroll down and see the image in place, along with a blue dashed line down the left and right of the image, this is to denote the maximum width of the device you have currently selected. The different devices that you can view the banner in, are shown to the top right of the banner preview. These are (from left to right) “Desktop”, “Notebook/Laptop”, “Tablet” & “Mobile” and clicking each of these will make the ruler guides snap the the maximum size for that device, this then helps in designing the banner to avoid overspill outside of the shown area on the site / device.
Now we have the background image in place we need to add some text and buttons to the banner so that visitors know what we are promoting. To add some text we need to hover over the “Add Layer” button and click what we would like, in this case we will start with “Text / HTML”. This now allows you to free type HTML to apply inline styles to the text or using the buttons above, which are now active and allows you to change the font used as well as the size, colour, spacing and boldness. To add a button you’ll want to hover over the “Add Layer” again and this time click “Button” within the pop-up, you can define the idle (normal) state colours on the page as well as active (mouse pointer on) colour and text on the button, however, if you change your mind you can double click the button and change the text.
If you decide you would like to remove the layer, to delete it, you just need to click on the item so it is surrounded by a dashed line and press backspace, a dialog box will be presented as a check before proceeding with the deletion the layer.
Once you are happy with what you have created you will need to save this, by using the floating buttons in the top right of the screen, the green button will allow you to save your work and the magnifying glass will allow you to preview the banner. Because this is part of an existing banner series the banner will appear in the carousel once it has been saved.