Try ShortPoint nowYou are now in the last part of our footer tutorial. Here, you will learn more about the different layout options available for your footer including General Layout, Background, Before & After, and Paddings & Margins.
TABLE OF CONTENTS
- Before We Begin
- Customizing Options
Before We Begin
Make sure you have already created a custom footer using ShortPoint Generator before proceeding with this guide. If you haven't done that yet, follow Parts 1 and 2 of our tutorial:
Customizing Options
On your Theme Builder, there are four customizing options under Footer. They are General Layout, Background, Before & After, and Paddings & Margins.
To see these options, open Theme Builder and select Footer.
You will be redirected to the four customizing options, all of which you can use to personalize your footer according to your design needs. Proceed to the next section of this guide to learn how to make the most out of each option.
A. General Layout
General Layout is where you select a footer to add to your site. In addition to this, you also have four other options available: Fixed Footer, Full-Width Footer, Full-Width Footer Content, and Enable Footer Shadow.
1. Fixed Footer
As the name suggests, Fixed Footer fixes your footer at the bottom of your screen, allowing it to stay visible as you scroll through the page.
This is how your site will look once you enable the Fixed Footer feature.
2. Full-Width Footer
Enabling the Full-Width Footer feature allows you to expand the footer to fit the whole width of the screen. However, to see notable changes on your site when you apply this feature, the site layout must either be Boxed or Frame.
To change your site layout, select General Settings.
Then, click General Layout.
From the Layout drop-down, choose either Boxed or Frame.
Once you have changed your site layout to either Boxed or Frame, you can now enable the Full-width Footer feature.
This is how your site will look based on your site's layout:
- Boxed
- Frame
NOTE: Make sure to toggle on Fixed Footer in the General Layout as well. Otherwise, you will not be able to see Full-Width Footer in the list of options available.
3. Full-Width Footer Content
Enabling the Full-Width Footer Content will expand the footer's content to fit the whole screen.
4. Enable Footer Shadow
This feature allows you to add a shadow behind your footer. Once enabled, you can even control the depth of the shadow by dragging your mouse across the bar line.
B. Background
This allows you to add a background behind your footer. There are two options available: Footer Background Image and Footer Color Overlay.
1. Footer Background Image
As the name implies, this option allows you to add an image behind your footer. You also have the ability to modify the image by enabling advanced settings for Footer Background Image.
This is what it will look like.
2. Footer Color Overlay
This allows you to add a background color behind your footer. You can choose from the list of colors available on the drop-down list.
C. Before & After
Before & After allows you to add dividers and spaces before and after your footer. There are four options available: Enable Divider Before Footer, Enable Divider After Footer, Add Space Before Footer, and Add Space After Footer.
1. Enable Divider Before Footer
This adds a divider at the top of your footer. You can even customize the color and size of the divider.
2. Enable Divider After Footer
This adds a divider at the bottom of your footer. You can also customize the color and size of the divider.
3. Add Space Before Footer
Enabling this will add space at the top of your footer. You can even customize the amount of space you add.
4. Add Space After Footer
Enabling this will add space at the bottom of your footer. You will also be able to adjust the amount of space you add.
D. Paddings & Margins
Paddings & Margins allow you to add space around your footer. There are eight options available: Footer Padding Top, Footer Padding Bottom, Footer Padding Left, Footer Padding Right, Footer Margin Top, Footer Margin Bottom, Footer Margin Left, and Footer Margin Right.
1. Footer Padding Top
This allows you to add padding at the top of your footer.
2. Footer Padding Bottom
This allows you to add padding at the bottom of your footer.
3. Footer Padding Left
This allows you to add padding at the left side of your footer.
4. Footer Padding Right
This allows you to add padding at the right side of your footer.
DESIGN TIP: It is best to add a background (color or image) when you want to have padding around your footer. This will add a pop of color to your footer design.
5. Footer Margin Top
This allows you to add white space at the top of your footer.
6. Footer Margin Bottom
This allows you to add white space at the bottom of your footer.
7. Footer Margin Left
This allows you to add white space on the left side of your footer.
8. Footer Margin Right
This allows you to add white space on the right side of your footer.
That's it! You now know the customizing features of your footer. Make sure to make the most out of them and enjoy designing beautiful intranet sites.
Related articles
- Part 1: Create the Footer from ShortPoint Generator Page
- Part 2: Add the Footer to SharePoint
- ShortPoint Generator Basic Tutorial. Part 1: Creating Generated Content
- ShortPoint Generator Basic Tutorial. Part 2: Using Generated Content on Pages
