Pavia Fernandez 69 • San Sebastian PR 1.787.528.0151

Llamada a la Acción -CTA

El Widget para llamar la atención o incitarte a la acción -CTA-, es formidable para aquellos casos donde lo normal no funciona.

Colon Pratts 360
Moto Theme
Anunciate Ahora 360
La Casa del Bordado
Laboratorio San Sebastian
Comercio Local
On Stage
Funeraria Rios Caldas
Tomassini Dental Laboratory

En este Widget podemos editar el Fondo -puede ser un Color o una Imagen-, el Contenido – incluye un Título, Texto y un Botón; y por último el Cintillo – podemos escribir aquí palabras que inciten al usuario a tomar una acción.

Para el fondo tenemos dos opciones: Clásica y Cubierta, la Clásica nos paermite ubicar la imagen o color sobre el Titulo o a la izquierda o derecha de este. En la Cubierta el Título y el Texto estarán sobre ella y la imagen o color servirán de fondo y cubrirá todo el espacio.

Tenemos que para el contenido hay varios efectos: de entrada, de salida y reacciones de la imagen, color y contenido.

El Fondo nos provee efecto de Flotar -se produce al pasar el ratón o Mouse por sobre la imagen-, y Mezclar – como ineraccionan los colores con el fondo o la Capa de Fondo, aparte de que nos permite aplicar efectos a la imagen al estilo de Fotoshop o FotoPaint.

Por ultimo tenemos la cuadrícula que es en verdad lo que da la estructura a todo lo anterior, nos permite crear la Filas y Columnas que utilizaremos en el trabajo.

Vamos a comenzar este Tutorial creando una nueva sección de dos columnas y la editamos de modo que no haya espacio entre la columnas como se indica en la imagen. Luego ajustaremos manualmente el ancho de la columna izquierda hasta que sea dos veces el ancho del columna derecha como se ve en la imagen abajo. Si deseas hacerlo  automáticamente, seleccionas la columna izquierda y en Ancho de Columna estableces 66.

Una vez hecho esto vamos a añadir a cada una de ellas el Widget CTA o Llamar a la Acción. En la primera vamos a Imagen y seleccionamos nuestra imagen de Fondo a la que atribuimos la opción de Cubierta o Cover y Tamaño Mediano. Vayamos a Estilo y aquí vamos a atribuir 540 pixeles de Altura Mínima en la Caja. Luego vamos al Contenido y atribuimos el color Blanco para los tres Elementos: Título, Texto y Botón. En área de Color cambiamos el color del Título y el Botón al que desees -en nuestro caso Rojo. En el área de Efectos Flotantes -Hover Effects- seleccionamos el que queramos – en nuestro caso Zoom In y ya terminamos con nuestro primer Widget de llamada a la Acción. Si vas a Previsualizar los Cambios verás como al pasar el ratón o mouse por sobre la foto el Título y el Botón cambian a color Rojo y todo el contenido junto con la imagen parecen surgir desde el fondo de la página. Ahora vamos a añadir el Widget CTA a la segunda columna., seleccionamos nuestra imagen y editamos el Contenido a nuestro antojo. Utilizamos el color #FFE7CE para el Color de Fondo y Rojo para el Título y el Botón. Luego en el área de Hover cambiamos el Color de Fondo a Blanco y el Título, Texto y Botón a Negro.

Vamos a duplicar nuestra Sección y na vez lo hayamos hecho eliminaremos la columna de la derecha. En ella vamos a sustituir la imagen. Debo aclarar que si quieres que tu ejercicio se vea igual al publicado, las imágenes son de https://unsplash.com/. Iremos a Estilo y estableceremos la Altura Mínima de esta a 300 pixeles. Ajustaremos el Texto para que se alinee a la derecha y en la parte inferior. Ahora en Hover Effects Seleccionamos Ninguno en Hover Animation para el Contenido, Zoom In para el mismo campo en Background, Verde -#61ce70- para el Overlay Color y Color en el Blend Mode.

Vamos a duplicar esta sección, seleccionamos el ícono de columna y añadimos una columna. Lo primero que haremos es sustituir la imagen en la columna izquierda. Iremos a Estilo y estableceremos la Altura Mínima de esta a 100 pixeles. Esta vez ajustaremos el Texto para que se alinee al centro. Ahora en Hover Effects Seleccionamos Grow en Hover Animation para el Contenido, Zoom In para el mismo campo en Background, Negro -rgba(0,0,0,0.35)- para el Overlay Color y Normal en el Blend Mode. En Contenido cambiamos el color del Título y del Botón a #ff0000. Ahora vamos a duplicar el Widget y una vez hecho seleccionamos la columna atribuyendo 0 al espacio entre Widgets.

Para la columna de la derecha vamos a duplicar este Widget y lo pasamos a la columna derecha. Ya sabes, lo primero que haremos es sustituir la imagen. Iremos a Estilo y estableceremos la Altura Mínima de esta a 664 pixeles. Esta vez ajustaremos el Texto para que se alinee a la izquierda y abajo. Ahora en Hover Effects Seleccionamos Ninguno en Hover Animation para el Contenido y para el Background, en esta ocasión vamos a eliminar el color para el Overlay Color. En Contenido cambiamos el color del Título a Blanco y eliminamos el texto de la descripción y del Botón.Hemos terminado otor ejemplo de Llamada a la Atención.

Vamos a duplicar la sección en la que trabajmos previamente y eleiminaremos la columna de la derecha y en la columna que nos queda eliminamos uno de los Widgets. Rapidito sustituimos la imagen y cambiamos el Skin a Classic alineando esta a la derecha en el cmpo de Disposición. Vamos a Estilo y en el área de Caja o Box ajustamos la Altura Mínima a 162 y en el área de imagen ajustamos el Ancho Mínimo a 443 pixeles. En el área de Contenido cambiamos el color del Título y del Botón a #00b7f9. En el mismo lugar seleccionamos Hover y cambiamos el color del Texto a Negro. En el área de CSS Filters ajustamos Brightness a 185 en nuestro caso ya que la imagen nos resultaba un tanto oscura.

Por último vamos a duplicar esta Sección y de inmediato selecionamos la columna y le asignamos Rojo al color de Fondo en Estilo.  Ahora seleccionamos el Widget y en Graphic Element subimos la Imagen subimos la que usaremos para la Llamada a la Acción, de paso editamos el Texto la Descripción y el Botón. Aquí podemos señalar el enlace a donde desamos el Botón al ser oprimido nos lleve. Bajamos a Ribbon y escribimos nuestra frase motivadora, en nuestro caso Espectacular. Nos trasladamos al área de Estilo y en Box anotamos 100 para la Altura Mínima. Vamos a Graphic Element y anotamos 12 para Espaciado, 65 para Tamaño, 1 para Opacidad y ajustamos el borde al tamaño y color deseado en nuestro caso 3 y Blanco respectivamente. Vamos a Contenido y asignamos Blanco como color del Título, Descripción y Botón. En Hover cambiamos el color del Título y Botón a #00c3ff.

Este es el Título para Editar

Aquí vas a colocar la información que quieres destacar en este campo en particular. Si eliminas el texto estarás usando únicamente el Título.

Este es el Título para Editar​

Aquí vas a colocar la información que quieres destacar en este campo en particular. Si eliminas el texto estarás usando únicamente el Título.

Este es el Título para Editar

Aquí vas a colocar la información que quieres destacar en este campo en particular. Si eliminas el texto estarás usando únicamente el Título.

Este es el Título para Editar

Aquí vas a colocar la información que quieres destacar en este campo en particular. Si eliminas el texto estarás usando únicamente el Título.

Este es el Título para Editar

Aquí vas a colocar la información que quieres destacar en este campo en particular. Si eliminas el texto estarás usando únicamente el Título.

Este es el Título para Editar

Este es el Título para Editar

Aquí vas a colocar la información que quieres destacar en este campo en particular. Si eliminas el texto estarás usando únicamente el Título.

¿Crees que lo has visto todo?

Tienes que ver esto. Oprime el Botón y te convencerás
Espectacular

Este es el Título a Editar

Aquí vas a colocar la información que quieres destacar en este campo en particular. Si eliminas el texto estarás usando únicamente el Título.

Este es el Título a Editar

Este es el Título a Editar

Este es el Título a Editar

Aquí vas a colocar la información que quieres destacar en este campo en particular. Si eliminas el texto estarás usando únicamente el Título.

Deja un comentario