Documentation
HomeForumHelp
  • About Cwicly
  • Beginner's Guide
    • Install Cwicly
    • Getting Started
      • Overview
      • Settings
    • Edit and Manage your Site
    • The WordPress Dashboard
    • The Dashboard Menu
    • Site Editor
    • Create your Front Page
      • Front Page
      • Header
        • Header Template Part
        • Structure
      • Footer
        • Footer Template Part
        • Structure
  • ⚡Cwicly
    • Block ID
    • Breakpoints
    • Class
      • Global/Block Classes
    • Cloud Design Library
      • Create an Account
      • Overview of the Cloud Dashboard
      • Editor: Cloud Library
        • Access from the Editor
        • Add a Library
        • Switch between Libraries
        • Default Library
        • Download Library
        • Remove Library
        • Categories
          • All
          • Popular
          • Button
          • Composition
          • Decorative
          • Interactive
          • Layout
          • Media
          • Menu
          • Social
      • Design Blocks: Cloud Library
        • Search for a Design Block
        • Refresh
        • Add Design Block
        • Save Design to Library
        • Remove Design Block
      • Library Globals
        • Library: Global Styles
          • Library: Add Styles
          • Installation: Add Styles
          • Library: Style Settings
        • Library: Global Classes
          • Library: Add Classes
          • Installation: Add Classes
          • Library: Class Settings
        • Library: Global Stylesheets
          • Library: Add Stylesheet
          • Installation: Add Stylesheet
          • Library: Stylesheet Settings
        • Library: External Classes
          • Library: Add External Classes
          • Installation: Add External Classes
          • Library: External Classes Settings
      • Community Library
        • Save to Community Library
        • Download from Community Library
        • Remove from Community Library
        • Set Community as default
    • Colour Picker
      • Gradient Builder
    • Components
      • Components Library
      • Components Folders
      • Settings
      • Component Properties Modal
      • Properties (Add)
        • Text Property
        • Rich Text Property
        • List Property
        • Link Property
        • Image Property
        • Gallery Property
        • Video Property
        • Icon Property
        • Colour Property
        • Toggle Property
        • Number Property
        • Class Property
        • ID Property
        • Options Property
        • Conditions Property
        • Visibility Property
        • CSS Text Property
    • Copy/Paste
      • Block Styles
      • Classes & IDs
      • Dynamic Preview
      • Global Styles
      • Global Classes & Stylesheets
      • Blocks
    • CSS Grid
    • Dynamic Inserter
    • Font Manager
    • Navigator
    • Quick Inserter
    • Scaling
    • Smart Inserter
    • Span
    • Tag
  • ⛵Tailwind
    • Getting Started
      • About
      • Activate
      • Copy/Paste
      • Enable editing mode
      • Apply a Class
      • Pseudo state Management
      • Automatically Sync
        • Breakpoints
        • Colours
      • Shells
      • Custom Tailwind Configuration
      • Import Tailwind Plugins
  • 🖌️Themer
    • Themer
      • Templates
      • Parts
      • Fragments
    • Role Editor
      • User Role
      • Gutenberg Editor
      • Global Block Behaviour
      • Block Toolbar
      • Miscellaneous
      • Components
      • Code Block
      • Blocks
      • Post Types
      • Force iFrame
      • Client Canvas View
      • Help
      • User
  • 🌐Global Styles
    • Global Styles
      • Global Colours
        • Folders
        • Colour tab
        • Palette tab
        • Modifiers tab
          • Opacity
          • Lighten
          • Darken
          • Saturate
          • Desaturate
          • Spin
      • Dark Mode
      • Global Gradients
      • Global Typography
      • Global Block Typography
      • Theme Elements
      • Global Settings
        • Defaults
        • Backend
      • Remove Gutenberg Global Styles
    • Global Classes & Stylesheets
      • Global Classes
      • Global Stylesheets
      • External Classes
  • 🎨Design
    • Background
      • Background Colors
      • Background Source
      • Sizing & Positioning
      • Styling
    • Typography
      • Typography
      • Rem conversion
      • Global Typography
      • Text Align
      • Font Family
      • Font Size
      • Font Weight
      • Spacing
      • Line Height
      • Style
      • Decoration
      • Transform
      • White Space
      • Overflow Wrap
      • Word Break
      • Word Spacing
      • Axes
      • Text Colour
      • Link Colour
    • Fluid Values
    • Layout
      • Display
      • Visual
      • Position
    • Sizing
      • Height
      • Width
    • Margin & Padding
    • Borders
      • Border
      • Shadows
      • Outline
    • Effects
      • General
      • Transitions
      • Animations
      • Filters
      • Text Shadow
      • Tilter
      • Separators
    • Transforms
    • Pseudo Classes/Elements
    • Relative Styling
  • 🎓Advanced
    • Custom CSS
    • Quick Code
    • Scrolling
      • Animate On Scroll
      • Scroll Direction
    • Attributes
    • Tooltip
      • Source
      • Theme
        • Custom Theme
  • 👆Interactions
    • Visibility Conditions
      • Blocks
      • Themer
    • Link
      • Link Source
      • Link Action
    • Interactions
      • Trigger
      • Actions
    • Hover Animation
    • Dynamic Slider
      • Settings Tab
  • 🖥️Editor
    • Inserter Panel
    • Quick Insert
    • Block Inspector
    • Primary Tab
    • Design Tab
    • Advanced Tab
    • Responsive Selector
  • 🔧Blocks
    • Accordions
    • Accordion
      • Basics
      • Settings
      • Colours
      • Layout
      • Typography
      • Margin and Padding
    • Button
      • Add
      • Icon
    • Code
      • Enable/Disable
      • Add
      • Languages
      • Settings
    • Columns
      • Basics
      • Add
      • Settings
      • Grid Editor
        • Auto Grid
        • Auto Template
    • Column
    • Container
    • Div
    • Filter
      • Basics
      • Filter Editor
      • Create a Filter
      • Style a Filter (example)
    • Fragment
    • Gallery
      • Filter
      • Source
      • Settings
      • Text
      • Image Style
    • Heading
    • Hook
    • Icon
    • Image
      • Source
      • Size
      • Settings
      • Hover Animation
    • Input
      • Input Settings
    • List
      • List Types
      • Settings
      • Icon
    • Maps
      • Settings
      • Size
      • Style
      • Overlay Layout
      • Colours
    • Menu
      • Settings
      • Main Menu
      • Sub Menu
      • Items
    • Modal
      • Modal Style
      • Settings
      • Trigger
      • Animation
    • Nav
      • Nav Block Settings and Styles
      • Nav Items Block
      • Nav Dropdown Block
      • Nav Link
      • Custom Dropdown Block
      • Nav Menu
    • Post Content
    • Paragraph
    • Popover
    • Query
      • Query Settings
      • Query Editor
        • Posts
        • Terms
        • Users
        • Comments
    • Query Template
      • Layout
      • Grid editor
    • Repeater
      • Nested Repeater
    • Section
    • Slider
      • Settings
      • Navigation
      • Dots
    • Slide
    • Styler
    • SVG Block
    • Tab List
      • Tab
    • Tab Contents
      • Tab Content
    • Taxonomy Terms
    • Video
      • Source
      • Settings
      • Div Overlay
  • ⚙️Settings
    • Settings
    • License
    • Icon Collections
    • Font Sets
    • Google Maps API
    • Advanced Settings
    • Regeneration
    • WooCommerce
  • 🛒WooCommerce
    • Archive Page
    • Attributes
      • Colour Type
      • Image Type
    • Cart
    • Product Variations
    • Create a Product Type
      • Simple
      • Variable
        • Create Attributes
      • Grouped
      • External
    • Build a Single Product Page
    • Dynamic Content
    • Link
  • 🗃️Miscellaneous
    • Blocks Specifics
    • Icon Selector
    • Trailing Slash
    • Units
      • Default Units
    • Code Snippets
    • Shortcuts
    • Actions
    • Filters
    • Browser Console
  • 🔗Resources
    • Changelog
    • Roadmap
    • Forum
Powered by GitBook
On this page
  • Basics
  • Repeater Block Placeholder
  • Set Source
  • Create ACF Repeater
  • ACF Group
  • ACF Field
  • Repeater Field in Editor
  • Remove Repeater Row in Editor
  • Layout
  • Colours
  • Grid Editor
  • Location ID
  • Post ID
  • Options Page

Was this helpful?

  1. Blocks

Repeater

Last updated 2 years ago

Was this helpful?

Basics

A repeater is a list of items such as text, images, links, buttons, that have the same design and layout but have different content that is individually customisable.

The Repeater block will not activate until you add some items. Remember to update the page after adding items.

Add

If you want to add a repeater block outside any other block on the page:

  1. Click on the ➕ ​​icon to open the Inserter Panel

If you want to add a repeater block inside a parent block:

  1. Open the Quick Insert panel in the parent block

Repeater Block Placeholder

When you add a repeater block, a Placeholder will appear.

This will give you the choice to set your Source or, if you haven't already set up your ACF repeater, to do so first.

Set Source

Set Source will take you to the Source tab in the Primary tab where you can choose the required ACF group in the dropdown.

Create ACF Repeater

Create ACF Repeater will take you directly to the Custom Fields tab in the Dashboard where you can set up a new ACF field group.

  • Click on "Add Field Group" to create a new Field Group.

ACF Group

  • The ACF Group allows you to select a list of items to use in your repeater.

To create a new list, navigate to the custom fields menu in the Wordpress dashboard and add a new field group. (Set the field type to repeater)

  • When you click Field Type, it will open a dropdown.

  • Select the Repeater type.

  • Input Field Label, which is the name of your repeater.

  • Click "+Add Field".

  • Select the Field Type you require in the dropdown: Text, Image, Gallery etc.

  • Input the Field Label (what you want to call it).

  • Click "+Add Field" to add a new Field.

  • Repeat the process for the different field types you want in your repeater.

  • When you have completed all your Fields, click "Save Changes".

For more detail please visit:

ACF Field

An ACF Field allows you to group personalised information about a specific content, such as title, description, image.

To select an ACF field, first select an ACF group in the source tab of the Primary tab.

Then chose the ACF field in the ACF field dropdown.

Repeater Field in Editor

  • The Repeater field can be found in the editor at the bottom of the page.

  • Click on the arrow to open the Repeater window.

  • The window will show the field types you have already set up.

  • Click "Add Row" to add the first row to your repeater.

  • Input the fields you created previously, for instance Title, Name, Image etc.

  • Click "Add Row" to create a new row.

  • Input as before and continue until you have filled in all the rows you. require.

Remove Repeater Row in Editor

  • To remove a row, hover over the row and click the - (minus) button.

Remember to refresh the page for the input data to appear.

  • Your repeater fields in the editor should look something like this.

Layout

The Layout tab allows you to modify how your Items are displayed in your Repeater block. This includes Display, Grid Type, Auto Grid, Auto Template as well as Height, Column and Row Gap.

Open the Layout tab in the Primary tab and set the required layout.

Colours

The Colours tab allows you to modify the Colours of the content in your Repeater block, including Text colour, Link colour, Background colour.

Modify
  1. Select a repeater block

  2. Open the Block Inspector

  3. Navigate to the Primary tab

  4. Open the Colours tab

  5. Modify the Colours of your text, link, background

Reset
  1. Select a repeater block

  2. Open the Block Inspector

  3. Navigate to the Primary tab

  4. Open the Colours tab

  5. Click required dot(s) to remove modifications to the Colours of your text, link, background

Grid Editor

The Grid Editor tab allows you to visually edit & design your Repeater Grid layout.

The Grid Editor is enabled in the Layout tab by selecting the grid layout.

Location ID

The Location parameter allows you to set the source for your Repeater. This can be a Specific Post ID or an Options page (in preparation for nested repeaters).

Post ID

This allows you to set the source for your Repeater using a Specific Post ID

Select
  1. Select a repeater block

  2. Open the Block Inspector

  3. Navigate to the Primary tab

  4. Open the Source tab

  5. Find Location ID

  6. Select Post ID in dropdown

  7. Input ID

Reset
  1. Select a repeater block

  2. Open the Block Inspector

  3. Navigate to the Primary tab

  4. Open the Source tab

  5. Find Post ID

  6. Click dot to reset

Options Page

This will allow you to choose the source for your repeater if you have created an Options Page.

Select
  1. Select a repeater block

  2. Open the Block Inspector

  3. Navigate to the Primary tab

  4. Open the Source tab

  5. Find Location ID

  6. Select Options Page in dropdown

Reset
  1. Select a repeater block

  2. Open the Block Inspector

  3. Navigate to the Primary tab

  4. Open the Source tab

  5. Find Options Page

  6. Click dot to reset

Search for the repeater block

Click on the repeater block to insert it into your page

Search for the repeater block

Click on the repeater block to insert it into your parent block

See (they work in a similar way).

See (they work in a similar way).

🔧
Set up an ACF Group
TTD #18 - Repeater
Query Template Layout
Query Template Grid Editor