Cada semana, le proporcionamos un paquete de diseño Divi nuevo y gratuito que puede usar para su próximo proyecto. Junto con cada paquete de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.
Esta semana, como parte de nuestra iniciativa de diseño Divi en curso, le mostraremos cómo hacer que los íconos de seguimiento social aparezcan justo después de que alguien haya solicitado acceso anticipado en la página Próximamente del paquete de diseño de marketing de software . Esta es una excelente manera de promocionar su producto o servicio incluso antes de que lo haya lanzado.
Antes de solicitar acceso anticipado en la próxima página, se utiliza el siguiente diseño:
Sin cambiar nada visualmente sobre la página próximamente, la siguiente página (redireccionamiento) se abrirá una vez que alguien solicite acceso anticipado a través del formulario de suscripción por correo electrónico:
El proceso, en su totalidad, se ve así:
Parte 1: Haga que su página Próximamente sea funcional
Paso 1: Abra la página Próximamente con Visual Builder
Lo primero que tendrá que hacer es crear una página utilizando la próxima página del paquete de diseño de marketing de software . Una vez que haga eso, habilite Visual Builder en esa página.
Paso 2: agregue el proveedor de servicios al módulo de suscripción de correo electrónico
Uno de los módulos que forma parte de este diseño es el Módulo Optin de correo electrónico. Para continuar usando este módulo, deberá agregarle una cuenta de correo electrónico con el proveedor de servicios de su elección.
Paso 3: Cambie ‘Cuenta regresiva hasta’ del Temporizador de cuenta regresiva
A continuación, desplácese hacia abajo en su página y agregue la fecha de cuenta regresiva que coincida con su fecha de lanzamiento para tener una página próximamente completamente precisa.
Parte 2: Crear página de redirección
Paso 1: cree una nueva página, habilite Divi Builder y cambie a Visual Builder
Después de realizar estas pequeñas modificaciones en la página Próximamente, tendrá que crear otra página que se usará como la página a la que se redirigirá a sus visitantes después de suscribirse al Módulo de suscripción por correo electrónico de su página Próximamente. Use el título de página que desee para esta página, habilite Divi Builder y cambie a Visual Builder de inmediato.
Paso 2: Use el diseño Próximamente
No necesariamente queremos que las personas sepan que están siendo redirigidos a otra página. Es por eso que, para la mayor parte de la página, vamos a reutilizar el diseño disponible próximamente del paquete de diseño de marketing de software . Si está cargando el paquete Próximamente desde los diseños prefabricados en su biblioteca, asegúrese de cambiar el temporizador de cuenta regresiva una vez más.
Paso 3: eliminar la fila actual en la sección Hero
Vamos a reemplazar los módulos dentro de la sección principal con un módulo de seguimiento social y dos módulos de texto coincidentes. Para lograr eso, vamos a necesitar otra estructura de columnas y para ahorrar tiempo; elimine la fila actual en la sección de héroe por completo.
Paso 4: agregue una fila de una columna en su lugar
En su lugar, vamos a agregar una fila con una columna a nuestra sección principal.
Paso 5: Clonar los módulos de texto de la sección Hero de la página de destino
Puede comenzar a crear sus Módulos de texto desde cero o puede usar algunos Módulos de texto que ya están presentes en el paquete de diseño de marketing de software para que coincidan con el resto de su sitio web, lo que suena como una mejor idea. La sección de héroe en la página de destino, por ejemplo, tiene dos módulos de texto que solo necesitan pequeños cambios para funcionar en nuestra página de redirección. Continúe y agregue ambos módulos de texto a su biblioteca individualmente.
Paso 6: agregue módulos de texto a la fila de una columna
Inmediatamente después de agregar los Módulos de texto a su biblioteca, regrese a su página de redirección y agregue ambos Módulos de texto a la fila de una columna que ha creado.
Paso 7: cambiar el contenido y la alineación de ambos módulos de texto
Como estamos usando una fila con una columna, se recomienda usar la alineación central. Ambos módulos de texto necesitan una orientación de texto central en la subcategoría de texto y una alineación de módulo central en la subcategoría de tamaño.
Una vez que haya terminado con los módulos de texto, puede agregar un módulo de seguimiento de redes sociales justo entre ambos módulos de texto.
Agregue tantos canales de redes sociales como desee a su Módulo de seguimiento de redes sociales y no olvide incluir las URL de sus propios canales de redes sociales para cada uno.
No es necesario modificar la configuración de diseño de cada uno de los canales de redes sociales individualmente, puede aplicar cambios a todos ellos a la vez yendo a la pestaña Diseño de su Módulo de seguimiento de redes sociales. Lo primero que deberá hacer allí es usar una Alineación de elementos central para su módulo.
Paso 11: aplique esquinas redondeadas adicionales
Para que cada uno de los íconos sociales aparezca en un círculo, simplemente puede agregar ’20px’ a cada una de las esquinas dentro de la subcategoría Borde.
Paso 12: Agregar sombra de cuadro
Por último, pero no menos importante, un poco de Box Shadow puede ayudarlo a crear profundidad para sus íconos de seguimiento social. La sombra del cuadro que hemos usado en nuestro ejemplo es la primera en la lista (por defecto). Sin embargo, siéntase libre de jugar con la configuración y el color de la sombra para hacer coincidir el diseño con sus propios gustos y expectativas.
Parte 3: Agregar página de redirección al módulo de opción de correo electrónico
Paso 1: copie la URL de su página de redirección
Ahora que ha creado y terminado la página de redirección, puede guardar su página y salir de Visual Builder. Una vez que lo haga, siga adelante y copie la URL de su página de redireccionamiento y regrese a su próxima página.
Paso 2: agréguelo a su módulo de opción de correo electrónico
Lo último que queda por hacer es agregar la nueva página de redirección que creó en la parte anterior de esta publicación de blog a la subcategoría Acción de éxito de su Módulo de suscripción de correo electrónico. No olvide elegir ‘Redireccionar a una URL personalizada’ como acción también.
Pensamientos finales
En esta publicación de blog de caso de uso, le mostramos cómo hacer que los íconos de seguimiento social aparezcan justo después de que alguien haya solicitado acceso anticipado en la página Próximamente del paquete de diseño de marketing de software. Este caso de uso es parte de nuestra iniciativa Divi en curso, en la que nuestro equipo de diseño comparte contigo un nuevo paquete de diseño cada semana. Si tienes alguna pregunta; ¡Asegúrate de dejar un comentario en la sección de comentarios a continuación!