[Resolved] Creating horizontal bar with icons allign to right.

[Ewout]

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

[David]

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.

[Ewout]

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

[David]

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.

[Ewout]

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

[David]

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.

[Ewout]

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

[David]

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.

[Ewout]

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

[David]

You’re welcome

[Author]

Posts