Church Websites (Sidekick): Parallax Website Design: How to Edit Backgrounds in Single-Page Scrolling Church Websites

Depending on where you are editing your background one of these three quick tutorials will help you discover how you can do it quick and easy.

 

  • Changing a Background in a Parallax Template

    *This video overview may include some out-of-date images. We appreciate your patience as we work to get these videos updated. 

    We are working on a parallax template. Let's change the background of one of the pages. Remember, these changes will not take place until you save them, and there is no need to click apply changes for them to take place. Hover over a page. Click the background button on the right.
    Now we see a pop-up. We have four choices. We can choose a stock image. To do that, we just click on the stock background library. From here, we can pick from what is already uploaded, or search for one by entering a keyword, like mountain. And all we need to do is click one and our background will change.
    I don't like this one, so I will click remove background. If I change my mind and want to use that background, I can just click on recent page backgrounds, and here it is. The adjustments dropdown will allow me, in certain circumstances, with specific settings to change the focus of the image.
    Clicking on the texture button will allow me to make the background a solid color and texture. Just click on textures. Here we can see that we have various textures that we can add, or if we want, we can just pick a solid color for the background.
    We can change the color by clicking the mouse on the slider and moving it up and down. We can change the hue by clicking in the color box and dragging my mouse around in it. The second slider works like the color slider and changes the transparency.
    And if you have a color number, you can enter it in here. We can upload an image by clicking uploads. Once you click on uploads, you can click on upload a background or image.
    This will show all of the recent images used. You can either choose one of these or click on upload. From here, you can click on select files, or if you already have one uploaded, click on media library.
    Then you can select the image and click on add custom background. The overlay section works like the color tool in the texture section. The only difference is that it begins with a transparency bar set to fully transparent.
    Once we have our background set up the way we want, I'll just click save and we are all done. That's all for now.

  • Full Page Banners/Scrolling Banners

    *This video overview may include some out-of-date images. We appreciate your patience as we work to get these videos updated. 




    Let's check out how to make a full page banner. First off, let’s clear things up. What these really are, are pages. Or in this case, scrolling pages. So like all pages, they will get cropped and resized in mobile view.
    So it is vital that you do not upload images for your full page banner that have text or an image of a person on them, as it may cut them off. Not only in mobile view, but in different views as well. For instance, check out this image we made with this guy playing the guitar and the cool verse on it.
    It looks great. But now, look what happens when we have it inserted as a banner. It looks all messed up.
    And when we view it in mobile view, it still doesn't look right. So instead, do something like this. Click the design button.
    Click add banner. Now here you can either upload or select an image. We’re gonna select an image.
    Let’s make it darker, so we are going to add an overlay. Next, click save. Now we are going to go ahead and click the pencil edit button on the top right.
    We automatically have a single layout row, so we can just paste our text. Change it to whatever font you would like. Change the size, the color, and alignment.
    Then we just click save. Now look, you can see everything and nothing is cut off. Check it out in mobile view.

  • How to Change an Individual Page Background

    *This video overview may include some out-of-date images. We appreciate your patience as we work to get these videos updated. 


    Let's give a subpage its own unique background. We are already on the subpage, so click on the background button on the upper right hand side.
    We now have different options. We can choose from stock photos, textures, adding an overlay, or we can upload our own unique background. Let's do that one.

    Click on upload, then on select files. Select the image you would like to upload. Click open. Click add custom background. Click save. Now we are all done.

Updated

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request