Content Controls
Repeated Block
This section allows you to select and define the blocks that will be repeated across your website. Choose a global block to maintain consistency or specify a tag for more control over the content’s structure.
- Global Block – Select a global block to be used repeatedly, ensuring uniformity across different sections of your website.
- Tag – Define the HTML tag (like div, section, etc.) for your repeated block, giving you flexibility in structuring your content.
Field
Here, you can specify the data field that your repeater element will display, such as text, images, or custom fields, enhancing your site’s dynamic content presentation.
- Repeater Field – Choose which field in your database this repeater should display, allowing for dynamic and varied content.
Design Controls
List
This section provides a wide range of design options for lists, from basic dimensions to advanced slider settings, offering comprehensive control over how your lists look and function.
- Width – Adjust the width of your list, giving you control over its size and spacing on the page.
- Layout – Choose the layout for your list, such as grid or slider, to best suit your content and design preferences.
- Slider – Access advanced slider settings like effects and autoplay when the layout is set to ‘slider’. This section offers detailed customization of slider behavior and appearance.
- Settings – Customize your list slider’s overall behavior and appearance.
- Effect – Choose an animation effect for transitioning between slides in your slider.
- Coverflow – Access more specific settings for the ‘Coverflow’ effect, such as shadow and rotation. This section is available only if ‘Coverflow’ is selected as the effect.
- Shadow – Toggle to add or remove a shadow effect in the Coverflow animation.
- Depth – Adjust the depth perception for a more dramatic Coverflow effect.
- Rotate – Set the rotation angle for each slide in the Coverflow effect.
- Stretch – Control the stretch value to modify the Coverflow appearance.
- Speed – Set the speed of slide transitions in your slider.
- Infinite – Choose whether or not your slider should loop infinitely.
- Center Slides – Enable this to always center slides in the view. Available when ‘Infinite’ is enabled.
- Autoplay – Decide if the slider should automatically cycle through slides.
- Autoplay Settings – Fine-tune the autoplay function, such as speed and pause behaviors. This section is available when ‘Autoplay’ is enabled.
- Speed – Control the speed of autoplay.
- Stop On Interaction – Set autoplay to stop when the user interacts with the slider.
- Pause On Hover – Pause autoplay when the cursor hovers over the slider.
- Advanced – Access advanced settings for further customization of your slider.
- Swipe On Scroll – Enable or disable swiping through slides on scroll.
- Auto Height – Toggle to automatically adjust the slider height based on the content.
- Between Slides – Adjust the space between individual slides.
- Slides Per View – Determine how many slides are visible at a time. This control is not available for ‘flip’ or ‘fade’ effects.
- One Per View At – Choose the breakpoint for displaying only one slide per view.
- Arrows – Customize the navigation arrows of your slider.
- Disable – Toggle on to disable navigation arrows.
- Color – Pick a color for your arrows, available unless arrows are disabled.
- Size – Adjust the size of the arrows, available unless arrows are disabled.
- Overlay – Choose whether arrows should overlay the slides, available unless arrows are disabled.
- Space To Slides – Set the space between arrows and slides, available unless arrows are disabled.
- Space To Edge – Control the space between arrows and the edge of the slider, available unless arrows are disabled.
- Custom Icons – Choose custom icons for your arrows, available unless arrows are disabled.
- Next – Select an icon for the ‘next’ arrow.
- Previous – Choose an icon for the ‘previous’ arrow.
- Pagination – Configure the pagination style for your slider.
- Type – Select the type of pagination for your slider, like bullets or progress bar.
- Bullets – Customize bullet-style pagination. Available unless ‘progressbar’, ‘fraction’, or ‘none’ is selected.
- Color – Choose a color for your pagination bullets.
- Size – Set the size of the pagination bullets.
- Space Between – Adjust the space between bullets.
- Radius – Define the radius of your pagination bullets for rounded corners.
- Fraction – Use fraction-style for showing the current position in the slider.
- Progress Bar – Set up a progress bar style pagination, available when ‘Type’ is ‘progressbar’.
- Background – Choose a background color for your progress bar.
- Progress – Select a color for the progressing element.
- Height – Adjust the height of your progress bar.
- Position – Set the position of your progress bar within the slider.
- Overlay – Decide if the pagination should overlay the slides. This is available unless the type is ‘none’.
- Margin – Adjust the margin around the pagination, available when the type is not ‘none’.
- Items Per Row – Adjust how many items are displayed in each row. This option is available only when the layout is set to a ‘grid’ format.
- One Item At – Define the screen size at which the list will start showing only one item per row. This control becomes active when the layout is in ‘grid’ mode.
- Space Between Items – Control the spacing between individual items in the list. This setting is accessible unless the layout is set to ‘slider’ mode.
Item
Enhance the visual appeal of each item in your list with customizable backgrounds, borders, and padding. These controls allow for detailed styling, ensuring each item stands out and aligns with your overall design theme.
- Background – Choose a color for the background of each item, adding visual interest and coherence to your design.
- Borders – Customize the borders of each item, including options for border radius, styling, and shadow, to give depth and definition.
- Radius – Adjust the corner radius of the item’s borders, softening or sharpening the edges as desired.
- Styling – Experiment with various border styles and colors for a unique look.
- Shadow – Add or adjust the shadow effect to create a sense of depth for each item.
- Padding – Control the padding inside each item, affecting how content is spaced within.
- Padding – Fine-tune the spacing inside each item for better content alignment and readability.
Container
Customize the container holding your items with options for background, borders, and padding. These controls let you create a cohesive and visually appealing container that complements the items within it.
- Background – Set the background color of the container, enhancing the visual appeal and contrast with contained items.
- Borders – Define the container’s borders, including radius, styling, and shadow, to frame your content effectively.
- Radius – Adjust the border radius to soften or define the container’s edges.
- Styling – Choose from various border styles to complement your container’s overall look.
- Shadow – Add a shadow effect for depth, making the container stand out against the rest of the content.
- Padding – Modify the padding within the container for optimal layout and spacing of its contents.
- Padding – Adjust the inner spacing to ensure content within the container is displayed neatly and effectively.
Spacing
Control the spacing around your list or container with precision. Adjust the top and bottom margins to ensure your content fits perfectly within the overall page layout, enhancing readability and visual balance.
- Margin Top – Set the top margin to control the space above your list or container, aiding in visual separation and balance.
- Margin Bottom – Adjust the bottom margin to manage the space below, ensuring a harmonious and uncluttered layout.
