Directory Gallery

The Directory Gallery is designed to accommodate a wide variety of listings and feature-rich galleries. The thing that makes this widget special is its powerful set of listing attributes. Each listing includes:

  • Title
  • Description
  • Button
  • Title Icon
  • Image Icon
  • Container Icon

The icons that are available for the title, image or container allow you to display badges, brand icons, sale tags and more – providing powerful features unavailable in any other gallery widget. Consider using this gallery for real estate listings, team members, portfolios and more.

Preview: https://demo.wocode.com/directory-gallery

Tutorial Video

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it where you would like the gallery to appear on your page layout.

WIDGET OPTIONS

  • Open the widget option panel.
  • Unique ID: Be sure to use unique ID’s when using multiple instances of the widget on the same page.
  • Columns: This is the number of columns that will be used in the gallery. This can be changed at any time.
  • Directory Items: These List Items make up all of the directory listings in your gallery. Click Add Item to begin adding items.

DIRECTORY ITEM OPTIONS

  • Container Icon (toggle): This toggle enables an icon that can be placed in the container. The container is the space where all the content for one listing exists. The following options are seen if this toggle is enabled:
  • Container Icon (loader): Select the icon for the container. You may choose from the library or upload your own.
  • Container Icon Position: Choose the position for your icon relative to the listing container: Top Left, Top Right, Bottom Left, Bottom Right. Consider using this option to display an icon in the bottom of the container. The Top Left and Top Right positions use placements similar to the Image Icon Top Left and Top Right Positions.
  • Image Icon (toggle): This toggle enables an icon that can be placed on top of the image. The following options are seen if this toggle is enabled:
  • Image Icon (loader): Select the icon to be placed on top of the image. You may choose from the library or upload your own.
  • Image Icon Position: Choose the position for your icon relative to the image: Top Left, Top Right, Bottom Left, Bottom Right. The Top Left and Top Right positions use placements similar to the Container Icon Top Left and Top Right Positions.
  • Item Title: This text will be displayed as the listing title.
  • Title Icon (toggle): This toggle enables an icon that can be placed next to the title. The following options are seen if this toggle is enabled:
  • Title Icon (loader): Select the icon to be placed next to the title. You may choose from the library or upload your own.
  • Title Icon Position: Choose the position for your icon relative to the title: Before Title Text or After Title Text (the title icon will appear to the left or right of the title)
  • Description Text: This text appears as the description in the listing.
  • Button Link: This is the link location for the button.
  • Button Label: The text that appears on the buttonAll of the above steps are used to create one listing. Repeat this process as needed to add all of the gallery listings.
  • Links and Images: This is where you will build your list containing text content and images.
  • List Items: Within each list item, you will find several options:
  • Image: Use this image loader to load your floating image. Choose from our massive library of images or upload your own.
  • Title: This is the main list item text. Note that this text does not have to be a link. Links are enabled later in this section.
  • Subtitle: The subtitle is displayed below the title when the user hovers over the title text. Leave this field empty if you choose not to display a subtitle.
  • Link URL: Enter your link URL here.
  • Link Target: Use this option to allow the link to be opened in the same window or a new window.
  • Display Item Number: You may display a number next to the title if you choose. This toggle enables/disables the option. The number will appear when the user hovers over the title, similar to the subtitle.

DESIGN SETTINGS

There are numerous options that allow you to style various elements of the widget; such as fonts, colors, and dedicated styling sections for the container, title, description button and more. The settings are labeled with their exact function, and will not be explained in detail, as they are self-explanatory.

TIPS AND NOTES

  • Image dimensions: You may notice as you add images that the images display at different aspect ratios. Images are displayed at their original aspect ratios. However, if you wish to display consistent, uniform sizing to all of the images, you may use the Image Dimension settings in the Item Image Styling section in the Design tab. Settings here will apply to all images in the gallery. If you wish to retain the original aspect ratios, leave these fields blank.
  • Styling elements in the Design section apply to all instances within an element. For example, when you update the styling for Image Icons, these settings will apply to all Image Icons in the gallery.
  • Icon styling settings can be found separately within corresponding sections such as Item Container Styling, Item Image Styling and Item Title Styling.