🙌 Arriben els patrons del Centre en proves!

🎨 T’agrada el disseny del Centre en proves? Ara pots utilitzar-ho en el teu web!

El disseny que estàs veient en el Centre en proves ha sigut creat en patrons de Portaledu, una ferramenta que et permet incorporar estructures de disseny ja preparades en les teues pàgines i entrades, i adaptar-les fàcilment al teu propi centre.

🧩 Els nostres dissenys llestos per a usar i personalitzar

Gràcies als patrons, pots afegir blocs amb un format ja definit i modificar-los al teu gust: canviar textos, imatges, colors o estructura sense necessitat de coneixements tècnics avançats.

📘 Aprén a utilitzar-los pas a pas

En la nova entrada formativa de Portaledu t’expliquem què són els patrons, com inserir-los i com personalitzar-los des de l’editor.
I recorda que es basen en els patrons de WordPress, per la qual cosa són totalment editables.

🔗 Descobreix com aprofitar-los i comença a donar forma al teu web de centre de manera fàcil i professional amb l’última entrada de Portaledu – Ús de patrons

🗃️ Tips per a organitzar el teu web de centre

Estàs creant la web del teu centre i no saps molt bé per on començar a ordenar els continguts? 🤔
No et preocupes! Ací et deixem alguns tips per a organitzar el teu web de manera clara i eficient.

A mesura que construïsques la web, veuràs que pots treballar amb pàgines, entrades, etiquetes i blocs. Cada un té la seua funció, i saber usar-los bé t’ajudarà a mantindre una web neta, fàcil de navegar i senzilla d’actualitzar.

📌 1. Pàgines: el contingut fix
Usa les pàgines per a tota aquella informació estable que no canvia amb freqüència: “Instal·lacions”, “Oferta formativa”, “Contacte” o la portada del teu lloc… Són l’estructura base del teu web.

Tip extra: Les pàgines solen tindre una estructura estable, ara bé, això no vol dir que el que mostren siga sempre igual: les pàgines poden incloure contingut dinàmic, com ara llistes d’entrades per categories (bucle de consulta), carrusels d’imatges o entrades, notícies, o altres elements que s’actualitzen automàticament.

📰 2. Entrades: el contingut viu
Les entrades són ideals per a publicar notícies, novetats o activitats del dia a dia del centre.
A més, poden classificar-se per categories i etiquetes perquè els teus visitants troben fàcilment el que busquen.

Tip extra: si classifiques les teues entrades per categories o etiquetes, com per exemple “Departament de valencià” o “Excursions”, podràs crear automatismes per a mostrar estes entrades de forma agrupada en els blocs de “Carrusel d’entrades” o “Bucle de consulta”.

🏷️ 3. Etiquetes: organitza, no repetisques
Pensa en les etiquetes com a xicotetes paraules clau que agrupen continguts relacionats. No abuses d’elles: usa les justes perquè el cercador intern i els teus lectors puguen orientar-se millor.

🔠 4. Canvia de nom els teus blocs
Mentres edites el teu web, et recomanem canviar de nom els blocs amb noms descriptius (per exemple: “bàner principal” o “bloc de notícies”).
Així serà molt més fàcil localitzar cada secció quan necessites modificar alguna cosa més avant. Podràs fer-ho clicant en els 3 punts del bloc:

5. I recorda: una bona organització al principi t’estalviarà molt temps després.
Mantín una estructura coherent, usa noms clars i revisa de tant en tant que tot seguisca ordenat, perquè també et permetrà utilitzar automatismes.

✍️ Completa la informació del teu centre

Administra, completa i visualitza les dades del teu centre en la seua pàgina web de Portaledu des del “Escriptori > Eines > Informació del Centre”

Només les persones administradores del lloc veuran esta opció, que et permetrà revisar i modificar aspectes com:

  • 📍 Nom del centre
  • 🌍 URL i adreça
  • 🏫 Altres dades identificatives

A més, podràs canviar la imatge del centre fàcilment: fes clic en “Upload image”, tria una imatge de la biblioteca de mitjans o puja una nova, i llest!

Tot això et servirà per a generar el giny automàtic amb la informació de centre, que podràs incloure a través del bloc Shortcode posant:

[centre_info]

📩 Quan hages fet els canvis, recorda polsar “Guardar” perquè s’apliquen en la web.

💡 Un detall important: l’opció “URL Amigable” et permet personalitzar l’adreça del teu web.
En el cas dels centres educatius, el sistema crea automàticament una redirecció des de la URL amb codi de centre cap a la nova direcció amigable (per exemple: portal.edu.gva.es/01010111/*portal.edu.gva.es/centreenproves/*

🔗 Més informació en Portaledu: Completa la informació del centre en Portaledu – Portaledu

📋 Totes les píndoles formatives en un sol lloc

Al llarg de la web has anat trobant xicotetes 💡 bombetes que et mostren com està construïda cada secció i t’oferixen recursos pràctics per a crear la teua pròpia web de centre.

Perquè et siga més fàcil consultar-les i tornar a elles quan ho necessites, hem agrupat totes en un sol espai.
Així podràs accedir directament als temes que més t’interessen, segons el moment en què et trobes en la creació del teu web de centre. 🚀

☝️RECORDA: Sols s’indiquen el paràmetres modificats, la resta no s’han modificat per a la creació del bloc.

01. PÀGINA PRINCIPAL

· Bloc ‘Passe de diapositives’

📐 Estructura:

🛠️ Paràmetres – Contenidor:

  • Marge: Superior 0px / Esquerra -40 px / Dreta -40 px / Inferior 0 px

🔗Enllaços d’interés:

· Bloc – ‘Botons de navegació principal’

📐 Estructura:

🛠️ Paràmetres – Contenidor:

  • Marge: Superior -10px / Esquerra 5% / Dreta 5% / Inferior 0 px

🛠️ Paràmetres – Cuadrícula: 3 contenidors amb una amplària del 33,33%

  • Farciment: 30px 🔗
  • Marge: 10 px 🔗
  • Vora: 5 px 🔗
  • Radi de la vora: 5 px per angles de 90 graus i 50px per angles redons
  • Fons: Opacidad de la imagen – 0,12
  • Grandària: cover
  • Posició: center center

🛠️ Paràmetres – Titular:

  • Marge: Superior 10px / Esquerra 10px / Dreta 10px / Inferior 20 px

🛠️ Paràmetres – Botó:

  • Amplària: 200px
  • Farciment: Superior 15px / Esquerra 20px / Dreta 20px / Inferior 15px
  • Marge: Superior 0px / Esquerra 0px / Dreta 0px / Inferior 10px
  • Radi de la vora: 50px 🔗
  • Grandària de la icona: 25px (⭐ Tip extra: pots seleccionar la icona en svg que desitges copiant el seu codi en esta web)

🔗Enllaços d’interés:
· Coneix tots el blocs de l’editor estándar en Portaledu

· Com afegir icones SVG en HTML – Portaledu

· Bloc ‘Notícies’

📐 Estructura:

🛠️ Paràmetres – Contenidor:

  • Marge: Superior 100px / Esquerra 6% / Dreta 6% / Inferior 0 px

🛠️ Paràmetres – Titular:

  • Marge: Superior 50px / Esquerra 0 px / Dreta 0 px / Inferior 50 px
  • Tipografia: Font Weight: 700 – Bold / grandària de la font: 70 px

🛠️ Paràmetres – Carrusel d’entrades:

  • Selecciona categoria: #Notícies (👉 Recordatori: hauràs de classificar abans les teues entrades amb esta categoria)
  • Nombre d’entrades: 5
  • Duració de cada diapositiva: 2000ms
  • Entrades per diapositiva: 4
  • Cobrir fons amb la imatge: ✅

🔗Enllaços d’interés:
· Coneix el bloc carrusel en Portaledu

· Bloc – ‘Informació de centre’

📐 Estructura:

🛠️ Paràmetres – Contenidor:

  • Marge: Superior 100px / Esquerra 6% / Dreta 6% / Inferior 0 px

🔗Enllaços d’interés:
· Completa la informació del teu centre – Centre en proves!
· Completa la informació del centre en Portaledu – Portaledu

01.1 – INSTAL·LACIONS

· Bloc – ‘Galeria d’imatges’

📐 Estructura:

🛠️ Paràmetres – Galeria d’imatges:

  • Nombre de columnes: 3
  • Disposició: uniforme
  • Relació d’aspecte: 2:3
  • Espaiat entre imatges: xicotet

🔗Enllaços d’interés:
· Coneix el nou bloc de galeria d’imatges – Portaledu

01.2 – OFERTA FORMATIVA

· Bloc – ‘Quadrícula’

📐 Estructura:

🛠️ Paràmetres – Quadrícula: 4 contenidors amb una amplària del 25%, una altura de 400px i un marge de 10px 🔗

🔗Enllaços d’interés:
· Coneix el bloc quadrícula en Portaledu

02. ORGANIGRAMA

· Bloc – ‘Quadrícula – Càrrecs’

📐 Estructura:

🛠️ Paràmetres – Quadrícula: 5 contenidors amb una amplària del 20%

🛠️ Paràmetres – Imatge: Radi de la vora: Superior esquerra 5px / Superior dreta 100px / Inferior esquerra 100px / Inferior dreta 5px

🛠️ Paràmetres – Titular > Càrrec: Marge: Superior 20px

🛠️ Paràmetres – Titular > Nom: Marge: Superior 4px

🔗Enllaços d’interés:
· Coneix el bloc quadrícula en Portaledu

· Bloc – ‘Departaments

📐 Estructura:

🛠️ Paràmetres – Botó amb el ‘Nom del departament’:

  • Amplària: 80%
  • Farciment: Superior 15px / Esquerra 30px / Dreta 30px  / Inferior 15 px
  • Marge: Inferior 10px
  • Vora: 3px 🔗
  • Radi de la vora: Superior esquerra 5px / Superior dreta 50px / Inferior esquerra 50px / Inferior dreta 5px
  • Icona: SVG en HTML [<svg xmlns=”http://www.w3.org/2000/svg” fill=”none” viewBox=”0 0 24 24″><g stroke-width=”0″ id=”SVGRepo_bgCarrier”></g><g stroke-linejoin=”round” stroke-linecap=”round” id=”SVGRepo_tracerCarrier”></g><g id=”SVGRepo_iconCarrier”> <path stroke-linejoin=”round” stroke-linecap=”round” stroke-width=”2″ stroke=”#ff9b0f” d=”M20 15H19M14 15H19M17 13.5V15M4.85714 8H9.14286M4 11L5.53848 5.61531C5.97492 4.08777 6.19315 3.324 6.53044 3.13222C6.82159 2.96667 7.17841 2.96667 7.46956 3.13222C7.80685 3.324 8.02508 4.08777 8.46152 5.61531L10 11M14 20.9776C16.8033 20.725 19 18.369 19 15.5V15M20 20.9776C18.0763 20.8043 16.4382 19.6404 15.5996 18M14 7C14.9319 7 15.3978 7 15.7654 7.15225C16.2554 7.35523 16.6448 7.74458 16.8478 8.23464C17 8.60218 17 9.06812 17 10M7 15C7 15.9319 7 16.3978 7.15224 16.7654C7.35523 17.2554 7.74458 17.6448 8.23463 17.8478C8.60218 18 9.06812 18 10 18″></path> </g></svg>]
  •  Grandària de la icona: 25px

🛠️ Paràmetres – Imatge del/la professor/a:

  • Marge: Esquerra 10% /Dreta 10%

🛠️ Paràmetres – Caixa d’informació del departament (Notícies, Documentació, Activitats…):

  • Bloc pestanyes
  • Contingut: personalitzat

🔗Enllaços d’interés:
· Coneix el bloc pestanyes en Portaledu

· Com afegir icones SVG en HTML – Portaledu

· Bloc – ‘Taula – Tutories’

📐 Estructura:

🛠️ Paràmetres:

  • Amplària fixa: ✅
  • Capçalera de secció: ✅

03. SECRETARIA

· Bloc – ‘Targeta – Secretaria’

📐 Estructura:

🛠️ Paràmetres – Contenidor superior:

  • Altura: 400px
  • Marge: Superior 20px / Dreta 280px
  • Vora: 4px amb codi de color #d5d5d5
  • Radi de la vora: 50px

🛠️ Paràmetres – Contenidor amb imatge:

  • Fons: tria una imatge de la biblioteca de medios
  • Grandària: full
  • Posició: center center

🛠️ Paràmetres – Contenidor amb informació:

  • Farciment: Superior 50px
  • Marge: Superior 30px / Esquerra 50px

· Bloc – ‘Caixes- Documentació’

📐 Estructura:

🛠️ Paràmetres – Quadrícula: 3 contenidors amb una amplària del 33,33%

  • Farciment: Superior 15px / Esquerra 25px / Dreta 25px / Inferior 15px
  • Marge: 10px 🔗
  • Vora: 3px 🔗
  • Radi de la vora: 50px per a les cantonades redones i 5px per a les cantonades rectes

04. ALUMNAT

· Bloc – ‘Título Alumnat’

📐 Estructura:

🛠️ Paràmetres – Títol ‘ALUMNAT’:

  • Contenidor: Farciment – Superior 20px / Esquerra 40px / Dreta 10 / Inferior 10px
  • Titular > Icona: en SVG HTML [<svg fill=”#000000″ viewBox=”0 0 512 512″ xmlns=”http://www.w3.org/2000/svg” version=”1.1″ width=”200px” height=”200px”><g stroke-width=”0″ id=”SVGRepo_bgCarrier”></g><g stroke-linejoin=”round” stroke-linecap=”round” id=”SVGRepo_tracerCarrier”></g><g id=”SVGRepo_iconCarrier”>  .st0{fill:#ffffff;}  <g> <path d=”M505.837,180.418L279.265,76.124c-7.349-3.385-15.177-5.093-23.265-5.093c-8.088,0-15.914,1.708-23.265,5.093 L6.163,180.418C2.418,182.149,0,185.922,0,190.045s2.418,7.896,6.163,9.627l226.572,104.294c7.349,3.385,15.177,5.101,23.265,5.101 c8.088,0,15.916-1.716,23.267-5.101l178.812-82.306v82.881c-7.096,0.8-12.63,6.84-12.63,14.138c0,6.359,4.208,11.864,10.206,13.618 l-12.092,79.791h55.676l-12.09-79.791c5.996-1.754,10.204-7.259,10.204-13.618c0-7.298-5.534-13.338-12.63-14.138v-95.148 l21.116-9.721c3.744-1.731,6.163-5.504,6.163-9.627S509.582,182.149,505.837,180.418z” class=”st0″></path> <path d=”M256,346.831c-11.246,0-22.143-2.391-32.386-7.104L112.793,288.71v101.638 c0,22.314,67.426,50.621,143.207,50.621c75.782,0,143.209-28.308,143.209-50.621V288.71l-110.827,51.017 C278.145,344.44,267.25,346.831,256,346.831z” class=”st0″></path> </g> </g></svg>]
  • Grandària de la icona:  1 em

🔗 Enllaços d’interés:

· Com afegir icones SVG en HTML – Portaledu

05. FAMÍLIES

· Bloc – ‘Título Famílies’

📐 Estructura:

🛠️ Paràmetres – Títol ‘FAMÍLIA’:

  • Contenidor: Farciment – Superior 20px / Esquerra 40px / Dreta 10 / Inferior 10px
  • Titular > Icona: en SVG HTML [<svg fill=”#000000″ viewBox=”0 0 512 512″ xmlns=”http://www.w3.org/2000/svg” version=”1.1″ width=”200px” height=”200px”><g stroke-width=”0″ id=”SVGRepo_bgCarrier”></g><g stroke-linejoin=”round” stroke-linecap=”round” id=”SVGRepo_tracerCarrier”></g><g id=”SVGRepo_iconCarrier”> .st0{fill:#FFFFFF;} <g> <path d=”M78.641,118.933c22.88,0,41.416-18.551,41.416-41.414c0-22.887-18.536-41.423-41.416-41.423 c-22.887,0-41.422,18.536-41.422,41.423C37.218,100.382,55.754,118.933,78.641,118.933z” class=”st0″></path> <path d=”M255.706,228.73v0.062c0.101,0,0.194-0.031,0.294-0.031c0.101,0,0.194,0.031,0.294,0.031v-0.062 c15.562-0.317,28.082-12.976,28.082-28.601c0-15.648-12.52-28.299-28.082-28.616v-0.063c-0.101,0-0.194,0.031-0.294,0.031 c-0.1,0-0.193-0.031-0.294-0.031v0.063c-15.563,0.317-28.082,12.968-28.082,28.616C227.623,215.754,240.143,228.413,255.706,228.73 z” class=”st0″></path> <path d=”M433.359,118.933c22.887,0,41.423-18.551,41.423-41.414c0-22.887-18.536-41.423-41.423-41.423 c-22.88,0-41.416,18.536-41.416,41.423C391.944,100.382,410.48,118.933,433.359,118.933z” class=”st0″></path> <path d=”M470.097,138.553h-36.312h-18.404c-21.106,0-40.432,11.831-50.033,30.622l-33.494,97.967 c-1.154,2.246-3.298,3.84-5.792,4.282c-2.493,0.442-5.048-0.309-6.914-2.036l-20.836-18.04c-6.233-5.769-14.408-8.973-22.902-8.973 H256h-19.41c-8.494,0-16.669,3.204-22.902,8.973l-20.835,18.04c-1.866,1.727-4.421,2.478-6.914,2.036 c-2.492-0.442-4.637-2.036-5.791-4.282l-33.495-97.967c-9.6-18.791-28.926-30.622-50.032-30.622H78.215H41.902 C21.834,138.553,0,160.387,0,180.464v139.211c0,10.034,8.13,18.171,18.164,18.171c4.939,0,0,0,12.682,0l6.906,118.725 c0,10.676,8.664,19.332,19.34,19.332c4.506,0,12.814,0,21.122,0c8.308,0,16.616,0,21.122,0c10.676,0,19.34-8.656,19.34-19.332 l6.906-118.725l-0.085-84.766c0-1.339,0.914-2.493,2.222-2.818c1.309-0.31,2.648,0.309,3.26,1.502l26.572,65.401 c3.206,6.256,9.152,10.654,16.074,11.885c6.922,1.231,14.022-0.844,19.186-5.613l25.426-18.729 c0.852-0.782,2.083-0.984,3.136-0.542c1.061,0.473,1.743,1.518,1.743,2.663l0.093,73.508l4.777,82.187 c0,7.387,6.001,13.379,13.395,13.379c3.113,0,8.865,0,14.618,0c5.753,0,11.506,0,14.618,0c7.394,0,13.394-5.992,13.394-13.379 l4.778-82.187l0.093-73.508c0-1.146,0.681-2.19,1.742-2.663c1.053-0.442,2.284-0.24,3.136,0.542l25.427,18.729 c5.164,4.769,12.264,6.844,19.186,5.613c6.922-1.231,12.868-5.629,16.073-11.885l26.573-65.401 c0.611-1.192,1.951-1.812,3.259-1.502c1.309,0.325,2.222,1.478,2.222,2.818l-0.085,84.766l6.906,118.725 c0,10.676,8.664,19.332,19.341,19.332c4.507,0,12.814,0,21.122,0c8.308,0,16.616,0,21.121,0c10.677,0,19.342-8.656,19.342-19.332 l6.906-118.725c12.682,0,7.742,0,12.682,0c10.034,0,18.164-8.137,18.164-18.171V180.464 C512,160.387,490.166,138.553,470.097,138.553z” class=”st0″></path> </g> </g></svg>]
  • Grandària de la icona:  1 em

🔗 Enllaços d’interés:

· Com afegir icones SVG en HTML – Portaledu

06. NOTÍCIES

· Bloc – ‘Bucle consulta – Notícies’

📐 Estructura:

🛠️ Paràmetres – Bucle consulta amb entrades:

  • Tipus de contingut: posts
  • Entrades per pàgina: 10
  • Taxonomies: Categories > Nom de la categoria escollida (en el nostre cas ‘Notícies’)

Tip extra: seleccionant el títol, data o extracte de l’entrada pots ajustar l’estil de cadascú d’ells

🔗Enllaços d’interés:
· Coneix el bucle de consulta en Portaledu

· Com incloure la paginació al bucle de consulta

💡 Consell: marca esta pàgina en els teus favorits.
Així tindràs sempre a mà totes les píndoles formatives i podràs consultar-les quan necessites inspiració o un repàs ràpid.

💡On trobar les píndoles formatives

Has vist una xicoteta 💡 bombeta mentres navegaves per la nostra web?

No és ací per casualitat! ✨

Cada bombeta és una píndola formativa, un xicotet recurs pensat per a ajudar-te a entendre com està fet cada bloc de la web, perquè pugues aplicar-ho fàcilment en la web del teu propi centre.

En fer clic sobre una bombeta, trobaràs:

  • Explicacions breus sobre l’estructura o el disseny del bloc.
  • Consells pràctics per a personalitzar-ho segons les necessitats del teu centre.
  • Recursos extra (tutorials, exemples o plantilles pròximament) per a continuar aprenent al teu ritme.

🎯 El nostre objectiu és que esta web no sols et servisca d’exemple, sinó que siga una eina formativa en si mateixa.
Així, mentres explores els diferents apartats, aniràs descobrint com s’ha construït cada part i quines decisions hi ha darrere del seu disseny.

👉 T’animem a recórrer la web amb curiositat i a anar obrint cada bombeta: darrere de cada una hi ha una oportunitat d’aprenentatge!

🏫 Benvinguts al Centre en proves!

🌟Un espai per aprendre fent

El Centre en proves! és una web de centre creada amb una finalitat formativa: ajudar-vos a entendre com es pot dissenyar i gestionar una web de centre utilitzant l’editor estàndard de WordPress (Gutenberg) de forma fàcil i còmoda.

Aquesta web és un exemple pràctic i viu. Cada secció, cada bloc i cada element ha sigut creat pensant que vos servisca d’inspiració per al vostre propi espai digital.

🧭 Mentres navegueu per la web, trobareu icones formatives com aquesta “💡” que vos explicaran com s’ha fet cada apartat, quins blocs s’han utilitzat i quines bones pràctiques podeu aplicar al vostre projecte.

💻 Aprén a fer la transició a l’editor estàndard

El Centre en proves! vol ser el vostre aliat en aquesta transició, mostrant-vos com treballar de manera àgil, clara i visual amb l’editor de blocs de WordPress (Gutenberg).
Així, a més d’explorar la web, aprendreu fent: cada apartat conté exemples reals de com s’estructura, s’organitza i es personalitza una pàgina de centre amb aquest nou sistema.

🚀 Explora, inspira’t i crea la teua web de centre

L’objectiu final és que, després de recórrer el Centre en proves!, tingueu una visió clara de totes les possibilitats que ofereix el vostre espai web institucional: des de com estructurar el menú, fins a com afegir notícies, imatges o documents amb facilitat i accessibilitat.

💬 T’animem a explorar, provar i, sobretot, a fer teu el procés d’aprenentatge. El Centre en proves!no és sols una demostració, és una guia viva per a transformar la presència digital del teu centre.

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