CTA design
Autor: Derek K.
Visited 2162,
Followers 1,
Udostępniony 0
I like the CTA design on this site https://www.atidymind.co.uk/ is it possible to create the same CTA using Pro only so far I have not been able to work out how to do it.
Thanks
Derek
Posted on the
CTA (Call to Action buttons?) - (yet another buzz acronym?)
I looked at your example website and see nothing that Website X5 cannot accomplish, so what particularly do you wish to reproduce? Perhaps the parallax slide show with contact button overlaid? Accordion Text?
Autor
Hi,
Thanks for the response. You would not believe this but they have changed the design of their website since I posted. But basically what I was hoping to acheive is an image overlaid with a title, some descriptive text and an action button. They had this on the website but it is no longer there. There would be three images side by side.
See my work in progress at http://test1.buildthewebsite.co.uk
Thanks
Hello Derek
You should be able to achieve this easily:
1_ At Step 4, enter a Title Object (for the title), a Text Object (for the text) and perhaps one of the many optional Button Objects you can find in our Marketplace (they are of course optional so you can always create this in some other way, like a text with a link)
2_ At Step 4 once again, enter Row Format and select a background image for these rows:
This should be enough to achieve what you wanted to.
Let me know if you get stuck somewhere and need further help
Thank you
Stefano
Autor
Hi Steffano,
Thanks for your advice but this ony works when you want the CTA to fill the whole row. I want this effect to be on 3 objects in the row. Any ideas.
Regards
Derek
(It > En) ... I don't know if I understood, but, if you are interested, with my EXTRA code you could get a result similar to this one:
.
.
ciao
.
Autor
Hi,
yes this look slike what I am tring to acheive. Any further help would be most appreciated.
Thanks
Derek
(It > En) ... to test, paste the code in this section:
>> Step 3 - Map > The Page Properties window > ▪Expert | ▪Custom Code: (3°) > ▼Before closing the HEAD tag
... code:
<script>
window.onload = function() {
divK = '<a style="position:absolute;top:100px;left:50px;font-size:22px;text-decoration:none; color:#0000ff;background-color:rgba(255,255,255,0.6);padding:5px" href="https://www.google.it/" alt="GOOGLE" title="GOOGLE">GOOGLE</a><span style="position:absolute;top:150px;left:50px;font-size:22px;text-decoration:none; color:blue;background-color:rgba(255,255,0,0.6);padding:10px"> AAAA aaaa BBBB aaaaa<br>CCCCC cccc</span> ';document.getElementById("imObjectImage_114_container").innerHTML += divK;
}
</script>
.
... or:
<style> #imObjectImage_114_container:after {content:"Bla Bla Bla";position:absolute;top:30px; left:30px;width:100px;height:50px; background-color: rgba(255, 255, 255, 0.7);}</style>
.
ciao
.
Derek, please feel free to use special code if you wish, but in the example offered by stefano he used one object per row, but there is no reason you cannot have many CTA buttons per row, simply have as many columns as you wish in the layout.
Autor
Thanks for everyone's input. I will have a play over the next few days and post back with my thoughts.
Regards
Derek
Autor
Hi KolAsim,
Your code works fine ecept it will only work on one object and I do not know how to write code so that the text will appear in each photo in the row.
Any help would be much appreciated.
Thanks
Derek
... Firefox browser > Right-click > Analyze element
... object:
imObjectImage_114_container | imObjectImage_122_container | imObjectImage_123_container
... copy / paste ...
... simplified and easily customizable code for all three images:
<script>
window.onload = function() {
//---------global----------------------------------
LINKtextcolor = "blue";
LINKbgcolor = "255,255,255,0.6"; // white + opacity 0.6
TEXTcolor = "blue";
TEXTbgcolor = "255,255,0,0.6"; // yellow + opacity 0.6
FONT_SIZE = "36";
//------------------------------------------
// image 1 -------------------
obj_image_1 = "imObjectImage_114_container";
LINK1 = "https://www.google.it/";
LINK1name = "GOOGLE1";
ALT1 = TITLE1 = "GOOGLE1";
TEXT1a = "AAAAAA aaaaaaa";
TEXT1b = "BBBBB bbbbbbbb";
divK1 = '<a style="position:absolute;top:100px;left:50px;font-size:'+FONT_SIZE+'px;text-decoration:none; color: '+LINKtextcolor+';background-color:rgba('+LINKbgcolor+');padding:5px" href="'+LINK1+'" alt='+ALT1+'" title="'+TITLE1+'">'+LINK1name+'</a><span style="position:absolute;top:150px;left:50px;font-size:'+FONT_SIZE+'px;text-decoration:none; color:'+TEXTcolor+';background-color:rgba('+TEXTbgcolor+');padding:10px"> '+TEXT1a+' <br>'+TEXT1b+'</span> ';document.getElementById(obj_image_1).innerHTML += divK1;
// image 2 -------------------
obj_image_2 = "imObjectImage_122_container";
LINK2 = "https://www.google.it/";
LINK2name = "GOOGLE2";
ALT2 = TITLE2 = "GOOGLE2";
TEXT2a = "CCCC ccccccc";
TEXT2b = "DDDDDD ddddd ddddd";
divK2 = '<a style="position:absolute;top:100px;left:50px;font-size:'+FONT_SIZE+'px;text-decoration:none; color: '+LINKtextcolor+';background-color:rgba('+LINKbgcolor+');padding:5px" href="'+LINK2+'" alt='+ALT2+'" title="'+TITLE2+'">'+LINK2name+'</a><span style="position:absolute;top:150px;left:50px;font-size:'+FONT_SIZE+'px;text-decoration:none; color:'+TEXTcolor+';background-color:rgba('+TEXTbgcolor+');padding:10px"> '+TEXT2a+' <br>'+TEXT2b+'</span> ';document.getElementById(obj_image_2).innerHTML += divK2;
// image 3 -------------------
obj_image_3 = "imObjectImage_123_container";
LINK3 = "https://www.google.it/";
LINK3name = "GOOGLE3";
ALT3 = TITLE3 = "GOOGLE3";
TEXT3a = "EEEEE eeeeee eeee";
TEXT3b = "FFFFFF FFFF ffff fffff";
divK3 = '<a style="position:absolute;top:100px;left:50px;font-size:'+FONT_SIZE+'px;text-decoration:none; color: '+LINKtextcolor+';background-color:rgba('+LINKbgcolor+');padding:5px" href="'+LINK3+'" alt='+ALT3+'" title="'+TITLE3+'">'+LINK3name+'</a><span style="position:absolute;top:150px;left:50px;font-size:'+FONT_SIZE+'px;text-decoration:none; color:'+TEXTcolor+';background-color:rgba('+TEXTbgcolor+');padding:10px"> '+TEXT3a+' <br>'+TEXT3b+'</span> ';document.getElementById(obj_image_3).innerHTML += divK3;
}
</script>
ciao
.
... image 1 > var ***1 etc. ...1
... image 2 > var ***2 etc. ...2
... image 3 > var ***3 etc. ...3
... etc. ... etc. ... ... .. .. . .
.
ciao
.
Autor
Thanks KolAsim you are a star. I will have a play around later.
Regards
Drek