Container Widget

In this video we'll discuss all things containers! Containers are the blocks where you columns and content live. We'll talk about how to add them, edit them, and move content around inside of them.

Step-by-Step Guide

Adding a Container

Step 1: Navigate to the Widgets Section: In your Churchly dashboard, locate the widgets toolbar to find the "Containers" widget

Step 2: Drag and Drop: Select the Containers widget and drag it to your page. Ensure to place it above or below an existing container or block, as it cannot be nested within another container.

Styling the Container

Step 1: Open Styling Options: Hover over the newly added container and click on the styling icon (represented by a paintbrush) to access the styling menu.

Step 2: Background Customization: Image Background, Background Color & Background Video

• Image Background: To add an image background, select the option to import an image. For instance, use Unsplash to find and download free images. You can change the alignment of the image as well.
• Background Color: Choose a background color if you prefer a simple, colored background instead of an image.
• Background Video: Insert a background video by pasting a URL from YouTube. Ensure to set the volume to 0 for user comfort, and consider setting it to loop for continuous play. You may also add an overlay color to enhance visibility.

Step 3: Anchor Point Creation 

• This feature allows you to create a clickable link (e.g., `#video`) that directs users to the specific container when clicked. This is particularly useful for single-page website designs.

Step 4: Image Optimization:

• Churchly automatically optimizes uploaded images for mobile and desktop views to ensure fast page loading times. For large images, Churchly compresses them without compromising the site's loading speed. If necessary, full-resolution images can be managed through the File Manager in Settings.

Adding Content to Containers

Step 1: Column Adjustment: 

• Containers start with a single column by default. You can adjust the number of columns according to your content needs.

Step 2: Inserting Content: 

• Click inside the columns to add various content types such as text, images, or buttons. You can utilize Churchly's widgets to further customize your page.

Finalizing the Container

Step 1: Text Styling: 

• Adjust the color and size of the text within your container for better visibility against the background. Ensure the text color contrasts well with the container's background for readability.

Step 2: Parallax Effect: 

• Consider adding a parallax effect to your background image for a dynamic scrolling experience. Note that this effect may not perform well on all mobile devices.

Step 3: Save and Preview: 

• Once you're satisfied with the design and content of your container, save the changes and preview your page to ensure everything appears as expected.

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.