How to create beautiful buttons using customized images

Custom buttons are an easy and effective way to feature important content on your homepage or an interior page. 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)

1

Select a layout that supports buttons

To activate the Buttons module, you must first select a theme and page layout that supports buttons.

  1. Select a button layout for your homepage - Click Design Studio in the blue Admin Toolbar, then click the Homepage Layout button (located in the bottom left corner of the Design Studio). Layouts that support buttons will include a blue button region in the thumbnail image, as pictured below.

  2. On an interior page - Navigate to the page on which you'd like to create buttons, then click the Page Settings icon (located next to the + Add Content button). Next, locate the Page Layout tab and select a layout that includes buttons.

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

Drag and drop the buttons module onto the page

Click Edit Website in the blue Admin Toolbar to access your website in Edit Mode. Then, navigate to the page on which you'd like to create buttons. Click Add Content > Core Modules and drag and drop the Buttons module into the designated buttons region on the page.

3

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 page and any Design Studio changes to see your new buttons live on the web.
4

Repeat the process

Fill the remaining button regions by repeating the process: Drag and drop the Buttons module onto the page, 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