Say it with a slider! This element is great for professionally presenting things like images, text and videos.
Whenever you add a slider, it’ll take up the same space as the parent element you place it within.
Each slider component comes with children, namely Slides and Slider controls (that let you navigate to the previous and next slide).
By default, each of the three slides is filled with a header and text. Of course, you can delete these content elements, or add any other elements you like. Each slider is basically a container that can be used in exactly the same way.
Every slider component comes with three default slides. If you want to add an additional slide, just head to the Layers sidebar and click
+ icon in parent element. Alternatively, you can right-click on any existing slide layer, then in the right-click menu, click Duplicate or use the shortcut
[⌘ or Control + D].
To move through slides, click on Previous and Next. You can edit the text, arrows, as well as the dots that tell visitors on which slide they currently are.
Adding background images
If you’d like to add background images, start by clicking on the slide it should be applied to. Then go to the right sidebar and click in the Design tab on Backgrounds, where you can upload a background image.
Learn how to add and edit background imagesRead more
Time to unlock your creativity! Let’s see how you can customize your slider design so it becomes the centerpiece of your website.
In the Design tab on the right-hand side under Sizing, you can set a different height and width for your slider. Sizing can be applied on any level.
Tip: The background image will automatically resize if you have the background size set to Cover. This can be changed by under Backgrounds and then Background image.
Next to the Previous and Next text, you’ll see two black arrow icons that point to the left and right. You can edit this icon by clicking on one of the arrows.
Under Sizing you can make the arrows smaller or bigger. By default it’s set to 5x5 pixels. You can also change the icon color under Color.
To add a new icon, navigate to the Settings tab in the right sidebar. Here you’ll see the uploaded icon image.
Click Browse to search through your Ycode file library
Click the Upload button to upload your own icon
Add the web address of the image in the URL field
For the dots, you can change the size under Sizing in the Design tab. To change the dot color, you have to change the element’s background color under Background.
If you want to hide certain elements of a slider, you can do so in two different ways. Select the element, then:
Open Layout in the Design sidebar and select Hidden as display
Open Position in the Design sidebar and select Hidden as visibility
Adding dynamic data
You can also make elements dynamic in sliders. Just make sure you have a database with information first.
Then, select a separate slide in the slider. In the Settings tab, connect the data source. Afterward, connect all separate elements in that slider to the right data keys, also in the Settings tab.