Cómo crear un banner promocional recurrente con Div

Con la actualización de las opciones de estado del DIV, tiene más control que nunca sobre cómo se muestra su contenido. Puede agregar condiciones a secciones, filas y módulos para mostrar su contenido solo cuando se cumplen los criterios establecidos. Hoy, le mostraremos cómo agregar un banner promocional recurrente en su sitio utilizando la condición de tiempo y tiempo de la división. De esta manera, puede configurarlo y olvidarlo, pero sus clientes y clientes lo recuerdan constantemente. ¡Vamos a empezar! Cómo crear un banner promocional recurrente El primer paso tendrá que decidir en qué página (s) desea mostrar el banner recurrente. Para este ejemplo, utilizaremos una página cargada con el paquete de pizzerías artesanales que puede encontrar en el fabricante Divi. Para usar uno de nuestros modelos prefabricados, seleccione el icono Violet + en la división Builder y encuentre el aspecto deseado.

Puede seguir estos pasos independientemente del aspecto que use. Agregue una nueva sección porque este banner solo se mostrará a veces, no desea agregarla a un elemento existente en la página. Querrás una sección completamente nueva para él. Haga clic en el icono azul + azul para agregar una nueva sección a la página. Seleccione el tipo de sección regular en la ventana que aparece.

Esta sección será su banner recurrente. Elija nuevamente la apariencia de su columna, cualquier aspecto que desee tener su banner está bien, pero elegiremos un aspecto de 3 columnas, siendo la columna central la más grande para este ejemplo.

Diseñe su pancarta es una pancarta promocional, por lo que querrá hacer tiempo para que sea atractivo. Estableceremos el fondo en un color notable, usaremos algunas fuentes visibles y resaltaremos cómo el cliente puede aprovechar la oferta. Elija primero un color de fondo, acceda a la configuración de la sección y navegue el fondo en la pestaña de contenido. Usamos el color #B23F19 como fondo. Ayude a las filas cuando las guarde, acceda a la configuración para una fila. Desde allí, haga clic en la pestaña Diseño y las opciones de tamaño. Establezca el ancho y el ancho máximos en 100%. Al hacerlo, el borde verde de la fila se extenderá al borde de la ventana de observación.

Agregue y estilice un módulo de botón y luego haga clic en la tercera columna y agregue un botón con el icono Black +.

Luego haga clic en la configuración del botón y ajuste la URL del botón en la pestaña Contenido. Este debería ser el lugar donde el cliente podrá capitalizar cualquier promoción que tendrá de manera recurrente.

Después de eso, vaya a la pestaña Design y elija usar estilos personalizados para el botón. Su especificidad puede diferir, pero para este artículo queremos que el texto use el mismo #B23F19 que el fondo anterior y luego estableceremos el color de fondo.

Agregue texto a otras columnas Las otras dos columnas de diseño serán el texto promocional para el banner recurrente y simplemente usará un módulo de texto estándar para lograrlo.

En la primera columna, agregará el texto del encabezado que indica el nombre de la promoción. En este caso, Pizza Friday.

Luego ingrese la pestaña de diseño. Para este diseño especial, elegí el script de Eudora como fuente de título, el peso de la fuente en negrita, 3 como un tamaño del texto y el color del texto blanco con alineación. En la columna central, repita los mismos pasos, use Solo el texto normal para el contenido.


Luego ajuste la configuración como lo hizo anteriormente. En este ejemplo, elegí Poppins como fuente para el texto del texto con el tamaño de la fuente REM 1.5, pero establecemos los otros y el texto promocional.

Ahora que tenemos el banner promocional en sí, ¡vamos a su escenario para repetir! Agregue una posición fija a la sección Banner porque desea que se note, querrá arreglar la sección en la parte superior de la página. Puede hacerlo accediendo a la pestaña avanzada desde la configuración de la sección. Debajo de la posición, seleccione Fix, luego haga clic en el cuadrado en el centro superior para indicar dónde la división debe pegar la sección. También incluimos un índice 99 z para garantizar que la pancarta flote por encima de otros contenidos en la página.

Tenga en cuenta que la sección permanecerá en su lugar en Divi Builder, en lugar de mostrar en la parte superior. Entonces, cuando edite la página, puede colocar la sección en cualquier lugar. Sin embargo, las opciones de posición siempre lo mostrarán en el sitio en vivo. Animar el banner recurrente, también puede ganar la atención del cliente utilizando la función de animación incorporada. Vaya a la pestaña Design y busque las opciones de animación. Para una pancarta recurrente, puede hacer mucho con un simple efecto deslizante. Entonces, seleccione Slide en estilo de animación, establezca la dirección de la animación, luego establezca el retraso de la animación en 500 ms (medio segundo) para que no aparezca inmediatamente como si fuera ningún otro contenido. Un retraso muestra al cliente que es especial y tenga cuidado. Subside la lógica condicional después de tener el conjunto de posicionamiento y animación, es hora de usar la lógica condicional, de modo que se repita el banner promocional recurrente. Estas opciones se pueden encontrar en la sección Configuración, en la pestaña avanzada, en las condiciones. Haga clic en Agregar condición para iniciar.

Desplácese hasta que encuentre la fecha y la hora en el subtítulo de interacción. Luego elija mostrar en ciertos días de la semana en el siguiente menú de caída. Después de elegir solo el día de la semana, el banner promocional aparecerá nuevamente.

Guardar cambios y se completa la promoción recurrente. Lo preparas ahora, para que puedas olvidarlo. ¡Fácil como un pastel (pizza)!

La conclusión utilizando las opciones de condición del DIV, puede crear pancartas promocionales recurrentes que su sitio mostrará solo en un conjunto de circunstancias que elija.No solo debe ser la fecha y la hora, como en este ejemplo.Puede ser tan robusto como puede pensar, porque las opciones de condición permiten una lógica.Pero para un banner promocional recurrente, consulte cuán simple puede ser arreglar una sección en la parte superior de su sitio y luego usar las opciones de división para que se muestre solo un día a la semana.Una vez configurado, no tiene que tocarlo nuevamente si no lo desea. ¿Qué tipo de promociones ejecutará utilizando las opciones de estado de la división y un banner recurrente?Imagen presentada en el artículo de Killroy79 / Shutterstock.com