La sección de Perfil es la manera perfecta de presentar a las personas detrás de tu trabajo. Ya sea que estés creando una... página acerca de, una presentación del equipo o una sección de biografíaEste diseño le permite presentar a las personas con elegancia y claridad.
Resalte a cada persona foto, nombre, rol e historia En un formato personal y atractivo. Desde equipos creativos y colaboradores hasta ponentes, mentores o colaboradores, la Sección de Perfil te ayuda a conectar más profundamente con tu audiencia al ponerle rostro a tu marca o proyecto.
Con opciones de personalización simples y un diseño limpio y responsivo, la Sección de Perfil facilita la presentación de las personas que hacen posible su trabajo.
En este artículo hablaremos de:
- ¿Qué es la sección Perfil?
- Sección Agregar perfil
- Agregar y editar elementos de la lista
- Elementos de la lista de secuencias
- Eliminación de elementos de la lista
- Administrar elementos
- Cambiar el diseño de la sección
- Opciones de estilo
Sección de perfil
Una sección de perfil es una colección de perfiles individuales donde puedes añadir una foto, nombre, cargo o designación, y una breve descripción. También puedes añadir un enlace o botón para dirigir a los visitantes a páginas detalladas o enlaces externos relacionados con cada perfil.
Sección Agregar perfil
- 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 Perfil y bioenlaces (1) categoría y haga clic en el Mi Perfil pestaña (2) donde puede elegir diferentes diseños de Mi Perfil (3) sección.
- Puede administrar el ancho de la sección desde el configuración de la sección y el ancho del contenido desde el estilo de contenido.
- El tamaño de imagen ideal que necesitas cargar en esta sección dependerá de la cantidad de columnas. Más información.
- Mantenga los títulos, subtítulos y descripciones breves y nítidas.
- En el campo de descripción, presione el botón entrar: botón para dar un salto de línea y el Shift + Enter para comenzar desde la siguiente línea.
Agregar y editar elementos de la lista
Agregar elemento de lista
Una vez que haya agregado la sección:
- Haga clic en el elemento Editar lista de imágenes (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
Puede personalizar el comportamiento de clic de elementos individuales en el Mi Perfil Sección. 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 Descripción 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 nueva ventana: Configure el vínculo para que se abra en un nueva pestaña o en la misma pestaña. Esto sólo será visible cuando Ir a un enlace La opción está seleccionada debajo de Acción al hacer clic .
7. Botones e iconos: Agrega cualquier tipo de Enlace al elemento de la lista. Puede agregar un botón, un enlace de imagen, un icono social o un enlace de texto. Más información.
8. Anulación del estilo de la tarjeta
Puede anular la configuración global del estilo de la tarjeta desde la sección Ajustes Personaliza la tarjeta de cada elemento individualmente en la sección Perfil. Esto te permite aplicar estilos únicos a diferentes elementos de la lista para una mejor personalización.
Más información Acerca de la opción Tarjetas en la sección dinámica.
9. Anulación del estilo de forma
Utilice la opción Anular para asignar una forma diferente a cada imagen individualmente dentro de la sección Perfil, lo que le brinda un mayor control sobre el estilo visual de cada elemento. Más información Acerca de Shape Mask.
10. Guardar: Después de realizar las personalizaciones, guarde los cambios.
- Active Tarjetas opción de Configuraciones de estilo para anular y personalizar tarjetas para artículos individuales.
- Active Máscara de forma opción de Ajustes para diseñar formas por separado para cada elemento.
Vea la edición de un elemento de la lista de imágenes en acción:
Elementos de la lista de secuencias
- Puede arrastrar y soltar fácilmente los elementos de la lista para cambiar la secuencia.
Vea la secuenciación de los elementos de la lista de imágenes en acción:
Eliminar un elemento de la lista
Una vez que haya agregado un elemento de la lista, puede editarlo y eliminarlo.
- Haga clic en el elemento Eliminar junto al elemento de la lista de imágenes.
- Ahora, haga clic en el Eliminar botón en la ventana emergente de confirmación.
- Finalmente, guarde tus cambios
Vea cómo eliminar un elemento de la lista de imágenes en acción:
Los elementos de la lista una vez eliminados no se pueden recuperar.
Sección Administrar Elementos del Perfil
La sección Lista de imágenes incluye una Pestaña Elementos que le permite administrar la visibilidad de varios elementos dentro de la sección con facilidad. Con simples interruptores, puede habilitar o deshabilitar elementos específicos sin tener que eliminar o modificar los elementos en sí.
- Haga clic en el elemento Editar lista de imágenes Botón (1).
- Elija el Elementos (2) pestaña.
- Después de realizar los cambios, presione el botón guarde Botón (3).
Opciones de sección
- Mostrar título:Habilite o deshabilite la visibilidad del título para la sección Lista de imágenes.
- 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 lista de imágenes Botón (1).
- Elija el Diseño (2) pestaña.
- Seleccione un diseño para su sección y guarde (3) los cambios.
Para crear una sección de ancho completo/sección de lista con pestañas, elija cualquier diseño entre 25 y 29.
- Puede agregar fácilmente un diseño de lista con pestañas a su página.
- Tiene la opción de seleccionar entre un diseño con pestañas horizontales o verticales.
- Ayuda a crear una sección basada en comparaciones.
Dale estilo a tu sección
- Haga clic en Editar lista de imágenes (1) .
- Elija el Estilo (2) .
- Cambie el estilo de los elementos de la sección y Guardar (3) tus 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
- Opciones de tarjeta
- Opciones de sombra
- Botones y enlaces
Mostrar
- Elija Mostrar artículos in filas y columnas or carrusel
- 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.
- 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 al centro/Arriba a la derecha/Abajo a la 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.
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 el contenido horizontalmente en la Lista de imágenes. Puede configurarlos para que estén alineados a la izquierda, a la derecha o al centro.
- Alineación el contenido verticalmente en la Lista de imágenes. Puede configurarlos para que estén alineados superior, central e inferior.
- 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.
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 Descripción 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.
- Configure Ancho del titular para definir qué tan ancho aparecerá el título de la sección, comenzando desde un mínimo del 50%.
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.
Usando el radio de esquina campo, puede crear diferentes formas de imágenes de elementos de lista. En caso de que especifique 500 px aquí, las imágenes se mostrarán en forma de círculo.
- 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: Active este interruptor para aplicar una máscara de forma a las imágenes de la sección Lista de imágenes. Una vez activado, la forma seleccionada se ajustará visualmente a la imagen.
- 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.
Al pasar el cursor sobre la 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 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 la Forma para 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.
- guarde Todo el estilo cambia.
