Las páginas de portafolio son páginas de aterrizaje estilizadas que vinculan a los visitantes con subpáginas. 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 subpáginas individuales. Para crear una página de portafolio y agregar contenido, visita páginas de portafolio.
Páginas de portafolio y subpáginas de portafolio
Las páginas de portafolio están organizadas en dos partes: la página principal de 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 las subpáginas individuales a las que llevan estos enlaces donde agregas contenido para diferentes proyectos, galerías u otro contenido.
Abrir las opciones de estilo
Podrás modificar el estilo de la página de portafolio y las subpáginas 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.
- Subpáginas. Haz clic en la subpágina de la página de portafolio para abrirla, haz clic en Editar y luego en el icono del lápiz en la sección en la que quieres modificar el estilo.Cada subpágina se compone de secciones, y cada sección tiene sus propias opciones de estilo.
Página de portafolio
La página de portafolio muestra todas tus subpáginas como imágenes destacadas o enlaces de texto, en los que los visitantes hacen clic para abrir subpáginas individuales.
En los estilos de la sección de portafolio, puedes personalizar los siguientes detalles:
- Formato. Establece el diseño de la página de portafolio.Cada diseño de cuadrícula y diseño de desplazamiento del cursor tiene opciones de formato únicas.
- Fondo: agrega una imagen de fondo, un video de fondo o fondos personalizados detrás de los enlaces de las subpáginas.
- Colores . Establece los colores de tu sitio o cambia el tema de la sección del portafolio.
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 subpáginas 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 hover: fondo con varias subpáginas, 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 subpáginas. Utiliza el ajuste Espaciado de enlace vertical en su lugar.
Formato de diseños de cuadrícula
Los diseños de cuadrícula muestran las subpáginas en una cuadrícula de imágenes destacadas. Los visitantes hacen clic en la imagen o el texto del título para abrir la subpágina. 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 de subpágina debajo de las imágenes. Después de seleccionar este diseño, podrás modificar 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 de la subpágina 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 subpáginas como una lista de enlaces, con sus imágenes destacadas que aparecen en el cursor. Los visitantes hacen clic en el enlace para abrir la subpágina. 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 la subpágina. No es posible aumentar o eliminar esto:
El diseño Desplazamiento: Fijo muestra los títulos de las subpáginas como enlaces. Cuando los visitantes desplazan el cursor sobre un enlace, la imagen destacada de la subpágina 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 las subpáginas como enlaces. Cuando los visitantes desplazan el cursor sobre un enlace, aparece la imagen destacada de la subpágina y sigue el cursor hasta que lo desplazan sobre un enlace diferente. 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 las subpáginas como enlaces. Cuando los visitantes desplazan el cursor sobre un enlace, la imagen destacada de la subpágina aparece como la imagen de fondo de la sección y permanece hasta que desplazan el cursor sobre un enlace diferente. 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 de subpágina
El título de cada subpágina 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 de la subpágina. El texto del título sigue los estilos de fuente y color para todo el sitio.
Fuente del título
Para aplicar estilo a la fuente del título de la subpágina:
- Mientras editas una página, abre Estilos del sitio y, a continuación, haz clic en Fuentes.
- Haz clic en Encabezados.
- Elige una familia de fuentes y cambia otras configuraciones de estilo.
- 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 realizar cambios, posiciona el cursor sobre Listo y haz clic en Guardar.
Color del título
Para aplicar estilo al color del título de la subpágina:
- Mientras editas una página, abre Estilos del sitio y, a continuación, haz clic en Colores.
- Haz clic en el icono del lápiz en la combinación de colores de la sección de portafolio.
- Desplázate hacia abajo y busca la sección de portafolio que coincida con tu diseño.
- 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.
- Posiciona el cursor sobre Listo y haz clic en Guardar.
Delimitadores
En algunos diseños con movimiento del cursor que utilizan enlaces en línea, puedes agregar "delimitadores" o signos de puntuación para separar gráficamente tus enlaces de subpágina.
Para seleccionar u ocultar los delimitadores:
- Presiona Editar en la Página de portafolio.
- Posiciona el cursor sobre la sección de portafolio y haz clic en el icono del lápiz.
- En la pestaña Formato, establece Formato de enlace en En línea.
- Desplázate hacia abajo y haz clic en Delimitador, luego selecciona una de las opciones o elige Ninguna para ocultarlas.
- Posiciona el cursor sobre Listo y haz clic en Guardar.
Subpáginas
Las subpáginas se crean a partir de secciones de página, así que tus opciones de estilo dependen de las secciones que agregues. Puede 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 de subpáginas
Los enlaces a las subpáginas siguientes y anteriores de un portafolio aparecen en la parte inferior de cada subpágina. 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:
- Mientras editas una página, abre Estilos del sitio y, a continuación, haz clic en Fuentes.
- Haz clic en Encabezados.
- Elige una familia de fuentes y cambia otras configuraciones de estilo.
- 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 realizar cambios, posiciona el cursor sobre Listo y haz clic en Guardar.
Color de paginación
El color de paginación sigue la combinación de colores de la sección inferior de cada subpágina. Si las subpáginas usan diferentes combinaciones de colores en sus secciones inferiores, el color de paginación puede variar entre las subpáginas.
Para modificar el estilo del color de paginación:
- Mientras editas una página, abre Estilos del sitio y, a continuación, haz clic en Colores.
- Haz clic en el icono del lápiz en la combinación de colores de la sección de portafolio.
- Desplázate hacia abajo y encuentra los ajustes Portafolio: Elemento.
- 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.
- Posiciona el cursor sobre Listo y haz clic en Guardar.
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 las subpáginas siguen la fuente de todo el sitio y los ajustes de color. También puedes cambiar la combinación de colores de la sección de la página de portafolio y las secciones de subpáginas en sus editores de estilos de sección.
En la combinación de colores de tu portafolio, usa los ajustes de color de portafolio que coincidan con tu diseño. En la combinación de colores de la última sección de cada subpágina, usa los ajustes portafolio: Elemento para modificar el estilo de la paginación en la parte inferior de cada subpágina. Esto puede variar entre subpáginas 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:
- 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.
- En la pestaña Formato, selecciona Antes del desplazamiento en el menú desplegable Mostrar texto.
- Posiciona el cursor sobre Listo y haz clic en Guardar.