¡Tu licencia Divi con un -20% de DescuentoOferta aquí

Cómo construir un cuadro de notificación para las actualizaciones de COVID-19 (descarga GRATUITA)

May 29, 2020 | Tutoriales para Divi

Siempre hay una necesidad de cuadros de notificación en un sitio web. Son adiciones útiles que proporcionan información importante a los usuarios donde pueden verla. Desafortunadamente, la creciente epidemia de COVID-19 ha dejado a muchos sitios web con la urgente necesidad 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 pueda agregar 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!

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Vistazo

Aquí hay un vistazo rápido al cuadro de notificación y cómo funciona.

Para importar el diseño de sección a su Biblioteca Divi, navegue a la Biblioteca Divi.

Haz 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 de su computadora.

Luego haga clic en el botón Importar.

cuadro de notificación divi

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.

cuadro de notificación divi

Consulte la parte inferior de la publicación para saber cómo agregar el diseño de 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 Divi. La idea es tenerlo listo en la biblioteca para cada instancia que necesitemos un cuadro / sección de notificación para el sitio.

Agregar diseño

Para comenzar, navegue a Divi> Divi Library.

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.

cuadro de notificación divi

Parte 2: Diseño del diseño de la sección del cuadro de notificación

Construir en el frente

Esto desplegará 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».

cuadro de notificación divi

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:

  • Color de fondo izquierdo del degradado:
  • Color de fondo del degradado:
  • Acolchado: 0px arriba, 0px abajo

cuadro de notificación divi

ID de sección CSS

El cuadro de notificación necesitará algunos CSS / JQuery personalizados para proporcionar la funcionalidad en la que se puede hacer clic para cerrar el cuadro / sección. Agregue la siguiente ID de CSS a la sección para que podamos dirigirla con código más adelante.

  • ID de CSS: sección de aviso

cuadro de notificación divi

Agregar fila y ancho de fila

Agregue una fila de una columna a la sección.

cuadro de notificación divi

Luego actualice la configuración de la fila con un ancho máximo de la siguiente manera:

  • Ancho Máx .: 700px

cuadro de notificación divi

Agregar módulo de texto para texto de notificación

Dentro de la fila, agregue un nuevo módulo de texto. Aquí será donde agreguemos el contenido de texto para el cuadro de notificación.

cuadro de notificación divi

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.

cuadro de notificación divi

Diseño de texto

En la pestaña de diseño, actualice el estilo de texto de la siguiente manera:

  • Fuente de texto: cabina
  • Tamaño del texto: 18px
  • Alineación de texto: centro
  • Encabezado 2 Tamaño del texto: 46 px (escritorio), 38 px (tableta), 28 px (teléfono)
  • Título 2 Altura de línea: 1.3em

cuadro de notificación divi

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).

cuadro de notificación divi

Ancho de fila

Actualice la fila con el siguiente ancho máximo:

  • Ancho Máx .: 600px

cuadro de notificación divi

Agregar botón CTA

Este cuadro de notificación tendrá un botón de CTA «Más información» a la izquierda que se puede utilizar 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.

cuadro de notificación divi

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.

cuadro de notificación divi

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 fuente del botón: negrita

cuadro de notificación divi

Para que el botón abarque todo el ancho de la columna, agregue el siguiente CSS personalizado al elemento principal:

01
display: block !important;

cuadro de notificación divi

Agregar botón de cierre

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, conservaremos la mayor parte del diseño del botón anterior con la excepción del fondo y el color del texto. También tendremos que darle a este botón una ID de CSS para apuntarlo con código más adelante.

Copie y pegue el botón en la columna derecha

Para iniciar rápidamente el diseño del botón, copie el botón en la columna 1 y péguelo en la columna 2.

cuadro de notificación divi

Contenido

Actualiza el texto del botón.

  • Texto del botón: ¡Lo tengo!

cuadro de notificación divi

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)

cuadro de notificación divi

Button CSS Class

Para este botón, agregue la siguiente Clase CSS para apuntar más tarde al botón con el código necesario para contraer / cerrar el cuadro de notificación.

  • Clase CSS: aviso de cierre

cuadro de notificación divi

Creación del icono de cierre del cuadro de notificación («x»).

Añadir fila

Para crear el icono de cierre en la esquina superior derecha del cuadro de notificación, una nueva fila de una columna.

cuadro de notificación divi

Configuración de fila

Luego actualice el ancho de fila y el relleno de la siguiente manera:

  • Ancho: 100%
  • Ancho Máx .: 100%
  • Acolchado: 0px arriba, 0px abajo

cuadro de notificación divi

Añadir módulo / icono Blurb

Dentro de la fila, agregue un nuevo módulo de publicidad.

cuadro de notificación divi

Contenido

Luego, elimine el contenido simulado en la selección Título y Cuerpo para usar el icono «x» para la propaganda.

cuadro de notificación divi

Configuración de Blurb para cerrar icono

En la pestaña de diseño, actualice lo siguiente:

  • Color del icono: #ffffff
  • Usar tamaño de fuente de icono: SÍ
  • Tamaño de fuente del icono: 40 px
  • Ancho: 40px
  • Altura: 40 px

cuadro de notificación divi

Posición del icono

Para colocar el icono en la esquina superior derecha del cuadro, abra la pestaña Avanzado y actualice lo siguiente:

  • Posición: absoluta
  • Ubicación: arriba a la derecha
  • Desplazamiento vertical: 20 px
  • Desplazamiento horizontal: 20 px

cuadro de notificación divi

Blurb / Icon CSS Class

Ahora agregue la misma clase CSS a la propaganda que hizo para «Got it!» Botón Cerrar (ambos se usarán para cerrar el cuadro de notificación).

  • Clase CSS: aviso de cierre

cuadro de notificación divi

Agregar código personalizado

Para este cuadro de notificación, agregaremos CSS / Javascript personalizado para hacer lo siguiente:

  • Cierre el cuadro de notificación cuando haga clic en el botón Cerrar o en el icono Cerrar.
  • Cierre el cuadro de notificación deslizando el cuadro (y el contenido de la página debajo) fuera de la vista (una tendencia común con este tipo de cuadros).
  • Registre el evento en el navegador del usuario para que la ventana emergente no siga apareciendo 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 de botón de cierre (o realmente en cualquier lugar de la página).

cuadro de notificación divi

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 años
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>

cuadro de notificación divi

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 forma podemos verificar para asegurarnos de que el navegador tenga el almacenamiento que necesitamos para grabar el elemento.

Ese mismo fragmento también ocultará la sección en Divi Builder (en la parte frontal). Para anular eso, agregamos otro fragmento para mostrar la sección en Divi Builder para que pueda hacer modificaciones 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 (# sección-aviso) al hacer clic en el botón y el icono con la clase «aviso de cierre».
  • Si el navegador tiene almacenamiento de sesión disponible, al hacer clic en cualquiera de los botones para cerrar el cuadro se oculta el cuadro durante el resto de la sesión del navegador del usuario, que dura todo el tiempo que 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 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 icono 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 sección del cuadro de notificación de la lista. Lo llamamos «Sección de aviso» para este ejemplo.

cuadro de notificación divi

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.

cuadro de notificación divi

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 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.

cuadro de notificación divi

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.

cuadro de notificación divi

Guarde el diseño de la plantilla.

cuadro de notificación divi

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

¡20% de Descuento en Divi!

Sitios web y usuarios ilimitados

Únete a más de 700.000 clientes y obten acceso a Divi, Extra, Bloom, Monarch y mucho más. Impulsa a todo tu equipo y crea sitios web ilimitados con una licencia.

¡Ir al descuento!



You have Successfully Subscribed!

Pin It on Pinterest

Share This