Tagged: 

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #820259

    Hello There,

    I’d like to add social media into my web page like “Contact Me” Page.

    I have SM on Header and Footer but I wonder how can add them in the pages?

    Thank you indeed.

    Liam

    #820293

    Hey Liam,

    You can use an icon element to create an icon and add links to it. :)

    Please let us know if you need further help.

    Best regards,
    Sarah

    #820436

    Thank you very much Sarah

    #820857

    Hi Sarah,

    I’ve noticed I just can add 5 layout elements or grid rows. In this case for adding more than 5 social media icons, I need to use another layout underneath. This is not looking nice as well as there will be big gaps.

    Is that any other options instead of using icones. I don’t want to install 3rd party plugin as well.

    I really appreciated your kind help:)

    Thank you

    #820858

    Also, I thought, if I can use the icon list option but in a horizontal line instead of vertical. That can solve the problem too.

    Thank you

    #821644

    Hi Liam,

    Can we have a look at your website. We might have a better idea that way.
    Meanwhile here are some threads to consider:
    https://kriesi.at/support/topic/using-enfold-social-icons/#post-265656
    https://kriesi.at/support/topic/share-icons-on-pages-and-portfolio-items/#post-260646

    Best regards,
    Victoria

    #821696

    Hi Victoria,

    Here is the screenshot of my exciting website that I am updating it with Enfold Theme.

    https://monosnap.com/file/x1TNdHbcIXM57r7ZKrgreBNbXVKaeI#embed

    But I haven’t found any option to add my social media links into my “About Me” page.

    Here is the link for my new website that I am creating …

    Thank you,

    Liam

    #821729

    Hi,
    If you use the “social share element” you can have 9 social buttons on one row.
    Here is a demo:
    postimage
    and here is what the back end options look like:
    postimage
    Hope this helps :)

    Best regards,
    Mike

    #821731

    Hi Mike,

    Thanks for your email and time. I am afraid this option lets the viewers share the page/blog instead of diverting them to my social media pages.

    #821810

    Hi,
    Your right, how about this then… I copied the html of the icon list you made, added a div class and paste into a “code block” and added some css to make them show inline:
    postimage
    Put this in a “Code Block Element”

    <div class="sbox">
    <ul class="avia-icon-list av-iconlist-big">
    <li class="avia_start_animation"><a href="https://www.facebook.com/havazilondon" title="" target="_blank" style="background-color:#719430; color:#ffffff; " class="iconlist_icon  avia-font-entypo-fontello"><span class="iconlist-char " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></a><article class="article-icon-entry av-iconlist-empty" itemscope="itemscope" itemtype="https://schema.org/CreativeWork"><div class="iconlist_content_wrap"><header class="entry-content-header"></header><div class="iconlist_content  " itemprop="text"></div></div><footer class="entry-footer"></footer></article><div class="iconlist-timeline"></div></li>
    <li class="avia_start_animation"><a href="https://twitter.com/Havazilondon" title="" target="_blank" style="background-color:#719430; color:#ffffff; " class="iconlist_icon  avia-font-entypo-fontello"><span class="iconlist-char " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></a><article class="article-icon-entry av-iconlist-empty" itemscope="itemscope" itemtype="https://schema.org/CreativeWork"><div class="iconlist_content_wrap"><header class="entry-content-header"></header><div class="iconlist_content  " itemprop="text"></div></div><footer class="entry-footer"></footer></article><div class="iconlist-timeline"></div></li>
    
    <li class="avia_start_animation"><a href="https://plus.google.com/+Havazi-londonUk" title="" target="_blank" style="background-color:#719430; color:#ffffff; " class="iconlist_icon  avia-font-entypo-fontello"><span class="iconlist-char " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></a><article class="article-icon-entry av-iconlist-empty" itemscope="itemscope" itemtype="https://schema.org/CreativeWork"><div class="iconlist_content_wrap"><header class="entry-content-header"></header><div class="iconlist_content  " itemprop="text"></div></div><footer class="entry-footer"></footer></article><div class="iconlist-timeline"></div></li>
    <li class="avia_start_animation"><a href="https://www.youtube.com/c/Havazi-londonUk" title="" target="_blank" style="background-color:#719430; color:#ffffff; " class="iconlist_icon  avia-font-entypo-fontello"><span class="iconlist-char " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></a><article class="article-icon-entry av-iconlist-empty" itemscope="itemscope" itemtype="https://schema.org/CreativeWork"><div class="iconlist_content_wrap"><header class="entry-content-header"></header><div class="iconlist_content  " itemprop="text"></div></div><footer class="entry-footer"></footer></article><div class="iconlist-timeline"></div></li>
    
    <li class="avia_start_animation"><a href="https://instagram.com/havazilondon/" title="" target="_blank" style="background-color:#719430; color:#ffffff; " class="iconlist_icon  avia-font-entypo-fontello"><span class="iconlist-char " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></a><article class="article-icon-entry av-iconlist-empty" itemscope="itemscope" itemtype="https://schema.org/CreativeWork"><div class="iconlist_content_wrap"><header class="entry-content-header"></header><div class="iconlist_content  " itemprop="text"></div></div><footer class="entry-footer"></footer></article><div class="iconlist-timeline"></div></li>
    <li class="avia_start_animation"><a href="http://havazilondon.tumblr.com/" title="" target="_blank" style="background-color:#719430; color:#ffffff; " class="iconlist_icon  avia-font-entypo-fontello"><span class="iconlist-char " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></a><article class="article-icon-entry av-iconlist-empty" itemscope="itemscope" itemtype="https://schema.org/CreativeWork"><div class="iconlist_content_wrap"><header class="entry-content-header"></header><div class="iconlist_content  " itemprop="text"></div></div><footer class="entry-footer"></footer></article><div class="iconlist-timeline"></div></li>
    
    <li class="avia_start_animation"><a href="https://www.linkedin.com/company/havazi-london" title="" target="_blank" style="background-color:#719430; color:#ffffff; " class="iconlist_icon  avia-font-entypo-fontello"><span class="iconlist-char " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></a><article class="article-icon-entry av-iconlist-empty" itemscope="itemscope" itemtype="https://schema.org/CreativeWork"><div class="iconlist_content_wrap"><header class="entry-content-header"></header><div class="iconlist_content  " itemprop="text"></div></div><footer class="entry-footer"></footer></article><div class="iconlist-timeline"></div></li>
    <li class="avia_start_animation"><a href="http://www.pinterest.com/havazilondon/" title="" target="_blank" style="background-color:#719430; color:#ffffff; " class="iconlist_icon  avia-font-entypo-fontello"><span class="iconlist-char " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></a><article class="article-icon-entry av-iconlist-empty" itemscope="itemscope" itemtype="https://schema.org/CreativeWork"><div class="iconlist_content_wrap"><header class="entry-content-header"></header><div class="iconlist_content  " itemprop="text"></div></div><footer class="entry-footer"></footer></article><div class="iconlist-timeline"></div></li>
    </ul></div>

    Try this code in the General Styling > Quick CSS field:

    .sbox ul.avia-icon-list li {
        float: left;
        clear: none;
    }
    
    .sbox .iconlist-timeline { 
    display: none;
    }

    Best regards,
    Mike

    #821815

    WOW! Mike

    I really apricated your time and help.

    Thank you so much indeed.

    That is very close to what I need.

    Thanks Again – this is the solution yet!

    #821816

    Hi,
    Shall we close this then?

    Best regards,
    Mike

    #821819

    On the mobile device, they are a bit big and are not in one line. I don’t mind to make the icons smaller and gap even closer.

    Thank you very much indeed Mike:)

    #821834

    Hi,
    For your mobile devices this code will make the icons half size with 10px spacing between:

    @media only screen and (max-width: 767px) { 
    .avia-icon-list .iconlist_icon {
    height: 32px!important; 
    width: 32px!important; 
    line-height: 32px!important; 
    font-size: 10px!important; 
    margin-right: 10px!important; 
    }}

    You can experiment with the numbers if you like :)

    To change the spacing for all other screen sizes add this code too:

    .avia-icon-list .iconlist_icon {
        margin-right: 15px !important; }

    PS: I just looked at your page and it looks like you need to add this code in the General Styling > Quick CSS field:

    .sbox ul.avia-icon-list li {
        float: left;
        clear: none;
    }
    
    .sbox .iconlist-timeline { 
    display: none;
    }

    Best regards,
    Mike

    • This reply was modified 6 years, 8 months ago by Mike.
    #821838

    Thank you very Much Mike – You are the legend!

    #821841

    Hi,
    Glad to help, just let us know if we can offer any other assistance :)

    Best regards,
    Mike

    #821847

    No thanks – all set as I wanted

    #821879

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Adding Social Media inside the webpage’ is closed to new replies.