Un diseño define la estructura y el aspecto de todas las páginas de un grupo de páginas. Hereda los estilos globales de tu sitio, pero también puedes personalizar el diseño de secciones concretas: cambiar fuentes, colores y asignaciones de contenido a nivel de sección. Cada grupo de páginas tiene un diseño y todas las entidades de ese grupo lo utilizan.
Nota: Estás editando una plantilla de diseño. Los cambios que hagas se aplican a todas las páginas del grupo de páginas, no solo a la que se está previsualizando.
Acceder al editor de diseño
En la pantalla Grupos de páginas, haga clic en Editar diseño junto al grupo de páginas que desee editar.
El editor de diseño. A lo largo de este artículo se hace referencia a las llamadas numeradas.
| # | Área | Para qué sirve |
| 1 | Panel derecho | Editar las propiedades de la sección: asignar el contenido a los campos de la entidad o establecer valores estáticos, cambiar las fuentes y los colores |
| 2 | Vista previa de página | Vista previa en directo de tus cambios; haz clic en cualquier sección para seleccionarla |
| 3 | Panel izquierdo | Consulta las secciones disponibles y el esquema del diseño; arrastra las secciones a la vista previa desde aquí |
| 4 | Conmutador de grupo de páginas/entidad | Cambia entre grupos de páginas, entidades e idiomas para previsualizar |
| 5 | Conmutador de campos de entidad | Resalta dónde se están utilizando los campos de Knowledge Graph en el diseño |
| 6 | Conmutadores de panel | Contrae o expande los paneles izquierdo y derecho para tener más espacio de trabajo |
| 7 | Controles del visor | Cambia entre las vistas de escritorio, tableta y móvil; amplía y reduce |
| 8 | Controles de cambios | Deshacer, rehacer, descartar o publicar tus cambios |
| 9 | Vista previa/enlaces en directo | Abre una vista previa para compartir o tu sitio en directo en una pestaña nueva |
| 10 | Actualizar biblioteca | Incorpora las últimas actualizaciones de producto (solo aparece cuando hay actualizaciones pendientes) |
Los cambios se guardan automáticamente mientras trabajas, así que puedes salir y volver sin perder el progreso.
Añadir, reordenar y eliminar secciones
Las secciones son los componentes básicos de un diseño. El panel izquierdo (3) muestra todas las secciones disponibles en el panel de secciones y un esquema de lo que hay actualmente en el diseño.
Para añadir una sección: Arrastre una sección desde el panel de secciones a la vista previa (2) en la posición que desee.
Para reordenar las secciones: arrastra y suelta las secciones en la vista previa (2) o en el esquema del panel izquierdo (3).
Para eliminar una sección: haz clic en la sección en la vista previa o en el esquema para seleccionarla y, a continuación, haz clic en el icono de papelera de la barra de acciones que aparece.
Utiliza el botón Mostrar etiquetas para ver la fuente del contenido —estática o de Knowledge Graph— de cada elemento de tu diseño actual de un vistazo.
Nota: Las secciones disponibles en el panel izquierdo proceden de la biblioteca de tu sitio. Si faltan secciones que esperas ver, puede que tengas que actualizar tu biblioteca. Consulta Actualizar tu biblioteca.
Editar propiedades de sección
Haga clic en cualquier sección de la vista previa (2) o del esquema (3) para seleccionarla. Sus propiedades aparecen en el panel derecho (1). Las acciones comunes incluyen:
- Asignar contenido a un campo de entidad de Knowledge Graph o establecer un valor estático (consulta Asignar propiedades de sección)
- Cambiar fuentes y colores a nivel de sección para anular los estilos globales
- Mostrar u ocultar elementos dentro de una sección
Utiliza el conmutador de campos de entidad (5) para resaltar qué campos del diseño se están extrayendo de Knowledge Graph. Esto resulta útil para verificar que las asignaciones de contenido estén configuradas correctamente.
Añadir código personalizado
El componente Código personalizado te permite añadir HTML, CSS y JavaScript personalizados directamente a una página. Úsalo cuando necesites una funcionalidad que no esté disponible mediante las secciones integradas.
Para incrustar valores de campos de Knowledge Graph en código personalizado, utiliza la notación de Handlebars:
<div class="custom-banner">
<h2>Te damos la bienvenida a {{name}}</h2>
<p>Visítanos en {{address.line1}}, {{address.city}}</p>
<p>Llámanos: {{mainPhone}}</p>
</div>Buenas prácticas para el código personalizado:
- Cuando sea posible, opta por HTML y CSS en lugar de JavaScript. Los motores de búsqueda y los rastreadores de IA indexan el contenido estático con más fiabilidad. Es posible que las implementaciones con mucho JavaScript no se indexen correctamente.
- Utiliza primero las secciones integradas. Yext mantiene las secciones que proporciona y las optimiza para la accesibilidad y el SEO. Utiliza el código personalizado solo para funcionalidades que las secciones integradas no cubran.
Copiar y pegar secciones
Si tienes varios grupos de páginas con secciones compartidas —como un encabezado o un pie de página que tiene que verse igual en todas partes—, puedes copiar una sección ya configurada de un diseño y pegarla en otro en lugar de volver a configurarla desde cero.
Para copiar y pegar una sección:
- En la pantalla Grupos de páginas, haz clic en Editar diseño junto al grupo de páginas que contiene la sección que quieres copiar.
- Haz clic en la sección en la vista previa o en el esquema. Aparece una barra de acciones encima de la sección.
- Haga clic en el icono de copiar (el primer icono de la barra de acciones).
- Vuelva a la pantalla Grupos de páginas y haga clic en Editar diseño junto al grupo de páginas de destino.
- Si la sección aún no está en el diseño, arrástrala desde el panel izquierdo. A continuación, haz clic en ella para seleccionarla.
- Haz clic en el icono de pegar (el segundo icono de la barra de acciones).
Todas las propiedades se copian, incluidas las traducciones localizadas. Previsualiza, edita y publica como de costumbre.
Previsualizar los cambios
Antes de publicar, valida tus cambios con distintas entidades y vistas.
- Vista previa de la página (2): los cambios aparecen en directo en la vista previa a medida que los haces.
- Conmutador de entidad (parte superior del editor): cambia entre las entidades del grupo de páginas para confirmar que el diseño se ve correcto con distintos contenidos.
- Controles de visor (7): comprueba las vistas de escritorio, tableta y móvil.
- Vista previa de cambios (9): genera un enlace de vista previa que puedes compartir, con todos los cambios locales en un momento dado. Ten en cuenta que esta instantánea no se actualizará para reflejar las ediciones posteriores; genera una nueva vista previa para ver los cambios siguientes.
Publicar tus cambios
Haz clic en Publicar en los controles de cambios (8) para activar las actualizaciones del diseño en todas las páginas del grupo de páginas simultáneamente. Si tus páginas ya están activas, este botón muestra Actualizar # páginas.
Para verificarlo, abre el sitio en directo (9) y actualiza para confirmar que las actualizaciones son visibles.
Nota: el botón Publicar está desactivado mientras hay un despliegue en curso o tu sitio tiene errores. Aún puedes hacer y guardar cambios localmente; estarán listos para publicarse una vez que termine el despliegue o se resuelva el error. Consulta Ver páginas e Investigar errores para más detalles.