Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 5, 2020 at 5:51 pm #1210036
    sealmaster

    Hello,

    I am using the Enfold Theme and would like to add the URLs / Icons of my Social Media Profiles at two different places on my website (beside header and footer). Unfortunately so far I haven’t found any solution.

    Do you have any code snippet I can use to add these social media bookmarks at random places on my website? I found previous threads with some of the icons, but I need Facebook, Instagram, Twitter, YouTube and LinkedIN.

    Thanks

    May 8, 2020 at 5:35 am #1210907
    Nikko

    Hey sealmaster,

    There’s no shortcode or element for in ALB, however you can use this HTML code and put it inside a Code Block (just replace the # inside href):

    <ul class="noLightbox social_bookmarks icon_count_5">
<li class="social_bookmarks_facebook av-social-link-facebook social_icon_1"><a aria-label="Link to Facebook" href="#" aria-hidden="false" data-av_icon="" data-av_iconfont="entypo-fontello" title="Facebook"><span class="avia_hidden_link_text">Facebook</span></a></li>
<li class="social_bookmarks_instagram av-social-link-instagram social_icon_2"><a aria-label="Link to Instagram" href="#" aria-hidden="false" data-av_icon="" data-av_iconfont="entypo-fontello" title="Instagram"><span class="avia_hidden_link_text">Instagram</span></a></li>
<li class="social_bookmarks_twitter av-social-link-twitter social_icon_3"><a target="_blank" aria-label="Link to Twitter" href="#" aria-hidden="false" data-av_icon="" data-av_iconfont="entypo-fontello" title="Twitter" rel="noopener noreferrer"><span class="avia_hidden_link_text">Twitter</span></a></li>
<li class="social_bookmarks_youtube av-social-link-youtube social_icon_4"><a aria-label="Link to Youtube" href="#" aria-hidden="false" data-av_icon="" data-av_iconfont="entypo-fontello" title="Youtube"><span class="avia_hidden_link_text">Youtube</span></a></li>
<li class="social_bookmarks_linkedin av-social-link-linkedin social_icon_5"><a aria-label="Link to LinkedIn" href="#" aria-hidden="false" data-av_icon="" data-av_iconfont="entypo-fontello" title="LinkedIn"><span class="avia_hidden_link_text">LinkedIn</span></a></li>
</ul>

    Hope it helps.

    Best regards,
    Nikko

    May 8, 2020 at 10:35 am #1210971
    futur22

    Hello Nikko,

    is there a easy and secure way to increase the size of the icons? I want to add very big icons into the footer.

    Thanks.

    May 8, 2020 at 11:04 am #1210975
    Yigit

    Hi,

    You can enable debugging mode by referring to this post – https://kriesi.at/documentation/enfold/intro-to-layout-builder/#debug-mode which would then display shortcodes right below ALB. You can create your icon elements, copy their shortcode from debug field and paste it in HTML widget in Footer widget areas in Appearance > Widget

    Cheers!
    Yigit

    May 11, 2020 at 9:27 pm #1211903
    sealmaster

    Nikko,

    Thank you for the solution, that works! However, is there a way to change the color of the icon from gray to white? The hover effects are great, but I can’t seem to change the gray color.

    Thanks

    May 12, 2020 at 12:39 am #1211921
    Nikko

    Hi sealmaster,

    Please add this CSS code in Quick CSS, located in Enfold > General Styling:

    #top #wrap_all #main .social_bookmarks a {
    color: white;
}

    Hope this helps.

    Best regards,
    Nikko

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