# Gallery

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

  1. Click on the  ​​icon to open the Inserter Panel
  2. Search for the Cwicly Gallery block
  3. Click on the Cwicly Gallery block to insert it into your page

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

  1. Open the Quick Insert panel in the parent block
  2. Search for the Cwicly Gallery block
  3. Click on the Cwicly Gallery block to insert it into your parent block

# Gallery Type

The Gallery Type allows you to choose between Grid or Masonry.

  1. The Grid property defines how images are laid out regularly in columns and rows.

  2. The Masonry property defines a grid layout based on columns with no fixed height so that images in additional rows will rise up to fill the gaps.

  1. Click on the  ​​icon to open the Inserter Panel
  2. Select Cwicly Gallery
  3. Open the block inspector
  4. Navigate to the primary tab
  5. Locate Gallery Type
  6. Select Grid or Masonry

# Gallery Columns

The Columns property allows you to select the number of columns you want in your gallery.

  1. Select the Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Columms
  5. Choose the number of Columns you require

# Horizontal Gutter

The Horizontal Gutter property determines the spacing of the Gallery columns.

  1. Select the Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Horizontal Gutter
  5. Adjust the spacing between Columns

# Vertical Gutter

The Vertical Gutterproperty determines the spacing of the Gallery rows.

  1. Select the Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Vertical Gutter
  5. Adjust the spacing between Rows

# Image Height

The Image Height property can be adjusted when Grid is selected for Gallery Type.

  1. Select an Image in the Cwicly Gallery
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Image Height
  5. Adjust the required height of the Image

# Link

When the Link property is activated, the image acts as a link and can either open a lightbox or navigate to a specified URL.

  1. Select the Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. In General Settings, enable link
  5. Select link type, Lightbox URL

# Lightbox Link

Lightbox link allows you to show images inside a fullscreen slideshow modal. It works on all screen sizes.

# URL Link

URL Link allows you to open a URL outside the gallery by clicking on a gallery image. For example if you want to avoid putting text on the image, the URL link can open a detailed product page with textual product information .

# Title

The Title property adds a Title on your Gallery images. You can personalise the Title content for each image.

  1. Select the Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Text
  5. Enable Title
  6. Modify the typography for the Title of gallery image
  7. Type your Title
  1. Select the Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Disable Title

# Description

You can add a Description to your Gallery images by activating the Gallery Description. The format will be standardised but you can personalise the Description content for each individual image.

  1. Select the Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Text
  5. Enable Description
  6. Modify the typography for the Description of your gallery images
  7. Type in the Description
  1. Select the Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Disable Description
  1. Select the Cwicly Gallery block
  2. Select an Image in the Gallery
  3. Open the block inspector
  4. Navigate to the primary tab
  5. Add an Image Title or Description

# Text Spacing

The Text Spacing property adjusts the distance between the Title and the Description when they are both enabled.

  1. Select the Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Text
  5. Ensure that Title and Description are both enabled
  6. Adjust the Spacing between the Title and Description

# Galleries

The Galleries property lets you name and edit your Galleries. It also allows you to add and remove additional Galleries.

# Gallery Name

Gallery Name allows you to name your Galleries so you can manage them.

  1. Select the Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Galleries
  5. Enable Description
  6. Add a Name for the selected Gallery

# Edit Gallery

Edit Gallery allows you to Edit a Gallery in the Edit Gallery page where you can add images from your computer or Media Library or drag and drop to reorder them.

  1. Select the Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Galleries
  5. Select Edit Gallery to open the Gallery
  6. Change image order by drag and drop or delete an image.
  7. Click Add to Gallery to upload additional images

# Add Gallery

Add Gallery allows you to create additional Galleries.

  1. Select the Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Galleries
  5. Select Add Gallery to add a new Gallery

# Remove Gallery

Remove Gallery allows you to remove an existing Gallery.

  1. Select the Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Galleries
  5. Select Remove Gallery to delete Gallery

# Image

The Ìmagepropertyallows you to style your Gallery images using a variety of options such as Overlay, Animation, Opacity, Blending Options, Padding, Radius, Borders, Border style.

# Overlay

The Overlay property adds a layer to the images in your gallery.

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Select a colour or gradient in the Overlay panel
  6. Change opacity as required
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Click reset button to remove Overlay

# Animation

The Animation property adds a pre-set animation to your gallery on hover to make your gallery more interesting. Included are Mist, Spring, Sunrise, Blurry.

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Select an animation in the Animatiton panel
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Select None in the Animatiton panel

# Opacity

The Opacity property lets you specify the amount of opacity or transparency to apply to your Image blocks.

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Adjust Opacity in the Animatiton panel
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Click button to reset Opacity

# Blend Modes

The Blend Modes property defines how the Gallery or Image block should blend with the background. A variety of effects are available such as: Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Color Burn, Hard light, Soft Light, Difference, Exclusion, Hue, Saturation, Color, Luminosity.

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Select a Blend Mode

# Styling

The Styling property adds design features to your Image or Gallery block. These include Background Color, Padding, Radius, Border style and width.

# Background Color

Background Color adds a color or gradient to your Image or Gallery block.

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Navigate to Styling
  6. Select a Background color or gradient

# Padding

The Padding property allows you to specify the space that separates the Gallery Image block from its border on all sides.

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Navigate to Styling
  6. Navigate to Padding
  7. Link or Unlink Padding to add space to one or all sides
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Navigate to Styling
  6. Navigate to Padding
  7. Click button to reset all linked or selected unlinked padding

# Radius

The Radius property adds a chosen radius to the Image Blocks

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Navigate to Styling
  6. Navigate to Radius
  7. Link or Unlink Radius to add a radius to one or all corners
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Navigate to Styling
  6. Navigate to Radius
  7. Click button to reset

# Border Color

The Border Color property selects the color of the Image borders

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Navigate to Styling
  6. Navigate to Border Color
  7. Select a Border color
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Navigate to Styling
  6. Navigate to Border Color
  7. Click button to reset Border Color

# Border Style

The Border Style property determines the Style of the selected Border. There is a choice between Continuous, Dotted or Dashed Border Styles.

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Navigate to Styling
  6. Navigate to Border Style
  7. Select a Border Style
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Navigate to Styling
  6. Navigate to Border Style
  7. Click X to Remove Border Style

# Transitions Animations

The Transitions Animations properties are used to ensure that transitions from one state to another are smooth and natural. They can be achieved by changing Transition Duration, Delay, Easing type and the Property affected.

# Transition Duration

The Transition Duration property defines how long the transition lasts.

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Navigate to Transitions Animations
  6. Modify the Duration
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Navigate to Transitions Animations
  6. Click Duration Reset button

# Transition Delay

The Transition Delay property defines how long the transition will be paused before starting.

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Navigate to Transitions Animations
  6. Modify the Transition Delay
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Navigate to Transitions Animations
  6. Click Delay Reset button

# Easing

The Easingproperty changes the speed at which the amimation starts and/or finishes to make it look more natural. You can choose between: Ease, Ease In, Ease Out,Ease In Out, Linear, Hue Rotate, Step Start, Step In, Ease In Sine, Ease Out Sine, Ease In Out Sine, Ease In Quad, Ease Out Quad, Ease In Out Quad.

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Navigate to Transitions Animations
  6. Select an Easing
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Navigate to Transitions Animations
  6. Select None in the Easing menu

# Transition Property

The Transition Property property defines which properties will be affected by the transition.

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Navigate to Transitions Animations
  6. Enter the desired transition Property value
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Navigate to Transitions Animations
  6. Click Property Reset button

# Filter

The Filter property adds an effect to your Gallery Images. These include:Blur, Brightness, Contrast, Grayscale, Hue-Rotate, Invert, Saturate and Sepia.

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Navigate to Filter
  6. Modify the selected Filter effect
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Image
  5. Navigate to Filter
  6. Click Modified Filter button to Reset

# Filter Bar

The Filter Bar property displays a text field above the Gallery or Galleries. It makes it easier to display a gallery or display all galleries.

Enable Filter Bar

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Click to activate
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Click Filter Bar button to deactivate
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Navigate to 'All' Filter
  6. Click to activate
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Navigate to 'All' Filter
  6. Click 'All' Filter button to deactivate

# 'All' label

The 'All' labelproperty allows you to name the collection of Galleries rather than the default 'All'.

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Navigate to 'All' Label
  6. Name 'All' Label
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Navigate to 'All' Label
  6. Click 'All' Label button to remove

# Spacing

The Spacing property adjusts the spacing between each Gallery name in the Filter Bar.

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Navigate to Spacing
  6. Adjust Spacing
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Navigate to Spacing
  6. Click Spacing button to reset Spacing

# Gap

The Gap property adjusts the distance between the Filter Bar and the Gallery Block.

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Navigate to Gap
  6. Adjust Gap
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Navigate to Gap
  6. Click Gap button to reset Gap

# Align

The Align property allows you to specify the vertical position of the Filter bar contents.

Flex-start The Filter Bar is positioned at the start of the Filter Bar container.

Center The Filter Bar is centered in the Filter Bar container.

Flex-end The Filter Bar is positioned at the end of the Filter Bar container.

Space-between The remaining space is distributed between the Filter Bar contents.

Space-around The remaining space is distributed around the flexbox contents: this adds space before the first Gallery and after the last one.

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Navigate to Align
  6. Select the desired value (flex-start, center, flex-end, space-between, space-around)

# Typography

The Typographyproperty allows you to modify the Filter Bar typography including:

Text Align which defines how the Filter Bar text is horizontally aligned.

Font Family which sets the Filter Bar text font face

Font Size which allows you to modify the size of the Filter Bar text.

Font Weight which sets how thick or thin characters of the Filter Bar text should be displayed.

Letter Spacing which defines the spacing between the characters of the Filter Bar text.

Line Height which defines the height of a single line of Filter Bar text.

Font Style which defines how slanted the Filter Bar text should be. It is basically an Italic option.

Font Decoration which adds an underline, overline, line-through, or a combination of lines.

Text Transform which defines how the text in the Filter Bar should be transformed:

None This removes every text transformation applied to the Filter Bar. It will appear untouched.

Capitalize Makes the first character of every word uppercase.

Uppercase Makes every character uppercase.

Lowercase Changes all characters into lowercase characters.

Text color which defines the color applied to the text of the Filter Bar.

Link color which defines the color applied to the links in the Filter Bar.

# Button

The Button property lets you style your Gallery Titles as Buttons. You can modify Background Color, Padding, Radius, Border Width, Border Style and Border Color.

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Navigate to the Button drop down
  6. Click on Active to enable Button styling
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Open the Button panel
  6. Adjust Button styling
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Open the Button panel
  6. Click appropriate buttons to reset Button stying

# Hover

The Hover pseudo-class modifies the properties of a Gallery Title when the pointer hovers over it.

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Open the Button panel
  6. Select Hover in the drop down menu
  7. Modify the required properties from the highlighted options
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Open the Button panel
  6. Select Normal in the drop down menu

# Active

The Active pseudo-class modifies the properties of the Gallery Title when you click it.

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Open the Button panel
  6. Select Active in the drop down menu
  7. Modify the required properties from the highlighted options
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Open the Button panel
  6. Select Normal in the drop down menu

# Focus

The Focus pseudo-class represents a Gallery Title that has received Focus. It is usually triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Open the Button panel
  6. Select Focus in the drop down menu
  7. Modify the required properties from the highlighted options
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Open the Button panel
  6. Select Normal in the drop down menu

# Before

The Before pseudo-class allows you to insert content before any non-replaced element.

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Open the Button panel
  6. Select Before in the drop down menu
  7. Modify the required properties from the highlighted options
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Open the Button panel
  6. Select Normal in the drop down menu

# After

The After pseudo-class allows you to insert content after any non-replaced element.

  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Open the Button panel
  6. Select After in the drop down menu
  7. Modify the required properties from the highlighted options
  1. Select a Cwicly Gallery block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to Filter Bar
  5. Open the Button panel
  6. Select Normal in the drop down menu

# Navigator