The Greenhouse was built from the ground up to make it easy for anyone to create a website, no matter what kind of design abilities you might (or might not) have. But we thought we could give you some tips & best practices to help you maximize your design potential as you create your website.

Using Background Images

We originally created them so people could simply add background photos to sections but we quickly realized that, with a couple of little additional features, background images could be a great design element on your sites. 

Here are a couple of ways to use this feature a little more creatively instead of simply placing background images behind the text on your sections. A quick note — in order to access your background images, you’ll need to be in Advanced Mode in the Greenhouse.

Go to the Settings gear in a given section.

Once you’re in settings, select the background tab, then add your photo.

Section separating images

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

Using Transparency in Background Images

Check out our example of this by visiting the Anthem demo site and looking at the section titled Our Mission: Living in Gospel-centered Community.

This one is a little tricky because you need to be somewhat fluent in a photo editor (such as Photoshop, Sketch, etc.) but if you save the image right, you can change the background color in the Greenhouse to (almost) any color you like and the background photo will look great.

Step 1 - Enter your photo editor (Photoshop/Sketch) and do the following:

    - Make sure your photo is grayscale (black and white)
    - Pull back the opacity on the image to around 10-15%
    - Save the file as a .png file

Step 2 - Add a text & photo, list or donation section to your site and drag it to where you want it on the page

Step 3 - Add your newly created .png file to the section as a background photo

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

Also, keep in mind that you can change the background colors and your photo will still look amazing.

Using Animation in the Background of a Section

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.  

Here’s how you can add a GIF as a background image:

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

 

Using Parallax

Parallax section separator images

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

Perfect Gallery Images

Gallery images are defining sections of your website. It’s important when using this feature (especially if you’re relying on it as a design element) to make sure your website’s visitors have the best experience when viewing your galleries. 

Here are a couple of tips to remember when using a Gallery section:

Use the Pixel Dimensions

While in Advanced Mode, check out the pixel dimensions in the upper left of the photo space the first time you enter your Gallery section in the Greenhouse. You’ll see something like this picture:

Be sure to size your Gallery images to these dimensions in whatever 3rd party photo editor you use (Photoshop/Sketch, etc). This will guarantee that the complete image will be seen by your visitors checking your site out on desktop browsers. You can find the pixel dimensions for every photo area on each site design by checking out our articles for each design.  

Make sure your mobile experience is awesome

In Advanced Mode, we give you the ability to crop your image for mobile devices. This feature is necessary to guarantee that anyone visiting your website from a mobile browser (using a phone or tablet) have an optimal experience in your Gallery. 

During the second step of adding a Gallery image in Advanced Mode you’re given the choice of either moving the image around to fit within the mobile dimensions, or adding a new image to fit the space.

If you can’t make the original, full-sized image look good in the mobile space, for whatever reason, we highly recommend that you do the extra work to create a special, mobile version of that gallery image. Remember, over 50% of your people will be viewing your site from a mobile device, so it’s worth the extra work!

Customize Your Gallery

You can change a ton of settings in your gallery while in Advanced Mode. Everything from the speed of your slideshow and transition effect, to whether or not you show your slideshow arrows. Make sure you take the time to customize it so it looks the way you want it to. 

Embedding in Text Sections

You can embed almost anything you want into any text section on your website. This means that you can easily drop in a map, video or a form anywhere you’d like as long as you have the embed code.

Every third-party source you attempt to embed from will have the embed code for their services in a different location on their site, so you might have to do a little digging to find the content’s code. The embed code should look something like this:

Once you’ve copied the embed code, simply paste it in the text editor wherever you’d like the content to appear.

If you ever need to remove the embedded item, simply click the red X in the upper right corner.

A couple of things to keep in mind as you embed items into your site:

The content lives on another website. This means that if the owner of the site the content lives on chooses to pull it down, change URL’s, or alter the content in anyway, it will reflect on your site. Be sure to check in on your embedded content every once in a while!

Sizing of your content matters 

Typically when you embed an item in your site, the size of the content is already plugged into the embed code. If you’re allowed to customize the size of the content you want to embed (some services, like Vimeo, YouTube and Google, let you do this) go for it — your content will look better in the long run. 

To get more info on embedding content into your Clover website, check out our article on embedding.

Using Icons in List section

Some of our demo websites use icons in the List section to highlight elements of their (fictional) ministries. List and Grid sections are great places to use icons as links to other pages on your site. You can see examples of this here: 

Icons are simple images and symbols that represent words and thoughts. They’re used in graphic and web design a ton to give people images connected to (and sometimes instead of) words.

Although lot of people would love to have icons on their website, most people don’t have the design background needed to create them. If you’re one of these people, here are a couple of options:

Use The Noun Project. There’s a great product out there that works great for people who have access to Illustrator, Sketch, or other vector editors called The Noun Project. For designers, it works great as a starting point for coming up with ideas or creating your own unique icon. For non-designers, they can work great as is! We definitely recommend you check it out.

Using Social Media Icons

We’ve added a hidden gem that allows you to add social media icons in the text editor. Check out this article to see exactly how to use them.

In some of our demos, you’ll notice the social media icons are not the same color as the rest of the links, but are actually the color that particular service typically uses. Check out the footer of anthem.cloversites.com for a good example of this:

If you’d rather have your social media icons appear in their ‘natural’ color (ex: Twitter is the light blue color), here’s how you can make that happen:

Step 1 - Highlight the icon in the text editor

Step 2 - Select the color dropdown (if you don’t see it the color dropdown right away, select “More” on your text editor panel and you should see it)

Step 3 - Paste in (or select) the color you want for your social media icon

Here are the HEX codes for some of the more common services:

Twitter: #55ACEE
Facebook: #3A5795
YouTube: #E12A27
Vimeo: #17B3E8
Instagram: #085784
Google Plus: #DB4C3E
LinkedIn: #1078B3

Getting the most out of your footer

Your footer is the section at the bottom of every single page of your website. This is a great place to put important content that you want your viewers to see, no matter what page they're on. Here are some different ways you can get the most out of this unique section of your website:

Copyright/Legal Info:

This is not a law or necessity by any means, but some people like to include copyright, trademark and/or other legal stuff in the footer of their site. 

Social Media Links:

If your organization is active on social media, the footer is a great place to keep this info. Putting social media icons and links in your footer guarantees that people will see these links no matter what page they’re on.

Additional Navigation:

Some people like having navigation on the top and at the bottom of their websites. You can include links to different pages on your site in your footer.

Directions/Contact info:

Not only can you include your organization’s vital contact information in your footer, but you can also have a link with directions (or even embed a map).