[Support request] How to add LinkedIn and YouTube clickable icons to footer area; plus 1 more

Home Forums Support How to add LinkedIn and YouTube clickable icons to footer area; plus 1 more

  • This topic has 11 replies, 2 voices, and was last updated 1 year ago by David.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1002924
    Linda

    Hi and happy September – where did summer go?

    Doing last minute edits on our new site and came up with 2 footer issues I can’t figure out.

    1. How to add LinkedIn and YouTube clickable links/icons to the existing footer area.
    2. How to make company name in footer with copyright symbol a clickable link.

    Can you please help me with this? Or direct me to where I can find an answer?

    Thanks for your help,

    Linda

    #1002950
    David
    Staff
    Customer Support

    Hi there,

    1. You can use the Lightweight Social Icons plugin:

    https://en-gb.wordpress.org/plugins/lightweight-social-icons/

    2. The copyright info accepts HTML. So you can wrap your content in an anchor tag:

    <a href="add_your_url_to_site">My copyright info</a>

    #1003229
    Linda

    Hi David,

    Thanks for your usual prompt and helpful reply! 🙂

    One further question re. the icons: how can I (or can I) place them within the current footer, between the copyright info and the privacy/terms of use on the right?

    Linda

    #1003254
    David
    Staff
    Customer Support

    There is the Footer Bar widget area you can add the icon widget to. Once its in place i can provide some CSS to position them if required.

    #1003442
    Linda

    Thanks, David. I had looked there, but will check it out again to see if I can figure out how they go in. Will post back with how I do. Appreciate your offer for CSS if needed.

    By the way, your HTML for the company link in the footer worked perfectly! 🙂

    Linda

    #1003447
    David
    Staff
    Customer Support

    You’re welcome – let us know

    #1004193
    Linda

    Well, David, 3 hours later and I still can’t get the footer area to look the way I’d like.

    Good news is that I found the Footer Bar in Customizer and got the 2 icons in, using a plugin I’d been using: SiteOrigin and its Social Media buttons. If you can check, you’ll see they went onto a line below the first.

    What I was trying to make the footer bar look like:
    Line 1: More (the word as text) followed by LinkedIn and YouTube icons
    Line 2: As it is now: Copyright and page link with Privacy and Terms on right.
    Line 3: Gone since it will be above Line 2.

    Tried to get them above that line. Went to Footer, added it above the footer bar, made its colour match the bar, and adjusted its margins so it was narrow.

    Then I tried to add the 2 icons in that location. I tried adding widget areas to the Footer, but that didn’t work. Somehow, when I went in to the “new” footer area, my copyright info was there. Deleting it also removed it from where it should be. After working on this for awhile, I did get LI to go above, but YouTube went below that. I think that’s because I figured it would go in a second Footer Widget, but it should go in the first widget area with, LI???

    I’m obviously totally confused re. footer, footer widgets, footer bar. Is there something I could study to clear this up or do you have a solution I could implement to make it look as imagined.

    Sorry I couldn’t report success and am bugging you for more help and guidance!

    Linda

    #1004275
    David
    Staff
    Customer Support

    Just so i understand, in your footer you want to display:

    Top line: Social Icons prefixed with the word “More”
    Bottom line: Your copyright info and the links to the side as it displays now.

    If this is all you require in the footer then:

    1. Customizer > Layout > Footer and set the number of footer widgets to 1.
    2. Customizer > Widgets > Footer – remove the current widgets you have and add the Social Icons widget and edit the Title of the Widget to say: More.
    3. Remove the social icons from the Footer Bar widget.

    If this gets them in the right order and my assumptions are correct let me know. And ill help with the alignment.

    #1004665
    Linda

    Your assumptions were 100% correct. I followed your instructions and got everything in order (https://new.mygoforthegreen.com). Great!

    Some Issues

    1. Couldn’t get the footer area back to its original narrow height. I set all the margins (except bottom) to 0, but it remained the same height.
    2. Footer width: should its margins be 20 instead of 0, which I set them at? Noticed the green CTA is narrower than the footer so wondered if I’d “over-widthed” the footer?
    3 How do I prevent “back to the top” icon from overlapping other items?
    4. Titled the social icons “More”, but it doesn’t show up. If this is a hassle, I’ll forget about it for now.

    Thank you very much for your help and so easy to follow instructions! I think we’re almost there!

    Linda

    #1004722
    David
    Staff
    Customer Support

    Ok:

    1. Customizer > Widgets > Footer. You have a Text Widget before the social icons widget. Remove that.
    2. Customizer > Colors > Footer Widgets –> Widget Title set this to white.
    3. Then add this CSS:

    .so-widget-sow-social-media-buttons {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 1em !important;
    }
    .so-widget-sow-social-media-buttons h2.widget-title {
        margin-bottom: 0;
        margin-right: 1em;
    }
    
    @media(min-width: 769px) {
        .so-widget-sow-social-media-buttons {
            justify-content: flex-end;
        }
    }
    #1004873
    Linda

    Magic, David! Your CSS aligned everything perfectly. Fabulous … and thank you!

    I fiddled with the footer/footer widget margins and got them more in line with the page width. Doing so also put the “back to the top” icon further to the right so it doesn’t cover any text. Yay!

    It looks so much better and exactly as I’d hoped it would. Your help is invaluable and your generosity in offering it is very much appreciated!

    We plan to launch this week … at last. I have a couple of questions re. appearance on mobile (will post later) and that’s it. 🙂

    Thank you times 100,

    Linda

    #1004943
    David
    Staff
    Customer Support

    You’re more than welcome – glad to be of help

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.