Elegant Themes cambió recientemente el diseño de su sitio web para incluir algunas características que vale la pena imitar. En publicaciones anteriores, escribí sobre cómo implementar el diseño del blog Elegant Theme y duplicar el menú principal . Pero, para esta publicación, le mostraré cómo duplicar la llamada a la acción (CTA) de Elegant Themes. Este CTA se encuentra en la parte inferior cerca del pie de página del sitio web de Elegant Themes. Lo especial de este CTA es la funcionalidad adicional que activa la animación una vez que el usuario se desplaza al elemento.
Hoy, les mostraré cómo duplicar no solo el estilo de este CTA sino también la funcionalidad de animación. Esto se logra utilizando el módulo de código de Divi con CSS personalizado y algunas líneas de JavaScript. Sin embargo, puede extender fácilmente la misma funcionalidad animada en cualquiera de los módulos de Divi.
Empecemos.
Creación de la llamada a la acción mediante el módulo de código
Usando Visual Builder, agregue una nueva sección regular con una columna de fila de ancho completo.
A continuación, agregue el módulo de código a su fila.
En Configuración de código general, agregue el siguiente html a la sección de contenido.
|
01
02
03
04
05
06
07
08
09
|
<div class="cta-info"><h3>401,632 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web</h3><p>We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!</p><a href="ENTER URL HERE" id="sign">Sign Up Today</a></div> |
Este html servirá como contenido para tu CTA. Notarás que el título principal de la CTA está envuelto en una etiqueta h3. El subtítulo está envuelto en una etiqueta p estándar. Y el enlace (que pronto será un botón) tiene un ID de CSS llamado «firmar».
También se envuelve un div con la clase «cta-info» alrededor del contenido. Esto es importante para propósitos de estilo más adelante.
Guardar cambios
Ahora necesitamos agregar una nueva ID de CSS a su nueva sección. Haga clic en el icono de configuración de la sección para abrir la configuración de la sección.
En la pestaña CSS en Configuración de la sección, agregue el ID de CSS «cta-section» y guarde los cambios.
A continuación, debemos agregar una ID de CSS a su fila. Haga clic en el icono de configuración de la fila.
En la pestaña CSS, actualice la configuración de la fila con una nueva ID de CSS llamada «cta-row».
Guardar cambios
Eso es todo lo que necesitamos para el diseño de la CTA. Con nuestro contenido en su lugar y nuestras ID de CSS, estamos listos para agregar algunos CSS personalizados.
Agregar el CSS personalizado
Vaya a Divi → Personalizador de temas → CSS adicional (o puede actualizar el archivo style.css de su tema secundario directamente). Dentro del cuadro de código, agregue el siguiente CSS:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
sesenta y cinco
66
67
68
69
70
71
72
73
74
75
76
77
78
|
/* Animated Call To Action *//*** style CTA section and row when waypoint is not triggered ***/#cta-section { padding: 0 80px; transition: all .8s ease; -moz-transition: all .8s ease; -webkit-transition: all .8s ease;}#cta-row { margin: 80px auto 0 auto; padding: 80px 0; max-width: 100%; background-color: #6c17dc; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; box-shadow: 0px 10px 50px #939fa9; transition: all .8s ease; -moz-transition: all .8s ease; -webkit-transition: all .8s ease;}/*** Style CTA section and row once waypoint toggles animate-cta class ***/#cta-section.animate-cta { padding: 46px 0 66px 0; overflow: hidden;}.animate-cta #cta-row { margin: 0 auto 0 auto; -webkit-transform: scale(1.1); transform: scale(1.1); background-color: #4843d2; width: inherit;}/*** style button ***/#sign { display: inline-block; width: 246px; color: #fff; text-transform: uppercase; font-size: 16px; font-weight: 600; background-color: #f92c8b; padding: 20px 40px; margin-top: 30px; border-radius: 60px; -webkit-border-radius: 60px; -moz-border-radius: 60px; transition: all .8s ease; -webkit-transition: all .8s ease; -webkit-transition: all .8s ease; box-shadow: 0px 5px 20px #231f92; -moz-box-shadow: 0px 5px 20px #231f92; -webkit-box-shadow: 0px 10px 50px #231f92;}#sign:hover { background-color: #2cc2e6; box-shadow: 0px 20px 80px #1b1867; -moz-box-shadow: 0px 20px 80px #1b1867; -webkit-box-shadow: 0px 20px 80px #1b1867;}/*** style content within the code module ***/.cta-info{ color: #fff; text-align: center; margin: 0 auto !important; max-width: 1080px; padding: 50px;}.cta-info h3 { color: #fff; font-size: 35px; line-height: 1.3em;} |
Ahora su CTA está comenzando a verse bien. Todo lo que nos queda por hacer es agregar un guión corto para darle a la CTA ese efecto de animación llamativo una vez que la CTA esté visible en la ventana gráfica de su navegador al desplazarse.
Adición de la secuencia de comandos de waypoint para animar la llamada a la acción al desplazarse hasta el elemento
Una de las formas más fáciles de activar una función cuando se desplaza a un elemento de su página es mediante el uso de la biblioteca de JavaScript llamada Waypoints. Dado que Divi ya viene con Waypoints instalados (¡sí!), todo lo que tenemos que hacer es incluir un script que utilice la biblioteca.
Vaya a Divi → Opciones de tema → Integración y pegue el siguiente script en la sección «Agregar código al encabezado de su blog».
|
01
02
03
04
05
06
07
|
<script>jQuery(document).ready(function(){ jQuery('#cta-section').waypoint(function() { jQuery('#cta-section').toggleClass('animate-cta'); }, {offset: '80%'});});</script> |
Este script agrega una función que alternará una clase llamada «animate-cta» cuando te desplaces a la sección CTA (con el ID de CSS «cta-section»). Observe la parte del código que designa la compensación como 80%. Esto significa que la función se activará cuando la parte superior de la sección CTA esté al 80 % de la parte superior de la ventana del navegador. Si desea retrasar la activación de la función cuando el CTA llega a la mitad de la página, puede cambiar el valor de desplazamiento a algo así como 50%. Sin embargo, si su CTA va a estar en la parte inferior de la página, debe ceñirse a un valor más cercano al 80% – 90%. Esto se debe a que es posible que su CTA nunca llegue a la mitad de la ventana de su navegador cuando se desplaza y, por lo tanto, no se activará.
¡Eso es todo!
Ahora echemos un vistazo al proyecto terminado.
Agregar la funcionalidad CTA a otros módulos
Si desea agregar esta funcionalidad de CTA a otros módulos dentro de Divi Builder , esto es bastante fácil de hacer. Estos son los pasos para empezar:
- Cree una sección estándar con una fila de ancho completo (columna única).
- En Configuración de la sección, en CSS, agregue el ID de CSS «cta-section».
- En Configuración de fila, en CSS, agregue el ID de CSS «cta-row» Y agregue la clase CSS de columna «cta-column».
- Inserte el siguiente CSS personalizado:
- Agregue cualquier módulo que desee a la fila (es decir, Módulo de llamada a la acción) y diseñelo en consecuencia. Es posible que quieras agregar fondos transparentes a tu módulo para que no superponga el color de fondo de la sección de tu CTA.
|
01
02
03
04
05
06
|
.cta-column.et_pb_column:last-child { margin: 0 auto; margin-right: auto !important; max-width: 1080px; float: none;} |
Nota importante: no puede agregar más de una CTA con esta función por página.
Pensamientos finales
Duplicar el CTA de Elegant Theme es una característica útil para agregar a cualquier proyecto futuro. Atrae la atención del lector sin ser demasiado autoritario. El uso del Módulo de código brinda a los desarrolladores más flexibilidad para agregar html personalizado dentro de la CTA. Y, la funcionalidad de animación de waypoints no se limita al Módulo de código. También puede agregar las ID de CSS necesarias a cualquier sección, fila y columna para crear CTA con cualquier módulo usando Divi Builder.
Espero escuchar de usted en los comentarios a continuación.
¡Salud!