Alberto Gutiérrez

Customer Support Manager

How to add slider elements in Ycode

What is a slider element?


Say it with a slider! A slider (also: carousel, gallery, or slideshow) is great for professionally presenting things like images, text and videos. This web element is usually placed on the homepage. Generally, it displays and links to other parts of the website. It’s recommended to have no more than five slides per slider.


How to use a slider element


Start by navigating to the Top panel, select the Pointer icon and in the dropdown menu, click on the Slider element.


With one Slide of the Slider element selected, go to the Design tab on the right-hand side. Here you can customize your slider. We’ll customize the navigation controls, slide backgrounds, and text. You can set a different background for each slide and then configure the size, position, and repeat attributes.


You can also set the size for each slide, remove paragraphs, and center headings. For the header element, you can then change the color, adjust the spacing, or add a background color. Anything is possible!



As a finishing touch, you can configure and customize the slider controls.



Once the slider is exactly how you want it to be, click Save. Then hit the Preview button on the upper right to watch the slider live in action on your website.



Like Comment

How to add collapsible blocks in Ycode

What is a collapsible block?


A collapsible block is a simple but very useful element for your project, since it saves you vertical space on the page, it provides usability and it looks great!

Documentation: Collapsible block

How to use a collapsible block


Start by navigating to the Top panel, select the Pointer icon and in the dropdown menu, click on the Collapsible block element.


With the Section selected in the Layers sidebar, go to the right-hand panel and click on the Design tab. Here you can customize your element. We’ll set the background to differentiate between elements.



Select the Collapsible block to set the background color, set a margin, add padding, and include the border radius.


If you wish, you can modify the icon by selecting the icon and editing it in the Settings tab on the right-hand side. It’s fully customizable!


Finally, click Save and hit the Preview button on the upper right to see your collapsible block in action.


Like Comment