Tag: pop-up

Image Gallery Snippet

This snippet will create a grid of thumbnail images that pop up into a scrollable gallery when a thumbnail is selected or a gallery of larger images that the user can scroll through that also pop up into a larger image. For the thumbnail option, only the pop-up image will display the title caption, but they will be displayed on the page for the gallery option.

An example of the thumbnails of an Image Thumbnails with Gallery widget.

An example of a gallery image of an Image Thumbnails with Gallery widget.

An example of the gallery style Image Gallery snippet.Image Gallery snippet.

  1. Using the Image Editor, crop the images.
    1. For the thumbnail option, crop the Square type and either the Banner, Card, or Vertical type. The image must be at least 800 pixels wide in order to have a pop-up.
    2. For the gallery option, crop a Banner, Card, or Vertical image type. The original image must be at least 800 pixels wide in order to have a pop-up.
  2. Select thumbnail or gallery from the dropdown menu to select the gallery display type.
  3. Insert the image in the Image field.
    1. For the thumbnail option, insert the square170 image.
    2. For the gallery option, insert the size that you want displayed on the page.
  4. Enter the title in the Title field to the right of the image, if desired. Linking this text will display a link on the pop-up image for the thumbnail option or both the page image or pop-up image for the gallery option.
  5. Enter the accompanying caption in the Caption field to the right of the title. Linking this text will display a link only on the page image for the gallery option. No links will appear in the pop-up images.

If you are including more than three images, press the Tab key to get more fields.

Continue Reading


Pop-up Text Snippet

This snippet allows you to create a link or button on the page that opens a pop-up window displaying text. The pop-up can include headings, links, and images.

pop-up-example

Pop-up text snippet.

  1. Enter the text that will display on the main page in the Link field. If you are linking from a blockquote and need to include an author you must insert the Blockquote snippet.
  2. If you want the link on the page to be a button or a blockquote instead of a plain link, enter the corresponding code in the Link Class field.
    1. “p” (without quotation marks) will create a plain link.
    2. “button” (without quotation marks) will create a gold button that changes to gray on hover.
    3. “button-black” (without quotation marks) will create a black button that lightens on hover.
    4. “button-blank” (without quotation marks) will create an outline button that changes to gold on hover.
    5. “blockquote” (without quotation marks) will create a blockquote. If you need an author in the blockquote, the Blockquote snippet needs to be inserted in the Link field.
  3. The Width and Height determine the size of the pop-up box in pixels.
  4. Enter a unique identifier in the ID field. If you are including multiple pop-ups on the page, they must be different values. The ID can only include lower-case letters, numbers, and hyphens.
  5. Enter the content that will display in the pop-up in the Pop Up field.

This snippet can also be used in the Button Text field of the List Spread Touts snippet to allow the tout to pop up a text window when clicked.

Watch a video to see how to add pop-up text to your page.

Continue Reading