Blocs de l’editor

Què són els blocs?

Els blocs són seccions de contingut que podem afegir al nostre article

Cada vegada que inserim un text o una imatge en el nostre article, l’editor Gutenberg el converteix en un bloc, que permet donar-li format i manejar-lo de forma molt més senzilla.

Editor de blocs Gutenberg
Bloc WordPress

Cada bloc és com una caixa que té la seua pròpia barra d’eines formada per les pròpies del bloc i les comunes a tots. En la part esquerra estan els botons de desplaçament que et permeten arrossegar i canviar la posició del bloc dins de l’article.

Tipus de blocs en Gutenberg

Els blocs es divideixen en categories segons el seu contingut o funció. Tin en compte que amb cada actualització de WordPress i quan Portaledu incorpora nous plugins, apareixen nous blocs i funcionalitats!:

Blocs de Gutenberg
Blocs de Gutenberg
Blocs de Gutenberg
Blocs de Gutenberg
Tipus de blocs
Blocs de Gutenberg
Blocs de Gutenberg

1. Blocs comuns

Són els més habituals, ens permeten afegir textos, imatges i contingut multimèdia.

2. Bloc de Paràgraf

Ens permeten inserir text i donar-li format. Podem canviar l’alineació del text, afegir negretes, cursives i ratllats i incloure enllaços.

Bloc paràgraf
bloc paràgraf

Ajustos avançats: en les eines de la columna dreta trobarem ajustos com a grandària de font, capitalitzar i ajustos de color.

Permet canviar als següents blocs: Encapçalat, Llista, Cita, Preformatat i Vers.

3. Bloc de Llistes

Crea una llista numèrica o amb vinyetes per a estructurar millor el teu contingut. A més, es pot variar la sagnia, afegir negretes, cursives, ratllat i enllaços.

Bloc de llista

4. Bloc d’Encapçalat (Si vols un control més avançat, pots utilitzar el bloc Titular)

Solament podem afegir un H1 (el del títol) però amb aquest bloc podem estructurar el nostre article amb diferents H2 i H3. Podem afegir-li negretes, cursives, enllaços i ratllats.

Bloc de capçalera

Ajustos avançats: nivell d’encapçalat (H1, H2, H3…) i alineament del text.

Per a encapçalats amb major opcions d’estil i personalització, utilitza el bloc Titular de generateblocks.

5. Bloc de Cita

Podem destacar la frase que preferim. Tenim les mateixes eines que el bloc de text. A més ens permet afegir la referència o autor de la cita.

Bloc de cita

6. Bloc d’Imatge

Podem afegir imatges pujant-les nosaltres mateixos, des de la biblioteca de mitjans o des d’un URL i modificar la seua alineació en el contingut.

Bloc d'imatge

Consell avançat: Hi ha un bloc d’imatge més avançat, que permet una major configuració. És el bloc d’imatge de generateblocks. Podràs identificar-lo perquè es mostra amb color blau en la graella de blocs.

Generateblocks - Imatge

7. Bloc de Galeria d’imatges

Ens permet afegir diverses imatges alhora i estructurar-les en columnes i molt més. Més informació ací.

Bloc Galeria d'Imatges

8. Bloc de Coberta

És un bloc d’imatge o vídeo que ens permet afegir un text sobreescrit. Molt útil si volem fer una capçalera de pàgina o un destacat amb un toc de disseny. Ens permet alinear-ho i modificar l’estil del text.

Bloc de coberta
Imatge de mostra

TEXT SOBRE FONS

Ajustos avançats: color de superposició, opacitat.

9. Bloc Fitxer (Ideal per a mostrar PDFs!)

Funciona igual que el bloc d’imatge, però ens permet afegir qualsevol arxiu i crear un enllaç per a veure’l en l’explorador o descarregar-lo al nostre ordinador.

Bloc de fitxer

10. Bloc d’Àudio

Bloc similar als d’imatge i arxiu. Ens permet vincular un arxiu d’àudio que es podrà reproduir directament en la pàgina.

Ajustos avançats: reproducció automàtica, repetir i precàrrega.

11. Bloc de Vídeo

Ens permet vincular un arxiu de vídeo que es podrà reproduir directament en l’article.

Bloc de video
Vídeo MP4 1,5MB (480 x 270)

Els blocs enumerats en este post són només un exemple. Amb cada actualització de WordPress i amb alguns plugins incorporats, com GenerateBlocks, trobaràs en l’editor blocs cada vegada més funcionals i variats. Entra en l’editor i comprova-ho!

Primers passos amb l’editor de WordPress

Què és Gutenberg?

Gutenberg és l’editor de blocs de WordPress, que ens permet creari personalitzar els continguts dels nostres articles

La principal diferència de Gutenberg amb l’antic editor clàssic és la seua estructura de blocs. Amb un disseny simplificat, este editor ens permet gestionar qualsevol text o arxiu de les nostres entrades mitjançant blocs.

Estructura de l’editor Gutenberg

Editor gutenberg. Vista detallada.
Vista detallada. Clica per a ampliar.

En la part central tenim el contingut o vista prèvia de l’entrada. Inicialment apareix un apartat per a inserir el títol i un altre per a afegir el text i altre contingut que anirà en el cos del nostre article.

A la dreta tenim un panell lateral, que ofereix ajustos del document (entrada o pàgina) (categoria, etiquetes, imatge…) o de bloc, si tenim algun bloc seleccionat. Podem ocultar i mostrar aquest panell prement sobre la icona corresponent en la barra superior, dalt a la dreta.

Al costat d’aquesta icona tenim també els botons de Vista Prèvia i Publicar.

En la part esquerra de la barra superior, tenim la icona “+”, que ens permet inserir els diferents tipus de blocs. Mitjançant les fletxes podem desfer o refer els canvis realitzats. Finalment, la icona de les línies ens mostra una vista de llista amb els diferents blocs de l’article per a navegar-los ràpidament. Des d’ací podem copiar, pegar, moure o duplicar blocs sense dificultat.

Primers passos

Per inserir un bloc tenim diverses opcions:

  • Des de la icona “+” situada a dalt a l’esquerra. Ací podem o bé buscar el bloc que necessitem en els menús desplegables o bé directament introduir el seu nom en el cercador.
Selector de blocs

  • Quan premem la tecla “Enter” en inserir un text en el contingut, automàticament es crea un nou bloc de text.
  • Consell per a usuaris avançats!: Tal com ens indica l’editor, quan el cursor està en una posició buida de l’area de contingut, (Tecleja / per a triar un nou bloc) escrivint la barra dreta “/” podem començar a escriure el nom del bloc i inserir-lo ràpidament.
Inserir bloc mitjançant la barra capa la dreta
Inserció ràpida de blocs mitjançant “/” i opció “+” per a inserir des del selector de blocs.

  • Prement sobre les icones “+” que apareixen en passar el ratolí sobre el contingut, automàticament es crea un nou bloc de text.

Una vegada inserit un bloc, en seleccionar-lo, apareixerà una barra amb les diferents eines per a aquest. La primera ens permet canviar el tipus de bloc per un altre similar. La resta són opcions per a variar el format, en funció del tipus de bloc.

Barra de ferramentes del bloc

En la part esquerra de la barra de ferramentes del bloc estan els botons de desplaçament, que ens permetran moure el bloc pel contingut de la pàgina.

En tindre’l seleccionat, podrem veure també en el Panell lateral dret les opcions avançades que ens permet aquest bloc.

Blocs bàsics

Gutenberg posseïx nombrosos blocs, ací tens els més útils i habituals:

  • Paràgraf: des d’aquest bloc es pot afegir text i modificar les seues propietats bàsiques (alineats, negreta, cursiva) o afegir enllaços.
  • Encapçalat: solament es pot afegir un H1 (el del títol), però amb aquest bloc és possible estructurar l’entrada amb diferents H2, H3…
  • Imatge: permet afegir imatges, pujant-les des de la biblioteca de mèdia o des d’una URL.
  • Llista: crea una llista numèrica o amb vinyetes per a estructurar millor el contingut.
  • Cita: destaca la frase que preferisques del contingut.

Aquests són només alguns dels blocs més comuns, pots conéixer-los més detalladament treballant directament sobre un post en Portaledu.

Gutenberg posa a la nostra disposició molts altres blocs per a manejar els diferents continguts dels nostres articles. A més, cada bloc té els seus propis ajustos, es pot navegar per ells i revisar totes les seues opcions.

Avís de privacitat

Este lloc web utilitza només cookies tècniques necessàries per al seu funcionament. No s’emmagatzemen dades amb finalitats publicitàries ni es comparteixen amb tercers. S’utilitza analítica interna sense cookies, i només es recull la IP amb finalitats de seguretat.

Veure política de cookies