WebSite X5Help Center

 
Derek K.
Derek K.
User

CTA design  en

Autor: Derek K.
Visitado 2161, Seguidores 1, Compartilhado 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

Publicado em
14 RESPOSTAS
Esahc ..
Esahc ..
Moderator

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?

Ler mais
Publicado em de Esahc ..
Derek K.
Derek K.
User
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

Ler mais
Publicado em de Derek K.
Incomedia
Stefano G.
Incomedia

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

Ler mais
Publicado em de Stefano G.
Derek K.
Derek K.
User
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

Ler mais
Publicado em de Derek K.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês ESUsuário do mês PT

(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

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Derek K.
Derek K.
User
Autor

Hi,

yes this look slike what I am tring to acheive. Any further help would be most appreciated.

Thanks

Derek

Ler mais
Publicado em de Derek K.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês ESUsuário do mês PT
Derek K.
... ...  Any further help would be most appreciated. ... ... 

(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

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Esahc ..
Esahc ..
Moderator

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.

Ler mais
Publicado em de Esahc ..
Derek K.
Derek K.
User
Autor

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

Regards

Derek

Ler mais
Publicado em de Derek K.
Derek K.
Derek K.
User
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

Ler mais
Publicado em de Derek K.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês ESUsuário do mês PT
Derek K.
... ... ... 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. ... ... ... 

... Firefox browser > Right-click > Analyze element

... object:

imObjectImage_114_container  |  imObjectImage_122_container  |  imObjectImage_123_container

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês ESUsuário do mês PT

... 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

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês ESUsuário do mês PT

... image 1 > var  ***1  etc. ...1

... image 2 > var  ***2  etc. ...2

... image 3 > var  ***3  etc. ...3

... etc. ... etc. ... ... .. .. . .

.

ciao

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Derek K.
Derek K.
User
Autor

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

Regards

Drek

Ler mais
Publicado em de Derek K.