Styling the Footer Wrapper
The Footer Wrapper allows you to change the color or background of the footer on designs where the footer is the full width of the browser window.
If you're ever unsure what a button does, hover over it for a second. Its function will appear as a tooltip.
Background
You have several options for the background of the Footer Wrapper.
You can select a color from the color palette. You can upload a background image. You can also keep the background as is, with no changes, make it transparent, or revert to the default for your style.
If you make it transparent, you may have to change the Footer Text color to give it more contrast against the Footer Wrapper background.
You also have full control, in the Advanced Styles overlay, of the positioning and tiling of any background image that you upload.
Background Color
- Click on the Color Palette button.
-
Click on the palette to select a color. Click on the rainbow slider to choose another color base for the palette.
Or enter a 6 character hex value. Or, if you've already saved colors, choose one from Your Custom Colors. Or select Transparent.
Or click on Reset to Template Default to go back to the original background color. - Click Set Background Color to save this selection. Click Cancel to close the tool and make no change.
Select a background color that suits your style's overall color scheme.
For example, if your style's color scheme is various shades of green, you may want to choose another shade of green. Or perhaps a brown color would work.
But a pink or a bright orange would not likely be a good choice.
Click on the color palette button to open the color picker.
Select your color by clicking on the palette or dragging the small circle around the palette. Click on the rainbow slider to reach the desired palette of colors.
Or you can enter a 6 character hex value for the color you want to use.
You can also choose from a color in Your Custom Colors, which is available after you've selected at least one custom color in any of the color pickers. Hover over any color to see where else in your design that you've used that color.
Another option is to choose Transparent. This will make the background the color of the Page Wrapper.
Click on Set Background Color to save your change. The overlay window will close and your new background color will appear.
Upload Background Image
- Click on the Upload Image button.
- Click on the Browse button (Choose File if you're using Safari). Navigate to the desired background image and select it.
- Click on the Upload New Background Image button.
If you would like the Footer Wrapper to sit on something more than just a background color, you can upload an image.
Most background images are small images that are then "tiled," that is, they're repeated from left to right, or from top to bottom, or both.
So ensure that you have an image that looks good when repeated multiple times across and down the page, especially since the Footer Wrapper can have a different length or height if you change the font size or add padding.
You may have to experiment with different image widths and heights until you find the right image size that looks good when tiled.
Click on the Upload Image button (second from the left in the toolbar). This will open an overlay window...
Click on Browse (Choose File if you're using Safari) to locate the file. Click to select the file.
Click on Upload New Background Image to upload it.
The overlay window will close. You'll see the Footer Wrapper with your new background image.
Remove Background Image
- Click on the Remove Image button.
If you uploaded a background image, but decide you'd like to have no image, you can remove it.
The background image appearing in the Footer Wrapper will disappear, leaving you with the current background color.
Reset
- Click on the Reset button.
You can also reset the background image changes you made. This resets only the background image settings.
It does not affect the text settings you made (above) or any other changes to your style.
Advanced Styles
- Click on the gears button to open the Advanced Styles overlay.
-
Click on Position V and select from Top, Center and Bottom.
And/or click on Position H and select from Left, Center and Right. -
Click on the Background Repeat Down arrow button to activate image tiling vertically.
Click on the Background Repeat Right arrow to activate image tiling horizontally, if required. - Click again on the Down arrow button to deactivate tiling vertically. Click again on the Right arrow to deactivate tiling horizontally.
- Click on the Download Background Image Down button to download the background image, if your design comes with one.
If you uploaded a background image, you have full control over it.
You can change the position of the image (Position V or Position H) or tile it down the button height or across the width of the Footer Wrapper (Down arrow and Right arrow buttons).
For the background, activate the tiling (there will be a border around the activated button) so that the image fills the entire Footer Wrapper.
Click on the Download Background Image Down button to download the background image, if your design comes with one.