FORMACIÓ

Gutenberg: Bloc carrusel

Portaledu està augmentant les ferramentes disponibles en l’editor Gutenberg. Dins d’esta sèrie de nous blocs que s’aniran incorporant, presentem el bloc de carrusel.

Este bloc permet seleccionar les entrades d’una categoria i visualitzar-les en diapositives de mode circular, realitzant una presentació d’aquestes i afegint així dinamisme a les pàgines.

Resulta ideal per a la presentació visual de categories com a notícies o altres temes, ja que el bloc triarà les últimes entrades de la categoria seleccionada per a la seua presentació. Podem veure un exemple a continuació 👇🏽

El bloc és fàcilment configurable des de l’editor i presenta les opcions següents:

  • Categoria. En triar una categoria, les entrades pertanyents a esta, ordenades de forma descendent per data de creació, seran seleccionades per a la visualització
  • Nombre d’entrades. Nombre total d’entrades seleccionades per a la visualització. Si es deixa en el valor per defecte 5, optaran a la visualització les cinc últimes entrades pertanyents a la categoria triada.
  • Duració de cada diapositiva. Temps en mil·lisegons que romandrà visualitzada una diapositiva. Passat este temps, el carrusel girarà per a seleccionar la següent.
  • Entrades per diapositiva. Amb un valor mínim de 2 i màxim de 6. Permet seleccionar quantes diapositives mostrarà el carrusel simultàniament.
  • Mostrar extracte. Indica si en les diapositives es mostraran o no les primeres línies de les entrades.
  • Mostrar llegir més. Es pot ocultar/mostrar l’enllaç (llegir més) per a navegar fins a l’entrada.
  • Mostrar data. es pot ocultar/mostrar la data del post.

    Els elements que estaran sempre presents en les dispositives i la presència dels qualsno és configurable són:
    • Imatge destacada de l’entrada. En cas que l’entrada manque d’imatge personalitzada, s’utilitzarà una imatge per defecte pròpia del bloc carrusel.
    • Títol de la diapositiva

També podem crear un carrusel minimalista, només amb les imatges destacades dels posts. Per a fer-ho, activarem l’opció Ocultar informació de l’entrada i seleccionarem una proporció de la imatge.

Aconseguirem un resultat com este:

Podem també configurar el color dels punts i fletxes de navegació del visor, així como ocultar qualsevol dels elements.

Els usuaris amb rols superiors en el lloc web, com ara direcció o manteniment, veuran una configuració addicional, que els oferix la possibilitat de definir una imatge de substitució per a aquelles entrades que no tinguen definida cap imatge destacada.

Gutenberg: Bucle de consulta

Este bloc comprén tota la funcionalitat del bloc d’Últimes Entrades, permetent a més a l’usuari un control total de l’aparença.

Si desitges mostrar diferents entrades en mode de llistat o en panells amb diverses columnes, t’interessa este bloc de generateblocks anomenat Query Loop o Bucle de Consulta. Este bloc permet mostrar dinàmicament llistes de contingut.

Usant el bucle de consulta, pots mostrar les entrades més recents del teu blog o seleccionar entrades de categories específiques en la teua pàgina d’inici o en una secció destacada. Este contingut pot ser personalitzat a través d’una interfície intuïtiva segons les condicions que establim, com poden ser el tipus de publicació (entrades, pàgines, esdeveniments), categories, etiquetes o autors.

Com funciona el bloc de Bucle de Consulta?

En inserir un bloc de bucle de consulta en una pàgina o publicació de WordPress usant GenerateBlocks, se t’oferixen diferents plantilles predeterminades, la configuració de les quals podràs personalitzar després. En este cas, triarem la plantilla de dos columnes amb imatge destacada:

Pots configurar paràmetres com:

  1. Tipus de contingut: Pots triar mostrar entrades, pàgines o esdeveniments.
  2. Filtres: Seleccionar contingut basat en categories, etiquetes, autors, dates, entre altres. Estos filtres ajuden al fet que la consulta retorne només el contingut rellevant per al context de la pàgina.
  3. Orde i límit: Pots establir com s’ordenaran els resultats i quants elements es mostraran.
  4. Disseny personalitzat: Un dels grans avantatges de GenerateBlocks és la flexibilitat de disseny. Pots utilitzar altres blocs del plugin, com el bloc de quadrícula, encapçalat o imatge, dins del bucle de consulta per a crear una estructura visual atractiva.

En l’exemple següent, triarem que es mostren entrades o posts d’una determinada categoria. En primer lloc, triem posts com a tipus de contingut:

Bucle de consulta - Selecció tipus de contingut

A continuació, desitgem establir un filtre perquè es mostren solament les entrades corresponents a una categoria determinada. Per a això, afegirem un paràmetre (taxonomies):

Escollirem Taxonomies:

Seleccionem Categories:

Llavors podrem triar una categoria per a mostrar. En la imatge us mostrem com queda la configuració completa del nostre bucle de consulta:

I a continuació us mostrem com queda la visualització:

Generateblocs - Bucle de consulta - Vista front

Ampliar el nombre de columnes de visualització

Veiem que en la plantilla predeterminada, es visualitza el panell d’entrades a dos columnes. Ajustant la plantilla de l’entrada, podem variar el nombre de columnes de visualització. Per a això, hem d’indicar el percentatge que ocupa cada entrada en el contenidor. Per defecte està al 50%. Per a tres columnes, ho posarem al 33%, així:

Personalització avançada del disseny

El poder de GenerateBlocks residix en la seua capacitat per a controlar cada aspecte del disseny. Amb el bloc de bucle de consulta, no sols pots especificar quin contingut es mostra, sinó també com es mostra. Això inclou:

  • Disseny de quadrícula: Pots configurar el disseny del contingut en columnes, la qual cosa és ideal per a crear portafolis o galeries.
  • Tipografia i estils: Canviar fàcilment les fonts, colors i espaiats.
  • Composició flexible: Atés que GenerateBlocks està compost per blocs modulars, pots construir plantilles complexes mesclant el bucle de consulta amb altres blocs per a aconseguir dissenys únics.

Et recomanem que explores cada objecte en l’estructura del teu contingut i veges les seues opcions de configuració. Sens dubte trobaràs tot un món d’opcions per a configurar l’aspecte del teu contingut, incloent-hi el comportament en mode responsiu, per a visualització en dispositius com tauletes i mòbils.

Informació relacionada:

Bucle de consulta amb paginació

Com crear pàgines filles i jerarquies de pàgines

🎯Què són les pàgines pare i filla?

A diferència de les entrades (posts), les pàgines en WordPress poden tindre una estructura jeràrquica. Això significa que una pàgina pot ser pare d’una altra, creant una relació de dependència.

Per exemple, si tens una pàgina anomenada “Projectes”, i dins d’ella vols incloure una secció per a “Europeus”, pots fer que “Europeus” siga una pàgina filla de “Projectes”. Això es reflectirà en la URL, de la manera següent:

http://portal.edu.gva.es/el_meu_centre/projectes/europeus

🛠 Com crear una pàgina filla en WordPress

A continuació, t’expliquem el procés pas a pas:

Crear una nova pàgina filla

  1. Accedix al panell d’administració de PortalEdu i ves a “Pàgines” > “Afegir nova”.
  2. Escriu el títol i el contingut de la nova pàgina.
  3. En la part dreta, en la zona superior, es mostren diverses metadades de la pàgina.
  4. En el camp “Pare”, selecciona la pàgina pare a la qual desitges associar esta nova pàgina.
  5. Publica la pàgina fent clic en “Publicar”.
Imatge establir pàgina pare

Editar una pàgina ja creada perquè passe a ser filla

  1. Accedix al panell d’administració de PortalEdu i ves a “Pàgines”
  2. En el menú contextual que apareix davall del títol de la pàgina, fes clic sobre “Edició ràpida”.
  3. En el formulari desplegable que apareix, en la part dreta, on es veu “Superior” selecciona la pàgina que serà pare d’esta.
  4. Polsa en “Actualitzar”

Com afecta la jerarquia de pàgines al slug de la URL?

Quan crees una pàgina filla, la URL s’estructura automàticament per a reflectir esta jerarquia. Per exemple:

  • Pàgina pare: http://portal.edu.gva.es/el_meu_centre/projectes
  • Pàgina filla dins de projectes: http://portal.edu.gva.es/el_meu_centre/projectes/europeus

Si canvies la pàgina pare d’una pàgina filla, la URL també s’actualitzarà automàticament.

🎨 Beneficis d’organitzar les pàgines en jerarquia

✅ Facilita la navegació en el lloc web.
✅ Millora l’organització del contingut.
✅ Permet URLs més estructurades i amigables per a SEO.

Informació del centre (nou aspecte)

S’ha modernitzat l’aparença de la informació del centre. Amb un aspecte més modern i responsiu podem mostrar en el nostre lloc la informació del centre.

Recordeu que per a editar aquesta informació heu d’accedir, des del tauler, a la secció d’Eines -> Informació del centre

Podeu mostrar la informació en el vostre web mitjançant el widget d’informació del centre, en qualsevol de les posicions permeses per a widgets. També podeu mostrar la informació en qualsevol pàgina o post utilitzant un shortcode (codi d’inserció), com us detallem a continuació:

Mostrarem mapa/imatge/dades utilitzant el shortcode:

[centre_info]
Vista info centre amb mapa, imatge i dades

Mostrarem mapa/dades utilitzant el shortcode:

[centre_info position='2']
Vista info centre amb mapa i dades

Mostrarem imatge/dades utilitzant el shortcode:

[centre_info position='3']
Vista info centre amb imatge i dades

Amb qualsevol de les opcions, l’aspecte s’adaptarà de forma responsiva a la pantalla del dispositiu.

Vista responsiva mapa imatge dades centre
Vista_info_centre_2_responsiva mapa dades centre
Vista_info_centre_3_responsiva

Com ocultar el nom de l’autor i altres configuracions del tema?

S’han habilitat les opcions del mòdul de blog del tema Generate Press, de manera que ara és possible, entre altres:

  • Ocultar el nom de l’autor de les entrades en la web de centre
  • Mostrar les entrades amb l’opció de “Llegir més…”
  • Ajustos en les imatges destacades

En cas de voler configurar esta opció o continuar mostrant el nom dels autors de les pàgines, es pot fer accedint a l’opció de menú Aparença > Personalitzar > Disseny > Blog

Estes opcions són configurables tant si l’entrada es mostra sola (Single) com en altres maquetacions de pàgina (Arxive).

En eixe mateix diàleg, en la part inferior, des de les opcions de personalització de la imatge destacada, es pot fer variar tant la grandària com la visibilitat i posició d’estes. Si bé el tema permet també la definició de grandàries personalitzades en píxels, des de PortalEdu es desaconsella fer ús d’esta opció.

Com ocultar el títol de la pàgina o entrada

Per a ocultar el títol de qualsevol pàgina o entrada, només hem d’editar-la i, una vegada dins de l’editor, en el panell dret, en els ajustos de l’entrada o pàgina, en la part de baix, trobarem l’opció Desactivar elements –> Títol del contingut

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
exemple d’arxiuDescàrrega

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.

Salt: plug-in per a traduir automàticament

Recorda: Per a qualsevol entrada o pàgina feta amb l’editor estàndard.

Amb aquesta funcionalitat es pot realitzar una traducció automàtica amb el servei GVA Salt (salt.gva.es), tant de castellà a valencià, com de valencià a castellà. El plugin habilita un quadre metabox en l’edició de contingut el qual inicia la traducció de les següents parts:

  • Títol
  • Cos (Text, imatges i blocs en general)
  • Taxonomies
    • Categories
    • Etiquetes

Funcionament

Partirem d’un contingut (entrada o pàgina) creat en un idioma (valencià o castellà), ha d’haver sigut guardat prèviament. Quan editem eixe contingut, podrem veure un metabox (les opcions que apareixen en la columna dreta en l’edició de continguts) amb el títol : Traduccions Salt.

Si premem en el botó Traduir apareixerà una finestra emergent demanant confirmació de l’acció per a verificar que tot el contingut s’ha guardat prèviament. En el cas contrari, si no hem guardat tots els canvis en l’idioma original, els canvis no guardats es perdrien, a més de no ser traduïts.

Si confirmem, llavors procedirà a realitzar l’acció de traducció del contingut original i ens redirigirà a l’edició del contingut traduït perquè el puguem supervisar.

Atenció: Si ja existix una traducció prèvia del contingut, és a dir, si la nostra entrada o pàgina té ja associada una entrada o pàgina en l’idioma de destí, aquesta se sobreescriurà.

A tindre en compte

  • Les taxonomies (tant categories com etiquetes), queden configurades amb els parells de traducció de les taxonomies originals. Quan les taxonomies originals no tinguen traducció, es crearà una traducció nova d’aquestes.
  • Si hem assignat una imatge destacada a la nostra entrada original, l’entrada traduïda tindrà la mateixa imatge destacada. Podem canviar-la en l’entrada traduïda si ho considerem convenient.
  • Hi ha alguns blocs de contingut dinàmic, per exemple carrusels d’entrades o similar, que potser no agarren la categoria traduïda. En estos casos, simplement hem de seleccionar manualment la categoria que corresponga en l’idioma de destí. En tractar-se de blocs dinàmics que mostren entrades per categoria, hauria de ser suficient amb eixa acció. Apareixeran automàticament les entrades categoritzades en l’idioma traduït.

Consell: Revisa sempre les traduccions automàtiques perquè poden contindre errors!

gvaSAI: Nova categoria d’incidències TIC relacionades amb la DANA 2024

🛠️ NOVA CATEGORIA INCIDÈNCIES TIC RELACIONADES AMB LA DANA 2024

Amb la finalitat d’agilitzar la gestió d’incidències i millorar la nostra resposta, hem habilitat una nova categoria de “Danys catàstrofe” en https://gvasai.edu.gva.es/. (https://gvasai.edu.gva.es/)

📲 Qualsevol incidència relacionada amb les TIC pot ser reportada directament en esta categoria, la qual cosa facilitarà la tramitació ràpida i eficaç dels problemes.

📞 Recorda que també pots comunicar-te través del telèfon d’incidències 961 20 76 85 de dilluns a divendres de 8:00h a 20:00h

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