Photo Buttons

If you run into a problem, have questions about how something works, or have questions about functionality that is not covered, email to ask for assistance.

Ask for Assistance   

Like call to action buttons, button photos are button links you use in your website to guide your users toward the top thing you want them to click on that page.

Getting Started Tip

Although not required, photo buttons are typically used in grids. Add the grid first, then add the cards in each grid item. If you have a full-width page (no left-hand secondary menu), you should probably use a 3- or 4-column grid. If you have a left-hand secondary menu, you should probably use a 2- or 3-column grid.

You can also use our pre-built photo navigation pattern template. It comes pre-populrated with a three-column flush grid of photo buttons. You can then add or delete the photo buttons and alternate between the number of columns in the grid as needed.

Grids  Photo Navigation

Add Photo Buttons

To create a photo button, you will need to click on the template icon and choose the option on the left labeled "Photo Button."


Click the Insert Template button at the bottom right and it will automatically insert a new photo button.


Highlight the existing "Photo Caption" text and type in your new button link text. Double click the button, or click anywhere in the text and click on the link to content button in the Drupal content editor, to add your link to the button.


To add your photo, click on the yellow image icon in the bottom right corner of the image. That icon to bring up the media browser popup box that you see when you add new images and will function exactly the same, except you are replacing the existing placeholder image with a new one. Follow the same steps as adding a new image and the old image will be replaced by a new one.

Replace an Image

Photo Button Styles

Photo buttons are automatically defaulted to have a gradient at the bottom. You can modify the style by clicking on the bright pink paint palette icon in the upper left of the button and selecting one of the button styles.


Select either the shade, no shade or bottom gradient options. NOTE: The no shade option should be reserved for images that are all one color so that the text is easily readable.

Example Shade Photo Buttons

Example No Shade Button Photos





Example Bottom Gradient Button Photos

Photo Button Modifiers

Button Photos are automatically defaulted to be lowercase. You can modify the button text case by clicking on the yellow wheel in the upper left hand corner of the button and selecting or deselecting the lowercase option from the modifiers button.