CMS Development

Moore
Participant

Sticky CTA's

We are wanting to add three sticky CTA's at the bottom of our blog. Something like the Purple CTA's in image I have attached. Any help with this would be appreciated.Screen Shot 2020-07-13 at 12.27.29 PM.png

0 Upvotes
2 Replies 2
DanielSanchez
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

Sticky CTA's

Hi @Moore ,

You can add it directly to your blog template. In that case, you can insert the code block directly into the programming of the post blog and the list of posts, or you can create an independent module and just drag it into the template.

 

It would be a very simple module, with 3 columns with fixed position. Very easy to create, but you need to have a basic knowledge of HTML and CSS.

 

I will leave below a basic structure of how it would work

 

HTML:

<div class="cta-stick">
<a href="#LINK1">Text cta 1</a>
<a href="#LINK2">Text cta 2</a>
<a href="#LINK3">Text cta 3</a>
</div>

CSS:

.cta-stick{
  position:fixed;
  left:0;
  bottom:0;
}

a.cta-stick{
   padding:10px 20px;
   background:#CCC /* change hexadecimal code */
   color:#000 /* change hexadecimal code */
   display:inline-blick;
  position:relative;
  width:33%
}

a.cta-stick:hover{
   background:#fff /* change hexadecimal code */
}

I wrote without testing the excerpts above. If you create the module with these codes and need adjustments, send the link so that I can analyze it.

 

If you don't have the manpower to create this module, send me a message.

 

Hope this helps.

 

Did this post help solve your problem? If so, please mark it as a solution.

Best regards!

Moore
Participant

Sticky CTA's

I am still having trouble with sticky bar with CTA's.  I need the bar to go all the way across the bottom of footer as the color of text and the text white.  Attached is what I have now.

 

Screen Shot 2020-07-15 at 11.13.58 AM.png