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ás opciones como Banner, Banner carrusel completo, Banner deslizador de imágenes horizontal, Banner deslizador de doble imagen, Banner cuadrícula bento, y más.
Elige tu estilo de 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, copia mínima: Anuncios de lanzamiento, revelaciones de productos o declaraciones de marca donde un titular impactante y un fondo cuentan la historia.
Enfocando la atención: Dirigiendo a los visitantes hacia una acción principal como “Comenzar” o “Reservar ahora” sin distracciones visuales.
Presentación de marca sin interrupciones: Mezclando el encabezado de tu página en una sola imagen hero inmersiva para un aspecto simplificado y cohesivo.
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.
Imagen alternar
Activa la imagen (imagen/video de fondo) si deseas que haya medios detrás de tu texto.
Si está habilitado, verá el selector de Imagen/Video a continuación.
Botones
Active en Botones para agregar un llamado a la acción.
Haga clic en Agregar botón +, luego establezca el Etiqueta y 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 del menú desplegable ajusta cuán oscura o clara es la superposición para mejorar la legibilidad del texto.
El desenfoque de imagen/video aplica un efecto de suavidad detrás de tu texto.
Tamaño del texto
Encabezado: elige Pequeño, Mediano, Grande o Extra Grande.
Subtexto: elige Pequeño, Mediano o Grande.
Espaciado
Superior y Inferior padding (Pequeño, Medio, Grande).
Altura mínima: selecciona 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).
BORDER
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 Banner Completo
Carrusel de Banner Completo
Opta por Banner Carousel Full cuando tengas múltiples mensajes clave o visuales que quieras mostrar en secuencia. Los escenarios ideales incluyen:
Destacar características: Rotar a través de los beneficios del producto, las ofertas de servicio o los resúmenes de estudios de caso, cada uno con su propio título y subtítulo.
Contar historias en capítulos: Contar una narrativa de múltiples pasos como “Plan → Construir → Crecer” con cada diapositiva cubriendo un paso.
Maximizando bienes raíces: Usando diapositivas de ancho completo para mantener tu sección principal dinámica y atractiva, especialmente cuando tienes de 3 a 5 visuales fuertes para compartir.
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.
Título
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 de carrusel
Arrastra y suelta para reordenar hasta 5 diapositivas.
Haz clic en el icono de lápiz en cualquier diapositiva para cambiar su imagen, pie de foto o texto alternativo.
Haz 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.
Haz clic en Agregar botón +, luego establece tu 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.
Desvanecer: Activa para aplicar un sutil desvanecimiento entre las diapositivas.
Tamaño de texto
Encabezado: elige Pequeño, Mediano, Grande o Extra Grande.
Subtexto: elige Pequeño, Mediano o Grande.
Espaciado
Superior y Inferior relleno: Pequeño, Mediano, Grande.
Altura mínima: Contenido (se ajusta alrededor del texto) o Pantalla (rellena el área visible 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.
BORDER
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 de banner (horizontal)
Control deslizante de imágenes de 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: Permitiendo a los usuarios deslizar o hacer clic a través de una galería de 6 a 10 imágenes—ideal para portafolios, testimonios de clientes o galerías de antes y después.
Mensajería en capas: Superponiendo titulares concisos y CTAs en cada diapositiva, mientras se mantiene la altura del slider moderada para un acceso más rápido a la página.
Descubrimiento interactivo: Fomentando la participación del usuario a través de controles de desplazamiento manual, ideal cuando los visitantes necesitan explorar opciones a su propio ritmo.
Contenido Tab
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.
Título
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.
Haz clic en el ✎ icono de editar en una diapositiva para intercambiar su imagen, actualizar el texto alternativo o cambiar el pie de foto.
Haz clic en el 🗑️ icono de la papelera para eliminar una diapositiva no deseada.
Para añadir más, haz 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 Agregar botón +, luego especifique:
Etiqueta (por ejemplo, “Explora Nuestros Servicios”)
Tipo de enlace (sección, página, URL externa, teléfono o correo electrónico)
Consejo: Mantén 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 de 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: Alinee 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: elige 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 de la ventana de visualización).
Animaciones
Elige cómo animar las diapositivas: Desde el tema, Desvanecer, Deslizar o Acercar.
Divisor
Activa on para insertar un divisor decorativo SVG debajo del control deslizante.
BORDER
Active on para agregar un contorno sutil alrededor de cada diapositiva.
Consejo profesional: Una velocidad de desplazamiento automática moderada con un simple botón de “Explorar” a menudo produce el mejor compromiso.
Banner Doble Deslizador de Imágenes (Vertical)
Banner Doble Deslizador de Imágenes (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:
Juxtaponiendo visuales de antes/después o problema/solución
Destacando características emparejadas (por ejemplo, “Soporte en el sitio” junto a “Monitoreo 24/7”).
Manteniendo la altura de una sección de héroe mientras se les ofrecen a los visitantes múltiples imágenes de alto 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.
Título
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 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 de 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 de contenido: Alinear texto y botones Izquierda, Centro o Derecha sobre las diapositivas.
Tamaño de texto
Encabezado: elige Pequeño, Mediano, Grande o Extra Grande.
Subtexto: elige 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
Elija cómo se animan las diapositivas: Desde el tema, Desvanecer, Deslizar o Acercar.
Carrusel de Banner
Carrusel de Banner
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:
Contar historias en etapas (por ejemplo, “Nuestro Proceso” en 3 pasos)
Destacando estudios de caso o piezas del portafolio
Mostrando diversas ofertas de servicios en un héroe compacto
Contenido
Eslogan (opcional)
Descubre Nuestra Experiencia
Haz clic en Generar para sugerencias de IA.
Título
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 página, URL externa, teléfono, correo electrónico), etiqueta y objetivo.
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: elige 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 e inferior (Pequeño/Mediano/Grande) para equilibrio.
Animaciones
Estilo de entrada (por ejemplo, Desde el tema (Desvanecer)) para el título y el subtítulo.
Banner Bento Grid
Banner Bento Grid
Utiliza Banner Bento Grid cuando quieras un diseño limpio de tres imágenes que equilibre un bloque de título/subtexto fuerte con tres visuales de apoyo. Este estilo es perfecto para:
Mostrando Tres Servicios Clave: Presenta tus tres principales ofertas lado a lado.
Destacando Estudios de Caso: Da el mismo espacio a las imágenes de "antes", "durante" y "después" del proyecto.
Presentando miembros del equipo o testimonios: Empareja cada foto con un llamado en una cuadrícula unificada.
Contenido Tab
Eslogan (opcional)
Descubre Nuestra Experiencia
Haga clic en Generar para sugerencias de IA.
Título
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 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.
Layout
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: elige 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 e inferior (Pequeño/Medio/Grande) para equilibrio.
Animaciones
Estilo de entrada (p. ej. Desde el tema (Desvanecer)) para el título y el subtítulo.
Banner Grid
Banner Grid
Utiliza este estilo cuando quieras presentar un título único + subtítulo junto con una rejilla compacta de hasta 3 imágenes, todas visibles a la vez.Es perfecto para:
Mostrando múltiples pilares de servicio uno al lado del otro 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
Contenido
Eslogan (opcional)
Un breve pre-titular acentuado (por ejemplo, “Servicios de TI Expertos”
Haz clic en Generar para sugerencias de IA
Título
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
Reordena mediante el asa 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 (por ejemplo, “Impulsa Tu TI”
Personalizar tipo de enlace (sección de 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 de 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 del Contenido: izquierda, centro o derecha en relación con la cuadrícula
Imagen Sin Bordes: activar/desactivar 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: elige Pequeño, Mediano o Grande.
Espaciado
Superior e Inferior: elige un acolchado Pequeño/Mediano/Grande para espacio de respiración
Altura Mín.
Establecer en Contenido (automático) o Pantalla (pantalla completa)
Divisor / 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 olvides la nueva barra de herramientas de acceso rápido en la parte superior de tu sección
Tenga en cuenta que esta barra de herramientas solo aparece cuando pasa el cursor sobre la sección en el editor de páginas; 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 te permiten experimentar y reorganizar sobre la marcha sin necesidad de profundizar en configuraciones más profundas.