Tagged: 

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • July 12, 2017 at 11:19 pm #820259
    Liam

    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

    July 13, 2017 at 1:58 am #820293
    Sarah

    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

    July 13, 2017 at 10:27 am #820436
    Liam

    Thank you very much Sarah

    July 13, 2017 at 11:21 pm #820857
    Liam

    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

    July 13, 2017 at 11:23 pm #820858
    Liam

    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

    July 15, 2017 at 12:59 pm #821644
    Victoria

    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

    July 15, 2017 at 3:42 pm #821696
    Liam

    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 …

    About Me

    Thank you,

    Liam

    July 15, 2017 at 4:44 pm #821729
    Mike

    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

    July 15, 2017 at 4:47 pm #821731
    Liam

    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.

    July 15, 2017 at 8:30 pm #821810
    Mike

    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

    July 15, 2017 at 8:57 pm #821815
    Liam

    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!

    July 15, 2017 at 9:01 pm #821816
    Mike

    Hi,
    Shall we close this then?

    Best regards,
    Mike

    July 15, 2017 at 9:03 pm #821819
    Liam

    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:)

    July 15, 2017 at 9:42 pm #821834
    Mike

    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 7 years, 5 months ago by Mike.
    July 15, 2017 at 9:51 pm #821838
    Liam

    Thank you very Much Mike – You are the legend!

    July 15, 2017 at 10:05 pm #821841
    Mike

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

    Best regards,
    Mike

    July 15, 2017 at 10:23 pm #821847
    Liam

    No thanks – all set as I wanted

    July 16, 2017 at 2:10 am #821879
    Mike

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

    Best regards,
    Mike

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