Open the slider you wish to edit, then click Add a new slide.
The Anywhere Slider plugin allows you to either have a picture as a slider or your own HTML content. For the picture option, you will see the following screen:
▪System Name (required) – The system name of the slider is used for your own reference and is not displayed to the customers.
▪Picture (required) – The image is required for the Picture slider type. You can use one of the pictures you already have on your website or upload a new one from your device.
▪Mobile Picture – If you don't specify a mobile picture, the main picture will be used for mobile devices as well.
▪Visible – Whether the slide is visible or active.
▪Display Order – The order number of the slide in question (lower number slides appear first).
▪URL – The URL where the slider will redirect on click.
▪Alt – The alt text of the image that is displayed, in case the image fails to load.
If you want to have your own HTML content added as a slider instead, you can select the Content option for the slide Type:
▪System Name (required) – The system name of the slider is used for your own reference and is not displayed to the customers.
▪Content (required) – The HTML content of your slide. The native Jim2Commerce rich text editor is available for you to build your HTML content with ease.
▪Visible – Whether the slide is visible or active
▪Display Order – The order number of the slide in question (lower number slides appear first)
Creating various Content type slides requires some HTML and CSS knowledge. Use the Source Code mode of the HTML editor – it is located in the Tools menu at the top of the editor. Put your HTML code there and add some class names to it, then use the class names to apply any visual styling by targeting your slides with CSS code. Here's a basic example of Content Slide's HTML source code that contains just image and text, and generic class names:
<div class="container">
<img class="image" src="https://your-website.com/images/your-image.jpeg" />
<p class="text">Your text goes here</p>
</div>
You can use both identical or different HTML structure for each Content slide.
|