We've added a bunch of creative features that you can use to make your background photos stand out even more, without needing any 3rd party resources.   

Section separating images

Like the name implies, section separating images are simply photos that you can place in-between sections to help split up your content a little. In reality, these are just background images without any content added on top of them. Check out our example of this by looking at the section separating Why We Exist from Our Doctrine on the Solstice demo site.

Step 1 - Add an all-text section to your site and drag it to where you want it on the page

Step 2 - Remove Header and Body Text in the general settings of that section by un-checking the corresponding boxes  

Step 3 - Add a large photo as a background image to the section you just added

Keep in mind:  

We will scale the photo to always fit the width of the website. This might mean some portions at the top and bottom of the photo are cut off, so be sure to use the photo as an accent in this way, rather than super meaningful content.

Step 4 - Once you’ve added your photo, be sure to preview your site to make sure it looks great

Parallax 

One of our most popular features, parallax adds a unique motion to your page when you scroll. Check out our example of this by visiting our Bloom demo site and looking at the sections separating the quick links and the section titled Our Mission: To Love God with Everything 

Step 1 - Add an all-text section to your site and drag it to where you want it on the page

Step 2 - Remove Header and Body Text in the general settings of that section by un-checking the corresponding boxes

Step 3 - Add a big photo as a background image to the section you just added

Keep in mind:

We’ll scale the photo to always fit the width of the website, and the parallax effect always covers a portion of the photo. This means at some point, the top and bottom of the photo are going to be cut off, so be sure to have the most important section of the photo right in the middle.

Step 4 - Choose the Fixed Parallax setting under Background Photo Options then click Save. If you're unable to click the dropdown, you may be using a touchscreen laptop. You will need to turn off the touchscreen functionality in order to be able to click the dropdown menu.

Step 5 - Once you’ve added your photo, be sure to preview your site to make sure it looks great. Check out our Bloom demo site for a better look at how this innovative feature can add more motion and animation to your page

Blending Modes

This feature allows you to add effects to any section's background images, without the help of Photoshop or any 3rd party resource. 

Step 1 - Add a background image to your desired section

Step 2 - Click the dropdown tab marked Advanced Background Options. If you're unable to click the dropdown, you may be using a touchscreen laptop. You will need to turn off the touchscreen functionality in order to be able to click the dropdown menu.

Step 3 - You can use any of the options provided to change your photo's appearance and how it fits in with the rest of your site. For more info on how design your background images, check out our help article

Step 4 - Once you’ve added your photo, be sure to preview your site to make sure it looks great

Adding Animated Backgrounds 

Check out our example of this by visiting our Zion demo site and looking at the section titled City Life Project.

In this section example looks like there’s a video in the background, it’s actually an animated .GIF file. By using animated GIF’s as backgrounds in sections, you can create a dynamic effect and add motion to your page. But be careful, the wrong GIF can look really chaotic and distract from your message, so make sure you choose a GIF that looks interesting without too much going on in the animation.  

Step 1 - Add a section to your website - an all-text section tends to look the best with animation, but you can drop one in the background of any section you’d like - and drag it to where you want it on the page.

Step 2 - Add an animated GIF as a background image to a section (same process as adding a photo)

Keep in mind:

We’ll scale the GIF to always fit the width of the website. This might mean some portions at the top and bottom of the image are cut off, so be sure to use the GIF as an accent rather than super meaningful content.

Step 3 - Once you’ve added your GIF, be sure to preview your site to make sure it looks great