How to create beautiful buttons using customized images

Custom buttons are an easy and effective way to feature important content on your homepage. This article explains how to use the Buttons module to create beautiful buttons with customized images.

(Pictured below: Custom buttons, Sebastian theme)

Custom Buttons (Sebastian Theme)


Select a homepage layout that supports buttons

To activate the Buttons module, you must first select a theme and homepage layout that supports buttons. Click Design Studio in the blue Admin Toolbar, then click Change Layout. Layouts that support buttons will include a blue button region in the thumbnail image, as pictured below.

Once you've selected your layout, click Save.

PRO TIP: Check out our list of  button dimensions for each free theme to see which themes include layouts that support buttons.

Drag and drop the buttons module onto your homepage

Click Edit Website in the blue Admin Toolbar to access your homepage in Edit Mode. Then click Add Content > Core Modules and drag and drop the Buttons module into the designated buttons region on the homepage.


Edit the Button Settings

Here's a breakdown of the editable settings in the Button Settings dialog:

  • Number of Buttons: You can effectively split one button into two separate buttons by setting the Number of Buttons value to 2. (e.g., With this feature, a 3-button layout can include a maximum of six buttons.)
  • Button Type: The Buttons module includes some pre-built buttons such as Mass Times or Events. However, select Custom from the drop-down menu to upload a custom button image.
  • Button Label: Enter the button's label/heading (custom buttons only).
  • Additional Text: Enter a short button description (custom buttons only).
  • Link Type: Select whether the button should link to an internal page of your website or an external page.
    • When Internal is selected, use the Link to Page drop-down menu to select the page of your website to which the button should link
  • Link URL: Enter the URL/destination to which you would like visitors to be directed when they click on the button.
  • Button Image: Upload and crop a custom button image (custom buttons only).

Once you've edited the Button Settings to your liking, click Save.

Using Stock Photos to create custom button images

If you have an eCatholic Stock Photos subscription, you can use beautiful Catholic stock images to create custom buttons.

Once you click +Add Image in the Button Settings dialog, select Stock Photos as the File Source for your new button image (pictured below) to select an image from the eCatholic Stock Photos library.

NOTE: Be sure to publish your homepage and any Design Studio changes to see your new buttons live on the web.

Repeat the process

Fill the remaining button regions by repeating the process: Drag and drop the Buttons module onto your homepage, then edit the Button Settings for each button.

WATCH: Extreme Homepage Makeover

Check out the full recording of our live webinar " Extreme Homepage Makeover" to learn more about how to effectively use custom buttons to feature content on your homepage.

Still need help? Contact Us Contact Us