Editar i maquetar

Blocs més recurrents #

Es disposa d’una gran quantitat de blocs que es poden utilitzar per al disseny de pàgines.
Explicarem per sobre l’ús dels blocs més comuns de Gutenberg. Si es fa servir un tema per editar la pàgina que no sigui Gutenberg, és probable que les opcions que es mostren a continuació variïn, ampliant-se o restringint-se segons el tema d’edició que s’hagi triat. Per més informació…

Capçalera #

S’utilitza per afegir un encapçalament, amb les etiquetes H2, H3, H4, H5 i H6 (les H mostren la jerarquia dels títols, com més petit el número més importància té el títol), restant l’etiqueta H1 reservada pel títol.

1. Ens dona l’opció de transformar el bloc a un altre tipus compatible amb el que estem treballant.
2. Es pot arrossegar el bloc.
3. Comandaments per moure el bloc a dalt o a baix d’on està situat.
4. Canviar l’alineació.
5. Les etiquetes de capçalera que disposem, des de l’H1 a la H6. No és recomanable utilitzar l’etiqueta H1, ja que s’aplicarà al títol de l’entrada, i per norma només cal que hi hagi un únic H1 per pàgina. El més comú és fer ús de les etiquetes H2 a H4 i no superar H6.
6. Canviar l’alineació de la capçalera respecte del text.
7. Posar en negreta.
8. Posar en cursiva (Itàlica).
9. Posar un enllaç.
10. Més: S’obre un menú desplegable on podem triar les següents opcions:
    • Codi en línia.
    • Color del text.
    • Entrada de teclat.
    • Imatge en línia.
    • Ratllat.
    • Subíndex.
    • Superíndex.
11. Opcions. S’obre un menú desplegable on podem triar les següents opcions:
    • Mostrar més opcions. S’obrirà el menú “Opcions” situat a mà dreta.
      • Lletra tipogràfica: Podrem triar entre diferents mides de lletra predeterminades, o posar una mida específica.
      • Paràmetres de color: Des d’aquí disposem de l’opció de seleccionar el color de fons del paràgraf, així com el color de la lletra.
      • Avançat:
        • Àncora HTML.
          Introdueix una paraula o dues – sense espais – per a crear una adreça de lloc web única només per a aquest bloc, anomenada «Àncora». Després podreu enllaçar directament a aquesta secció de la pàgina.
        • Classe(s) CSS addicional(s).
          Permet afegir una classe CSS que s’aplicaria sobre l’encapçalament. Serà útil si volem aplicar els mateixos estils a diverses capçaleres.
    • Copiar.
    • Duplicar.
    • Insereix abans.
    • Insereix posteriorment.
    • Mou a.
    • Editar com a HTML (Llenguatge de marcatge que ens permet indicar l’estructura del nostre document mitjançant etiquetes).
    • Afegeix als blocs reutilitzables.
    • Agrupa.
    • Elimina el bloc.

Paràgraf #

És el bloc que s’afegeix per defecte quan canviem de línia prement “Enter“, ja que és el més utilitzem quan afegim continguts perquè ho utilitzem per introduir el text de les pàgines.

1. Ens dona l’opció de transformar el bloc a un altre tipus de bloc compatible amb el qual estem treballant.
2. Es pot arrossegar el bloc.
3. Comandaments per moure el bloc a dalt o a baix d’on està situat.
4. Canviar l’alineació del text.
5. Posar en negreta.
6. Posar en cursiva (Itàlica).
7. Posar un enllaç.
8. Més. S’obre un menú desplegable on podem triar les següents opcions:
   • Codi en línia.
   • Color del text.
   • Entrada de teclat.
   • Imatge en línia.
   • Ratllat.
   • Subíndex.
   • Superíndex.
9. Opcions.
   S’obre un menú desplegable on podem triar les següents opcions:
   • Mostrar més opcions. S’obrirà el menú “Opcions” situat a mà dreta.
     • Lletra tipogràfica: Podrem triar entre diferents mides de lletra predeterminades, o posar una mida específica.
     • Paràmetres de color: Des d’aquí disposem de l’opció de seleccionar el color de fons del paràgraf, així com el color de la lletra.
     • Configuració del text: Podrem capitalitzar (posar en grandària gran) la primera lletra del paràgraf.
     • Avançat:
       • Àncora HTML.
         Introdueix una paraula o dues – sense espais – per a crear una adreça de lloc web única sols per a aquest bloc, anomenada «Àncora». Després podreu enllaçar directament a aquesta secció de la pàgina.
       • Classe(s) CSS addicional(s).
         Permet afegir una classe CSS que s’aplicaria sobre el paràgraf. Serà útil si volem aplicar els mateixos estils a diversos paràgrafs.
   • Copiar.
   • Duplicar.
   • Insereix abans.
   • Insereix posteriorment.
   • Mou a.
   • Editar com a HTML (Llenguatge de marcatge que ens permet indicar l’estructura del nostre document mitjançant etiquetes).
   • Afegeix als blocs reutilitzables.
   • Agrupa.
   • Elimina el bloc.

Imatge #

Aquest bloc ens permetrà afegir imatges a la pàgina. Un cop agregat el bloc veurem una caixa on podrem triar com volem pujar la imatge que mostrarem:

• Fer una pujada des dels arxius de la nostra terminal.
• Seleccionar-la des de la Mediateca.
• Carregar des d’una pàgina externa, indicant l’URL de la imatge.

Un cop seleccionada la imatge veurem que es mostra dins del bloc i el menú superior s’amplia:

1. Ens dona l’opció de transformar el bloc a un altre tipus de bloc compatible amb el qual estem treballant.
2. Es pot arrossegar el bloc.
3. Comandaments per moure el bloc a dalt o a baix d’on està situat.
4. Canviar l’alineació de la imatge.
5. Posar un enllaç.
6. Encapsa.
   Ens dona una sèrie d’opcions:
   • Afegir text damunt de la imatge, canviar la posició del contingut i commutar a altura completa.
   • Zoom.
   • Ràtio de l’aspecte.
   • Gira.
   • Aplica.
   • Cancel·la.
7. Reemplaça la imatge.
8. Afegir text damunt de la imatge, canviar la posició del contingut i commutar a altura completa.
9. Opcions.
   S’obre un menú desplegable on podem triar les següents opcions:
   • Mostrar més opcions. S’obrirà el menú “Opcions” situat a mà dreta.
     • • Paràmetres dels mèdia.
     • Dimensions.
     • Superposició:
       • Color:
         • Sòlid.
         • Degradat.
       • Opacitat.
     • Avançat:
       • Àncora HTML.
         Introdueix una paraula o dues – sense espais – per a crear una adreça de lloc web única sols per a aquest bloc, anomenada «Àncora». Després podreu enllaçar directament a aquesta secció de la pàgina.
       • Classe(s) CSS addicional(s).
         Permet afegir una classe CSS que s’aplicaria sobre la imatge. Serà útil si volem aplicar els mateixos estils a diverses imatges.
   • Copiar.
   • Duplicar.
   • Insereix abans.
   • Insereix posteriorment.
   • Mou a.
   • Editar com a HTML (Llenguatge de marcatge que ens permet indicar l’estructura del nostre document mitjançant etiquetes).
   • Afegeix als blocs reutilitzables.
   • Agrupa.
   • Elimina el bloc.