Modificar el estilo de páginas de portafolio

Personaliza las páginas y los proyectos de portafolio de tu sitio.

Última actualización: 8 de julio de 2024

Las páginas de portafolio son páginas de aterrizaje estilizadas que vinculan a los visitantes con proyectos. Puedes personalizar las páginas de portafolio para que coincidan con tu marca y estilo. Usa esta guía para encontrar las opciones de estilo para las páginas de portafolio y sus proyectos individuales. Para crear una página de portafolio y agregar contenido, visita Páginas de portafolio.

Páginas de portafolio versus proyectos de portafolio

Las páginas del portafolio están organizadas en dos partes: la página principal del portafolio, que crea una cuadrícula de imágenes destacadas o una lista de enlaces en los que los visitantes hacen clic para explorar tu portafolio, y los proyectos individuales a los que estos enlaces, donde agregas contenido.

Abrir las opciones de estilo

Podrás modificar el estilo de la página de portafolio y los proyectos en dos lugares:

  • Página de portafolio. Haz clic en Editar en la página de portafolio y luego haz clic en el icono del lápiz en la sección de portafolio.
  • Proyectos: haz clic en el proyecto en la página del portafolio para abrirlo, presiona Editar y luego haz clic en el icono de lápiz en la sección cuyo estilo quieres modificar. Cada proyecto se compone de secciones y cada sección tiene sus propias opciones de estilo.

Página de portafolio

La página de portafolio muestra todos tus proyectos como imágenes destacadas o enlaces de texto, en los que los visitantes hacen clic para abrir proyectos individuales.

En los estilos de la sección de portafolio, puedes personalizar los siguientes detalles:

Ten en cuenta lo siguiente:

  • Estos cambios afectan a todas las Páginas de portafolio que usen el mismo diseño.
  • Cualquier cambio realizado en un diseño específico se guardará incluso si cambias a un diseño nuevo, así que, si vuelves a un diseño anterior, tu configuración se restaurará.
  • Según el número de proyectos de tu página de portafolio, es posible que algunos ajustes de estilo no afecten tu diseño. Por ejemplo, si tienes un diseño Desplazamiento: fondo con una gran cantidad de proyectos, es posible que el ajuste de altura no tenga un efecto visible porque la sección debe tener cierta altura para mostrar todos los enlaces de proyectos. Utiliza el ajuste Espaciado de enlace vertical en su lugar.

Formato de diseños de cuadrícula

Los diseños de cuadrícula muestran tus proyectos en una cuadrícula de imágenes destacadas. Los visitantes hacen clic en la imagen o el texto del título para abrir el proyecto. Tus opciones en la pestaña Formato de los estilos de sección varían según el diseño de cuadrícula que elijas.

El diseño de Cuadrícula: Simple muestra las imágenes destacadas en una cuadrícula con el texto del título del proyecto debajo de las imágenes. Después de seleccionar este diseño, puedes cambiar estos ajustes de estilo:

  • Ancho. Selecciona Completo para que el contenido abarque el ancho de la sección o Recuadro para aumentar el relleno a la izquierda y a la derecha del contenido.
  • Altura. Establece la altura de la sección desde Pequeño, Medio, Grande o Personalizado. Ten en cuenta que la altura de la sección también se ve afectada por la cantidad de contenido presente.
  • Columnas. Establece la cuadrícula para que tenga 2, 3 o 4 columnas.
  • Espaciado horizontal
  • Espaciado vertical
  • Relación de aspecto. Establece la relación de aspecto de las imágenes.
  • Alineación de texto. Alinea el texto a la izquierda o al centro debajo de las imágenes.
  • Efecto de desplazamiento. Agrega un efecto de Difuminar o Zoom cuando se desplaza el cursor sobre una imagen.
  • Opacidad de desplazamiento. Si usas el efecto de desplazamiento Difuminar, establece la opacidad del desplazamiento en un valor más bajo para una superposición más uniforme o un valor superior para una superposición más transparente.
  • Espaciado del texto

El diseño Cuadrícula: Superposición muestra las imágenes destacadas en una cuadrícula con el texto del título del proyecto superpuesto a las imágenes. Después de seleccionar este diseño, puedes cambiar estos ajustes de estilo:

  • Ancho. Selecciona Completo para que el contenido abarque el ancho de la sección o Recuadro para aumentar el relleno a la izquierda y a la derecha del contenido.
  • Altura. Establece la altura de la sección desde Pequeño, Medio, Grande o Personalizado. Ten en cuenta que la altura de la sección también se ve afectada por la cantidad de contenido presente.
  • Columnas. Establece la cuadrícula para que tenga 2, 3 o 4 columnas.
  • Espaciado horizontal
  • Espaciado vertical
  • Relación de aspecto. Establece la relación de aspecto de las imágenes.
  • Ubicación del texto. Establece dónde se muestra el texto en la imagen.
  • Mostrar texto. Elige mostrar texto Antes de desplazar el cursor o Después de desplazar el cursor. Revisa nuestros consejos para dispositivos móviles y sobre cómo esto afecta la visualización de títulos en dispositivos móviles.
  • Opacidad de superposición. Establece la opacidad del desplazamiento en un valor más bajo para una superposición más uniforme o un valor superior para una superposición más transparente.

Formato de diseños de desplazamiento

Los diseños de desplazamiento muestran tus proyectos como una lista de enlaces, con sus imágenes destacadas que aparecen cuando se desplaza el cursor. Los visitantes hacen clic en el enlace para abrir el proyecto. Tus opciones en la pestaña Formato de los estilos de sección varían según el diseño del desplazamiento que elijas. Los diseños de desplazamiento tienen una superposición semitransparente en las imágenes destacadas de los proyectos. No es posible aumentarlo o eliminarlo:

El diseño Desplazamiento: Fijo muestra los títulos de los proyectos como enlaces. Cuando los visitantes desplazan el cursor sobre un enlace, la imagen destacada del proyecto aparece en una posición fija en la página. Después de seleccionar este diseño, puedes cambiar estos ajustes de estilo:

  • Formato de enlace. Elige entre En línea, donde aparecen los enlaces uno al lado del otro, o Apilado, donde cada enlace aparece en su propia línea.
  • Selección al frente. Cuando se habilita, el texto del enlace sobre el cual el cliente desplaza el cursor aparece frente a la imagen destacada.
  • Espaciado vertical de enlaces
  • Delimitador. Selecciona cómo dividir enlaces en el formato En línea. Para obtener más información, revisa Delimitadores.
  • Tipo de animación. Establece una animación para la imagen destacada.
  • Duración de la animación. Establece la velocidad de animación de la imagen destacada.
  • Tamaño de la imagen

El diseño Desplazamiento: Seguir cursor muestra los títulos de los proyectos como enlaces. Cuando los visitantes desplazan el cursor sobre un enlace, aparece la imagen destacada del proyecto y sigue el cursor hasta que lo desplazan sobre otro enlace. Después de seleccionar este diseño, puedes cambiar estos ajustes de estilo:

  • Formato de enlace. Elige entre En línea, donde aparecen los enlaces uno al lado del otro, o Apilado, donde cada enlace aparece en su propia línea.
  • Selección al frente. Cuando se habilita, el texto del enlace sobre el cual el cliente desplaza el cursor aparece frente a la imagen destacada.
  • Espaciado vertical de enlaces
  • Delimitador. Selecciona cómo dividir enlaces en el formato En línea. Para obtener más información, revisa Delimitadores.
  • Tipo de animación. Establece una animación para la imagen destacada.
  • Duración de la animación. Establece la velocidad de animación de la imagen destacada.
  • Tamaño de la imagen
  • Velocidad de seguimiento Establece qué tan rápido la imagen sigue el cursor. Al 0 %, la imagen no hará el seguimiento.

El diseño Desplazamiento: Fondo muestra los títulos de los proyectos como enlaces. Cuando los visitantes desplazan el cursor sobre un enlace, la imagen destacada del proyecto aparece como imagen de fondo de la sección y permanece hasta que desplazan el cursor sobre otro enlace. Después de seleccionar este diseño, puedes cambiar estos ajustes de estilo:

  • Ancho. Establece la imagen de fondo en Sin bordes o Completo.
  • Altura. Establece la altura de la sección desde Pequeño, Medio, Grande o Personalizado. Ten en cuenta que la altura de la sección también se ve afectada por la cantidad de contenido presente.
  • Alineación vertical. Establece la alineación vertical del enlace.
  • Alineación horizontal. Establece la alineación horizontal del enlace.
  • Formato de enlace. Elige entre En línea, donde aparecen los enlaces uno al lado del otro, o Apilado, donde cada enlace aparece en su propia línea.
  • Espaciado vertical de enlaces
  • Delimitador. Selecciona cómo dividir enlaces en el formato En línea. Para obtener más información, revisa Delimitadores.
  • Tipo de animación. Establece una animación para la imagen destacada.
  • Duración de la animación. Establece la velocidad de animación de la imagen destacada.
  • Conservar la última selección. Activa esto para mostrar la imagen destacada del último enlace sobre el cual el visitante se desplazó hasta que se desplace sobre otro enlace. Cuando se desactiva, se muestra el fondo de sección, excepto cuando el visitante se desplaza sobre un enlace.
  • Delimitador. Selecciona un tipo de delimitador para dividir los enlaces en el formato En línea. Para obtener más información, revisa Delimitadores.

Texto del título del proyecto

El título de cada proyecto aparece en la página principal de portafolio, ya sea debajo de su imagen destacada, superpuesta a su imagen destacada o en una lista de enlaces, según tu diseño. Puedes editar el texto del título en la configuración del proyecto. El texto del título sigue los estilos de fuente y color para todo el sitio.

Fuente del título

Para modificar el estilo de la fuente del título del proyecto:

  1. Mientras editas una página, abre Estilos del sitio y, a continuación, haz clic en Fuentes.
  2. Haz clic en Encabezados.
  3. Elige una familia de fuentes y cambia otras configuraciones de estilo.
  4. En Tamaño, utiliza el control deslizante del encabezado correspondiente para ajustar el tamaño del título.

El control deslizante que utilices depende del diseño de la página de portafolio:

  • Cuadrícula: Simple: encabezado 4
  • Cuadrícula: Superposición: encabezado 3
  • Diseños de desplazamiento: Encabezado 1

Ten en cuenta que cambiar el formato del encabezado afecta todo el texto de tu sitio con ese formato. Para modificar el estilo de la fuente y el tamaño del texto del título individualmente, haz clic en Asignar estilos, busca el ajuste Título para tu diseño y cambia el estilo y el tamaño a Personalizado.

Después de hacer cambios, haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego en Guardar para cerrar el editor.

Color del título

Para modificar el estilo del color del título del proyecto:

  1. Mientras editas una página, abre Estilos del sitio y, a continuación, haz clic en Colores.
  2. Haz clic en el icono del lápiz en la combinación de colores de la sección de portafolio.
  3. Desplázate hacia abajo y busca la sección de portafolio que coincida con tu diseño.
  4. Cambia el color usando el ajuste de Título del proyecto. Cada diseño de portafolio tiene su propio ajuste de Título del proyecto.
  5. Haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego Guardar para cerrar el editor.

Delimitadores

En algunos diseños con desplazamiento del cursor que utilizan enlaces en línea, puedes agregar "delimitadores" o signos de puntuación para separar gráficamente tus enlaces de proyecto.

Para seleccionar u ocultar los delimitadores:

  1. Presiona Editar en la Página de portafolio.
  2. Posiciona el cursor sobre la sección de portafolio y haz clic en el icono del lápiz.
  3. En la pestaña Formato, establece Formato de enlace en En línea.
  4. Desplázate hacia abajo y haz clic en Delimitador, luego selecciona una de las opciones o elige Ninguna para ocultarlas.
  5. Haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego Guardar para cerrar el editor.
Forward_slash_delimiters_on_a_portfolio_page.png

Proyectos

Los proyectos se crean a partir de secciones de página, así que tus opciones de estilo dependen de las secciones que agregues. Puedes agregar secciones de bloques, secciones de galerías o diseños inteligentes.

Modifica el estilo de cualquier sección haciendo clic en el icono del lápiz que aparece al desplazar el cursor sobre ella. Para obtener más información, visita Hacer cambios de estilo.

Paginación del proyecto

Los enlaces a los proyectos siguientes y anteriores de un portafolio aparecen en la parte inferior de cada proyecto. Todas las páginas de portafolio comparten los mismos estilos de paginación, incluso si usan diferentes diseños.

Fuente de paginación

Para modificar el estilo de la fuente de paginación:

  1. Mientras editas una página, abre Estilos del sitio y, a continuación, haz clic en Fuentes.
  2. Haz clic en Encabezados.
  3. Elige una familia de fuentes y cambia otras configuraciones de estilo.
  4. En Tamaño, usa el control deslizante Encabezado 3 para ajustar el tamaño del título.

Ten en cuenta que cambiar el formato del encabezado afecta todo el texto de tu sitio con ese formato.Para modificar el estilo de la fuente y el tamaño del texto del título individualmente, haz clic en Asignar estilos, encuentra el ajuste Paginación en Portafolio: Elemento, y cambia el estilo y el tamaño a Personalizado.

Después de hacer cambios, haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego en Guardar para cerrar el editor.

Color de paginación

El color de paginación sigue la combinación de colores de la sección inferior de cada proyecto. Si los proyectos usan diferentes combinaciones de colores en sus secciones inferiores, el color de paginación puede variar entre los proyectos.

Para modificar el estilo del color de paginación:

  1. Mientras editas una página, abre Estilos del sitio y, a continuación, haz clic en Colores.
  2. Haz clic en el icono del lápiz en la combinación de colores de la sección de portafolio.
  3. Desplázate hacia abajo y encuentra los ajustes Portafolio: Elemento.
  4. Cambia el texto del título con el ajuste Título de paginación del proyecto y cambia el icono de paginación con el ajuste Icono de paginación del proyecto.
  5. Haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego Guardar para cerrar el editor.

Los cambios afectan todas las secciones que usan la misma combinación de colores.

Fuentes y colores

Los colores y las fuentes en la página de portafolio y los proyectos siguen los ajustes de fuente y color de todo el sitio. También puedes cambiar la combinación de colores de la sección de la página de portafolio y las secciones de proyectos en sus editores de estilos de sección.

En la combinación de colores de tu portafolio, usa ajustes de color de Portafolio que coincidan con tu diseño. En la combinación de colores de la última sección de cada proyecto, usa los ajustes Portafolio: Elemento para modificar el estilo de la paginación en la parte inferior de cada proyecto. Esto puede variar entre proyectos dependiendo de la combinación de colores que use la sección inferior. 

Móvil

En dispositivos móviles o tabletas, los diseños de portafolio se apilan verticalmente en una sola columna, independientemente del número de columnas o el formato de enlace en navegadores más grandes.

Los efectos de desplazamiento no son compatibles con la mayoría de los navegadores móviles, así que si estás usando el diseño Cuadrícula: Superposición con los títulos configurados para que aparezcan Después de desplazar el cursor, es posible que los títulos no aparezcan para los visitantes en dispositivos móviles.

Para asegurarte de que los títulos aparezcan en todos los dispositivos del diseño Cuadrícula: Superposición:

  1. Haz clic en Editar en la página de portafolio y luego posiciona el cursor sobre la sección de portafolio y haz clic en el icono del lápiz.
  2. En la pestaña Formato, selecciona Antes del desplazamiento en el menú desplegable Mostrar texto.
  3. Haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego Guardar para cerrar el editor.
Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.

Modificar el estilo de páginas de portafolio