TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo agregar cuadros de mensajes de información en el sitio de Weebly?

1

Resaltar información importante en un artículo ayuda a transmitir el mensaje con éxito a los usuarios. Por lo general, puede utilizar los cuadros de mensajes para mostrar sugerencias, ayuda, advertencias, alertas y muchos otros tipos de información. Los marcos como Bootstrap ofrecen un componente de alerta predefinido para agregar estos cuadros de mensajes de información. Del mismo modo, puede utilizar complementos en sistemas de gestión de contenido como WordPress. En Weebly, puede crear cuadros de mensajes de información utilizando CSS simple. En este artículo explicaremos cómo agregar un cuadro de mensaje de información en el sitio de Weebly según el componente de alerta Bootstrap.

Cuadros de mensajes de información

Crearemos cuadros de mensaje con dos estilos diferentes.

  • Usar iconos de fuentes
  • Imágenes de small icon

Los íconos de fuentes son una buena opción si está utilizando Font Awesome en su sitio. De lo contrario, puede elegir la opción de imagen en lugar de iconos de fuente.

Característica de los cuadros de mensajes de información

Los cuadros de mensajes de información tendrán las siguientes características:

  • Hecho con CSS y alineación automática totalmente sensible en dispositivos móviles.
  • Styles incluye el cuadro de mensaje para información, éxito, advertencia, peligro, consejos, ayuda y mensajes de anuncio. También puede definir su propio cuadro de mensaje personalizado según el código.
  • Agregue casillas de mensajes individuales según sus necesidades. Por ejemplo, cuando desee mostrar una sugerencia, use “cuadro de mensaje de sugerencia" y para una advertencia use “cuadro de mensaje de advertencia”. Esto se puede controlar dentro del HTML pegado dentro del elemento “Código incrustado”.
  • Los colores y las fuentes se pueden personalizar según sus necesidades.
  • El ancho del cuadro de notificación se puede ampliar a todo el ancho de la pantalla o acortar para adaptarse a la longitud del contenido.

1 cuadro de mensaje de información con iconos de fuentes

A continuación se muestra cómo se verán los cuadros que contienen un cuadro de color CSS y un ícono de fuente antes del texto.

¿Cómo agregar cuadros de mensajes de información en el sitio de Weebly?

El primer paso para crear estos cuadros de información es vincular los impresionantes iconos CSS de la fuente en la sección de encabezado de su sitio. Para hacerlo, agregue el siguiente código en la sección "Configuración> SEO> Código de encabezado" en el editor de su sitio Weebly.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

¿Cómo agregar cuadros de mensajes de información en el sitio de Weebly?

Agregar código de encabezado a nivel de sitio Weebly

El segundo paso es agregar el código CSS a continuación en el archivo "main.less".

.webnots-notification-box { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #ffffff; font-family: verdana, 'open sans', sans-serif; margin-bottom: 25px; padding: 10px 14px 10px 44px; position: relative; box-shadow: 0px 1px 5px #999; /* width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; */ } .webnots-notification-box:before { font-family: FontAwesome; font-size: 21px; left: 14px; position: absolute; } .webnots-success { background-color: #2ecc71; } .webnots-success:before { content: "f00c"; margin-left: -2px; } .webnots-failure { background-color: #e74c3c; } .webnots-failure:before { content: "f00d"; } .webnots-warning { background-color: #e67e22; } .webnots-warning:before { content: "f12a"; margin-left: 5px; } .webnots-information { background-color: #3498db; } .webnots-information:before { content: "f129"; margin-left: 4px; } .webnots-question { background-color: #f1c40f; } .webnots-question:before { content: "f128"; margin-left: 2px; } .webnots-tip { background-color: #16a085; } .webnots-tip:before { content: "f0eb"; margin-left: 2px; } .webnots-notice { background-color: #bea474; } .webnots-notice:before { content: "f0a1"; margin-left: -1px; }

¿Cómo agregar cuadros de mensajes de información en el sitio de Weebly?

Edición del archivo CSS principal en Weebly

Una vez que haya agregado el código CSS, vaya a la página en la que desea agregar el cuadro de mensaje de información. Copie y pegue el siguiente código HTML arrastrando un elemento " Código incrustado ":

<div class="webnots-information webnots-notification-box">This is the info box - You can input as much or as little information!</div> <div class="webnots-question webnots-notification-box">This is the help box - You can input as much or as little information!</div> <div class="webnots-tip webnots-notification-box">This is the tip box - You can input as much or as little information!</div> <div class="webnots-notice webnots-notification-box">This is the notice box - You can input as much or as little information!</div> <div class="webnots-success webnots-notification-box">This is the success box - You can input as much or as little information!</div> <div class="webnots-failure webnots-notification-box">This is the danger box - You can input as much or as little information!</div> <div class="webnots-warning webnots-notification-box">This is the warning box - You can input as much or as little information!</div>

Cada etiqueta

… </ div> cubre diferentes tipos de mensajes. Por ejemplo, para agregar un cuadro de éxito, simplemente agregue el siguiente código HTML:
<div class="webnots-success webnots-notification-box">This is the success box - You can input as much or as little information!</div>

Hemos utilizado la fuente impresionante 4.7 en este ejemplo. Puede usar la versión 5 o 6 reemplazando el CSS y las clases correspondientes en el HTML.

2 Cuadro de mensaje de información con imágenes de iconos

El segundo estilo de cuadros de mensaje utiliza imágenes pequeñas en lugar de iconos de fuentes y se verá a continuación:

¿Cómo agregar cuadros de mensajes de información en el sitio de Weebly?

Este widget necesita las siguientes cuatro imágenes de iconos, haga clic con el botón derecho y descargue las imágenes a su PC local.

Cargue las imágenes en "Tema> Editar HTML / CSS> Activos> Cargar archivo (s)…" de su sitio Weebly. La ruta del archivo de una imagen Weebly cargada será como " https://your-site-name.com/files/theme/info.png ". Alternativamente, puede hacer clic derecho en el archivo cargado y obtener la ruta de archivo correcta de esa imagen.

Una vez que tenga la ruta de archivo correcta de las imágenes cargadas, agregue el siguiente código CSS en su archivo "main.less". No olvide actualizar las URL de las imágenes con las URL de las imágenes de su sitio Weebly.

.info_alert { background-image: url(https://img.webnots.com/2015/10/info.png); border: 1px solid #CCCCCC; background-color: #E0E0E0; padding: 15px 15px 15px 45px; background-repeat: no-repeat; background-position: 10px 10px; border-radius: 3px; box-shadow: 0px 1px 5px #999; margin: 10px 0px; } .warning_alert { background-image: url(https://img.webnots.com/2015/10/warning.png); border: 1px solid #FE7736; background-color: #FFBD59; padding: 15px 15px 15px 45px; background-repeat: no-repeat; background-position: 10px 10px; border-radius: 3px; box-shadow: 0px 1px 5px #999; margin: 10px 0px; color: white; } .danger_alert { background-image: url(https://img.webnots.com/2015/10/danger.png); border: 1px solid #FF0F0F; background-color: #FF8080; padding: 15px 15px 15px 45px; background-repeat: no-repeat; background-position: 10px 12px; border-radius: 3px; box-shadow: 0px 1px 5px #999; margin: 10px 0px; color: white; } .success_alert { background-image: url(https://img.webnots.com/2015/10/success.png); border: 1px solid #83CD52; background-color: #8DE182; padding: 15px 15px 15px 45px; background-repeat: no-repeat; background-position: 10px 12px; border-radius: 3px; box-shadow: 0px 1px 5px #999; margin: 10px 0px; color: #060; }

Vaya a la página en la que desea agregar el cuadro de mensaje e inserte el siguiente código HTML dentro de un elemento "Código incrustado".

<p class="info_alert">This is an information alert - You can input as much or as little information as you like within this section!</p> <p class="warning_alert">This is an warning alert - You can input as much or as little information as you like within this section!</p> <p class="danger_alert">This is an rejection alert - You can input as much or as little information as you like within this section!</p> <p class="success_alert">This is an acceptance alert - You can input as much or as little information as you like within this section!</p>

Si desea utilizar solo un cuadro, utilice el código correspondiente dentro de las etiquetas

… </ p>.

Nota: Tiene otras dos opciones, en lugar de agregar código CSS en la sección de encabezado de la "Configuración" del sitio. Una es insertar el código debajo del archivo "main.less" y la otra es agregar el código debajo de la sección de encabezado de la página en particular para que sea efectivo solo en esa página. En ambos escenarios, asegúrese de agregar el código dentro de la etiqueta….

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More