Back
How to Customise Your Buttons

A button — though small — plays a big role on your website. It grabs the visitor’s attention and serves as a gateway for soliciting an action. Whether it is to give further details or to sell your product, your goal is to get them to click it.

The template you choose on Sitebeat includes Button Features with preset text and design — which you can easily customise. Change the text and appearance of your website's Button Features using the steps below:

  1. Log In to access the Sitebeat dashboard.
  2. Under My Sites, click the Edit Site option of the website that you wish to manage.
  3. Note: If you want to edit a new site, you have to unpublish the current website and make your new site as your primary website.

    Under My Sites, click the [...] Ellipsis Icon on the top-right corner of the website to unpublish the current site. Click Unpublish Site, and then click Yes, Unpublish to confirm.

    Under My Domains, click the [...] Ellipsis Icon of the website that you want to replace as your primary website, then click Replace Primary. In the pop-up window, select the domain of the new website in the New Primary Domain list, then click Replace Primary. You can also click the Domains tab under My Sites to perform the necessary steps mentioned.

    You can now edit the new site that you wish to manage.

  4. On your Site Editor, access the editing options for the Button Feature using the applicable steps:

    If the Button is on the Menu Block:

    The Menu Block is the top section of your website where the menu is located for most templates, and depending on the template, a Button is pre-added on this Block.

    To customise this Button, hover your mouse pointer over it, and then click Edit. A pop-up box will appear where you can customise the following:
    Text Specify the text that you would like to appear on the Button.
    Link To Select where you would like to link the Button from the following options in the first drop-down list:

    • Page — Select a Page from the second drop-down list.
    • Anchor — Select a Page and Anchor from the second drop-down list.
    • URL — Enter the specific URL in the space provided.
    • File — Click Select your file then drag and drop the file or browse your computer's folders to upload it.

      If the file has already been uploaded to Sitebeat, click on the My Documents tab at the top to select it.

      If the file is on another online service, click on the Clouds tab at the top to connect to the service and locate the file.
    • Email address — Enter the specific email address in the space provided.
    • Phone number — Enter the specific phone number in the space provided.
    Type Select a Button type from the drop-down list, and then select a preferred shape below it and adjust its border size.
    Background Customise the Button's background color.
    Letter Spacing Click and drag within the bar to adjust.
    Font Size Click and drag within the bar to adjust.
    Font Select the font type to use from the drop-down list.
    Style Select the font style to use from the drop-down list.
    Format Select the font formatting to use from the drop-down list.
    Empty Box or Icon Click on the Empty Box, or the preset icon if any, to select and add an icon to your Button.

    You can also enter a keyword in the Search icons field at the top to display more icon options.
    Color & Alignment Customise your icon's color and alignment.
    Open Link In New Tab Enable or disable according to preference.

    Other Actions:

    Hover your mouse pointer over the Menu Block. Click the Layout Icon that appears on the right side to open a pop-up box, and then proceed with any of the actions below:

    • Delete a Button Feature from the Menu Block — Hover your mouse pointer over the Button bar, and then click the [x] Icon.
    • Change the Placement of the Button Feature on the Menu Block — Click on the Button bar, and then drag to change the order of the items.
    If the Button is NOT on the Menu Block:

    If the Button is on a different Block or section, simply click on the Button to display its editing options where you can customise the following:
    B / I Click to set the text to Bold or Italic font style.
    Align Click to set the Alignment of the Button on your website page.
    Link Click to select where you would like to Link the Button.
    Font Click to customise the Font Type, Style, and Format.
    Size Click to set the Font Size and Font Letter Spacing.
    Color Click to set the Text Color.
    Icon Click to search for and select an Icon, and then customise the Icon's Color and Alignment.
    Settings Click to select a Button type from the drop-down list. Select a preferred Button Shape, and then adjust its Border Size and select a Background Color.
  5. Other Actions:

    • To move a Button Feature, hover your mouse pointer over it. Click the moving tool on its upper edge, and then drag it onto a new placeholder on your page.
    • To resize a Button Feature's placeholder horizontally, hover your pointer over its left or right edge. Click the [↔] Arrow Icon that appears, and then drag it sideways.
    • To delete a Button Feature, hover your pointer over it, and then click the [x] Delete Icon on its top-right corner.

    Hit the play button below to view the quick start guide we've prepared for you:

    You can also check out more video guides by visiting our YouTube How-To Playlist.

Was this helpful?
85% of people found this helpful.
-