How to add area above footer?

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 :)

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

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,

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 :)

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?

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

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 :)

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

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 :)

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 :)

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

Sounds good.

Let me know if you need help with the final content once you've decided :)