Gallery
Element Overview
The Gallery Element contains three versatile and powerful layout Types; from full-width galleries, to galleries with thumbnails, to carousels, this Element can be used to power image galleries of all kinds throughout your site.
Element Options
Type
Choose the Gallery type using this dropdown. “Masthead”, “Inline”, and “Carousel” will generally be the only Types available. However, it is possible for developers to add in more Types, so depending on which website you are editing, there could be more with options that are different in style or in terms of options than those three Types.
Note: The visibility of the following options is dependent on which Type has been selected.
Masthead (Type)
Gallery Items
This section is where all Masthead Gallery items will be built and ordered. Click “Add Item” to begin constructing the Gallery and add more new items as you go along. Each item added to the Gallery will be represented by a block. These blocks can be dragged-and-dropped to be re-arranged in any order.
The blocks can be individually collapsed or removed using the text in the top right of each one. Use the “Expand All” and “Collapse all” buttons beside the “Add Item” button to easily manage a long list.
Media Type
Choose the type of media to be used for the gallery item: Image or Video.
Image
If you’ve chosen “Image” as your Media Type, choose an image for the Gallery from the WordPress Media Library by clicking the “Add Image” button.
Learn More About Adding Images
Headline, Subheadline, and Description
Input the text for the headline, subheadline, and description for the Gallery item here. Plain text and HTML without attributes (e.g. <h4>Title</h4>) are supported.
Button
Use the button option to add an external or internal link to the gallery item. This will in essence allow the gallery item to have the same functionality as the Button Element in terms of its ability to link to content.
Learn More About Adding Buttons
Inline (Type)
Thumbnails
Check to display thumbnail navigation beneath the main gallery.
Gallery Items
This section is where all Inline Gallery items will be built and ordered. Click “Add Item” to begin constructing the Gallery and add more new items as you go along. Each item added to the Gallery will be represented by a block. These blocks can be dragged-and-dropped to be re-arranged in any order.
The blocks can be individually collapsed or removed using the text in the top right of each one. Use the “Expand All” and “Collapse all” buttons beside the “Add Item” button to easily manage a long list.
Image
Choose an image for the Gallery from the WordPress Media Library by clicking the “Add Image” button.
Learn More About Adding Images
Carousel (Type)
Items per Page
Input number of carousel items for each page. Default is 1.
Content
Choose how gallery items are chosen: Hand Picked or Smart. Smart automatically chooses items based on the fields below. Hand Picked allows you to manually construct each gallery item.
Gallery Items
This section is where all Inline Gallery items will be built and ordered. Click “Add Item” to begin constructing the Gallery and add more new items as you go along. Each item added to the Gallery will be represented by a block. These blocks can be dragged-and-dropped to be re-arranged in any order.
The blocks can be individually collapsed or removed using the text in the top right of each one. Use the “Expand All” and “Collapse all” buttons beside the “Add Item” button to easily manage a long list.
Existing or Hand Made
Choose whether to link to existing site content or to add a new hand made item.
Attached Content (Existing)
Choose which piece of internal, existing content the carousel gallery item should link to using the dropdown.
Image (Hand Made)
Choose an image for the Gallery from the WordPress Media Library by clicking the “Add Image” button.
Learn More About Adding Images
Headline & Description
Input the text for the headline and description for the Gallery item here. Plain text and HTML without attributes (e.g. <h4>Title</h4>) are supported.
Button
Use the button option to add an external or internal link to the gallery item. This will in essence allow the gallery item to have the same functionality as the Button Element in terms of its ability to link to content.
Learn More About Adding Buttons
Element Advanced Options
Note: The visibility of the following options is dependent on which Type has been selected.
Masthead Advanced Options
Inline Advanced Options
Carousel Advanced Options
Auto-Scrolling (All Types)
Check to enable auto-scrolling of gallery images. Input the time between slide switches in milliseconds using the “Slideshow Speed” field that appears. Default is 7000 (7 seconds).
Full Screen Button (Masthead & Inline)
Check to display button that will enable gallery images to be viewed full screen. Clicking the button will load images in full resolution inside of a modal window.
Width (Masthead)
Choose whether gallery is a percentage of the browser width or a fixed pixel width.
Height (Masthead)
Choose whether gallery is a percentage of the browser height or a fixed pixel height.
Controls & Mobile Controls (Carousel)
These options control the style of the desktop and mobile controls for the Carousel independently. “Dots” will display a row of dots representing each item in the Carousel; users can click on each dot to jump quickly between any of the gallery items. “Arrows” will display on the left and right of the carousel, allowing navigation between gallery items one at a time. “Dots & Arrows” will display both, and “None” will display neither (in this case, enable Auto-Scrolling so that all gallery items can eventually be seen).
Image Size (Carousel)
Override the custom default image size for the gallery items. Each of the image sizes available uses the standard set of Image Sizes also used for the Image Element.
[Learn More About Image Sizes]
Headline Size (Carousel)
Choose the headline size for each gallery item. Default is h5.
Show Image, Headline, Description & Button (Carousel)
The Image, Headline, Description, and Button will show by default on the Carousel. Customize the output by checking any of the options. For example, check the “Show Image” and “Show Headline” options and only the Image and Headline will be output on the front-end.
Element Style Options
Every Element has a standard set of style options available to it that allow for margins, padding, background color, CSS classes, and more to be set.