GabrielSoft - 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.

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 in the white Admin Toolbar.
2. Click the Layouts 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 trash can button at the bottom left-hand corner).
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 white Admin Toolbar). Then, follow these steps:

A

Create a buttons section in a Sections Layout

When building your page using the Sections Layouts feature, select the  Buttons section type.

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

To place a Text module above the buttons, click into the section settings and turn on the additional text option

Example: Finished Buttons section - Lucca free theme (below)

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 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 Title: Enter the button's label/heading (custom buttons only).
• Button Caption: Enter a short button description (custom buttons only).
• Call to Action: Enter a short phrase that prompts visitors to take action by clicking on this link, which will be displayed as an alternate color from the rest of the button text. (Moser theme only).
• Link Type: Select whether the button should link to an internal page of your website, an external page away from your website, or to a document that is hosted on your website.
  • 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 to Page: Choose the Page Name of any page on your website that you would like visitors to be directed to when you click on the button.
  • Note: When you choose a page from this drop-down list, the Link URL dialog will autofill with the selected page's URL.
• Link URL: Enter the URL/destination to which you would like visitors to be directed when they click on the button.
• Button Image: Upload a custom button image (custom buttons only).
  • Note: To learn how to crop or resize the custom image within your button, check out the How to crop and resize images Help Article. 

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