WebSite X5Help Center

 
Derek K.
Derek K.
User

CTA design  en

Autor: Derek K.
Visitado 1700, Followers 1, Compartido 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 en
14 RESPUESTAS
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?

Leer más
Publicado en 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

Leer más
Publicado en 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

Leer más
Publicado en 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

Leer más
Publicado en de Derek K.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes 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

.

Leer más
Publicado en 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

Leer más
Publicado en de Derek K.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes 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

.

Leer más
Publicado en 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.

Leer más
Publicado en 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

Leer más
Publicado en 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

Leer más
Publicado en de Derek K.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes 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

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes 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

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes PT

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

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

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

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

.

ciao

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
Derek K.
Derek K.
User
Autor

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

Regards

Drek

Leer más
Publicado en de Derek K.