The Button / Image app displays an image or a button on the page that can be used as a hyperlink.


There are three styles to choose from under the "button type" tab.

  1. The Custom Button should be used if you have an image that you want to upload.
  2. The Build A Button Tool should be used if you want to create your own button using text and custom design styles.
  3. The Standard Link should be used if you just want text without a button design or image.


Here are the steps to upload an image using the Custom Button type:

  1. Click on the "Custom Button" radio button.
  2. Click on the "Upload Image" icon.
  3. Select one of the four options for the button shape (Square, Portrait, Landscape, Custom).  Cropping may be required for any of the shapes except "Custom" so you should use the custom shape if you don't want any of the image cropped.
  4. Click on the "Add Files" button.
  5. Locate the image on your computer's hard drive using the dialog box that opens.
  6. Select the file and click "Open".
  7. Click on the "Start Upload" button.
  8. You should see the image when the upload completes.  You can then set the button action and button alignment using the instructions below or you can click on the yellow "Save App" button at the bottom of the page to save your progress. 

Here are the instructions for using the Build A Button Tool to create a button:
  1. Click on the "Build A Button Tool" radio button.
  2. Enter text in the box marked "Line One".  You can also enter text in the "Line Two" box if you want two lines of text for the button.
  3. Select a font style from the drop-down menu labeled "Font Family".
  4. You can also adjust the font size for the text as well as apply bold and italic formatting.
  5. The option to choose a color for the button text is also available by clicking on the color selector box.  You can enter custom color codes if you're familiar with those or you can click and drag the little circle selector from the lower left corner to another spot on the color palette.  Slide the spectrum arrows to adjust the colors available in the palette.
  6. Three options are available for the Button Shape.  Click on the Square, Small Curve, or Large Curve to choose the one you want to use.
  7. There are also options available to customize the background color for the button as well as the width.  Use the same procedure for selecting the background color as you used in step 5 for the text color.

Here are the instructions for using the Standard Link type:
  1. Click on the "Standard Link" radio button.
  2. Enter text in the box marked "Link Text".
  3. Select a font style from the drop-down menu labeled "Font Family".
  4. You can also adjust the font size for the text as well as apply bold and italic formatting.
  5. The option to choose a color for the button text is also available by clicking on the color selector box.  You can enter custom color codes if you're familiar with those or you can click and drag the little circle selector from the lower left corner to another spot on the color palette.  Slide the spectrum arrows to adjust the colors available in the palette.

After you've uploaded the button image or set the formatting of the app using either the Build A Button Tool or the Standard Link, you can add the link to it by clicking on the "button action" tab.  There are five different kinds of links that you can add using this app.  They are all listed in the first drop-down menu where it says "Set button link".
  1. "A page on your site" allows you to select an active page that you've created in the Content Editor.  Only active pages will be available to select in the second drop-down menu.  If a page is not available in the drop-down menu, you will need to use one of the other link types available.
  2. "An event on your site" will let you select an event from the calendar.  You should see all of the  events that have been added to the calendar using the Events Editor.  The calendar view will show you all of the events for the current month.  If you need to select an event for a different month, you can find it using the right and left arrow buttons.
  3. "A form on your site" lets you select an online form that you have created in the Form Editor.  Only forms that have been locked can be used in the app.  You will need to lock the form in the Form Editor in order to make it available to use.
  4. "A video on your site" will allow you select a video that you've already uploaded.  This app does not allow you to upload new videos.  Select the video for the link by clicking on the radio button below the thumbnail image.
  5. "A page on the internet" allows you to enter the address for any page.  You can copy the URL for the page when find it with your browser and then select the entire address in the top bar.  Make sure when you enter the URL for the link that the "http" part is included at the beginning. For this option you have the option of making the link open in a new browser window or open the page in the same window.

This app also has the option to set the horizontal placement (left, center, or right) of the content within the column.  Select the radio button for how you want the content aligned within the column where the app is placed.  If the image you've uploaded to this app has already taken up all of the available width, then the alignment will not change here because there is no empty space available.

One of the best features of the Button / Image App is that it will automatically size the image based on the column where it is placed.  There are a total of six different column widths used for pages.  If you want to design your image for a specific column, here are the maximum widths for each of the column sizes:

  • full width = 918 pixels
  • three fourths width = 678 pixels*
  • two thirds width = 598 pixels
  • one half width = 418 pixels*
  • one third width = 278 pixels
  • one fourth width = 198 pixels
* The three fourths and one half width options are not available for the home page or any pages using the full width layout.