Siempre existe la necesidad de cuadros de notificación en un sitio web. Son adiciones útiles que brindan información importante a los usuarios donde pueden verla. Desafortunadamente, la creciente epidemia de COVID-19 ha dejado a muchos sitios web con la necesidad apremiante de mantener actualizados a sus usuarios. Un cuadro de notificación es una excelente manera de hacerlo.
Hoy, estamos regalando un diseño de sección de cuadro de notificación Divi GRATUITO (completo con todo el código / funcionalidad necesario) para que lo agregue a cualquiera de sus páginas o plantillas Divi.
No se preocupe, también le mostraremos cómo construirlo desde cero y cómo usarlo.
¡Empecemos!
Aquí hay un vistazo rápido al cuadro de notificación y cómo funciona.
Descargue el diseño de la sección del cuadro de notificación Divi GRATIS
Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.
Luego haga clic en el botón importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder. Recuerde que este es un diseño de sección, por lo que deberá agregar este diseño a una página, publicación o plantilla al crear una nueva sección en el generador.
Consulte la parte inferior de la publicación para saber cómo agregar el diseño de la sección del cuadro de notificación a una página o plantilla
Vayamos al tutorial, ¿de acuerdo?
Parte 1: agregar un nuevo diseño de sección a la biblioteca Divi
Para este diseño, primero vamos a construir el cuadro de notificación como un diseño de sección en la Biblioteca Divi. De esa manera, una vez que el diseño de la sección esté completo y guardado, podemos agregar convenientemente el diseño de la sección desde Divi Libary a cualquier página, publicación o plantilla de Divi. La idea es tenerlo listo en la biblioteca para cada instancia en la que necesitemos un cuadro/sección de notificación para el sitio.
Agregar diseño
Para comenzar, navega a Divi > Biblioteca Divi.
Haga clic en el botón «Agregar nuevo» para agregar un nuevo diseño a la biblioteca.
En la ventana emergente Agregar nuevo diseño, asigne un nombre al diseño (es decir, «Sección de aviso») y elija el tipo de diseño «Sección».
Luego haga clic en Enviar.
Parte 2: Diseño del diseño de la sección del cuadro de notificación
Construir en la parte delantera
Esto implementará el editor de diseño que funciona de manera muy similar a una página normal usando Divi Builder. Como queremos construir el diseño visualmente, haga clic en «Construir en el front-end».
Fondo de sección y relleno
Abra la configuración de la sección y actualice el fondo y el relleno de la siguiente manera:
- Fondo degradado Color izquierdo:
- Fondo degradado Color derecho:
- Relleno: 0px arriba, 0px abajo
ID de CSS de la sección
El cuadro de notificación necesitará algún CSS/JQuery personalizado para proporcionar la funcionalidad en la que se puede hacer clic para cerrar el cuadro/sección. Agregue el siguiente ID de CSS a la sección para que podamos orientarlo con el código más adelante.
- ID de CSS: sección de notificación
Agregar fila y ancho de fila
Agregue una fila de una columna a la sección.
Luego actualice la configuración de la fila con un ancho máximo de la siguiente manera:
- Ancho máximo: 700px
Agregar módulo de texto para el texto de notificación
Dentro de la fila, agregue un nuevo módulo de texto. Aquí será donde agregaremos el contenido de texto para el cuadro de notificación.
Contenido del texto
Actualice el contenido del cuerpo con el texto necesario para la notificación de la siguiente manera:
|
01
02
|
<h2>COVID-19 Notice</h2>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. |
Diseño de texto
En la pestaña de diseño, actualice el estilo de texto de la siguiente manera:
- Fuente de texto: Cabina
- Texto Tamaño del texto: 18px
- Alineación de texto: centro
- Título 2 Tamaño del texto: 46 px (escritorio), 38 px (tableta), 28 px (teléfono)
- Encabezado 2 Altura de línea: 1,3 em
Agregar fila de dos columnas
Debajo de la fila con el módulo de texto, agregue una nueva fila de dos columnas (1/2 – 1/2).
Ancho de fila
Actualice la fila con el siguiente ancho máximo:
- Ancho máximo: 600px
Este cuadro de notificación tendrá un botón CTA «Más información» a la izquierda que se puede usar para redirigir a un usuario a otra página con más información.
Para crear el botón, agregue un nuevo módulo de botón a la columna 1.
Contenido del botón
Actualice el texto del botón con «Más información» y agregue la URL del enlace del botón para redirigir a los usuarios a otra página para obtener más información.
Diseño de botones
Actualice las siguientes opciones de diseño:
- Alineación de botones: centro
- Usar estilos personalizados para el botón: SÍ
- Color del texto del botón: #ffffff
- Color de fondo del botón: #f6ae55
- Ancho del borde del botón: 0px
- Fuente del botón: Cabina
- Peso de la fuente del botón: Negrita
Para que el botón abarque todo el ancho de la columna, agregue el siguiente CSS personalizado al elemento principal:
|
01
|
display: block !important; |
En la columna derecha de este cuadro de notificación, tendremos un «¡Entendido!» botón que colapsa/cierra el cuadro de notificación fuera de la vista. Para este botón, mantendremos la mayor parte del diseño del botón anterior con la excepción del color de fondo y del texto. También necesitaremos darle a este botón una ID de CSS para orientarlo con código más adelante.
Copiar y pegar botón en la columna derecha
Para impulsar el diseño del botón, copie el botón en la columna 1 y péguelo en la columna 2.
Contenido
Actualice el texto del botón.
- Texto del botón: ¡Entendido!
Diseño
Luego actualice el color del texto del botón y el color de fondo de la siguiente manera:
- Color del texto del botón: #121212
- Color de fondo del botón: rgba(255,255,255,0.4)
Botón Clase CSS
Para este botón, agregue la siguiente clase CSS para apuntar al botón más tarde con el código necesario para colapsar/cerrar el cuadro de notificación.
- Clase CSS: aviso de cierre
Creación del icono de cierre del cuadro de notificación (“x”).
Añadir fila
Para crear el icono de cierre en la parte superior derecha del cuadro de notificación, una nueva fila de una columna.
Configuración de fila
Luego actualice el ancho de fila y el relleno de la siguiente manera:
- Ancho: 100%
- Ancho máximo: 100%
- Relleno: 0px arriba, 0px abajo
Agregar módulo/icono de Blurb
Dentro de la fila, agregue un nuevo módulo publicitario.
Contenido
Luego, elimine el contenido simulado en Título y cuerpo, seleccione para usar el ícono «x» para la propaganda.
Configuración de Blurb para el icono Cerrar
En la pestaña de diseño, actualice lo siguiente:
- Color del icono: #ffffff
- Usar tamaño de fuente del icono: SÍ
- Tamaño de fuente del icono: 40px
- Ancho: 40px
- Altura: 40px
Posición del icono
Para colocar el icono en la parte superior derecha del cuadro, abra la pestaña Avanzado y actualice lo siguiente:
- Posición: Absoluta
- Ubicación: arriba a la derecha
- Desplazamiento vertical: 20px
- Desplazamiento horizontal: 20 px
Blurb/Icono Clase CSS
Ahora agregue la misma clase CSS a la propaganda que hizo para el mensaje «¡Entendido!» Botón Cerrar (ambos se utilizarán para cerrar el cuadro de notificación).
- Clase CSS: aviso de cierre
Agregar código personalizado
Para este cuadro de notificación, vamos a agregar CSS/Javascript personalizado para hacer lo siguiente:
- Cierre el cuadro de notificación al hacer clic en el botón de cerrar o en el icono de cerrar.
- Cierre el cuadro de notificación deslizando el cuadro (y el contenido de la página debajo de él) hacia arriba fuera de la vista (una tendencia común con este tipo de cuadros).
- Grabe el evento en el navegador del usuario para que la ventana emergente no se siga mostrando durante la sesión después de cerrarla.
Para agregar la funcionalidad, vamos a agregar el código a un módulo de código. Continúe y agregue un nuevo módulo de código debajo del módulo del botón de cierre (o en cualquier lugar de la página).
Luego pegue el siguiente código en el área de contenido del módulo de código:
|
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
|
<style> .close-notice { cursor: pointer; } #notice-section { display:none; } .et-fb-post-content #notice-section { display: block !important; }</style><script>function storageAvailable(type) { try { var storage = window[type], x = '__storage_test__'; storage.setItem(x, x); storage.removeItem(x); return true; } catch(e) { return e instanceof DOMException && ( // everything except Firefox e.code === 22 || // Firefox e.code === 1014 || // test name field too, because code might not be present // everything except Firefox e.name === 'QuotaExceededError' || // Firefox e.name === 'NS_ERROR_DOM_QUOTA_REACHED') && // acknowledge QuotaExceededError only if there's something already stored storage.length !== 0; }}jQuery(document).ready(function($) { var storageAvailable = window.storageAvailable('sessionStorage'); $(".close-notice").click(function() { $("#notice-section").slideUp(); if (storageAvailable) { sessionStorage.setItem('etNoticeState','hidden'); } }); if (storageAvailable) { if ('hidden' !== sessionStorage.getItem('etNoticeState')){ $("#notice-section").show(); } } else { $("#notice-section").show(); }});</script> |
Sobre el Código
En las etiquetas de estilo, notará que en realidad estamos ocultando el cuadro/sección de notificación inicialmente con esto…
|
01
|
#notice-section {display:none;} |
De esa manera, podemos verificar que el navegador tenga el almacenamiento que necesitamos para registrar el elemento.
Ese mismo fragmento también ocultará la sección en Divi Builder (en la parte delantera). Para anular eso, agregamos otro fragmento para mostrar la sección en Divi Builder para que pueda realizar ediciones visualmente.
|
01
|
.et-fb-post-content #notice-section {display:none;} |
La función JS «storageAvailable(type)» verifica el almacenamiento del navegador.
El fragmento jQuery hace todo lo demás necesario…
- Cierra la sección (#aviso-sección) al hacer clic en el botón e icono con la clase “cerrar-aviso”.
- Si el navegador tiene almacenamiento de sesión disponible, hacer clic en cualquiera de los botones para cerrar el cuadro oculta el cuadro durante el resto de la sesión del navegador del usuario, que dura mientras el navegador esté abierto.
Una vez hecho esto, asegúrese de guardar el diseño de la sección.
Agregar el cuadro de notificación (diseño de sección) a una página
Para agregar el diseño de la sección del cuadro de notificación a una página usando Divi Builder, abra una página en Divi Builder y haga clic en el ícono azul para agregar una nueva sección a la página.
Abra la pestaña Agregar de la biblioteca y seleccione el diseño de la sección del cuadro de notificación de la lista. Lo llamamos «Sección de avisos» para este ejemplo.
Asegúrese de colocar la sección en la parte superior de la página (o en cualquier otro lugar que desee) y guarde la página.
Agregar el cuadro de notificación (diseño de sección) a una plantilla de tema Divi
También podemos agregar el diseño de la sección del cuadro de notificación a cualquier plantilla de página/publicación, encabezado global o pie de página global. El proceso es el mismo que agregarlo a una página Divi normal.
Para agregarlo a una plantilla, abra Divi Theme Builder.
Luego haga clic para editar el área de la plantilla donde desea agregar el diseño de la sección del cuadro de notificación.
En el editor de diseño de plantilla, haga clic para agregar una nueva sección y seleccione el diseño de sección guardado de la biblioteca Divi.
Guarde el diseño de la plantilla.
¡Eso es todo!
Resultado final
Aquí está el resultado final del cuadro de notificación en una página en vivo.
Pensamientos finales
Espero que este cuadro de notificación Divi sea útil. Realmente hay tantos usos maravillosos para algo como esto. Y aunque el mundo todavía está lidiando con el COVID-19, esperamos muchas notificaciones positivas en un futuro cercano.
Espero escuchar de usted en los comentarios.
¡Salud!