Powered by

# Link Wrapper

The Link Wrapper properties encapsulate all the different settings that will allow you to control and enable a link for a specific block.

The following blocks support the Link Wrapper feature:

  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Find the Define as link property
  5. Toggle the property

# Link Type

The Link Type property allows you to define the link as a URL or an action.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Find the Define as link property
  5. Click on Edit Link
  6. Find the Link Type property
  7. Select the desired value from the dropdown

URL When clicked, the Link Wrapper will link to the chosen URL (static or dynamic).

Action When clicked, the Link Wrapper will perform the chosen action.

# Link Source

The Link Source property gives you the option to choose whether the URL source should be static or dynamic.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Find the Define as link property
  5. Click on Edit Link
  6. Find the Source property
  7. Select the desired value from the dropdown (static, dynamic)​​

Static A static source will rely on a static URL provided by the user. It will not update automatically depending on the source, and relies on manual changes.

Dynamic A dynamic source allows you to specify an image source that might change depending on the different parameters available at the time. It will update automatically. It relies on WordPress dynamic features as well as ACF Pro.

WordPress Data
ACF Pro
  • Post URL
  • Featured Image
  • Archive URL
  • Site URL
  • Shortcode
  • Site Logo
  • Author URL
  • Comments URL
  • User set groups & fields
  • Repeater fields

# Link Action

The Link Action property gives you the option to choose between different actions that will be performed when a user clicks on the Link Wrapper

  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Find the Define as link property
  5. Click on Edit Link
  6. Make sure that Link Type is set on Action
  7. Find the Link Action property
  8. Select the desired value from the dropdown (lightbox, share, modal, contact)​​

Lightbox When clicked, the Lightbox action displays images or videos by filling the screen and dimming out the rest of the web page.

Share When clicked, the Share action automatically generates and redirects the user to the selected social platform with a ready-made sharing template.

Modal When clicked, the Modal action displays the selected Modal block by filling the screen and dimming out the rest of the web page.

Contact When clicked, the Contact action redirects the user to the selected contact option (Email, WhatsApp, Tel, etc...).

# Open in a new tab

The Open in a new tab property allows you to specify if the hyperlink should be opened in a new browser tab.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Find the Define as link property
  5. Click on Edit Link
  6. Toggle the property

# Link Rel

The Link Rel specifies the relationship between the current web page and the linked web page.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Find the Define as link property
  5. Click on Edit Link
  6. Enter the relationship (find out more)

# Lightbox

# Type

The Lightbox Type property defines the type of lightbox object applied to the Link Wrapper.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Find the Define as link property
  5. Click on Edit Link
  6. Make sure that Link Type is set on Action
  7. Make sure that Link Action is set on Lightbox
  8. Find the Type property
  9. Click on the appropriate background type options (image, video)​​

Image Defines the lightbox object as an image.

Video Defines the lightbox object as a video.

# Image/Video URL

The Lightbox URL property allows you to define the image/video URL that will be used for the lightbox object.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Find the Define as link property
  5. Click on Edit Link
  6. Make sure that Link Type is set on Action
  7. Make sure that Link Action is set on Lightbox
  8. Find the Image/Video URL property
  9. Select an image/video by Clicking on Browse or copy/paste a URL

# Height/Width

The Lightbox Height/Width properties allow you to define the image height/width that will be used for the lightbox object.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Find the Define as link property
  5. Click on Edit Link
  6. Make sure that Link Type is set on Action
  7. Make sure that Link Action is set on Lightbox
  8. Find the Height or Width property
  9. Enter your desired height/width
  10. Select your desired height/width unit

# Caption

The Lightbox Caption property allows you to define a description that will appear under the image.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Find the Define as link property
  5. Click on Edit Link
  6. Make sure that Link Type is set on Action
  7. Make sure that Link Action is set on Lightbox
  8. Find the Caption property
  9. Enter your desired caption

# Overlay Color

The Lightbox Overlay Color property defines the color of the overlay for the lightbox.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Find the Define as link property
  5. Click on Edit Link
  6. Make sure that Link Type is set on Action
  7. Make sure that Link Action is set on Lightbox
  8. Find the O. Color property
  9. Open the color picker by clicking on the color circle
  10. Select your color in the color picker or click on a global color
  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Find the Define as link property
  5. Click on Edit Link
  6. Make sure that Link Type is set on Action
  7. Make sure that Link Action is set on Lightbox
  8. Find the O. Color property
  9. Click on the Clear

# Gallery Name

The Lightbox Gallery Name property allows you to define an identifier that will identify the lightbox object with other similar objects.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Find the Define as link property
  5. Click on Edit Link
  6. Make sure that Link Type is set on Action
  7. Make sure that Link Action is set on Lightbox
  8. Find the Gallery Name property
  9. Enter the desired identifier

# Modal

# Type

The Modal Type property allows you to define whether the action should open or close the specified modal.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Find the Define as link property
  5. Click on Edit Link
  6. Make sure that Link Type is set on Action
  7. Make sure that Link Action is set on Modal
  8. Find the Type property
  9. Select the desired option (open, close)

# Block ID

The Modal Block ID property allows you to define the Block ID of the modal you want to open or close when the user clicks on the hyperlink.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Find the Define as link property
  5. Click on Edit Link
  6. Make sure that Link Type is set on Action
  7. Make sure that Link Action is set on Modal
  8. Find the Type property
  9. Select the desired option (open, close)

© Copyright 2022. Cwicly. All rights reserved.