Before we start:

1. This article assumes that you have already created a Footer and that now you want to customize it, if you haven't done this yet, refer complete the following articles, before proceeding with this one:

  1. Create the Footer from ShortPoint Generator Page
  2. Add the Footer to SharePoint

2. Both Full Width Footer & Full Width Footer Content features cannot be noticeable unless the site Layout = Boxed or Frame ( Theme Builder > General Settings > General Layout > Layout )



Full-Width Footer:

When the site has either a Boxed or a Frame layout, by default the Footer will be trapped inside those layouts,

By enabling the Full-Width Footer option, you are detaching the Footer from the layout, making it expand to fit the whole screen width.



Example 1: ( Boxed Layout )

Suppose that we have the following blue Footer applied to a Boxed layout ( Theme Builder > General Settings > General Layout > Layout )



By enabling the Full-Width Footer, it will look like the following image




Example 2: ( Frame Layout )


The exact same Footer, when applied to a Frame layout, it will look like this



Now once we enable the Full-Width Footer option, you will see how the Footer will no longer be part of the page content or the Frame layout, see the following image.




Full-Width Footer Content:

By default when the Full-Width Footer layout option is enabled, the content inside the footer will still be aligned with the layout,

By enabling the Full-Width Footer Content, we will expand the footer content to fit the whole screen a well.


Example 1: ( Boxed Layout )


Below we apply Full-Width Footer Content to the same Footer element that we have,



As you can see, the content is expanded to fill the whole screen, it still does not look very pretty, and you might want to add some paddings to the Footer to make it look better, so if you added a 20px Footer Padding Left & Footer Padding Right it will look better.



Example 2: ( Frame Layout )


Again we apply the Full-Width Footer Content to the same Footer element,



Same as in the previous example, we will add 20px Footer Padding Left & Footer Padding Right to make it look better.