Slider

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).

Adding content

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.

Adding slides

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 images
Read more

Customizing slides

Time to unlock your creativity! Let’s see how you can customize your slider design so it becomes the centerpiece of your website.

Sizing

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.

Icons

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

Dots

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.

Hide elements

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.

Read in detail how to make elements dynamic
Read more

Get your no-code fix

Join our monthly email with no-code insights and Ycode updates.
.
2019 - 2021 © Ycode. All rights reserved.