Archived topic
Creating horizontal bar with icons allign to right.
9 replies · Started by Ewout on August 6, 2019
Hiya,
id like to put in a bar with icons just above the bottombar.
i have it made in Photoshop, so if i can send an image of it, then you know exactly what i mean.
Kind regards,
Ewout
Hi there,
How about adding them via the Footer widgets ? Layout controls here:
https://docs.generatepress.com/article/option_generate_blog_settings/
Let us know - if you want to share an image then just provide us a link to a hosted image file or one of the many image sharing sites.
Hi David,
thanks for the quick response.
Well I want to make it like this:
http://tyker.com/concept/wp-content/uploads/2019/08/Knipsel.png
with all the withe lines. above the bottombar in the footer indeed.
I'm building with the divi builder
Kind reg
Can you create that with Divi ? And does Divi allow you to save it as template and insert that template using a shortcode?
If so then you can use a Hook Element:
https://docs.generatepress.com/article/footer-layout-overview/
Add the shortcode to the content.
Select the after_footer_widgets hook
Check execute shortcodes
And set display rules to the entire site.
No that's the problem, the image I sent you, that's what I can't make in Divi.
I don't know what you mean by: and does Divi allow you to save it as template and insert that template using a short code?
But you say that with the short code I can create it?
Can you please be more specific on the procedure with the after_footer_widgets?
Thanks so far.
Kind regards,
Ewout
Might be simpler to just use the Lightweight Social Icons plugin to add those icons in a footer widget:
https://en-gb.wordpress.org/plugins/lightweight-social-icons/
Set you Customizer > Layout > Footer to 1 widget and add the social icons widget.
Once you have it there, if you can share a link to the site then i can provide some CSS to style it the way you want.
Hiya David,
thanks for the information.
I did as you suggested.
The styling need to be like: http://tyker.com/concept/wp-content/uploads/2019/08/Knipsel.png
The website is: http://tyker.com/concept/
I only added 1 footer widget on the dutch home page, all other pages still got 4 footer widgets, but I will change that.
Thanks for your help so far!
Kind regards,
Ewout
Try this CSS:
#footer-widgets {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
#lsi_widget-2 .lsi-social-icons li {
border-right: 1px solid #fff;
margin: 0 !important;
}
#lsi_widget-2 .lsi-social-icons li:first-child {
border-left: 1px solid #fff;
}
You will need to add some top Footer Padding to space out the footer bar.
Thanks david,
That helped a lot!
I added some padding to the top and the left, so that it is inline with the footer.
Thank you very much for the help!
For the moment I have no further questions.
Have a nice day.
Kind regards,
Ewout
You're welcome