Personalitzar pàgines web amb l'editor de pàgines de l'estudi de disseny

Després d'afegir les pàgines web que necessiteu i d'administrar-ne la jerarquia al mapa del lloc, podeu afegir-hi diversos components. L'editor de pàgines de l'estudi de disseny WYSIWYG forma part de l'àrea de treball Pàgines. Utilitzeu l'editor per afegir i editar els components que necessiteu al llenç.

Ús de l'editor

Per utilitzar l'editor:

  1. Obriu l'estudi de disseny per editar el contingut i els components del portal.

  2. Aneu a l'àrea de treball Pàgines.

  3. Seleccioneu la pàgina on voleu afegir el component o la secció.

  4. Per afegir una secció, passeu el ratolí per damunt de qualsevol àrea de secció editable i, a continuació, seleccioneu el signe més (+). A continuació, podeu triar entre sis opcions de disposició de secció.

    Les sis opcions de disposició de la secció.

  5. Per afegir un component, passeu el punter del ratolí per sobre de la secció on voleu col·locar el component i, a continuació, seleccioneu +. A continuació, podeu triar entre els components disponibles.

    Opcions del menú per afegir components.

    Nota

    També podeu crear i utilitzar plantilles web com a components a les pàgines web.
    Més informació: Procediment: Crear un component de plantilla web (versió preliminar)

    Podeu arrossegar i deixar anar seccions, columnes i components per reorganitzar-los en una pàgina.

    Per arrossegar un objecte, feu clic i no deixeu anar el botó del ratolí o premeu la barra d'espai mentre té el focus. A continuació, arrossegueu l'objecte a l'àrea de destinació amb el ratolí o les fletxes del teclat. Les zones de col·locació apareixen per indicar on es pot col·locar l'objecte. Un cop assoliu la zona de col·locació, deixeu anar el botó esquerre del ratolí o premeu la barra d'espai per deixar anar l'objecte.

    Nota

    • Alguns components no es poden arrossegar, com ara la capçalera, el peu de pàgina i alguns components imbricats (per exemple, els enllaços dins d'un component de text).
    • La funcionalitat d'arrossegar i deixar anar no està admesa per a les seccions amb la propietat CSS flex-direction establerta en row-reverse.

  6. Per suprimir un component, trieu el component al llenç i, a continuació, seleccioneu Suprimeix.

Per gaudir d'una experiència d'edició més immersiva, podeu utilitzar el mode d'edició de pantalla completa seleccionant la icona de fletxa doble a la part superior dreta de l'editor. També podeu canviar al Visual Studio Code, ampliar(+), reduir (-) o restablir la visualització del llenç del disseny de pàgina al 100 %.

Controls per a les opcions d'edició immersives, incloent-hi ampliar, reduir i restablir.

Edita els components

Totes les seccions i els components permeten l'edició en context. Podeu editar qualsevol secció o component directament des del llenç.

Seleccioneu la icona del pinzell per ajustar els estils d'una secció o component.

Captura de pantalla de la icona del pinzell.

Els estils disponibles es basen en el tipus del component. Actualment, s'admeten seccions, text, botons, imatges i vídeos. Els estils disponibles varien segons el tipus de component i inclouen:

  • Disseny : controleu la posició i la disposició dels elements d'una pàgina, com ara els marges, el farciment i la posició.

  • Decoracions : milloren l'aspecte visual d'elements, com ara sanefes, ombres i radi de cantonada.

  • Tipografia : canvieu l'aparença del text, incloses propietats com la família de lletres, la mida del tipus de lletra i l'espaiat entre lletres.

Nota

Quan utilitzeu la icona del pinzell per aplicar estils, aquests ajustos generalment tenen prioritat sobre els paràmetres configurats a l'espai de treball Estil i qualsevol personalització existent CSS. Per exemple, modificar el tipus de lletra d'un component de text amb l'eina pinzell normalment substituirà el tipus de lletra especificat per un tema (com ara "Encapçalament 1") o altres estils heretats. Tanmateix, els estils definits amb la !important directiva al vostre costum CSS no s'han sobreescrit.

Desfés o refés

A l'àrea de treball Pàgines, els botons per desfer i refer es mostren a la part superior esquerra del llenç. El botó per desfer s'habilita quan feu un canvi. El botó per refer s'habilita quan desfeu una acció.

Àrea de treball Pàgines amb els botons per desfer i refer.

Per revertir una acció, seleccioneu el botó Desfés.

Per revertir una acció desfeta, seleccioneu el botó Refés.

Les accions per desfer i refer només admeten els canvis que feu a l'àrea de treball Pàgines. L'historial d'accions s'esborra quan actualitzeu la pàgina del navegador o navegueu a una altra àrea de treball dins de l'estudi de disseny.

Limitacions

Accions com ara sincronitzar, desar, previsualitzar, fer zoom, ampliar/reduir l'àrea de treball, navegar entre àrees de treball i pàgines i carregar fitxers multimèdia i CSS no estan admeses.

Nota

  • No pots suprimir la capçalera o el peu de pàgina a l'espai de treball del Pages. Vegeu Plantilles web per obtenir informació sobre la creació de disposicions de pàgina personalitzades.
  • Per als llocs creats amb Power Pages anterior a 23 de setembre de 2022 hi ha un problema conegut relacionat amb els temes. Més informació: Ajustar el color de fons del lloc de Power Pages
  • Quan s'escriu JavaScript personalitzat en una etiqueta de script dins de la còpia de la pàgina, les etiquetes líquides del JavaScript personalitzat se substitueixen per un embolcall HTML durant la càrrega de Studio. Aquesta substitució trenca la funcionalitat personalitzada de JavaScript. Per evitar aquest problema, el JavaScript personalitzat només s'ha d'afegir a l'atribut custom_javascript .

Editar components de codi

Les propietats de component de codi es poden editar a l'interior de l'àrea de treball Pàgines.

Per editar un component de codi:

  1. Seleccioneu el component i trieu Edita el component de codi des de la barra d'eines.

  2. Establiu les propietats del component de codi.

  3. Seleccioneu Fet.

Per obtenir més informació sobre com afegir components de codi a formularis i pàgines, vegeu Utilitzar components de codi al Power Pages.

Errors de líquids

Si una pàgina no es representa a causa d'un problema de sintaxi del Liquid , apareixerà un diàleg d'error. El diàleg descriu el problema i inclou un botó Edita el codi que obre el fitxer al Visual Studio Codi per al web. Si tanqueu el diàleg seleccionant l'opció Continua editant , encara veureu l'error a les notificacions amb l'opció Edita el codi per solucionar-ho.

Corregir un error de Liquid

Per corregir un error de Liquid:

  1. Al quadre de diàleg d'error, seleccioneu Edita el codi. Visual Studio S'obre el codi per al web i podeu desplaçar-vos fins a la línia amb l'error, com ara una etiqueta que falta {% endif %} .

    Diàleg d'error líquid.

  2. Corregeix el marcatge Liquid.

  3. Premeu Ctrl+S per desar el fitxer.

  4. Torneu a Power Pages Studio i seleccioneu Sincronitza per tornar a carregar la pàgina. La pàgina s'ha de representar sense errors.

Consulteu també

  • Last updated on