Los equipos son muy importantes para el éxito de cualquier organización. Reúnen a personas con diversas habilidades, experiencia y perspectivas, creando un entorno dinámico donde se pueden lograr los objetivos.
Utilizando la sección Equipo de Pixpa, puedes mostrar los perfiles y fotos de los miembros de tu equipo, junto con sus respectivos roles y responsabilidades.
En este artículo hablaremos de:
Agregar sección de equipo a la página
- Para agregar una sección, debe añadir una página a su sitio web primero.
- En tu pagina, Haga clic en el azul + icono para agregar un Nueva sección.
- Ahora verá el categorías de sección en el lado izquierdo.
- Desplácese por la Equipo (1) y haga clic en él. Ahora aparecerá una pantalla que le permitirá elegir entre diferentes diseños de la Sección de Equipos (2).
- Elija cualquier diseño de sección y haga clic en él para agregarlo a su página.
Agregar y editar elementos de la lista
Agregar un elemento de lista
- Haga clic en Editar equipos (1) botón para abrir el Panel de elementos de lista.
- Haga clic en el elemento Añadir artículo (2) botón para agregar un nuevo elemento de lista.
- Usted puede optar por Dsubir o eliminar (3) los elementos de la lista.
Editar elemento de la lista
Haga clic en el elemento de la lista que desea editar. Se abrirán las opciones de edición de elementos de la Lista en particular.
Desde aquí, puede:
- Subir/Eliminar imagen primaria y secundaria (1)
Puedes subir un Imagen secundaria junto con la Imagen principal para cada elemento de la lista. Cuando un usuario pasa el cursor sobre el elemento, se mostrará la imagen secundaria, reemplazando la imagen principal. Además, puede configurar la Color de acento de la imagen, que se mostrará al pasar el cursor sobre la imagen. - Agregue un Título (2), Subtítulo (3)y Descripción (4) del elemento de la lista.
- Es posible que no encuentre la opción de subtítulo y descripción en determinados elementos de la lista según el diseño que elija.
Antes de añadir la descripción, compruebe este vídeo .
5. Acción al hacer clic
Puedes personalizar el comportamiento al hacer clic en elementos individuales de la sección Equipo . A continuación se muestran las opciones disponibles:
- Ir a un enlace
Al seleccionar esta opción se abre el Creador de enlaces, lo que le permite agregar un hipervínculo a este elemento. El vínculo puede dirigir a los usuarios a otra página dentro de su sitio web o a una URL externa. Más información ¡Hola! Creador de enlaces. - Abrir en Lightbox
Esta opción muestra el elemento en una imagen ampliada. Lightbox Ver al hacer clic. En este modo, el Subtítulo y Mareas Ideales para Lecciones Los elementos asociados con el elemento no aparecerán en la vista de cuadrícula, pero serán visibles en el modo Lightbox. - No Acción
Seleccione esta opción para que no se pueda hacer clic en el elemento. Cuando se selecciona, hacer clic en el elemento no activará ninguna acción.
6. Abrir enlace en una ventana nueva: Configure el enlace para que se abra en una pestaña nueva o en la misma pestaña. Esta opción solo estará visible cuando se seleccione la opción Ir a un enlace en el menú Acción al hacer clic.
7. Botones y enlaces: Añade cualquier tipo de enlace al elemento de la lista. Puedes añadir un botón, un enlace de imagen, un icono de redes sociales o un enlace de texto. Más información.
8. Anulación del estilo de la tarjeta
Puedes anular la configuración global del estilo de la tarjeta desde la sección " Configuración de estilo" y personalizar la tarjeta de cada elemento individualmente en la sección "Lista de imágenes". Esto te permite aplicar estilos únicos a diferentes elementos de la lista para una mejor personalización.
Obtén más información sobre la opción Tarjetas en la sección dinámica.
9. Guardar: Después de realizar las personalizaciones, guarde los cambios.
Para personalizar las tarjetas de cada artículo por separado, primero debe habilitar la opción Tarjeta en la configuración de estilo.
Elementos de la lista de secuencias
Puedes cambiar fácilmente el orden de los elementos de la lista arrastrándolos y soltándolos . Mira cómo se ordena la lista de elementos de los equipos:
Sección Administrar Elementos del Equipo
La sección Equipo incluye una pestaña Elementos que permite gestionar fácilmente la visibilidad de los distintos elementos dentro de la sección.
Utilizando interruptores de palanca simples, puede habilitar o deshabilitar elementos específicos sin tener que eliminar o modificar los elementos en sí.
- Haga clic en el elemento Elementos (1) pestaña.
- Después de realizar los cambios, presione el botón Guardar Botón (2).
Opciones de sección
- Mostrar título:Habilita o deshabilita la visibilidad del título para la sección Equipo.
- Mostrar Botones:Controla si los botones se muestran en el nivel de sección.
Opciones de artículos
- Mostrar imagen: Alternar la visibilidad de las imágenes.
- Mostrar título:Controla si se muestra el título.
- Mostrar subtítulo:Habilitar o deshabilitar subtítulos.
- Mostrar descripcion:Administrar la visibilidad de las descripciones de los artículos.
- Mostrar Botones:Decide si se deben mostrar los botones de elementos individuales.
Diseño de sección
-
- Haga clic en el elemento Editar equipos Botón para abrir el panel de edición de secciones y elegir la Diseño .
-
- Desde aquí, puedes cambiar fácilmente el diseño de la sección incluso después de agregarla a la página.
Mientras cambia el diseño, verá los diseños relacionados con las secciones en la parte superior.
Además de estas opciones, también tiene la posibilidad de elegir un diseño de otras secciones bajo el encabezado "Más diseños".
Sección de equipos de estilo
Puedes personalizar diferentes aspectos de la sección Equipos mediante diversas opciones de estilo. Para acceder a las opciones de estilo, haz clic en el botón Editar equipos (1).
- Elija el DE ESTILO RESORT (2) pestaña.
- Después de realizar las personalizaciones, Guardar (3) los cambios.
Tendrá múltiples opciones de estilo para la sección:
- Opciones de visualización
- Pantalla móvil
- Alineación
- Tamaño del texto
- Espaciado
- Título de la sección
- Opciones de imágenes
- Máscara de forma
- Opciones de desplazamiento de imagen
- borde de la imagen
- Tarjetas
- Sombra:
- Botones y enlaces
Opciones de visualización
- Elija Mostrar artículos in filas y columnas / carrusel / escaparate
- Si ha elegido el filas y columnas opción, los elementos de la lista se organizarán en filas y columnas. En este caso, debe especificar el número de filas y columnas.
- Si ha elegido el carrusel opción, los elementos de la lista se presentarán como una presentación de diapositivas. Más información.
-
Showcase ofrece un diseño elegante e interactivo tipo carrusel para mostrar tus imágenes una a una con transiciones y efectos fluidos. Este diseño aporta una experiencia moderna e inmersiva a tu sitio web. Más información.
- Configure Número de columnas para la lista de imágenes. Puede elegir de 1 a 10 columnas.
- Especifica el Espacio entre columnas de los elementos de la lista.
- Especifica el Espacio entre filas de los elementos de la lista.
Si se selecciona la opción Carrusel en el Paso 1, verá las siguientes opciones adicionales:
- Habilitar desplazamiento suave:Permite el desplazamiento continuo de elementos dentro del carrusel para una experiencia fluida y visualmente atractiva.
- Deslizamiento automático:Rota automáticamente las diapositivas sin interacción del usuario.
- Mostrar el progreso de la reproducción automática:Muestra un indicador de progreso mientras la reproducción automática está activa para una mejor visibilidad.
- Retraso de reproducción automática:Establece el intervalo de tiempo entre cada transición de diapositiva cuando la reproducción automática está habilitada.
- Bucle de carrusel:Permite la repetición continua de diapositivas, de modo que el carrusel se reinicie sin problemas después de la última diapositiva.
- Controles de carrusel: Elegir el Controles de NavegaciónPuede elegir entre Sin controles, Flechas (Abajo centro/Arriba derecha/Abajo derecha), Chevron, Puntos y Desplazamiento horizontal.
- Desvanecer bordes: Aplica un sutil efecto de desvanecimiento a los bordes del carrusel. Mejora la experiencia del usuario al fusionar las imágenes suavemente al entrar o salir de la vista.
Si se selecciona la opción Exhibir en el Paso 1, verá las siguientes opciones adicionales:
- Efectos: Elija entre cinco efectos de animación: Desvanecimiento, Voltear, Tarjetas, Coverflow (inclinado) o Coverflow (plano) para controlar la transición de las imágenes.
- Habilitar desplazamiento suave: Permite el desplazamiento continuo de elementos dentro del escaparate para una experiencia fluida y visualmente atractiva.
- Deslizamiento automático: Transición automática a través de las imágenes sin intervención del usuario.
- Mostrar progreso de reproducción automática: Muestra un indicador de progreso mientras la reproducción automática está activa para una mejor visibilidad.
- Retraso de reproducción automática: Establezca el tiempo entre diapositivas cuando la reproducción automática esté activa. Puede elegir un valor entre 1 y 10 segundos.
- Bucle de carrusel: Habilite esta opción para que el carrusel repita infinitamente su funcionamiento, permitiendo así la reproducción continua.
- Controles del carrusel: La configuración de Controles del carrusel le permite elegir cómo los usuarios navegarán por las diapositivas, con opciones como flechas (abajo al centro, arriba a la derecha, abajo a la derecha), puntos o ningún control.
Pantalla móvil
- Establecer el número de Columnas de cuadrícula para dispositivos móviles. Puede configurarlo en un máximo de 3 columnas.
- Definir el Espaciado entre cuadrículas (en píxeles).
Diseño de columnas específico del dispositivo según la configuración de Studio:
Alineación
- Alineación la imagen horizontalmente En la sección Equipo. Puedes configurarlos para que se alineen a la izquierda, a la derecha o al centro.
- Alineación el texto horizontalmente En la sección Equipo. Puedes configurarlos para que se alineen a la izquierda, a la derecha o al centro.
- Alineación el contenido verticalmente En la lista de equipos. Puedes configurarlos para que se alineen arriba, abajo y al centro.
- Elija el Orden de contenido es decir, las imágenes de los elementos de la lista que se mostrarán primero o el texto asociado.
Título de la sección
- Alinear horizontalmente El texto del título de la sección. Puede configurarlo a la izquierda, al centro o a la derecha.
- Habilitar/Deshabilitar el Divisor entre el título de la sección y el contenido de la sección.
- Configure Grosor del divisor (en píxeles).
- Especifica el Color del divisor del selector de color.
- Elija un Estilo divisor desde el desplegable.
Tamaño del texto
- Haga clic en el elemento Cambiar estilo de texto botón para visitar el Diseño sección y administre sus tamaños y estilos de fuente.
- Configure Título estilo de fuente para los elementos de la lista de la sección.
- Configure Subtítulo estilo de fuente para los elementos de la lista de la sección.
- Establecer el valor predeterminado Mareas Ideales para Lecciones estilo de fuente para los elementos de la lista de la sección.
- Habilitar esta opción para animar cualquier número Presente en el Título y Subtítulo campos. Cuando se activa, los valores numéricos aparecerán con una animación de conteo dinámica, lo que los hace más atractivos visualmente.
Espaciado
- Especifica el Ancho de imagen para los elementos de la lista.
- Especifica el Ancho del contenido para los elementos de la lista.
- Especifica el Espacio debajo del título de la sección en píxeles
- Especifica el Espacio debajo de las imágenes de los elementos de la lista (en %).
- Especifica el Espacio debajo de los títulos de los elementos de la lista (en %).
- Especifica el Espacio debajo de los subtítulos de los elementos de la lista (en %).
Título de la sección
- Alinear horizontalmente El texto del título de la sección. Puede configurarlo a la izquierda, al centro o a la derecha.
- Habilitar/Deshabilitar el Divisor entre el título de la sección y el contenido de la sección.
- Configure Grosor del divisor (en píxeles).
- Especifica el Color del divisor del selector de color.
- Elija un Estilo divisor desde el desplegable.
Imágenes
- Elija el Icultivo de mago para los elementos de la lista. Puede configurar las imágenes como Cuadrado, Círculo, Horizontal, Retrato y Original.
- Elija tener un radio de esquina común o un radio de esquina diferente para cada lado de los elementos de la lista y establezca un número (en px) para el CRadio interior de las imágenes de elementos de la lista. Más información.
Mediante el campo de radio de esquina , puede crear imágenes de elementos de lista con diferentes formas. Si especifica 500 px, las imágenes se mostrarán en forma circular.
- En caso de que haya elegido esquinas divididas, puede establecer un radio de esquina diferente para cada esquina.
Máscara de forma
- Máscara de forma: Activa este interruptor para aplicar una máscara de forma a las imágenes en la sección Equipos. Una vez activado, la forma seleccionada recortará visualmente la imagen en ese formulario.
- Seleccionar forma: Elige entre varias formas predefinidas para aplicarlas a tus imágenes. Esto te permite estilizar tu contenido de forma creativa mostrando imágenes con formas únicas, como redondeadas, en forma de diamante, en forma de gota, etc.
- Tramo: Active esta opción para ajustar la forma seleccionada al contenedor de la imagen. Esto garantiza que la forma ocupe el espacio disponible proporcionalmente, mejorando la alineación visual en diferentes tamaños de pantalla.
- La opción Estirar depende del diseño – Puede que no aparezca en ciertos diseños. En diseños donde se muestra texto como título o subtítulo sobre la imagen, el... Es posible que la opción Máscara de forma completa no esté disponible.
- La configuración de estiramiento depende de varios factores - Incluyendo tamaño de la imagen, alineación, y ajustes de recorte definido en la pestaña Estilo.
- Si el recorte de imagen está configurado en OriginalLas dimensiones reales de la imagen determinarán si se estirará vertical u horizontalmente.
Desplazamiento de imagen
- Elija el Color de desplazamiento de la imagen ser el acentuar el color o ser especificado. Si ha elegido el acentuar el color, luego especifique el opacidadPuede especificar el color de acento para cada elemento desde Editar elemento .
- Si ha elegido el especificar color luego configure la opción Superposición de color y opacidad.
- Configure Color de texto superpuesto que aparece al pasar el mouse sobre el elemento.
- Elija Animar las imágenes de elementos de la lista. al pasar el mouse haciendo clic en Sí. Verifique esta característica en una página en vivo.
- Elija una Estilo de animación para imágenes cuando el cursor pasa sobre ellas.
- Elija si desea permitir el transición de imágenes al pasar el mouse o no.
- Seleccione un Estilo de transición para la transición al pasar el mouse. Las opciones disponibles son Desvanecer y Voltear.
borde de la imagen
- Activar/Desactivar borde alrededor de las imágenes cambiando el interruptor.
- Elige tener un frontera común en todos los lados de las imágenes o puede especificar el fronteras por separado para cada lado.
- Especifica el ancho de la frontera. Si se establece en 0, el borde no aparecerá. También tiene la opción de establecer el ancho del borde individualmente para cada lado de la imagen.
- Seleccione el elemento Color del borde del selector de color.
- Seleccione un preferido Estilo de Borde desde el desplegable.
- Determina el ancho de borde para movil dispositivos, alineándolo con el ancho elegido para escritorio.
Tarjetas
- Descubre cómo para gestionar tarjetas.
Sombra:
- Mostrar – Elija mostrar la sombra detrás de los elementos de la lista siempre o solo al pasar el mouse por encima.
- DE ESTILO RESORT – Elija entre los ajustes preestablecidos existentes o cree una sombra personalizada.
En caso de que haya elegido la opción Personalizada, visite este Generador de sombras de caja para crear una sombra personalizada. Finalmente, copie y pegue el caja sombra CSS. - En caso de que haya elegido la opción de preajustes, entonces Elija estilos de sombra desde el desplegable.
Botones y enlaces
- Descubre cómo para gestionar el estilo de Botones y enlaces.
