Tener una llamada a la acción en su sitio es una de las formas menos intrusivas de captar la atención de su visitantes. La mayoría de las veces simplemente ignorarán la CTA o la cerrarán para continuar navegando por la página, pero a veces los conquistarás. Una diapositiva de llamado a la acción funcionará muy bien para promover casi cualquier cosa en una página de destino.

En este tutorial, diseñaremos un llamado a la acción que se puede cerrar y que se puede agregar a cualquier rincón de una página usando Divi Theme Builder. Una vez hecho esto, tendrá la opción de promover sus productos y ofertas especiales en cualquier lugar de la página sin tener que utilizar un complemento.

Vamos a empezar!

vista

Aquí hay un vistazo rápido a las cuatro CTA insertadas que agregaremos a las cuatro esquinas de la plantilla de página. Por supuesto, no necesitará implementar los cuatro al mismo tiempo. Observe cómo se pueden cerrar cada uno haciendo clic en el icono "x", luego puede elegir volver a habilitar la CTA haciendo clic en el icono "más".

Lo que necesitas para empezar

Para comenzar, deberás para instalar y activar el tema Divi . Asegúrese de tener la última versión de Divi.

También necesitará al menos una página creada con Divi Builder con fines de prueba para poder asignar la nueva plantilla a esta página para mostrar el resultado.

Creación de un llamado a la acción deslizante, con una plantilla de página en Divi

Creación de un nuevo modelo

Desde el panel de WordPress, vaya a Divi> Generador de temas. Luego haga clic en el cuadro "Agregar una nueva plantilla" para crear una nueva plantilla.

Asigne la plantilla a la página o páginas en las que desea mostrar la barra promocional.

En el nuevo modelo, haga clic en el área "Agregar un cuerpo personalizado" y luego seleccione "Crear un cuerpo personalizado".

Luego, seleccione la opción "Construir desde cero".

Creación de la sección de contenido de la publicación.

la sección de contenido La publicación es una parte necesaria de cualquier plantilla de página para mostrar el contenido página real o publicación incrustada en Divi o WordPress. Agregaremos esto a nuestra plantilla antes de crear nuestro primer llamado a la acción para insertar.

Agregar una fila a una columna

Para comenzar, agregue una fila de una columna a la sección regular.

Agregar un módulo de contenido de publicación

Luego agregue un módulo contenido publicación a la línea.

Configuraciones de línea

Después de eso, actualice los parámetros de línea de la siguiente manera:

• Ancho: 100%
• Ancho máximo: 100%
• Relleno: 0px alto, 0px bajo

Creando el llamado a la acción arriba a la izquierda

Ahora que nuestro módulo de contenido de publicación está en su lugar, estamos listos para comenzar a agregar nuestra primera llamada a la acción para insertar en la esquina superior izquierda de la plantilla de página.

Agregar una sección

Cada nueva llamada a la acción se creará con una nueva sección. Esto le permitirá agregar cualquier diseño o módulo necesario para diseñar la llamada a la acción.

Agregue una nueva sección regular al diseño de la plantilla.

Agregar una fila a una columna

Luego, asigne a la sección una fila de una columna.

Configuraciones de sección

Arrastre (o mueva) la sección sobre la sección de contenido de la publicación y actualice la configuración de la sección de la siguiente manera:

• Gradiente de fondo de color izquierdo:
• Gradiente de fondo derecho:
• Mostrar el degradado sobre la imagen: SÍ
• Imagen de fondo: [insertar imagen]
• Ancho: 320px
• Margen: quedan 320 px
• Relleno: 0px alto, 0px bajo
• Estilo de animación: diapositiva
• Dirección de la animación: derecha
• Retardo de animación: 2000 ms

Luego salte a la pestaña avanzada y agregue la siguiente clase CSS e índice Z:

• Clase CSS: slide-in-cta
• Índice Z: 999

Y agregue el fragmento de CSS personalizado después del elemento principal:

position: fixed;top: 80px;left: -320px;

La clase CSS es necesaria para que podamos apuntar a la sección con código más adelante. El CSS personalizado colocará la sección superior izquierda de la plantilla de página en una posición fija (o fija). La posición "izquierda: -320 píxeles" debería mover toda la sección (que tiene 320 píxeles de ancho) fuera de la ventana del navegador (por lo tanto, fuera de nuestra vista). Pero tenemos el margen izquierdo de 320 píxeles para volver a verlo. La razón por la que está construido de esta manera es que podemos activar o desactivar el valor del margen cuando hace clic en el icono "x". Esto hará que la CTA se deslice hacia adentro y hacia afuera.

Configuraciones de línea

Ahora, actualice los parámetros de línea de la siguiente manera:

• Use un ancho de canal personalizado: SÍ
• Ancho de canal: 1
• Ancho: 100%
• Relleno: 0px alto, 0px bajo

Agregar un módulo de llamado a la acción

Dentro de la fila, agregue un módulo de Llamado a la acción.

Configuración de llamada a la acción

Luego, actualice la configuración de la llamada a la acción.

Contenido

• Título: [ingrese el texto de su elección]
• Botón: [ingrese el texto de su elección]
• Cuerpo: [ingrese el texto de su elección]
• URL del enlace del botón: [ingrese la URL real o #]

Luego, elimine el color de fondo predeterminado para revelar el fondo de la sección que agregamos anteriormente.

Parámetros de diseño (texto, botón y relleno)

En la pestaña Diseño, actualice lo siguiente:

• Fuente del título: Lato
• Peso de la fuente del título: pesado
• Altura de la línea de título: 1,3 em
• Cuerpo de policía: Lato
• Peso de la fuente del cuerpo: negrita
• Use estilos personalizados para el botón: SÍ
• Tamaño del texto del botón: 15px
• Ancho del borde del botón: 0px
• Espacio entre letras de botones: 1 px
• Fuente de boton: Lato
• Peso de la fuente del botón: pesado
• Estilo de fuente del botón: TT
• Relleno de botones: 12 píxeles en la parte superior, 12 píxeles en la parte inferior, 32 píxeles a la izquierda, 32 píxeles a la derecha
• relleno: 40 píxeles en la parte superior, 40 píxeles en la parte inferior, 40 píxeles a la izquierda, 40 píxeles a la derecha

Agrega un ícono de abrir y cerrar con un módulo de Blurb

Una vez que se realiza la llamada a la acción, debemos crear el botón de icono que se utiliza para abrir y cerrar la llamada a la acción deslizante. Para crear esto, agregue un módulo de propaganda debajo del módulo de llamada a la acción.

Configuración de texto de presentación

Actualice los siguientes parámetros de diseño.

Contenido

• eliminar el título predeterminado y el texto del cuerpo
• Utilice el icono: SI
• Icono: más (ver captura de pantalla)

diseño

• Color del icono: # 000000
• Usar tamaño de fuente del icono: SÍ
• Tamaño de fuente del icono: 40 píxeles
• Ancho: 40px
• Altura: 40px
• Esquinas redondeadas: 50%
• Transformar la rotación del eje Z: 135 grados

Configuraciones avanzadas

En la pestaña avanzada, agregue la siguiente clase CSS:

• Clase CSS: slide-in_target

Luego agregue este CSS personalizado al elemento principal.

position: absolute;bottom: 0px;right: -40px;

Agrega el siguiente CSS personalizado a la imagen de Blurb.

margin-bottom: 0px;

Resultado

Aquí está el resultado hasta ahora.

Tenga en cuenta que aún necesitamos agregar código para agregar la funcionalidad de cerrar y abrir cuando haga clic en el ícono "x". Agregaremos el código después de crear una llamada a la acción en cada una de las cuatro esquinas del modelo.

Creación de la llamada a la acción en la parte superior derecha.

Con la primera llamada a la acción incorporada, podemos acelerar el proceso de creación del resto de CTA duplicando la sección ya creada. A continuación, crearemos una llamada a la acción con diapositivas para la esquina superior derecha.

Sección duplicada

Implemente el modo de visualización de estructura alámbrica, luego duplique la sección de CTA en la parte superior izquierda.

Actualizar la configuración de la sección

Luego actualice los nuevos parámetros de sección de la siguiente manera:

• margen: 320 px a la derecha
• dirección de animación: izquierda

Luego actualice el CSS personalizado en el elemento principal reemplazando "izquierda" por "derecha". Aquí está el extracto completo:

position: fixed;top: 80px;right: -320px;

Actualizar los parámetros del módulo Blurb

Luego, abra la configuración del módulo de Blurb y actualice el fragmento de CSS personalizado en el elemento principal reemplazando "derecha" por "izquierda". Aquí está el extracto completo:

position: absolute;bottom: 0px;left: -40px;

Resultado

Ahora verá una llamada a la acción como una diapositiva en la parte superior derecha de la plantilla de página.

Realice las mismas operaciones para el resto de las secciones "Inferior derecha", "Inferior izquierda". También deberá ajustar el código CSS de cada uno de los módulos para obtener un resultado similar al siguiente.

Agregar fragmentos personalizados de jQuery y CSS usando un módulo de código

Para el último paso, necesitamos agregar algo de jQuery y CSS personalizados para que podamos obtener la funcionalidad de abrir y cerrar cada una de las CTA de las diapositivas.

Agregar un módulo de código

Agregue un módulo de código a una de las secciones de la presentación.

Pegar el código

Luego abra la configuración del código y pegue el siguiente código en el área de código.

<style>.slide-in-cta, .slide-in_target, .slide-in-toggle-active {transition: all 400ms ease-in-out;} .slide-in-toggle-active {margin: 0px 0px 0px 0px !important;}.slide-in-toggle-active .slide-in_target  {transform: none !important;background: rgba(0,0,0,0.2);}  .slide-in_target {cursor: pointer;}</style><script>(function($) {$(document).ready(function(){$('.slide-in_target').click(function(){$(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); });    });})( jQuery );   </script>

Consideraciones finales

Con Divi, no es nada difícil crear un llamado a la acción. Y dado que puede usar el creador de temas para agregar una llamada a la acción a una plantilla de página, tendrá más control sobre qué páginas muestran esas CTA.