Add Global Areas to the Footer

Now let’s make our footer properly editable through Concrete CMS. Copy out all the HTML found in the various column DIVs with the single_footer_part class, and save it elsewhere. Replace that dummy content with proper Concrete global areas:

$area = new GlobalArea(‘My Global Area’);  

When we do it to our template, we get something like this:

Now, when we reload our page, we’ll see that the areas are properly editable through the CMS.

Go back and add a combination of Content and HTML blocks into the areas. If the markup required is fairly highly stylized, you might consider using HTML blocks, since raw HTML can sometimes be difficult to work with in a rich text editor. Here’s an example of how it might end up looking:

In this example I’ve added four content blocks within each of these global areas. Additionally, in the first and last columns, I’ve added HTML blocks for the social icons and the newsletter signup, respectively.

That’s it! Since I’ve added this content in global areas, it’ll automatically render in the footer on every page in the site. Here’s an example of it on our Projects Page