[Resolved] Social media widget – Icon design

Home Forums Support [Resolved] Social media widget – Icon design

Home Forums Support Social media widget – Icon design

  • This topic has 15 replies, 3 voices, and was last updated 4 months ago by Ying.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #2182899
    Sílvia

    Hello!
    I want a widget with some social media icons in the footer of a Website and I have some questions about it:
    1. Is there a way to put there a different and colourful design that is not the plain one provided by the theme?
    2. I’d like them to be open in a new window. How can I do it?
    3. I just tried to put the default symbols of two social media platforms in the widget section’s footer and something was going wrong with the alignment as the second icon was seen a little bit below the 1st one.

    Can someone help me with this, please?

    Thanks
    Silvia

    #2182904
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to where I can see this ?

    #2183201
    Sílvia

    Of course!

    https://www.mariajosemorata.com/

    They are the ones in the footer section.
    1. I’d like the IG icon to be in gradient colours (for example)
    2. I’d like them to be opened in a new window when linked
    3. I’d like them to be aligned.

    Thank you

    #2183231
    David
    Staff
    Customer Support

    Ok .. you will need to remove the Social Icon block.
    And use a GenerateBlocks Buttons block to create them – see this article I linked to the background gradient options:

    https://docs.generateblocks.com/article/buttons-overview/#background-gradient

    You can add whatever icons you need, and you can hide the Text label so only the icon shows:

    https://docs.generateblocks.com/article/buttons-overview/#remove-text

    #2183261
    Sílvia

    On one hand, I’m afraid I don’t know how to use GenerateBlock. I’m just trying to find some demos and tutorials, but everything I find seems to have a different aspect of what I see on my web and I don’t know how to manage it. Sorry I’m a bit lost but, has GenerateBlocks something to do with Guttenberg?

    On the other hand (correct me if I’m wrong) the blocks are to be used in the pages, and what I’d like is the social media icons in the footer so they appear on the entire website. So, should I put those icons on every single page I create? Isn’t it better to put them in the footer section as a widget?

    And, I’d like to have gradients in the icons instead of in the bg. The original Instagram Icon has some different colours applied as gradients, and this is what I’d like to use. Is it understandable? (sometimes I’m not sure if I express myself properly as my mother language is not English).

    #2183375
    David
    Staff
    Customer Support

    has GenerateBlocks something to do with Guttenberg?

    Yes it is our Plugin that adds extra features to the Block Editor:

    https://wordpress.org/plugins/generateblocks/

    I made a quick video to show you how to use it for your Social Icon buttons:

    #2184728
    Sílvia

    Great!

    What I did is to put the icons this way using GenerateBlocks as an element Positions “Whole site” and Hook Name “Before the footer” and it works perfectly.
    Now, there’s just one thing left. What I want is not to have customized buttons, but the “original shape and colours” for the ones that I need which are Instagram and YouTube.
    So I need the Instagram with a gradient that goes from yellow to purple with a little bit of blue in one corner and a little bit of red in another part and, working with the gradients you show in the video I can’t manage it as there is the possibility to work with only two colours.
    What I’m doing with the YouTube icon is putting there a white bg so the icon appears in its original shape, but this way it looks smaller than the Instagram one and, if I make it bigger, it seems not to be properly aligned -> Maybe I can solve this with a CSS class? Or is there a better way to do it?

    Here ther is the link to the site were I did put the element with the social media buttons just in case you need to have a look at it:
    https://www.mariajosemorata.com/

    Thanks in advance,
    Silvia

    #2185167
    David
    Staff
    Customer Support

    Hmmm… ok lets start with the Instagram, its going to require some CSS, select that button and in Advanced > Additional CSS Class(es) add; instagram-bg

    .gb-button-wrapper a.gb-button.instagram-bg {
         background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    }

    You may need to modify the linear-gradient, i just grabbed that from another website 🙂

    See if that works and then we can look at the YT icon.

    #2185217
    Sílvia

    It doesn’t seem to work. All I did is copy the css you wrote and added it (the whole code) selecting the button and then Advanced > Additional CSS.

    #2185241
    David
    Staff
    Customer Support

    Ok

    1. Select the Button, and in Advanced > Additional CSS Class(es) add ONLY: instagram-bg
    2. Go to Dashboard > Customizer > Additional CSS and add:

    .gb-button-wrapper a.gb-button.instagram-bg {
         background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    }
    #2185325
    Sílvia

    IG color in CSS works perfectly!
    2nd thing to do: to align both icons horizontally. What I did is to put a negative top margin to the Youtube icon. But maybe, there’s a better way to do it with CSS.

    #2185334
    Ying
    Staff
    Customer Support

    Hi Silvia,

    The Youtube icon has 10px padding around it, if you remove the top/right/bottom padding, they should be aligned automatically.

    #2185364
    Sílvia

    Super!
    Just one more thing.
    is there a way to put a bg color to the entire element?
    Imagine that I want the icons and the little text to be over a soft pastel color.

    #2185368
    Ying
    Staff
    Customer Support

    You can wrap a Container block outside the Buttonsblock, then you can set bg colors for the containerblock.

    #2185394
    Sílvia

    Solved! Thanks a lot for your help!
    Silvia

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