SLIDERS Y BOTONES: INTRODUCCIÓN
Empecemos por el principio…
Un slider es un pasador dinámico de elementos. La típica sección al inicio de un sitio web que va mostrando diferentes imágenes, téxtos…que van pasando de forma dinámica y automática. Sirven para aportar dinamismo al sitio web, y utilizar la «milla de oro» del sitio web para comunicar los principales mensajes o áreas del sitio web de manera rápida y directa.
Un botón, o también conocido como CTA (del inglés, call to action), suele ser una caja en color o forma destacado, que invita a la acción, generalmente a hacer clic y dirigirse a un enlace determinado.
Hoy estoy con la web de unos nuevos clientes, Pessini Abogados, y estoy dándole forma al slider de su página de inicio:
Es una versión inicial, todavía no tengo ni los textos, pero os podéis hacer una idea.
Se aprecian unos puntitos en la parte inferior, que representan las diferentes diapositivas que irán pasando cada pocos milisegundos. Y el CTA o botón, cumpliendo su función, destacando sobre todo lo demás, invitando a hacer clic e ir a la página específica de tarjetas revolving.
Hasta aquí todo bien. Se hace un con módulo ya preparado de Divi, llamado DESLIZADOR DE ANCHURA COMPLETA.
El problema viene ahora: mi cliente quiere incluir varios botones en una misma dispositiva…y aquí viene l tutorial de hoy, pues nos tocará modificar el CSS de la web.
Este tutorial no sólo os servirá para el slider, sino para convertir cualquier texto de la web en un botón CTA.
PASO 1. CONVERTIR TEXTOS EN HIPERVÍNCULOS
El primer paso consistirá en añadir un hipervínculo normal a los textos que queramos convertir en CTAs.
Voy a la diapositiva del slider, y en el texto, añado los nombres que deben contener los botones, y añado las urls a donde deben dirigir con el botón de hipervínculo normal del editor. Haré esto para cada futuro botón, en mi caso, 4 veces.
PASO 2. CAMBIAR AL EDITOR DE TEXTO Y AÑADIR UNA CLASE CSS AL HIPERVÍNCULO
Una vez añadidos los hipervínculos, cambiaremos de la pestaña visual a la pestaña de texto, ya añadiremos una clase al hipervínculo.
Podéis llamarla como queráis, o copiar la mía:
class=»slider-cta»
Al terminar, guardáis todo
PASO 3: AÑADIR EL CSS A DIVI.
Y ahora, nos tocará ir a Divi, y definir qué hace ese CSS que hemos añadido al hipervínculo.
Nos iremos a las opciones de Divi, y en el apartado CUSTOM CSS, añadiremos el estilo que convertirá los hipervínculos en botones.
DIVI > OPCIONES DEL TEMA > Scroll hasta abajo > CSS PERSONALIZADO.
a.slider-cta {
line-height: 85px;
font-size: 18px;
color: #fff;
background-color: #f77c7f;
border: 2px solid #f77c7f;
border-radius: 5px;
padding: 15px 15px;
-moz-transition: all 0.7s;
-webkit-transition: all 0.7s;
transition: all 0.7s;}
a.slider-cta:hover {
background-color: #fff;
color: #f77c7f;}
Este es el estilo que yo necesito basado en la imagen corporativa de mi cliente, podéis editar las diferentes variables a vuestro gusto!
PASO 4: RESULTADO
Y aquí tenéis el resultado!
Y recordad, esto no sólo os sirve para el slider, sino para cualquier sitio de la web!
Y esto es todo por hoy!
Espero que os sea de utilidad 🙂
La idea original de hacerlo así la saqué de este post en inglés, y la verdad es que me ha sido de gran ayuda! Gracias al autor!
Os ha funcionado?
Qué otras soluciones utilizáis?
Cualquier duda o aportación, no dudéis en dejarme un comentario y lo veremos juntos con toda la comunidad!
Y ya sabéis que si necesitáis ayuda o directamente preferís subcontratar esta tarea, podéis contratar mis servicios!
Lara Prado.
0 comentarios