¿Prefieres que tu banner de cookies esté en el pie de página, en una esquina o justo delante de los visitantes hasta que tomen una decisión? WPConsent te ofrece tres diseños de banner. Cada uno tiene su propio conjunto de opciones de posición.
Esta guía recorre los tres, muestra cómo se ve cada uno y cubre el botón de vista previa que los compara antes de guardar.
Tabla de contenidos
- Elección del diseño del banner
- Uso del diseño de banner largo
- Uso del diseño de banner flotante
- Uso del diseño de banner modal
- Guardar el diseño
- Preguntas frecuentes
Antes de empezar, asegúrate de que WPConsent esté instalado y activado en tu sitio de WordPress.
Requisitos: El diseño de banner modal requiere un nivel de licencia Básico o superior.
Elección del diseño del banner
Para empezar, abriremos la pestaña que configura la forma y la posición del banner.
Desde la barra lateral de administración de WordPress, vaya a WPConsent » Diseño del banner.
La página se abre en la pestaña Diseño, que es la primera de las tres pestañas en la parte superior. Estilo y Contenido la siguen. Los chevrons entre ellas muestran el orden en que el diseñador te guía.
Nuestras guías sobre estilo del banner y contenido y texto del banner cubren esas otras dos pestañas. Esta guía se centra en el diseño.
El panel Configuración de diseño de abajo contiene una sola fila llamada Diseño. Esa fila ofrece tres opciones. Cada tarjeta es un pequeño diagrama de dónde se sitúa el banner en una página.
Una marca verde indica la tarjeta seleccionada. Una instalación nueva comienza con Banner largo.
Banner largo es una barra a lo ancho de la pantalla. Banner flotante es una tarjeta compacta en una esquina. Banner modal es una tarjeta en el centro de la pantalla con la página atenuada detrás.
Si no estás seguro de cuál elegir, Banner largo es la opción más segura para empezar. Una barra a lo largo de un borde cubre la menor parte de tu página.
Antes de repasarlos, vale la pena conocer el botón que muestra tu trabajo. En la parte superior derecha de la página, haz clic en Vista previa.
WPConsent dibuja tu banner sobre la página de administración a tamaño completo. Eso permite juzgar un diseño sin cargar el frontend.
La vista previa sigue las opciones actualmente en pantalla, incluidas las que aún no has guardado. Eso la convierte en una forma rápida de comparar dos diseños uno al lado del otro.
Dibuja el banner sobre tu pantalla de administración en lugar de sobre tu tema. Eso significa que responde dónde se sitúa el banner y cuánto espacio ocupa, no cómo se ve contra tu propio diseño.
Hacer clic en Vista previa por segunda vez la cierra de nuevo, al igual que el pequeño icono de cierre en la esquina superior derecha de la pantalla.
Uso del diseño de banner largo
El banner largo es una barra que se extiende a lo ancho de la pantalla. Como se ajusta a un borde, deja el centro de la página despejado.
Para usarlo, haz clic en la tarjeta Banner largo.
Debajo aparece una fila de Posición con dos opciones, Arriba y Abajo. Para ejecutar la barra a lo largo del pie de la pantalla, haz clic en Abajo.
La inferior es la más discreta de las dos, ya que deja tu encabezado y cualquier imagen principal intactos. La superior coloca la misma barra encima de tu encabezado, lo que hace que sea lo primero que ve un visitante.
En la vista previa, la barra se extiende de borde a borde por la parte inferior de la pantalla. El mensaje se sitúa a la izquierda y los botones a la derecha.
Al ocupar todo el ancho, la barra tiene espacio para colocar el mensaje y los botones en una sola línea. En una pantalla estrecha, como la de un teléfono, se apilan en su lugar, con el mensaje encima de los botones.
Uso del diseño de banner flotante
El Banner Flotante es una tarjeta compacta que se sitúa en una esquina y deja el resto de la página a la vista. Ocupa el menor espacio de las tres.
Para usarlo, haz clic en la tarjeta Banner Flotante.
La fila Posición ahora ofrece cuatro esquinas en lugar de dos bordes. Estas son Superior Izquierda, Superior Derecha, Inferior Izquierda e Inferior Derecha. Para colocar la tarjeta en la parte inferior derecha, haz clic en Inferior Derecha.
En la vista previa, la tarjeta se sitúa justo dentro de la esquina inferior derecha y el resto de la página permanece visible. El pequeño espacio que mantiene con ambos bordes es lo que hace que parezca flotante en lugar de fijada.
La elección de la esquina merece una reflexión. Cualquiera que elijas es la esquina que tu banner compartirá con cualquier otro elemento flotante, como un widget de chat.
En una pantalla estrecha, la tarjeta se ensancha hasta ocupar todo el ancho y se alinea con su esquina. Esto mantiene los botones de un tamaño cómodo en un teléfono.
Uso del diseño de banner modal
El Banner Modal coloca la tarjeta en el centro de la pantalla y atenúa la página detrás de ella. Esto pone la elección directamente delante del visitante, sin que nada más en la página compita por su atención.
Para usarlo, haz clic en la tarjeta Banner Modal.
No aparece ninguna fila de Posición para este diseño, ya que la tarjeta se centra en la pantalla.
En la vista previa, la tarjeta se sitúa en el centro de la pantalla y la página detrás de ella aparece atenuada.
La tarjeta contiene el mismo mensaje y los mismos botones que los otros dos diseños. Cambiar a él modifica dónde leen los visitantes tu texto, no lo que dice.
Guardar el diseño
Tu diseño y su posición se guardan juntos al guardar. En la parte inferior derecha del panel, haz clic en Guardar y Continuar.
Eso guarda ambas configuraciones. Luego te lleva a la pestaña Estilo, que es el siguiente paso en el diseñador. Ese movimiento es la forma de saber que el guardado se realizó correctamente.
El botón Guardar en la parte superior derecha de la página guarda el mismo par de configuraciones y te deja en la pestaña Diseño. Ese es el que debes usar cuando el diseño es lo único que viniste a cambiar aquí.
¡Eso es todo! Tu banner de consentimiento ahora utiliza el diseño y la posición que elegiste.
A continuación, consulta nuestra guía sobre estilo del banner para alinear los colores, fuentes y formas de los botones del banner con tu tema.
Preguntas frecuentes
A continuación, respondemos a algunas de las preguntas más comunes sobre los diseños de banners.
¿Qué diseño se selecciona antes de que yo cambie nada?
Banner Largo. Ahí es donde comienza la fila Diseño hasta que elijas otro.
¿Por qué no puedo seleccionar la tarjeta Banner Modal?
El diseño del Banner Modal viene con una versión de pago de WPConsent. En la versión gratuita, su tarjeta aparece atenuada y lleva una insignia Pro en la esquina. Hacer clic en ella abre una nota de actualización en lugar de seleccionar el diseño.
¿Es el Banner Flotante lo mismo que el Botón de Configuración?
No. El Banner Flotante es el propio banner de consentimiento, mostrado en una esquina en lugar de a lo ancho de la página. El Botón de Configuración es un control separado que permanece en tu sitio después de que el banner se descarta. Los visitantes lo usan para reabrir sus elecciones. Tiene su propio interruptor en WPConsent » Configuración. Nuestra guía sobre el botón de consentimiento flotante lo cubre.
¿Cambiar el diseño afecta mis colores o mi texto?
No. La pestaña Diseño guarda tu diseño y su posición y nada más. Los colores, fuentes y formas de los botones se encuentran en la pestaña Estilo. Cada texto se encuentra en la pestaña Contenido. Ambos sobreviven a un cambio de diseño.
¿Por qué no veo una fila de Posición para el Banner Modal?
El Banner Modal se centra automáticamente, por lo que WPConsent oculta la fila de Posición mientras ese diseño está seleccionado. Si guardas con Banner Modal y luego vuelves a cambiar a Largo o Flotante, elige la posición que desees de nuevo antes de guardar.
¿Cómo se verá mi banner en un teléfono?
Los tres diseños se adaptan a la pantalla. La barra larga apila su mensaje encima de sus botones. La tarjeta flotante se ensancha hasta el ancho completo de la pantalla y se coloca al ras en su esquina. La tarjeta del Banner Modal llena la mayor parte de la pantalla mientras permanece centrada.
¿Puedo usar un diseño diferente en páginas diferentes?
No. Un diseño se aplica en todo tu sitio. Si necesitas que el banner se mantenga alejado de páginas particulares o de usuarios conectados, las Reglas para Ocultar Banner lo hacen en su lugar. Nuestra guía sobre configuración avanzada las cubre.
¿Por qué no puedo cambiar el diseño?
Activar IAB TCF mantiene el diseño en Banner Modal, porque esa es la forma que TCF solicita. Un aviso encima de la fila lo indica y enlaza de nuevo a la configuración de TCF. Nuestra guía sobre soporte IAB TCF cubre esa configuración.