[Resolved] How to add area above footer?

[Brian]

I want to add an area just above the footer that will be common to all pages. It will be full-width and maybe twice the height of the footer. How is this done? Is it a modification to the footer or is it a section in the content?

I plan to have a solid background color with text in this area.

I have an element for layout applied to all pages. I’m guessing changes would be done in the layout element. I tried changing footer widgets to 1 but didn’t like the effect.

BTW, I am using Beaver Builder as my page builder.

Thanks,
Brian

[Leo]

Hi there,

Hooks Element should be what you are looking for:
https://docs.generatepress.com/article/hooks-element-overview/

You can see where they are here:
https://docs.generatepress.com/article/hooks-visual-guide/

Let me know if this helps 🙂

[Brian]

Thanks, I’ll check this out. Appreciate the fast response!

Brian

[Brian]

I was able to add some simple text using a hook element. If I want formatted text with a background do I add either html or CSS code to the hook element code section?

Just now I noticed the section above the footer on this forum web page. Is this done with a hook and are all the links in code in the hook definition?

Thanks,

[Leo]

Yup you can add any HTML inside the hooks.

The section above footer/copyright section are the footer widgets:
https://docs.generatepress.com/article/footer-widgets/

If you can explain or show what you are trying to achieve, I can point you to the right direction 🙂

[Brian]

Hi Leo,

I tried this code in my hook element (before the footer) and the color looked light blue and the code displayed on my website. Does the before_footer ID need to be in the CSS code?

background-color: DimGray;

I’m not sure yet of the exact content I’m going to finally use but my intent is to have some text and a call to action.

Thanks

[Leo]

Try something like this in the hooks content:

<div class="my-before-footer-content>
   my content
</div>

Then you can target with CSS:

.my-before-footer-content {
    background-color: #000;
}

You can learn more about HTML like this here:
https://www.w3schools.com/html/html_classes.asp

They aren’t theme specific 🙂

[Brian]

Sorry to bother you again on this. I added this to my before_footer hook:

<h2> Hello </h2>

Then I added this to Simple CSS and saved it:
.my-before-footer-content {
background-color: lightblue;
}

I don’t see anything change on my website in the before-footer. It’s all white as is the the page body.
When I use ctrl-U and examine the site code I see the above hook and CSS code. (TremaineConsultingGroup dot com)

What am I missing? Thanks for your patience 🙂

[Leo]

Your h2 is not wrapped with the <div> with the right class name like I have it above.

And also I’m not sure the “lightblue” is a valid command. You might want to use hex color code like I did.

You can try something like this:

<div class="my-before-footer-content>
   <h2>Title</h2>
</div>

With this CSS:

.my-before-footer-content {
    background-color: #000;
}
.my-before-footer-content h2 {
    color: #fff;
}

I would recommend the lessons here if you want some introduction to HTML and CSS:
https://www.codecademy.com/catalog/language/html-css

Let me know if you need more info 🙂

[Brian]

Hi Leo,

I have it working now. In your example above for the hook code you dropped the trailing ” and I copied it verbatim. This was why it wasn’t displaying for me. I’m halfway through the html course and part way into the CSS course. Thanks for suggesting those. It’s been a long while since I used html code and I’ve never used CSS code.

Thank you for your help. I haven’t decided on the final content but I have a full-width DimGray area above the footer with a pad of 1px on all sides and it applies to all pages

[Leo]

Sounds good.

Let me know if you need help with the final content once you’ve decided 🙂

[Author]

Posts