The Button module allows you to drag and drop a button into your webpage, customize it, and then link it to another page or website.
Before we begin: Have you checked out the Focus feature? Focus provides you with a set of 20 functional web page sections designed in the style of your template that you can add with a single click.
Focus saves you time and effort by putting together some of the most common page sections (many including buttons) like call to action, checklist, price table, subscribe, five styles of content layout and much more. It’s all customizable, so you can tweak it to your liking.
Before you start building areas on your web page, take a look at Focus - the work might have already be done for you!
Here’s how to add a button to your page, customize it, and link it to a destination.
Step 1: Open the target page
In the website builder, open the page of your site that you want to add the button to.
Step 2: Open the Modules tab
In the left sidebar menu, click on Modules:
Step 3: Locate the button module icon
In the Modules sidebar, you will see the Button module icon.
Step 4: Click and drag the button module icon onto your page
Point your mouse at the button module icon, click and drag it onto your page to where you want the button to be located. Then drop it.
As you drag it around the page, you will see black lines appear, indicating the edges of the existing elements on the page. Use these lines as guides help you drop your button module in the right place. You can add spacers or other elements later to adjust its position if desired.
For this example, we will add a button to the Bio page in the Nathan Clark template, beneath the template’s sample content for Bio.
Below you can see the button module before it was dropped, hovering over the page. The black line indicates the top edge of the spacer that separates the text box of sample content from the title “Double Bubble”. When the button module is dropped now, it will insert between the text box and the spacer.
Step 5: Caption your button
Click anywhere in the button module to reveal the grab bar and open the formatting options bar. The grab bar is the thick black bar in the center top area of the module. Click and drag on the grab bar to move the module on your page, or to the trash bin.
The formatting options bar displays below the module when the module is clicked:
To caption your button with something other than “Click Me!” click the Edit Button Caption icon in the Format options bar:
The Edit Button Caption box will open, where you can type in your new caption, and then click the Save button.
For this example, we’ll change the caption to See Projects.
Step 6: Link your button
You button needs to lead somewhere when the user clicks on it. The next step is to set up this link. Click the button module to open the options bar, and then click the link icon:
You have two choices:
URL: link to the URL of another web page
Pages: link to another page of your Bookmark website
Click the button beside your choice and then specify the target page.
There is also a checkbox for if you want the target page to open in a new window of the user’s browser (check the box), or redirect the current browser window to the button’s target page (don’t check the box).
Step 7: Other button formatting options
Once you’ve captioned and linked your button, you might want to add other formatting to it. Click inside the button module to open the format options bar.
Here’s a closer look at the format options bar.
Here’s a brief description of each of these options:
Align left - aligns the image to the left of the module block
Align center - aligns the image to the center of the module block
Align right - aligns the image to the right of the module block
Edit Button Caption
Clicking this icon opens the Edit button caption box. See above in Step 5.
Clicking this icon opens the editor box to set up the link that the button leads to. See above in Step 6
Clicking this icon opens the button style and size options. The style options are mostly colour options for your button, or just having it be linked text. The size options are: Smaller, Small, Medium and Large. Or you can check the box to make the button span the entire width of the space you’ve dropped it in.
Padding is the amount of white space around your button module. Your padding options are: None, Small, Medium or Large.
Step 8: Saving the changes
Once you have finished with your button, remember to click the Save button at the bottom center of the modules sidebar to save and protect your changes.
This concludes our guide: How to add a button.
Other guides you might be interested in:
Adding Focus to your Bookmark Website
How do I move or re-size modules that are already on my page?
How do I remove a module from my page?
Ask An Expert: Get sound advice from our community, ask questions and get answers quickly and easily.
Bookmark Pro: Members get premium support from our dedicated success team - Chat with us one-on-one by clicking the chat icon inside Bookmark.