El Control deslizante La sección de Pixpa te permite añadir un área visualmente atractiva a tus páginas, a la vez que mejora el SEO. Ya sea que trabajes en una galería, página, carpeta, álbum de clientes o blog, el banner ayuda a definir el tono y a destacar el contenido importante.
En caso de que solo quiera mostrar un mensaje de texto en la parte superior de su sitio web, use el Barra de anuncios. O si desea crear una ventana emergente que aparece cuando los visitantes visitan su sitio web, puede probar el Ventana emergente de marketing.
En este artículo
- ¿Qué es un Banner?
- Agregar banner a una página
- Editar la sección del banner
- Contenido del banner
- Configuración de banner
- Diseño del banner
¿Qué es un Banner?
Un banner se utiliza para mostrar una imagen/presentación de diapositivas/video de banner de ancho completo en la parte superior/inferior de su contenido.
Consulte una demostración en vivo Banner
Agregar sección de banner a una página
- Se puede agregar una sección a una página. Puede agregar una sección a una página ya existente o crear una nueva página dentro de su sitio web.
- En tu pagina, Haga clic en el azul + icono para agregar un Nueva sección a tu página.
- Ahora verá el categorías de sección en el lado izquierdo.
- Elija el Secciones de héroe (1) categoría y haga clic en el Control deslizante pestaña (2) donde puede elegir diferentes diseños de Banner (3) sección.
- Elija cualquier diseño de sección y haga clic en él para agregarlo a su página.
Editar la sección del banner
Si la sección ya está agregada a la página, puedes editarla fácilmente.
- Pase el cursor sobre la sección y haga clic en Contenido editado Botón (1).
- Se abrirá una barra lateral desde donde podrás Editar (2) la sección del banner.
- Haga clic en Guardar (3) botón después de realizar los cambios.
Contenido de la sección del banner
El Pestaña de contenido En la sección Editar Banner puedes agregar y personalizar el contenido de tu banner, ya sea basado en imágenes o videos.
- Tipo de banner
- Diapositivas de imagen
- Diapositivas de vídeo
- Texto y botones del banner
- Texto de banner
- Botón y enlaces
Tipo de banner
Seleccione el tipo de banner. Puede elegir cualquiera de las siguientes opciones:
- Toboganes – Seleccione la opción Diapositivas si desea mostrar imágenes en el banner. Puede agregar varias diapositivas con imágenes en un banner.
- Vídeo Si desea mostrar los videos como diapositivas de banner, seleccione esta opción. Debajo de cada banner, puede agregar varias diapositivas de video.
Puede agregar hasta 25 diapositivas dentro de una sección de banner.
Diapositivas de imagen
Cuando se selecciona Diapositivas en Tipo de banner, puede crear una presentación de diapositivas cargando varias imágenes como diapositivas de banner.
- Agregue varias diapositivas haciendo clic en el + Añadir diapositivas .
- Reordenar ellos usando los controladores de arrastre.
- Editar o eliminar diapositivas individuales utilizando los iconos respectivos.
Editar diapositiva de imagen/texto
- Imagen
- Haga clic en el elemento Cargar botón para cambiar la imagen/diapositiva. Haga clic en el Eliminar botón para eliminar la diapositiva.
- Cambie el punto focal de la imagen simplemente haciendo clic en la imagen en cualquier lugar.
- Imagen móvil – Sube una imagen de banner para dispositivos móviles. Te recomendamos que agregues imágenes en formato vertical aquí.
- Especificar el texto alternativo para la diapositiva de la imagen. Esto ayuda para propósitos de SEO.
- Texto de diapositiva – Introduzca el texto de la diapositiva que aparecerá sobre la diapositiva. Puede poner el texto en negrita, cursiva, subrayado, vincularlo y hacer mucho más.
Ver también: El editor de texto Pixpa.
- Enlace deslizante
-
- Haga clic en el icono de configuración e ingrese el enlace de superposición para la diapositiva.
- Puede especificar cualquier página dentro/fuera de su sitio web, su correo electrónico o un número de contacto.
También verifique: Vincular texto/botón
- Botón & Enlaces
-
- Agregue hasta 10 botones/enlaces al contenido de la diapositiva.
- Puede agregar un botón normal, un enlace de texto o usar una imagen/icono como botón.
También verifique: Botón y enlaces
- Haga clic en el botón Guardar para guardar los cambios.
La diapositiva completa se convertirá en enlace sólo cuando Texto de banner y botones La opción está seleccionada como Diferente para cada diapositiva.
Diapositivas de vídeo
Cuando la característica Diapositiva de vídeo Si selecciona esta opción, puede insertar un video de YouTube o Vimeo en su banner. Las siguientes opciones de configuración están disponibles:
1. Enlace de YouTube/Vimeo – Introduce un enlace directo a tu vídeo. Formatos compatibles:
- YouTube: https://www.youtube.com/watch?v=XXXXXXXXXXX
- Vimeo: https://vimeo.com/XXXXXXXXXXX
2. Mostrar vídeo – Elige cómo aparecerá el vídeo en tu sitio:
- Reproducción automática: El vídeo se insertará directamente y se reproducirá automáticamente en todos los dispositivos (silenciado por defecto).
- Reproducción automática – Solo para escritorio: El vídeo se insertará directamente y se reproducirá automáticamente solo en ordenadores de escritorio (silenciado por defecto).
- Abrir en Lightbox: Al hacer clic en la vista previa del vídeo, este se abrirá en una ventana emergente.
3. Imagen móvil – Sube una imagen de respaldo que aparezca en dispositivos móviles donde la reproducción automática de video podría no funcionar o no ser compatible. Esto garantiza que tu banner sea visualmente atractivo en todos los tamaños de pantalla.
4. Especificar la etiqueta Alt (opcional) Añade una etiqueta Alt para mejorar el SEO y la accesibilidad. Esta etiqueta describe la imagen de respaldo para lectores de pantalla o en casos donde la imagen no se puede mostrar.
5. Texto de diapositiva – Introduzca el texto de la diapositiva que aparecerá sobre la diapositiva. Puede poner el texto en negrita, cursiva, subrayado, vincularlo y hacer mucho más.
Ver también: El editor de texto Pixpa
6. Enlace deslizante
- Haga clic en el icono de configuración e ingrese el enlace de superposición para la diapositiva.
- Puede especificar cualquier página dentro/fuera de su sitio web, su correo electrónico o un número de contacto.
También verifique: Vincular texto/botón
7. Botón & Enlaces
- Agregue hasta 10 botones/enlaces al contenido de la diapositiva.
- Puede agregar un botón normal, un enlace de texto o usar una imagen/icono como botón.
También verifique: Botón y enlaces
8. Guardar – Haga clic en el botón Guardar botón para guardar los cambios
Texto de banner y botones
- Especifique si el texto y los botones serán iguales para todas las diapositivas o diferentes para cada diapositiva. Cuando seleccionas el Lo mismo para todas las diapositivas opción, la Texto de banner y Botones se utilizará.
- Cuando haya seleccionado el Diferente para cada diapositiva opción, se usarán el texto y los botones especificados para una diapositiva en particular.
Texto de banner
- Ingrese el texto del banner que será común para todas las diapositivas.
Ver también: El editor de texto Pixpa
Botones y enlaces
- Estos botones/enlaces aparecen sobre las diapositivas de su banner (comunes para todas las diapositivas).
También verifique: Botón y enlaces - Después de realizar los cambios, haga clic en el botón Guardar Botón en la parte superior derecha para aplicarlos a tu banner.
Configuración de banner
En la pestaña Configuración de banner, obtendrá las siguientes opciones:
- Modo de visualización de pancartas
- Controles de visualización de diapositivas
- Estilo de banner
- Elemento Carrusel
- Botones
- Iconos Sociales
Modo de visualización de pancartas
-
- Escalar y ajustar – Las imágenes se ajustarán al ancho y alto del banner.
- Ajustar al ancho (Solo para escritorio): las imágenes se escalarán al ancho del banner. La altura del banner heredará la altura de la imagen.
- Altura del escritorio de la pancarta – Especifique la altura del banner de escritorio si ha elegido el sangrado completo or escalar y ajustar opción en el campo Modo de visualización.
- Banner Móvil Altura – Especifique la altura del banner móvil.
Controles de visualización de diapositivas
Estos ajustes permiten personalizar la forma en que aparecen y se realizan las transiciones de las diapositivas dentro de la sección del banner.
-
Estilo de transición de diapositivas – Elige cómo deben cambiar las diapositivas. Puedes seleccionar opciones como Desteñir, Tobogán horizontal o tobogán vertical para una transición suave entre diapositivas.
-
Diapositivas por fila – Especifique cuántas filas de diapositivas deben ser visibles a la vez.
- Diapositivas por columna – Define cuántas columnas de diapositivas deben aparecer. Esto controla cuántas diapositivas aparecen una junto a la otra en cada fila.
- Espacio entre diapositivas – Ajuste el espacio entre diapositivas con esta configuración. Puede aumentar el espaciado en píxeles para controlar la separación visual entre diapositivas.
- Posición del contenido – Especifica la posición del contenido dentro del banner.
- Ancho del contenido – Especifique el ancho del contenido del banner.
Estilo de banner
- Color de Fondo: – Establezca el color de fondo para el banner.
- Color de superposición – Establezca el color de superposición para el banner.
- Estilo de navegación – Especificar el estilo de navegación del banner. Puede seleccionar entre Chevron, Flechas largas y Flechas cortas. Seleccione Ninguno si desea desactivar los controles de navegación.
- Color de navegación – Especifique el color de los controles de navegación en el banner.
- Habilitar flecha de desplazamiento hacia abajo – Seleccione esta opción para mostrar una flecha de desplazamiento hacia abajo sobre el banner.
- Radio de Esquina Personaliza la redondez de las esquinas de la diapositiva del banner. Puedes aplicar el mismo radio a todas las esquinas o especificar valores diferentes para cada una individualmente.
Elemento Carrusel
Estos ajustes definen cómo se mueven y comportan automáticamente las diapositivas dentro de la sección del banner o carrusel.
- Habilitar desplazamiento suave – Activa esta opción para que las transiciones de diapositivas sean más suaves y lograr un efecto de desplazamiento perfecto.
- Habilitar la reproducción automática de diapositivas – Cuando esté habilitada, la transición entre diapositivas será automática sin interacción del usuario.
- Mostrar el progreso de la reproducción automática – Muestra un indicador visual que muestra el tiempo restante antes de la siguiente transición de diapositiva.
- Retraso de reproducción automática – Establezca el intervalo de tiempo entre las transiciones de diapositivas automáticas (por ejemplo, cada 4 segundos).
- Bucle de carrusel – Habilita esta opción para que las diapositivas vuelvan continuamente a la primera después de la última.
Botones
Estas opciones permiten personalizar los botones que se muestran en el banner.
- Tamaño del botón – Seleccione el tamaño del botón entre las opciones disponibles, como pequeño, mediano o grande.
- Alineación - Configure la alineación del botón dentro de la sección (izquierda, centro o derecha).
- Espacio entre botones – Ajusta el espaciado horizontal entre los botones para lograr una distribución equilibrada.
- Espacio encima de los botones – Define el espacio vertical entre el texto y los botones (medido en píxeles).
- Tamaño del enlace de texto – Establece el tamaño de fuente para cualquier botón o enlace basado en texto.
- Tamaño del botón de imagen – Ajusta el tamaño de los botones que incluyen iconos o imágenes.
- Ancho del botón – Elige el ancho en que aparecerá el botón, con opciones como predeterminado, grande, extra grande o ancho completo.
Obtenga más información sobre cómo diseñar botones y enlaces.
Iconos Sociales
Estos ajustes permiten personalizar la apariencia y el estilo de los iconos de redes sociales que se muestran en la sección del banner.
- Tamaño del icono – Ajusta el tamaño de los iconos de redes sociales (en píxeles) para que se adapten al diseño general del banner.
- Tipo de icono – Elige el estilo de icono (por ejemplo, Clásico, Contorno o Sólido) que mejor se adapte al tema del banner.
- Color del icono – Seleccione cómo se define el color del icono. Las opciones incluyen:
- Texto del enlace – Utiliza el mismo color que el texto del enlace de la sección.
- Personalizado - Permite la selección manual de un color personalizado.
- Color de la marca – Aplica el color de marca oficial de cada plataforma (por ejemplo, azul para Facebook).
- Seleccionar color – Cuando se selecciona "Personalizado", esta opción permite elegir un color específico para los iconos.
Diseño del banner
Puedes cambiar fácilmente el diseño de un Banner. Más información sobre los diseños de los banners.
