Muestra tu equipo o diferentes proyectos con conjuntos de imágenes, texto y botones en un diseño personalizable.

Utiliza diseños inteligentes para presentar conjuntos de contenido en columnas y filas, carruseles o en diapositivas. Cuando agregas nuevo contenido a un diseño inteligente, se reorganiza automáticamente en función de la configuración elegida. Esto hace que los diseños inteligentes sean excelentes para el contenido que actualizas regularmente, como productos o proyectos destacados, miembros del equipo actuales, testimonios o clientes anteriores.

Esta guía se centra en los diseños inteligentes que combinan texto e imágenes. Para un diseño similar que muestre principalmente imágenes, usa en cambio una sección de galería. Para crear diseños similares manualmente, utiliza una sección de bloque.

Esta guía se refiere a la versión 7.1.. Par aun efecto similar en la versión 7.0, crea columnas y filas con bloques.

Mira el video

Agregar una sección de diseño inteligente

Para agregar una sección de diseño inteligente que incluya texto e imágenes:

1. Haz clic en Editar en la página y, a continuación, en Añadir sección.
2. Haz clic en Personas, Servicios o Testimonios.
3. Busca diseños con un ícono i en la esquina superior derecha y haz clic en el que quieras.

Ten en cuenta lo siguiente:

• Para agregar un diseño inteligentes que muestre imágenes, sigue nuestros pasos para agregar secciones de galería.
• Si haces clic en una sección sin un ícono i en la esquina superior derecha, agregarás una sección de bloque y el resto de los pasos de esta guía no se aplicarán.Las secciones de bloque pueden tener diseños similares, pero deben organizarse manualmente.
• Los diseños inteligentes aparecen en otras categorías, pero Personas, Servicios y Testimonios tienen la mayor cantidad de opciones. Incluso si el tema no coincide con lo que quieres para tu sitio, debes reemplazar todo el contenido de muestra por el tuyo.

Establecer qué elementos se muestran

Para elegir cómo se muestran la sección y los elementos:

1. Desplázate sobre la sección y haz clic en Editar contenido.
2. En la pestaña elementos, activa o desactiva los controles de cada opción.

Para la sección en su conjunto, utiliza estos controles:

• Título: muestra un título de texto en la parte superior de la sección.
• Botón: muestra un enlace de botón en la parte inferior de la sección.

Para cambiar la forma en que se muestran los elementos, utiliza estos controles:

• Mostrar imagen: muestra una imagen con cada elemento.
• Mostrar título: muestra el texto del título con cada elemento.
• Mostrar cuerpo: muestra el cuerpo del texto con cada elemento.
• Botón Mostrar: muestra un enlace de botón con cada elemento.

Ten en cuenta lo siguiente:

• Estas opciones se aplican a todos los elementos de esa sección. No es posible tener ajustes diferentes para elementos individuales de una sección.
• Al desactivar un control, se oculta la opción correspondiente en la pestaña de contenido. Por ejemplo, si desactivas Mostrar título, el campo Título no aparecerá en el editor de elementos.

Agregar o editar elementos

Cada diseño inteligente incluye elementos de muestra. Puedes reemplazar el contenido de estos elementos por el tuyo o eliminarlos y agregar otros para empezar desde cero.

Para agregar o editar elementos:

1. Desplázate sobre la sección y haz clic en Editar contenido y, a continuación, en Contenido.
2. En la lista Elementos, haz clic en un elemento para editar su contenido o haz clic en Agregar para agregar otro.
3. Para reorganizar un elemento, haz clic y arrastra el ícono ። a la derecha del título del elemento.
4. Para eliminar un elemento, haz clic en el ícono de papelera situado a la derecha del elemento.

Cada elemento puede tener una imagen, un título, una descripción y un botón. Si alguna de estas opciones no aparece cuando haces clic en el elemento, asegúrate de que estén habilitadas en la pestaña Elementos.

Si no le das un título a un elemento, muestra un título predeterminado en el editor según su orden en el diseño inteligente, como “Elemento 1” o “Elemento 2”. Los títulos predeterminados no son visibles para tus visitantes. Para darle un título al elemento, haz clic en el elemento e ingresa un título en el campo Título.

Consejo: Debes agregar manualmente todos los artículos y sus elementos a un diseño inteligente. Si deseas mostrar elementos de una colección actual en tu sitio, utiliza bloques de resumen.

Editar el título y botón de la sección

En la pestaña contenido, también puedes editar el título y el botón de la sección en conjunto. El título se muestra en la parte superior de la sección y el botón aparece en la parte inferior. Para agregarlos y editarlos: 

1. En la pestaña Elemento, comprueba que los controles Título y Botón estén activados.
2. En la pestaña contenido, haz clic en Título para agregar texto y cambiar la alineación.
3. Haz clic en Botón para editar el texto del botón, configurar un enlace, y cambiar el tamaño y la alineación del botón.

Para ocultar cualquiera de estos elementos, desactívalo en la pestaña Elementos.

Cambiar el diseño inteligente

Para cambiar el diseño de la sección:

1. Desplázate sobre la sección y haz clic en Editar contenido y, a continuación, en Diseño.
2. Haz clic en el menú desplegable de la parte superior para cambiar el diseño.

Puedes elegir entre tres diseños:

• Lista sencilla: muestra los elementos seguidos de izquierda a derecha. Según la configuración y el número de elementos, el diseño puede crear más filas debajo de la primera.
• Diapositivas de banner: muestra un elemento a la vez con elementos superpuestos a la imagen, que sirve como fondo de la sección. Los visitantes hacen clic en los controles para desplazarse por los elementos.
• Carrusel: muestra los elementos seguidos de izquierda a derecha en un carrusel giratorio. Los visitantes hacen clic en los controles para desplazarse por más elementos.

Cada diseño tiene su propia configuración de diseño para una mayor personalización. Por ejemplo, con diseños simples de listas y carrusel, puedes recortar las imágenes como círculos. Haz clic en Estilo para obtener más ajustes, como cambiar el tamaño del texto o agregar un fondo de tarjeta para cada elemento. Haz clic en Tamaño y espacio para los ajustes de relleno y espaciado, como establecer el ancho del contenido, cambiar el espacio entre elementos o ajustar la ubicación de la imagen. Tus opciones en las pestañas Estilo y Tamaño y espacio dependen del diseño.

Si cambias los diseños, la sección guardará la configuración en el diseño seleccionado anteriormente para que siempre puedas volver a este si lo deseas.

Nota: No es posible cambiar de estas opciones a un diseño de galería. En cambio, crea una sección de galería.

Tamaño del texto

Después de seleccionar el diseño de la sección de lista, desplázate hacia abajo en la pestaña Diseño y haz clic en Estilo para elegir un tamaño de fuente. Puedes seleccionar entre tamaños preestablecidos que cambian el título y la descripción a la vez o hacer clic en ... para establecer tamaños personalizados para los títulos y las descripciones de los elementos por separado. Según el diseño y la configuración actual, es posible que aparezcan otras opciones.

Altura de Sección

La altura de la sección de diseño inteligente la establece el elemento con más texto. Esto significa que la sección puede tener relleno adicional por encima o por debajo de los elementos con menos texto en los diseños de carrusel y banner de diapositivas. En el diseño de lista simple, puede pasar lo mismo con la altura de la fila.

Recomendamos mantener una cantidad similar de texto en cada elemento para garantizar el máximo control sobre la altura y el relleno de la sección.

Divisor de sección

Para agregar un indicador visual entre la parte inferior del diseño inteligente y la siguiente sección, habilita un divisor de sección:

1. Desplaza el cursor sobre el diseño inteligente y haz clic en Editar sección.
2. En Formato, activa la opción Divisor .
3. Establece los ajustes del divisor como la forma, el trazo, el color y el grosor.

Para obtener más información sobre los divisores de sección, visita Secciones de página.

Diseño inteligente en dispositivos móviles

Ciertas opciones de diseño pueden variar en la computadora y en un dispositivo móvil. Los diseños de banner de diapositivas y carrusel, por ejemplo, pueden mostrar flechas de navegación para que los visitantes puedan hacer clic en todos los elementos. Si deshabilitas las flechas de navegación, los visitantes que usen una computadora harán clic para desplazarse por los elementos, pero las flechas siempre se mostrarán en los dispositivos móviles para garantizar que los visitantes puedan ver todos los elementos.

Cambiar los colores del diseño inteligente

Para cambiar los colores de la sección de diseño inteligente, abre Estilos del sitio y haz clic en Colores. Selecciona la combinación de colores de la sección y luego usa la configuración en el tipo de sección de lista correspondiente: Simple, Carrusel o Banner.

Aplicar estilo a fuentes y botones de diseño inteligente

Los diseños inteligentes siguen la configuración global de estilo de fuentes y botones de los estilos del sitio.

Fuente

El texto de diseño inteligente sigue la configuración de fuentes global de tu sitio en el panel Fuentes de los estilos del sitio. Los títulos de los elementos siguen a Encabezados y cuerpo del texto del elemento sigue a Párrafos. Si utilizas un título de sección para el diseño inteligente, puedes aplicarle estilo independientemente de otras configuraciones de fuente haciendo clic en Asignar estilos y, a continuación, en Título en Sección de lista.

El tamaño del texto se establece en la configuración de diseño inteligente.

Botones

Aplica estilo a la fuente, el color y la forma de los botones en el panel de Botones de estilos del sitio. Tanto los botones de elementos como los botones de secciones siguen la configuración de estilo principal. Ten en cuenta que, para garantizar una apariencia uniforme, esta configuración se aplica a la mayoría de los botones de tu sitio.

Para establecer el tamaño de los botones de diseño inteligente:

1. Desplaza el cursor sobre la sección y haz clic en Editar contenido. 
2. En Diseño, elige Estilo.
3. En Tamaño del texto , haz clic en ....
4. Usa el control deslizante Botón de elemento para cambiar el tamaño.

Diseños inteligentes versus secciones de galería

Los diseños inteligentes y las secciones de galería organizan automáticamente el contenido en diseños personalizables, pero las características entre ellos varían. No es posible cambiar un diseño inteligente a una sección de galería o viceversa. Estas son las diferencias básicas:

• Los diseños inteligentes pueden mostrar diferentes combinaciones de imágenes, grandes cantidades de texto y enlaces de botones. Son ideales para mostrar a los miembros del equipo, clientes anteriores o proyectos recientes.
• Las secciones de galería resaltan las imágenes por sí solas, lo que las hace más adecuadas para portafolios de artistas o sitios de fotografía. Puedes agregar texto a las imágenes de la sección de galería, pero solo leyendas breves.

Para obtener más información sobre las diferencias entre las dos secciones y decidir cuál es la que mejor se adapta a tus necesidades, consulta la siguiente tabla.

Característica	Diseños inteligentes	Secciones de galería
Recorte automático de imágenes	Diseño de lista sencillo Diseño de carrusel	No
Reproducción automática de diapositivas	No	Diapositivas: diseño sencillo Diapositivas: diseño completo
Botones	Sí	No
Mostrar solo texto	Sí	No
URL clickthrough en imágenes	No	Sí
Diseños	Lista simple Diapositivas de banner Carrusel	Cuadrícula: simple, tiras, mosaico Diapositivas: simple, completa, carrete
Lightbox	No	Diseños de cuadrícula
Superposición de texto en imagen	Diseño de diapositivas de banner	No
Título de sección	Sí	No
Videos	No	No