A slider is ideal for attractively displaying content such as text, images, videos, logos, or reviews, and for presenting multiple pieces of content in a small space.
Below, we'll show you step by step how to create and then edit a slider.
Step 1: Add a new section
Add an empty section to your page where you want to place the slider. To do this, click the blue + icon, open the "Blueprints" tab on the left, and insert the empty section.
Step 2: Change the section layout
Change the layout of the empty section to "Slider" so that the slider functions are available. To do this, simply click the column icon and select Slider.
Step 3: Add elements
Add the desired elements to the slider, for example:
Text
Images
Icons
Videos
Logos
Reviews
Social media
You can also add multiple elements to a single column.
If you want to add new columns, click the blue "Add New" button until you have the desired number of columns.
Now add the desired elements to the remaining columns in the same way as you did in the first column. Customize the text, images, or other content as you like, depending on which elements you’ve added.
Step 4: Edit Columns
For each column, you can also configure the following settings:
Bordered or filled
Element alignment
Text color
For borders: Border color + Radius
For filled: Background color + Radius
You can also set the width of each column. For example, one column can be narrow (e.g. 1 unit) and another wider (2-3 units).
Step 5: Slider settings for the entire section
Playback: You can turn autoplay on or off, set the duration between slides (3-15 seconds), and choose whether to play the slides one at a time or all at once.
Navigation arrows: You can customize the size, distance, position, and color as you like.
📌 Please note: Navigation arrows are only displayed on desktop devices. Due to limited screen space, they are not displayed on mobile devices.
Page numbering:
Click "+ Add slider property" and select "Pagination".
Select a style: You have 6 different page numbering styles to choose from, such as dots, bars, or shapes like 1/4. Simply select the style you like best.
Customization: Depending on the style you choose, you can individually set the size, spacing, width, color, alignment, and corner radius.
Loop: Optionally, you can enable the loop by clicking "+ Add slider property" and selecting "Loop (Infinite)". A loop ensures that the first slide is automatically displayed again after the last slide.
Slide Transition: If you want a slide transition, click "+ Add slider property" → "Slide transition". You have three options:
Fade: The old slide fades out slowly, and the new one fades in smoothly, without any movement or resizing. Simply a soft, elegant transition.
Fade and Scale (Fade in/out with scaling): The new slide is slightly enlarged as it fades in, while the old one fades out.
Custom Inactive Settings: Inactive slides can be displayed smaller and more transparent (for example, 50% size, 50% opacity). 100 means "no effect", lower values increase the effect.
Column settings:
Set the number of columns displayed side by side (up to 6 at a time)
Set the spacing and alignment between columns
📌 Please note: The number of columns applies only to desktop devices. On mobile devices, only one column is displayed automatically, displaying multiple columns side by side is not technically possible on mobile devices.
💡Do you have any feedback about this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂