Images are an indispensable part of every website. They visualize content, break up text, and evoke emotions. In this article, you'll learn how to effectively use the Image module in the ChurchDesk editor to embed individual images on your website. We'll show you how to add images, insert links and alt-texts, and customize the module's design to ensure an appealing and professional image presentation.

On this page:

• Customizing content
• Customizing local design
• More settings

You can add an Image module by selecting "Image" under the Visuals category when you choose Add module in the editing mask:

To edit your image module, double-click the image module or hover your mouse over the module -> click "Module" -> and then the pencil icon to edit. Expand the options under Content, Local Design, or Settings in the editing mask and make the following adjustments.

Content

The Content section is where you add new images, edit them directly in the editor, and link them to make your website more interactive. Another important step is adding alt-texts to improve accessibility and search engine optimization.

Add image to module

There are several ways to add an image to the module:

1. Upload a new image: Click "Add or drop file" to select an image from your computer, or drag and drop your image into the outlined area.
2. Use an existing image from the file library: Click "Select from file library" and choose one of your existing images from the file library.
3. Use an image from global data: Activate "Use global data source" and select either your header image or your logo, which you previously uploaded to Global Data.
4. Use an image from the Group module: You can access the public files from your ChurchDesk group module at any time (but not the other way around). To do this, first go to the file manager and click on "Open External File Library." Select the content from the subfolders and then click "Add to the Site Library." The content is then loaded into the website's file manager, and you can subsequently access it from the image modules by selecting "Select from File Library."

Edit image

• Edit: Click "Edit" next to your image to crop or rotate it directly in the Designer.
• Replace/Remove: If you want to replace the image or remove it entirely, use the "Replace" or "Remove" buttons.

Add link

When you use an image on your website, you have the option to add a link and make the image clickable for your visitors. To add a link to your image, turn on Enable link on image, and a series of link options will become visible.

From the dropdown menu, select the type of link you want on your image. You have the following four link options:

• External URL: Add a URL to an external page. This link type activates the Open link in new window option by default to ensure the visitor doesn't leave your website entirely when they click on your image.
• Internal Page: Link to a page on your website.
• Email: Enter an email address in the field. When the visitor clicks on the image, their default email program will open.
• File: Add a file by clicking "Add or drop file" to open the files on your computer, or drop your file in the outlined area. When the visitor clicks on the image, they will download the file.

Activate the Open link in new tab option to open your image in a new browser tab when it is clicked. Activate the Set "nofollow" property if you do not want search engines to follow the hyperlink. When this option is activated, your link will not influence the ranking of the destination in search engines.

Design

In the Local Design section, you can change the image size and alignment, or adjust the background, border, and spacing of your image module.

• Image size: The size of the image specifies how much space it takes up in the column where it is placed. When the image size is set to 100%, it fills the entire column width. Use the slider or enter the desired percentage in the field to adjust the size.
• Image alignment: With image alignment, you can set the position of your image in the column. You have the option to align your image left, right, or center. Use the Float function to move your image left or right and have other content wrap around it.
• Image Float: Use this function to place text around your image. You can move the image to the left or right. To do this, first insert the image module, then the text module in the same column below, and then activate the floating for the image module. If you add the Float function to your image, it is recommended to add a margin to the right or left, depending on the direction the image floats. Also add a margin at the bottom to push the wrapped element away from the floating image.
• Image Hover: Here you specify how the hover effect should look visually when it is activated (see settings).
• Background, Shadow, Border, Spacing, and Animation: Apply various effects to make the module even more appealing and to place it.

Settings

In the Settings section, you can activate hover effects for your image. A hover effect is an interactive feature that is triggered on an image when a visitor hovers their mouse pointer over it. In ChurchDesk, this effect consists of an additional visual element or a caption text appearing on the image. The settings for the text are configured in the design section as described above.

The hover effect allows you to subtly display additional information like the image caption or a call to action (like a magnification icon). This is particularly useful for keeping the page visually tidy and not overwhelming the viewer. The additional information only appears when a visitor actively shows interest in the image.

Keywords: Image module, Insert images, Edit image, Alt-text, Search engine optimization, Image link, Designer, Website design, Image list, Image size, Image alignment, Image float, Hover effects, Website layout, File library, Global data.

Updated on: 11/08/2025