Compartir vía

Personalice las páginas web con el editor de páginas del estudio de diseño

Después de agregar las páginas web que necesita y administrar su jerarquía en el mapa del sitio, puede agregar diferentes componentes. El editor de páginas del estudio de diseño WYSIWYG es parte del espacio de trabajo de Pages. Use el editor para agregar y editar los componentes que necesita en el lienzo.

Uso del editor

Para utilizar el editor:

  1. Abra el estudio de diseño para editar el contenido y los componentes del portal.

  2. Vaya al espacio de trabajo Páginas.

  3. Seleccione la página donde le gustaría agregar el componente o la sección.

  4. Para agregar una sección, coloque el cursor sobre cualquier área de sección editable y luego seleccione el signo más (+). A continuación, puede elegir entre seis opciones de diseño de sección.

    Las seis opciones de diseño de secciones.

  5. Para agregar un componente, desplace el cursor sobre la sección donde desea colocar el componente y luego seleccione +. A continuación, puede elegir entre los componentes disponibles.

    Opciones del menú Agregar componente.

    Nota

    También puede crear y utilizar plantillas web como componentes en páginas web.
    Más información: Cómo crear un componente de plantilla web

    Puede arrastrar y soltar secciones, columnas y componentes para reorganizarlos en una página.

    Para arrastrar un objeto, haga clic con el botón izquierdo y mantenga presionado el botón del ratón, o pulse la barra espaciadora mientras está enfocado. A continuación, arrastre el objeto al área de destino usando las flechas del teclado o el ratón. Aparecen zonas de colocación para indicar dónde se puede colocar el objeto. Una vez que llegue a la zona de colocación, suelte el botón izquierdo del ratón o presione la barra espaciadora para colocar el objeto.

    Nota

    • Algunos componentes no se pueden arrastrar, incluidos el encabezado, el pie de página y algunos componentes anidados (enlaces dentro de un componente de texto, por ejemplo).
    • La funcionalidad de arrastrar y soltar no es compatible con las secciones que tienen la flex-directionpropiedad CSS establecida en row-reverse.

  6. Para eliminar un componente, elija el componente en el lienzo y luego seleccione Eliminar.

Para una experiencia de edición más inmersiva, puede usar el modo de edición de pantalla completa seleccionando el icono de flecha doble en la esquina superior derecha del editor. También puede cambiar al Visual Studio Code, acercar (+), alejar (-) o Restablecer la vista del lienzo de diseño de la página al 100%.

Controles para opciones de edición inmersiva, que incluyen acercar, alejar y restablecer.

Editar componentes

Todas las secciones y componentes permiten la edición en contexto. Puede editar cualquier sección o componente directamente desde el lienzo.

Seleccione el icono de pincel para ajustar los estilos de una sección o componente.

Captura de pantalla del icono de pincel

Los estilos disponibles se basan en el tipo de componente. Actualmente, se admiten secciones, texto, botones, imágenes y vídeos. Los estilos disponibles varían según el tipo de componente e incluyen:

  • Diseño: controlar el posicionamiento y la disposición de los elementos en una página, como márgenes, relleno y posición.

  • Decoraciones: mejorar la apariencia visual de elementos, como bordes, sombras y radios de esquina.

  • Tipografía: cambiar la apariencia del texto, incluidas propiedades como familia de fuentes, tamaño de fuente y espacio entre letras.

Nota

Cuando utilice el icono del pincel para aplicar estilos, estos ajustes suelen tener prioridad sobre los configurados en el espacio de trabajo Estilos y sobre cualquier CSS personalizado existente. Por ejemplo, alterar la fuente de un componente de texto con la herramienta Pincel normalmente anulará la fuente especificada por un tema (como "Título 1") u otros estilos heredados. Sin embargo, los estilos definidos con la directiva !important en la CSS personalizada no se reemplazan.

Deshacer/rehacer

En el espacio de trabajo de Pages, los botones de deshacer/rehacer se muestran en la parte superior izquierda del lienzo. El botón de deshacer se habilita cuando realiza un cambio. El botón de rehacer se habilita cuando deshace una acción.

El espacio de trabajo de Pages con los botones de deshacer y rehacer mostrados.

Para revertir una acción, seleccione el botón Deshacer.

Para revertir una acción de dehacer, seleccione el botón Rehacer.

Deshacer y rehacer solo admiten cambios que realice en el espacio de trabajo de Pages. Su historial de acciones se borra cuando actualiza la página del navegador o navega a otro espacio de trabajo dentro del estudio de diseño.

Limitaciones

No se admite sincronizar, guardar, previsualizar, hacer zoom, ampliar/reducir el área de trabajo, navegar entre espacios de trabajo y las páginas, y cargar medios y archivos CSS.

Nota

  • No puede eliminar el encabezado ni el pie de página en el espacio de trabajo de Páginas. Vea plantillas web para obtener información sobre cómo crear diseños de página personalizados.
  • Para sitios creados con Power Pages antes del 23 de septiembre de 2022 hay un problema conocido relacionado con los temas. Más información: Ajuste del color de fondo para su sitio de Power Pages
  • Cuando el JavaScript personalizado se escribe en una etiqueta de script dentro de la copia de la página, las etiquetas Liquid dentro del JavaScript personalizado se reemplazan con un contenedor HTML durante la carga de Studio. Este reemplazo rompe la funcionalidad JavaScript personalizada. Para evitar este problema, el JavaScript personalizado solo debe agregarse en el atributo custom_javascript.

Editar componentes de código

Las propiedades de los componentes de código se pueden editar dentro del espacio de trabajo de Pages.

Para eidtar un componente de código:

  1. Seleccione el componente y elija Editar componente de código en la barra de herramientas.

  2. Establezca propiedades para su componente de código.

  3. Seleccione Listo.

Para obtener más información sobre cómo agregar componentes de código a formularios y páginas, consulte Usar componentes de código en Power Pages.

Errores de Liquid

Si una página no se procesa debido a un problema de sintaxis de Liquid , aparece un cuadro de diálogo de error. El cuadro de diálogo describe el problema e incluye un botón Editar código que abre el archivo en Visual Studio Code para la web. Si descarta el cuadro de diálogo seleccionando la opción Continuar editando, seguirá viendo el error en las notificaciones con una opción Editar código para solucionarlo.

Solucionar un error de Liquid

Para corregir un error de Liquid:

  1. En el diálogo del error, seleccione Editar código. Visual Studio Code para la web se abre y puede desplazarse hasta la línea con el error, como una etiqueta {% endif %} que falta.

    Cuadro de diálogo de error de Liquid

  2. Corrija el marcado de Liquid.

  3. Pulse Ctrl+S para guardar el archivo.

  4. Vuelva al Estudio de Power Pages y seleccione Sincronizar para volver a cargar la página. La página debe mostrarse sin errores.

Consulte también

  • Last updated on