Site Before Night

Website Help Center

How to Add or Change Website Buttons

A clear website button gives visitors a quick next step, whether you want them to contact you, request information, book a service, or visit another page. Your website header can include up to two action buttons.

This tutorial focuses on buttons in your website header. The exact wording and destination are up to you, but each button should make the next action clear to your visitors.

1Open your header settings

From your website editor, select Design, then Header.

This opens the settings used to control the content that appears in your website header. The screenshot below shows where to find the Header option.

H 011 s1 ss1

2Add a header button

In the Header Content panel, scroll until you reach the Buttons area.

Select + Add Button to create a new action button in your header.

Keep the header focused

Your header supports up to two action buttons. Use them for the actions that matter most to your visitors instead of trying to place every possible option in the header.

H 011 s2 ss1

3Set up the button

Enter the information for the button. The button settings include its label, link type, the details needed for that link, and the button color.

Button label

Use short, action-oriented wording so visitors understand what will happen when they select the button.

Link

Choose the appropriate link type and enter the destination information requested by the editor.

Button color

Choose a color that is easy to notice and readable against the rest of your website header.

When the settings are correct, select OK to save the button configuration.
H 011 s3 ss1

Check your button before you finish

A website button works best when the wording, destination, and appearance all support the same action. After making your change, review the button as a visitor would.

  • Make sure the button label clearly describes the action.
  • Confirm that the button goes to the intended destination.
  • Make sure the button text is easy to read against its color.
  • Check that the most important action is easy to recognize in your header.

Changing an existing header button

Return to Design → Header and look in the Buttons area when you need to work with an existing header button. The exact controls displayed for an existing button may vary from the add-button screen shown in this tutorial.

Need more website help?

Browse more editing guides in the Site Before Night Website Help Center. If a button or editor control is not behaving as expected, use our technical help resources.

Visit the Website Help Center Get Website Technical Help