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 create buttons with customized images within a Standard Layout or a Sections Layout.

IN THIS ARTICLE:

Custom Buttons (Sebastian Theme)

Example: Custom buttons - Sebastian free theme

Step 1: Select a layout that supports buttons

Before you can create custom buttons on your website, you must select a theme and layout that supports buttons. Then, you can add buttons to your homepage or to your site's interior pages.

A

Button layout options for your homepage

Here are the steps to activate a button layout on your homepage:

  1. Click Design Studio in the blue Admin Toolbar.
  2. Click the Homepage Layout button (located in the bottom left corner of the Design Studio).
  3. Choose one of the following layout options:

    • Select a Sections Layout (highlighted below)

    • Select a Standard Layout that contains a button region (highlighted below)

B

Button layout options for an interior page

Here are the steps to activate a button layout on an interior page:

  1. Navigate to the page on which you'd like to create buttons
  2. Click the Page Settings icon (located next to the + Add Content button).
  3. Click into the Page Layout tab
  4. Choose one of the following layout options:

    • Select a Sections Layout (highlighted below)

    • Select a Standard Layout that contains a button region (highlighted below)

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

Step 2: Add your Buttons

Once you've selected the appropriate layout, you're ready to add your buttons. There are three ways to add buttons to a page. Before you begin, be sure to access your website in Edit Mode (i.e., click  Edit Website in the blue Admin Toolbar). Then, follow these steps:

A

Create a buttons section in a Sections Layout

When building your page using the Sections Layouts feature, there a two specific section types (highlighted below) that will allow you to create a horizontal section of buttons:

  1. Buttons section type
  2. Text + Buttons section type

Once you've added one of these sections onto the page, click the settings icon to customize each button.

Example: Finished Buttons section - Verona free theme (above)

HINT: Follow these steps to learn how to design a page using sections. 

B

Use the Buttons module in a Standard Layout

When using a standard layout, you'll drag and drop the buttons module onto the page's button region. Here are the steps:

  1. Navigate to the page on which you'd like to create buttons.
  2. Click Add Content > Core Modules, then drag and drop the Buttons module into the designated buttons region on the page.

C

Use the Buttons module in a Sections Layout

Beyond creating a Buttons or Text + Buttons section (explained above), you can also use the Buttons module in other section types.

  • Row section
  • Grid section
  • Side-by-Side section

Once you've added one of these sections to the page, you'll be able to click Add Content > Core Modules, then drag and drop the Buttons module into the section.

Example: Buttons module used in a Grid section - Verona free theme (above)

Step 3: Create and customize

Click the settings icon in the upper right corner of each button module to edit the following Button settings:

  • Button Type: Use the drop-down menu to select the type of button you'd like to create.

    • Pre-built buttons with icons: The drop-down menu includes pre-built button options that include icons. (Examples shown below - Lorenzo free theme).

    • Buttons with custom images: Select Custom from the drop-down menu to create a button with a custom image. (Examples shown below - Lorenzo free theme)

  • 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).
  • Number of Buttons: When you use the Buttons module in a Standard Layout, you can effectively split one button region into two individual buttons. To do this, set the Number of Buttons value to 2. (e.g., With this feature, a 3-button layout can include a maximum of six buttons.)
    • This option is only available when using a Standard Layout. For a Sections Layout, the number of buttons is determined by the type of layout chosen for the section. A layout can be changed by clicking on the section settings icon in the upper right corner of the horizontal section.

    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.
    Click +Add Image in the Button Settings dialog, and select Stock Photos (pictured below) for adding 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.

    WATCH: Extreme Homepage Makeover

    Check out the full recording of our live webinar "Homepage Makeover" to learn more about how to effectively use design elements, including custom buttons and a Sections Layout, to feature content on your homepage.

Still need help? Contact Us Contact Us