La sección de Banner de Durable viene en múltiples estilos para que puedas hacer coincidir la apariencia y sensación de tu marca.
Aquí tienes cómo agregar y configurar una sección de Banner en el editor de tu sitio web Durable:
Haga clic en Agregar sección +
En tu editor de página, selecciona Agregar sección + en la parte superior o inferior de tu página.
Buscar “Banner”
Escriba Banner en el cuadro de búsqueda.
Verá opciones como Banner, Banner carousel full, Banner image slider horizontal, Banner double image slider, Banner bento grid, y más.
Elija el estilo de su banner
Haz clic en el estilo que prefieras para añadirlo a tu página.Durable insertará ejemplos de titulares, subtítulos e imágenes de marcador de posición.
Banner
Banner
Utiliza la sección Banner cuando desees una imagen (o video) de héroe en negrita y sin desorden, con un solo mensaje claro y una llamada a la acción opcional. Es perfecto para:
Gran impacto, texto mínimo: Anuncios de lanzamiento, presentaciones de producto o declaraciones de marca donde un titular llamativo y el fondo transmiten la historia.
Enfocar la atención: Guiar a los visitantes hacia una única acción principal como “Get Started” o “Book Now” sin distracciones visuales.
Presentación de marca integrada: Fusionando el encabezado de su página en una única imagen principal inmersiva para lograr un aspecto depurado y coherente.
Pestaña de contenido
Aquí es donde editas el texto y decides si usar una imagen/video de fondo.
Eslogan
Línea de acento opcional sobre tu titular principal.
Haz clic en Generar para que Durable sugiera una frase corta.
Título
Tu mensaje principal.
Haz clic en Regenerar para probar diferentes titulares o escribe el tuyo.
Subtexto
Detalles de apoyo bajo su titular.
Haga clic en Regenerar para nuevas sugerencias de texto o ingrese texto personalizado.
Alternar imagen
Activa la imagen (imagen/video de fondo) si deseas que haya medios detrás de tu texto.
Si está habilitado, verá el selector Imagen/Video a continuación.
Botones
Active en Botones para agregar un llamado a la acción.
Haga clic en Agregar botón +, luego configure la Etiqueta y el Tipo de enlace (página, sección, correo electrónico, teléfono o URL externa).
Pestaña de estilo
Ajusta el aspecto, el diseño y el comportamiento del fondo y el texto de tu banner.
Colores
Haga clic en Cambiar para elegir los colores de fondo y de texto de su paleta de tema o ingrese un código hexadecimal personalizado.
Imagen/video de fondo
Si está habilitado en Contenido, verá esta opción aquí.
Posición los deslizadores te permiten mover la imagen horizontal y verticalmente.
Superposición desplegable ajusta qué tan oscuro o claro es la superposición para mejorar la legibilidad del texto.
Desenfoque de imagen/video aplica un efecto de suavidad detrás de su texto.
Tamaño del texto
Encabezado: elige Pequeño, Mediano, Grande o Extra Grande.
Subtexto: Seleccione Pequeño, Mediano o Grande.
Espaciado
Superior y Inferior padding (Pequeño, Medio, Grande).
Altura mínima: seleccione Contenido (se ajusta al texto) o Pantalla (llena la ventana del navegador).
Alineación horizontal
Alinea tu texto a la izquierda, al centro o a la derecha dentro del banner.
Divisor
Activa on para agregar un divisor decorativo en la parte inferior del banner (haz clic en Cambiar para elegir un estilo).
Frontera
Active on para envolver el banner en un contorno.
Animaciones
Elija cómo aparecen los elementos del banner al desplazarse: Desde el tema (Desvanecer), Desvanecer, Acercar o Deslizar.
Combinar con encabezado
Active on para mezclar sin problemas el fondo del banner en el encabezado de tu sitio.
Carrusel de Banners Completo
Carrusel de Banners Completo
Opta por Banner Carousel Full cuando tengas múltiples mensajes clave o visuales que quieras mostrar en secuencia. Los escenarios ideales incluyen:
Funciones destacadas: Rotando entre los beneficios del producto, las ofertas de servicio o las instantáneas de estudios de caso, cada una con su propio titular y subtítulo.
Narrativa en capítulos: Contar una narrativa de varios pasos como “Plan → Build → Grow” con cada diapositiva cubriendo un paso.
Aprovechar al máximo el espacio: Usar diapositivas de ancho completo para mantener su sección principal dinámica y atractiva, especialmente cuando tenga 3–5 elementos visuales potentes para compartir.
Pestaña de contenido
Utiliza esta pestaña para editar el texto de tu carrusel, seleccionar imágenes y activar o desactivar botones.
Eslogan
Una breve línea de acento sobre tu titular.
Haz clic en Generar para sugerir automáticamente una frase corta.
Titular
El mensaje principal de tu carrusel rotatorio.
Haz clic en Regenerar para probar nuevas ideas de titulares.
Subtexto
Detalles de apoyo debajo del titular.
Haz clic en Regenerar para nuevas sugerencias o ingresa las tuyas.
Imágenes del carrusel
Arrastra y suelta para reordenar hasta 5 diapositivas.
Haga clic en el icono de lápiz de cualquier diapositiva para cambiar su imagen, leyenda o texto alternativo.
Haga clic en el icono de la papelera para eliminar una diapositiva.
Botones
Activa on para mostrar un botón de llamada a la acción debajo de tu carrusel.
Haga clic en Agregar botón +, luego configure su Etiqueta y Tipo de enlace (página, sección, correo electrónico, teléfono o URL externa).
Pestaña de estilo
Ajusta la apariencia y el comportamiento de las imágenes, el texto y el diseño de tu carrusel.
Colores
Haz clic en Cambiar para elegir los colores de fondo y texto de tu tema o paleta personalizada.
Estilo de botón
Haga clic en Cambiar para elegir entre los estilos de botón preestablecidos de Durable (relleno, contorno, píldora, etc.).
Estilo de imagen
Superposición: Ajustar la superposición de oscuridad/claridad en cada diapositiva.
Desenfoque de imagen: Aplica un desenfoque suave detrás del texto para mejorar la legibilidad.
Fundido: Actívalo para aplicar un sutil fundido cruzado entre las diapositivas.
Tamaño del texto
Encabezado: elige Pequeño, Mediano, Grande o Extra Grande.
Subtexto: Seleccione Pequeño, Mediano o Grande.
Espaciado
Superior y Inferior relleno: Pequeño, Mediano, Grande.
Altura mínima: Contenido (se ajusta al texto) o Pantalla (ocupa la ventana de visualización del visitante).
Alineación de contenido
Alinee el texto y los botones a la izquierda, al centro o a la derecha sobre el carrusel.
Divisor
Active on para agregar una forma decorativa entre tu carrusel y la siguiente sección.
Frontera
Active on para envolver cada diapositiva en un contorno sutil.
Animaciones
Selecciona cómo se animan las diapositivas (Desde el tema, Desvanecer, Deslizar, Acercar).
Combinar con encabezado
Activa on para combinar sin problemas la primera diapositiva del carrusel con el encabezado de tu sitio para un efecto de estilo héroe.
Control deslizante de imágenes del banner (horizontal)
Control deslizante de imágenes del banner (horizontal)
Elige el estilo Banner Image Slider Horizontal para un carrusel de desplazamiento lateral que combina imágenes y texto en un espacio más compacto. Mejor para:
Exploración visual: Permitir que los usuarios deslicen o hagan clic para recorrer una galería de 6–10 imágenes—ideal para portafolios, testimonios de clientes o galerías de antes-&-después.
Mensajería en capas: Superponer titulares concisos y CTAs en cada diapositiva, manteniendo la altura del carrusel moderada para un acceso más rápido a la página.
Descubrimiento interactivo: Fomentar la participación del usuario mediante controles de desplazamiento manual, ideal cuando los visitantes necesitan examinar las opciones a su propio ritmo.
Pestaña de contenido
Aquí es donde gestionas el texto, las imágenes y los botones de tu deslizador.
Eslogan
Una línea de acento corta sobre tu titular.
Haga clic en Generar para obtener eslóganes sugeridos por IA.
Titular
El mensaje principal que aparece sobre tu deslizador.
Haz clic en Regenerar para probar nuevas ideas de titulares.
Subtexto
Texto de apoyo debajo del titular.
Haga clic en Regenerar para actualizar la sugerencia o escriba la suya.
Imágenes del carrusel
Arrastra y suelta hasta 10 imágenes en la lista para definir tus diapositivas.
Haga clic en el ✎ icono de editar en una diapositiva para reemplazar su imagen, actualizar el texto alternativo o cambiar el pie de foto.
Haga clic en el 🗑️ icono de la papelera para eliminar una diapositiva no deseada.
Para agregar más, haga clic en Agregar imagen +.
Botones
Activa on para mostrar un botón de llamada a la acción debajo de tu deslizador.
Haga clic en botón Añadir +, luego especifique:
Etiqueta (p. ej. “Explore Our Services”)
Tipo de enlace (sección, página, URL externa, teléfono, o correo electrónico)
Consejo: Mantenga las etiquetas de los botones concisas para mantener el equilibrio visual.
2. Pestaña de estilo
Utiliza estos controles para ajustar la apariencia y el estilo de tu deslizador.
Colores
Haga clic en Cambiar para seleccionar los colores de fondo, texto y botones de su tema o de una paleta personalizada.
Estilo del botón
Haga clic en Cambiar para elegir la forma (rellena, contorno, píldora) y el comportamiento al pasar el mouse.
Velocidad del carrusel
Seleccione la velocidad a la que las diapositivas se rotan automáticamente: Lento, Normal o Rápido.
Diseño
Posición del carrusel: Elija si las imágenes se desplazan horizontalmente (desplazamiento lateral) o verticalmente (de arriba hacia abajo).
Alineación del contenido: Alinear el texto y los botones Izquierda, Centro, o Derecha sobre las diapositivas.
Tamaño de texto
Encabezado: elige Pequeño, Mediano, Grande o Extra grande.
Subtexto: Seleccione Pequeño, Mediano, o Grande.
Esquinas redondeadas
Aplica radios de esquina a cada diapositiva (Ninguno, Pequeño, Mediano, Grande o Predeterminado del tema).
Espaciado
Superior y Inferior padding: Pequeño, Mediano o Grande.
Altura mínima: Contenido (altura automática) o Pantalla (altura completa del viewport).
Animaciones
Elige cómo animar las diapositivas: Desde el tema, Desvanecer, Deslizar o Acercar.
Separador
Activa on para insertar un divisor decorativo SVG debajo del control deslizante.
Borde
Active on para agregar un contorno sutil alrededor de cada diapositiva.
Consejo profesional: Una velocidad de desplazamiento automático moderada con un botón sencillo “Explore” suele generar la mayor interacción.
Deslizador de banner de doble imagen (Vertical)
Deslizador de banner de doble imagen (Vertical)
Utiliza este estilo cuando quieras mostrar dos imágenes una al lado de la otra en cada diapositiva, con un titular y un texto secundario superpuestos, además de un llamado a la acción. Ideal para:
Yuxtaponer antes/después o problema/solución visuales.
Resaltar características emparejadas (p. ej. “On-site Support” junto a “24/7 Monitoring”).
Mantener la altura de la sección hero sin dejar de ofrecer a los visitantes múltiples imágenes de gran impacto.
Pestaña de contenido
Eslogan (opcional)
Texto corto con acento sobre tu encabezado (“Socio de TI de confianza”).
Haz clic en Generar para sugerencias de IA.
Encabezado
Mensaje principal (“Soporte de TI confiable para empresas de Burnaby”).
Haz clic en Regenerar para probar nuevos enfoques.
Subtexto
Descripción de dos o tres líneas debajo del titular.
Empoderando a las empresas de Burnaby con soluciones de TI confiables para operaciones sin interrupciones y una mayor eficiencia.Asóciese con P3Cloud Consulting hoy.
Imágenes del carrusel
Hasta 10 pares de imágenes; cada diapositiva muestra dos una al lado de la otra.
Utiliza el controlador de arrastre para reordenar, el lápiz para intercambiar, la papelera para eliminar, o Agregar imagen + para subir/seleccionar nuevos.
Botones
Activar Agregar un botón.
Personalizar tipo de enlace (sección de la página, URL externa, teléfono, correo electrónico).
Editar etiqueta (“Obtener soporte técnico”) y objetivo (“Sección de contacto” o enlace externo).
Pestaña de Estilo
Colores
Haga clic en Cambiar para seleccionar los colores de fondo, texto y botones de su tema o de una paleta personalizada.
Estilo del botón
Haga clic en Cambiar para elegir la forma (rellena, contorno, píldora) y el comportamiento al pasar el mouse.
Velocidad del carrusel
Seleccione qué tan rápido rotan automáticamente las diapositivas: Lento, Normal o Rápido.
Diseño
Posición del carrusel: Elija si las imágenes se desplazan horizontalmente (desplazamiento lateral) o verticalmente (de arriba hacia abajo).
Alineación del contenido: Alinee el texto y los botones a la Izquierda, al Centro, o a la Derecha en las diapositivas.
Tamaño del texto
Encabezado: elige Pequeño, Mediano, Grande o Extra Grande.
Subtexto: seleccione Pequeño, Mediano o Grande.
Esquinas redondeadas
Aplica radios de esquina a cada diapositiva (Ninguno, Pequeño, Mediano, Grande o predeterminado del tema).
Espaciado
Superior y Inferior padding: Pequeño, Mediano o Grande.
Altura mín.: Contenido (altura automática) o Pantalla (altura completa del viewport).
Animaciones
Elija cómo se animan las diapositivas: Desde el tema, Desvanecer, Deslizar o Acercar.
Carrusel de banners
Carrusel de banners
Utiliza este estilo cuando quieras recorrer múltiples imágenes de ancho completo con un solo encabezado y superposición de texto secundario, permitiendo a los visitantes deslizarse o avanzar automáticamente a través de tus mensajes principales. Ideal para:
Narrativa en etapas (p. ej., “Our Process” en 3 pasos)
Resaltar estudios de caso destacados o piezas del portafolio
Mostrando diversas ofertas de servicios en un hero compacto
Pestaña de contenido
Eslogan (opcional)
Descubre Nuestra Experiencia
Haz clic en Generar para sugerencias de IA.
Encabezado
Llamada principal (“Avance con Consultoría Estratégica de TI”).
Haz clic en Regenerar para probar diferentes redacciones.
Subtexto
Descripción de apoyo bajo el titular.
Eleva el potencial de tu negocio con servicios de consultoría de TI expertos adaptados para satisfacer tus necesidades únicas en Burnaby, BC.
Imágenes del carrusel
Selecciona hasta 10 imágenes, cada una llenará la mitad derecha (o el ancho completo en móvil) en secuencia.
Reordena mediante el mango de arrastre, intercambia mediante el ícono de lápiz, elimina mediante la papelera, o Añadir imagen + para subir/escoger nuevas.
Botones
Active Añadir un botón para mostrar un CTA (“Obtener soporte técnico”).
Personalizar tipo de enlace (sección de la página, URL externa, teléfono, correo electrónico), etiqueta y destino.
Pestaña de Estilo
Colores
Cambiar el acento para los puntos de paginación y los resaltados de botones.
Diseño
Alineación de contenido: elige superposición izquierda, centrada o derecha.
Tamaño de texto
Encabezado: elige Pequeño, Mediano, Grande o Extra grande.
Subtexto: seleccione Pequeño, Mediano, o Grande.
Bordes redondeados
Aplica el radio del tema (por ejemplo, Grande) al card de superposición o máscara de imagen.
Espaciado
Rellenos superiores e inferiores (Pequeño/Mediano/Grande) para equilibrar.
Animaciones
Estilo de entrada (por ejemplo, Desde el tema (Desvanecer)) para el título y el subtítulo.
Cuadrícula Bento de Banner
Cuadrícula Bento de Banner
Utilice Banner Bento Grid cuando desee un diseño limpio de tres imágenes que equilibre un bloque sólido de titular/subtexto con tres elementos visuales de apoyo. Este estilo es perfecto para:
Mostrando Tres Servicios Clave: Presenta tus tres principales ofertas lado a lado.
Destacar estudios de caso: Asigne el mismo espacio a las imágenes del proyecto “before,” “during,” y “after”.
Presentando a miembros del equipo o testimonios: Empareje cada foto con un recuadro destacado en una cuadrícula unificada.
Pestaña de contenido
Eslogan (opcional)
Descubre Nuestra Experiencia
Haga clic en Generar para sugerencias de IA.
Encabezado
Llamada principal (“Avance con Consultoría Estratégica en TI”).
Haga clic en Regenerar para probar diferentes redacciones.
Subtexto
Descripción de apoyo debajo del titular.
Eleva el potencial de tu negocio con servicios de consultoría de TI expertos adaptados para satisfacer tus necesidades únicas en Burnaby, BC.
Imágenes del carrusel
Selecciona hasta 10 imágenes, cada una llenará la mitad derecha (o el ancho completo en móvil) en secuencia.
Reordena mediante el controlador de arrastre, intercambia mediante el icono de lápiz, elimina mediante la papelera, o Agregar imagen + para subir/ elegir nuevas.
Botones
Alternar Agregar un botón para mostrar un CTA (“Obtener soporte técnico”).
Personalizar Tipo de enlace (sección de la página, URL externa, teléfono, correo electrónico), Etiqueta, y destino.
Pestaña de Estilo
Colores
Cambiar el acento para los puntos de paginación y los resaltados de botones.
Diseño
Alineación del contenido: elige superposición izquierda, centrada o derecha.
Tamaño del texto
Encabezado: elige Pequeño, Mediano, Grande o Extra grande.
Subtexto: elija Pequeño, Mediano, o Grande.
Esquinas redondeadas
Aplica el radio del tema (por ejemplo, Grande) al card de superposición o máscara de imagen.
Espaciado
Rellenos superior & inferior (Pequeño/Mediano/Grande) para el equilibrio.
Animaciones
Estilo de entrada (p. ej. Desde el tema (Desvanecer)) para el título y el subtítulo.
Cuadrícula de banners
Cuadrícula de banners
Utilice este estilo cuando desee presentar un titular único + subtítulo junto a una cuadrícula compacta de hasta 3 imágenes, todo visible a la vez.Es perfecto para:
Mostrando múltiples pilares de servicio lado-a-lado bajo un mensaje unificador
Presentación de miembros del equipo o clientes clave en un diseño ordenado
Destacando las características del producto con instantáneas visuales rápidas
Pestaña de contenido
Eslogan (opcional)
Un breve pre-titular acentuado (por ejemplo, “Servicios de TI Expertos”
Haz clic en Generar para sugerencias de IA
Titular
Llamada principal (por ejemplo, “Eleva el rendimiento empresarial con TI confiable”
Haz clic en Regenerar para probar diferentes redacciones
Subtexto
Descripción de apoyo bajo el titular
Optimiza tus operaciones con P3Cloud Consulting, el socio de confianza de Burnaby para soluciones de TI innovadoras y confiables.Experimente la excelencia hoy.
Imágenes en cuadrícula
Selecciona hasta 3 imágenes—cada una ocupa una celda de la cuadrícula
Reordene mediante el controlador de arrastre, intercambie mediante el icono de lápiz, elimine mediante la papelera, o Agregar imagen + para subir/seleccionar nuevas
Botones
Alternar Agregar un botón para mostrar un CTA (por ejemplo, “Impulsa Tu TI”
Personalizar el tipo de enlace (sección de la página, URL externa, teléfono, correo electrónico), etiqueta y destino
Pestaña de estilo
Colores
Cambiar el acento (“Cc”) para los estados de botón y enfoque
Estilo del botón
Elige entre Estilo 1 o Estilo 2 para tu CTA
Diseño
Posición de la cuadrícula: elige iconos de imagen-izquierda, imagen-derecha, imagen-arriba o imagen-abajo
Alineación de contenido: izquierda, centro, o derecha en relación con la cuadrícula
Imagen sin bordes: alternar apagado/encendido para eliminar los marcos de la imagen
Esquinas redondeadas
Aplica el radio del tema (Pequeño/Medio/Grande/Extra grande) a las imágenes y la tarjeta de superposición
Tamaño de texto
Encabezado: elige Pequeño, Mediano, Grande o Extra grande.
Subtexto: seleccione Pequeño, Mediano o Grande.
Espaciado
Superior e Inferior: elige un acolchado Pequeño/Mediano/Grande para espacio de respiración
Alt. mínima
Establecer en Contenido (automático) o Pantalla (pantalla completa)
Separador / Borde
Alternar para dibujar una línea delgada o un cuadro alrededor de la sección
Animaciones
Estilo de entrada (por ejemplo, Desde el tema (Desvanecer)) para el titular y la cuadrícula
…y no olvide la nueva barra de herramientas de acceso rápido en la parte superior de su sección
Tenga en cuenta que esta barra de herramientas solo aparece cuando sitúa el cursor sobre la sección en el editor de la página simplemente mueva el cursor sobre la sección para revelar estos botones de acción rápida.
Ícono / Botón | Acción |
Restilo | Aplica instantáneamente una configuración de sección o paleta de colores a esta sección. |
Regenerar imágenes | Sustituir todas las visuales actuales por opciones nuevas obtenidas de IA. |
↑ / ↓ | Mueva esta sección hacia arriba o hacia abajo en la página. |
⋮ (Menú más) | Editar Sección • Duplicar sección• Eliminar sección• |
Estos controles le permiten experimentar y reorganizar sobre la marcha sin necesidad de profundizar en configuraciones más avanzadas.