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?

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

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

.

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

.

Thanks for everyone's input. I will have a play over the next few days and post back with my thoughts.

Regards

Derek

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

.

Thanks KolAsim you are a star. I will have a play around later.

Regards

Drek