Button Widget

In this video we'll discuss all things buttons! How to add them, how to edit and style them, and how to create links with them.

Step-by-Step Guide

Step 1: Adding a Button Widget

Start Editing: Begin by entering the editing mode of your page where you want to add the button.
Add a Button: Click on the plus sign to open the widget menu and select the “Button” widget. Drag this widget to the desired location on your page, indicated by blue lines that will appear as you move the widget.

Step 2: Customizing the Button Appearance

Accessing the Styling Options: Click on your newly added button, then click on the editing tool, represented by a little paintbrush.
Changing Button Color: Click on the button color option and choose a color that matches your brand for the button.
To remove the border, adjust the border size to zero. Alternatively, if you want the button to appear bigger without a visible border, set the border color to the same as the button color.
Adjusting Button Shape: Change the border radius if you want your button to have rounded corners. Adjust according to your preference.
Size and Alignment: Opt for a full-width button to span across the column it’s in, or manually adjust the width for a custom size.
Keep your button centered or align it according to your layout needs.

Step 3: Spacing Between Elements

Adding Spacing: Introduce spacing around your button (e.g., 40 pixels) to ensure elements are not crowded. This spacing is crucial for clean design and readability.

Step 4: Button Text and Linking

Editing Button Text:
Click on the text editing option to customize the button’s text, e.g., “Plan Your Visit”.
Link the button to a relevant page within your website, ensuring the link opens in the same or a new tab as preferred.
Customizing Text Appearance:
Adjust the font size and style to match your brand's guidelines.
Modify the text color for contrast against the button color, ensuring it is easily readable.

Step 5: Adding Hover Effects

Selecting a Hover Effect:
Choose from various hover effects like grow, pop, or fade in to engage visitors. Adjust the settings to suit your style.
Preview and Save:
After customizing, preview your button to ensure it behaves as expected when hovered over. If satisfied, save your changes.

Final Touches

Make sure your button’s style aligns with your overall brand, providing a clear

and an attractive call to action.

Briefly test the button’s functionality to ensure it links correctly to the intended page.

Need Further Assistance?

If you have any questions or need further assistance, click on the "Need Some Help" button on your dashboard to reach out to our support team. We're here to help you make the most out of your Churchly website and ensure you can effectively reach your community.