Articles on: Website

Button module: Add buttons on your website

Buttons are crucial for visitors to navigate your website and interact with content. This article shows you how to get the most out of the Button modules in the ChurchDesk Editor. Learn how to create buttons, link them to links and downloads, and customize their design to your needs. We'll also show you the different button types for more visual variety.


On this page:

  • Adding a Button
  • Customizing Content
  • Customizing Design


Adding a Button

You can add a Button module by adding a new module and selecting "Button" under the Page Navigation category.

To edit your button module after it has been added, double-click the module or click the edit icon. You can then expand and edit the options under Content, Local Design, or Settings.




Customizing Content


You can customize the content of a button by hovering your mouse over the added button -> clicking "Module" -> clicking the pencil icon -> an settings window will open -> click on "Content" -> open the respective subcategory:




General
  • Button Text: Enter the text to be displayed on the button here (e.g., "Donate Now", "Learn More").
  • Title Tag: Using a title tag provides more context about your website and can improve visibility in search engines. In addition, most web browsers display the title tag when the mouse hovers over the button, so visitors can see where the link leads before they click on it.


  • External URL: Link to any external website, e.g., your neighboring congregation's.
  • Internal Page: Link to another subpage of your ChurchDesk website.
  • Email: When linked to an email, the visitor's default email application will open when they click the button, and a new email message will be created with the email you specified in the "Email" field as the recipient.
  • File: Add a file directly from your local PC (via the gray button) or from the file library (blue button). When linked to a file for download, the visitor's browser will trigger the download when they click the button. The following file formats are supported: .png, .gif, .jpeg, .jpg, .xls, .xlsx, .doc, .docx, .pdf.
  • Phone: If you want to use the phone number you entered in Global Data, enter the following: tel:[phone]. Remember that you can hide buttons in certain viewports if you don't want them to be displayed (in this case, a "Click to call" button might not make sense on a desktop view, while it is more relevant on a mobile view).
Note: You can set up a button that calls a phone number when a visitor clicks on it. The button triggers the device's default calling application and dials the number. To create a "Click to call" button, select External URL and enter "tel:" followed by a phone number.


Icon
  • Icon Alignment: Choose whether the icon should be placed to the left or right of the label.
  • Icon: Select a suitable icon from the library to make your button even more expressive (e.g., an envelope for an email or a download arrow for a file).



Customizing Design


You can customize the appearance of your buttons to match the design of your website. You can either use the global design settings to create a uniform style, but also make local adjustments in some cases.


  1. You can customize the global design via the button on the left side Design -> Modules -> Page Navigation -> Button / Button 1 / Button 2.
  2. You can customize the local design by hovering your mouse over the added button -> clicking "Module" -> clicking the pencil icon -> an settings window will open.


The following settings can be globally configured but also locally customized:
  • Colors: Set the colors for the background, text, border, and icon.
  • Enable Shadow: Add a shadow to make the button stand out visually.
  • Spacing: Adjust the outer spacing to separate the button from other elements.


The following settings can only be customized locally:
  • Button Alignment: Align the button within a column to the right, left, or center.
  • Button Width: Instead of making the button's size dependent on its content, you can define a fixed width for it. The percentage refers to the width of the column in which the button is inserted; this means that a button with a width of 25% takes up exactly one-quarter of the column.
  • Button Float: Use this feature to place text around your button. You can move the button to the left or right. To do this, first insert the button, then the text module in the same column below, and then activate the floating for the button. If you add float to your button, it's recommended to set a margin to the right or left, depending on the direction of the float. Add a margin at the bottom to push the wrapped element away from the floating element. You can also use this function if you want to place buttons next to each other.

  • Fixed Position: If you want a button to be fixed on the visitor's screen and remain there while they scroll up or down a page, you can activate the Fixed Position option under Design > Button > General.
  • Enable and Customize Animations: Add animations to make the button even more dynamic.


Three different button types:

To create more visual variety for buttons, the editor allows for three alternative button styles. The three button modules are completely identical in functionality and differ only in their respective design.



Example of use: Your standard button (Button 1) is dark to be clearly visible on light backgrounds. But you also need a white button for dark backgrounds and a button with no color or border for transparent areas. You can create these as Button 2 and Button 3 and use them as needed. The advantage is: you don't have to make local adjustments and thus save time. The design remains consistent and flexible.


Keywords: Buttons, Website navigation, Interaction, Button module, Customize design, Phone number, Email link, File download, Responsive design, User experience, Page navigation, ChurchDesk

Updated on: 07/08/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!