All Collections
Sites
Website Edits
Adding a Button on Your GoSite Website
Adding a Button on Your GoSite Website

Creating and updating graphic buttons in the GoSite Builder

GoSite Support avatar
Written by GoSite Support
Updated over a week ago

Website buttons are great for getting your website visitors invested in your business and help with easy website navigation. Buttons are clickable icons which you can link to other place like other pages, email, phone number or even to an external URL.


Before starting, log in to GoSite on a computer and open the GoSite Sites Builder.

Note: The GoSite Sites Editor is currently accessible through a desktop computer only. You cannot edit your website through the mobile app on Iphone, Android, or Tablets.


Table of Contents


Adding a Button

  1. Hover your mouse over the section that you would like to add the button to and click on the pencil icon.

  2. On the left side of your screen, drag the “Button” widget and drop it to the desired location in the section.

  3. Click on the button you just created to open the "Button Settings" on the left-hand side and follow steps to either edit the look of the button to your liking or add a link to the button.



Editing a Button

There are 2 sections under "Button Settings" that allow you to change the look of a button: General Settings and Advanced Settings

Note: The blue "Link Settings" button is for adding a link to your button

General Settings:

  • Change the name of your Button under "Button Text."

  • To add an icon, type the name of the icon on the search bar or select from the icons below the search bar.

Advanced Settings:

  • To adjust the button alignment, click the “Alignment” box, and choose whether to align your button to the center, left or right.

  • To edit the hover effect of a button, click on the “Hover Effects” menu, and choose from the desired effect from among the options listed.

  • Click on the “Button Rounded’ Slider to change the button shape to round or square-edged.

  • Click on the “Background Color” drop-down menu to change the desired background color of your button.

  • Click on “Upload Image” to choose an image to be displayed as the button background. Choose from either the “Images” or “GoSite Images” tab for button background and click "Continue" to proceed.

  • Click on “Font Color" or "Border Color” menu boxes to edit your Button colors

  • Adding codes to “Custom CSS” will allow you to adjust button shadows, font size, and font style. Click on the “Save” button to proceed.


Adding a Link to a Button

  1. Click on the “Link Settings” button under "Button Settings".

  2. A white box will appear with different options on what you want your button to be linked to.

  3. Choose whichever option works best for your button. Below is a description of each item:

    • Page - you can link your button to different pages of your website (services, contact, about, etc.)

    • Anchor - your button can be linked on a certain part of a certain page of your website.

    • Web Address - you will be redirected to a certain website once your button is clicked. You can paste the URL link of whichever website you want.

    • Email Address - when the button is clicked, your site visitors can send you an email right away.

    • Phone Number - your button can be a ‘shortcut’ for anyone who wants to contact you through your phone number.

    • Document - in this option, you can upload files from your computer so that once the button is clicked, the document will show up to your site visitor’s screen.

    • Custom Form - your button can be linked on a personalized custom form.

    • Appointment Form - also known as the booking tool -- where your clients can fill out the form and will be logged onto your bookings.

    • Enable Chat - this option allows you to toggle your messenger button on and off. Once toggled on, the messenger box will pop up when the button is clicked.

    • Payment Option - here you can choose a payment method by setting the payment widget and toggling the payment link on or off. With this, the payment method will be shown once you click the button.

    • Review Link - you can input a shareable link for your site visitors and customers to leave a review. But linking it to a specific button will let your audience visit the link without you sending it to them.

    • Text Me Form - same with the appointment form, your customers can fill out the form to generate an SMS message to you.

  4. Once you have added a link to your button, make sure to press "Save" and then "Publish" to push your changes live!


Video Walkthrough

Below is a complete video walkthrough of the steps listed above on adding a button in the "About Us" section and linking it to the Contact Us page of this website.


Still need help?
Visit us at gosite.com to chat, or email us at [email protected].

Did this answer your question?