[Resolved] Simple opt-in bar with social media icons (including WhatsApp)

[Grant]

Hello,

I would like to add a simple opt-in bar with some text and then social media icons (Facebook, Twitter, email and importantly, WhatsApp).

Basically, just a blue bar at the bottom of the screen that scrolls as the user does and links to social media accounts/ another URL when the user clicks icons.

I gather I can do this with a Hook Element but would appreciate specific directions.

Thanks,

Grant

[David]

Hi there,

I am assuming you are using Font Awesome for the icons, if not let me know what, so create a new Hook Element. Add this markup and update accordingly:

<div class="social-bar">
    <div class="grid-container">
        Some text
        <a href="your link here"> <i class="fa fa-linkedin-square fa-4x"></i></a>
        <a href="your link here"> <i class="fa fa-twitter-square fa-4x"></i></a>
        <a href="your link here"> <i class="fa fa-facebook-square fa-4x"></i></a>
    </div>
</div>

Select the after_footer hook. And set your display rules.

Then add this CSS and adjust accordingly:

.social-bar {
    padding: 5px;
    background-color: #cccccc;
}

.social-bar .grid-container {
    display: flex;
    justify-content: space-around;
}

Did you want this fixed to the bottom of the site? If so ill edit the CSS

[Grant]

Thanks, David. I am now using Font Awesome. To be clearer, this is what I am trying to achieve

http://bit.ly/2BOxKtR

I want it to work like the static FB bar that sits as the bottom of the page and is present as the user scrolls up and down.

Is this possible with the Hooks Elements?

[David]

Try this:

1. Appearance > Elements –> New Hook.
2. Select the after_footer hook
3. Set you display rules to Entire Site.
4. Add this HTML in the Hook Content, update the FA Icons form the FA font library and add your URLs in place of the #:

<div class="social-bar">
    <div class="grid-container">
        <a href="#"> <i class="fa fa-linkedin-square fa-4x"><span>Label</span></i></a>
        <a href="#"> <i class="fa fa-linkedin-square fa-4x"><span>Label</span></i></a>
        <a href="#"> <i class="fa fa-linkedin-square fa-4x"><span>Label</span></i></a>
        <a href="#"> <i class="fa fa-linkedin-square fa-4x"><span>Label</span></i></a>
        <a href="#"> <i class="fa fa-linkedin-square fa-4x"><span>Label</span></i></a>
    </div>
</div>

Then add this CSS:

body {
	margin-bottom: 60px; /* Offset height of social bar */
}
.social-bar {
	background-color: #fff; /* Background color */
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}

.social-bar .grid-container {
	display: flex;
}
.social-bar a {
	flex: 1 0 20%; /* based on 5 icons - 4 icons = 25% etc */
}
.social-bar a i {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1 0 20%;
	font-size: 24px; /* Icon Size */
	padding: 10px
}
.social-bar a i span {
	font-size: 0.5em; /* text set to half of icon size */
	margin-top: 5px;
}

[Grant]

Amazing, thank you!!

[David]

You’re welcome

[Grant]

Hi again,

I am still using this scroller that you helped me with, thank you. I would like to hide it on one page though. Is that possible and, if so, how do I do it please?

Thanks

Grant

[Grant]

Hello,

I worked it out – Display Rules on the Hook. No need to respond.

[Author]

Posts