Our ‘Image and Text' feature is ideal for neatly aligning content on your website.

There are several ways to incorporate images into your website. This Help article is specific to the ‘Image and Text’ feature. For information on other image features, please view the ‘Adding Images’ Help article.

Notes:

This Help article includes the following:

  • How to add the ‘Image and Text’ feature to your website
  • ‘Image and Text’ feature display options
  • Image options
  • Text options
  • Button options
  • Image Link options
  • ‘Image and Text’ position and alignment options
  • How to delete an image from the ‘Image and Text’ feature

How to add the ‘Image and Text’ feature to your website:

  1. From the ‘Edit Content’ tab, click ‘Pages’ and open the page on which you’ll be working
  2. Click ‘Add feature’
  3. Select the ‘Image and Text’ feature
  4. Use the placement arrows on that page to set the feature’s location

‘Image and Text’ display options

There are several display options listed within the ‘Image and Text’ feature, in the settings pane at the left. These options control how your image and text work together on the page. You’ll be able to adjust options like text wrap, alignment, and image position further using these display options:

  • Split: The image on one side, text on the other side.
  • Collage: Image on one side with the text overlapping part of the image.
  • Stack: Image is on the top, bottom, or below headings.
  • Text on image: Text displays overtop of the image.

Note: It is not an option to change the colors directly within the ‘Image and Text’ feature. To change the colors, the corresponding section style must be adjusted through the ‘Edit Theme’ tab, and these changes will apply to all sections using that style.

Image options

  1. Click ‘Add image’
  2. Choose from ‘My Uploads,’ ‘Stock Imagery,’ or ‘Dropbox’
    • Note: This includes the option to upload an image from your computer, select a previously-uploaded image, choose a stock photo from our gallery, or import an image from your Dropbox account.
  3. Click on the uploaded or stock image
  4. Click ‘Apply image’
  5. Select your image options:
    • Crop Image: Zoom or choose a preset crop size (circle, square, 5:4, or 16:9). Click ‘Apply’
    • Rotate: Click the left or right rotation icon
    • Link: Select the link type in the ‘Link to’ drop-down
      • An external page: Directs the visitor to a page that is not on your website
        • Enter the URL for the external site to which you want visitors directed
        • Check the ‘Open in new window’ option so visitors will keep your website tab open while they visit the external page
      • One of my pages: Directs the visitor to a page on your website
        • Select the site page from the ‘Page’ drop-down menu
      • A file: Downloads a file onto your visitors computer
        • Upload the file from your computer or import it from your Dropbox.com account
        • Choose an existing file (Select this option for a file already uploaded to your account. Files are stored in the ‘File manager’.)
      • An email address: Opens the visitor’s default email program so they can send you an email
        • Note: If the visitor is using an online email program such as Gmail, Yahoo, etc. this link will not work. It’s advised to not use this linking option, and instead to use the Custom Form feature.
      • A pop-up version of this image: Opens the image in a modal 'gallery' window
      • Download original image: When clicked this image will download onto the visitors computer.
      • Albums: Directs the visitor to your album page
        • Select the desired album from the ‘Album’ drop-down menu
      • Track: Directs the visitor to one of your audio tracks
        • Select the desired track from the ‘Track’ drop-down menu

      • A page PDF file: Downloads a PDF version of a page’s contents

        • Select the desired page from the ‘Select a page PDF’ drop-down menu

      • Image Filter: Choose a filter for your image (similar to Instagram filters) and click ‘Apply’

      • SEO: Enter ‘Alt text’, click ‘Apply’
        • Note: This text appears inside the image container when the image cannot be displayed. It helps search engines understand what an image is about. Alternate text is also very helpful in case images on a page cannot be found.
      • Reset Image: Clears any image options previously selected.
      • Replace Image: (Located in the left-hand pane) Choose a different image.
  6. Click ‘Save’

Note: Although it’s not possible to customize the specific size of the image, you can use column widths to change the positioning.

Text options

To modify the text, adjust these options in the pane of settings on the left:

  1. Add ‘Heading’, ‘Subheading’, and ‘Description’ text (all are optional)
    • Description options: Bold, Italics, Link
  2. Click ‘Save’

Note: Pasting text from another source (like another web page or text editor) may carry over formatting that will conflict with your theme settings. To avoid this, type directly into the text fields or paste in plain text that has been stripped of formatting.

Button options

A button can be a great way to direct your visitors to specific content. The Image and Text feature includes a button that can be adjusted as follows:

  1. ‘Button Link’:
    • No link
      • Removes the button from the feature
    • An external page
      • Provides the option to add a URL for another site. This is a great option if you want to redirect visitors to a social media platform, music streaming platform, press articles, etc.
      • Add the URL for your external page
      • Select if you’d like the external page to open in a new window by checking ‘Link to new window’
    • One of my pages
      • To link to a page on your website, choose ‘Select a page’ from the drop-down menu
    • A file
      • Select a file you’ve uploaded to your website. When the button is clicked, the file will start downloading on the visitors device
    • An email address
      • Add a valid email address. When the button is clicked, the visitor will be redirected to their email program with your email address auto filled in their ‘Send To’ field
    • Album
      • Link to any album on your website. Note: The album must have ‘Sharing’ enabled.
    • Track
      • Link to any track on your website. Note: The track must have ‘Sharing’ enabled.
    • A page PDF
      • Download a PDF file containing the contents of one of your pages
  2. ‘Button Text’
    • In the ‘Button text’ field, enter text to display on the button

Image linking options

Along with the general image options, you’ll be able to add a link to your image in this feature. If you hadn’t set your Link option directly in your image editing steps, you can apply the following options in here:

  • Select the link type in the ‘Link to’ drop-down
    • An external page: Directs the visitor to a page that is not on your website
      • Enter the URL for the external site to which you want visitors directed
      • Check the ‘Open in new window’ option so visitors will keep your website tab open while they visit the external page
    • One of my pages: Directs the visitor to a page on your website
      • Select the site page from the ‘Page’ drop-down menu
    • A file: Downloads a file onto your visitors computer
      • Upload the file from your computer or import it from your Dropbox.com account
      • Choose an existing file (Select this option for a file already uploaded to your account. Files are stored in the ‘File manager’.)
    • An email address: Opens the visitor’s default email program so they can send you an email
      • Note: If the visitor is using an online email program such as Gmail, Yahoo, etc. this link will not work. It’s advised to not use this linking option, and instead to use the Custom Form feature.
    • A pop-up version of this image: Opens a larger version on the page.
    • Download original image: When clicked the image will download onto the visitors computer.
    • Album: Directs the visitor to your album page
      • Select the desired album from the ‘Album’ drop-down menu
    • Track: Directs the visitor to one of your audio tracks
      • Select the desired track from the ‘Track’ drop-down menu
    • A page PDF file: Downloads a PDF version of a page’s contents
      • Select the desired page from the ‘Select a page PDF’ drop-down menu

‘Image and Text’ position and alignment options

Depending on the ‘Display style’ you select at the top of the left-hand pane of settings, you’ll be able to format your text and image interplay in the following ways::

  • Split:
    • Wrap text: When selected, text will wrap to the side and under the image.
    • Image position: Select from 'Right' or 'Left'
    • Text position: Select from ‘Top’, ‘Middle’, or ‘Bottom’ (not available when ‘Wrap text’ is selected)
    • Text align: Select from ‘Left’, ‘Center’, or ‘Right’ (not available when ‘Wrap text’ is selected)
  • Collage:
    • Text background: a background color is added behind the text. This color choice is set in the ‘Edit Theme’ tab. When the ‘Image and Text’ feature is in:
      • Section style 1, the ‘Section style 1’ color scheme is applied
      • Section style 2: the ‘section style 2’ color scheme is applied
      • Section style 3: the ‘section style 3’ color scheme is applied
    • Image position: Select from ‘Right’ or ‘Left’
  • Stack:
    • Text align: Select from ‘Left’, ‘Center’, or ‘Right’
  • Text on image:
    • Text position: Top, Middle, Bottom
    • Text align: Select from ‘Left’, ‘Center’, or ‘Right’
      • Note: Text will always be white and have a drop shadow.