🙌 ¡Llegan los patrones del Centro en pruebas!

🎨 ¿Te gusta el diseño del Centro en pruebas? ¡Ahora puedes utilizarlo en tu web!

El diseño que estás viendo en el Centro en pruebas ha sido creado en patrones de Portaledu, una herramienta que te permite incorporar estructuras de diseño ya preparadas en tus páginas y entradas, y adaptarlas fácilmente a tu propio centro.

🧩 Nuestros diseños listos para usar y personalizar

Gracias a los patrones, puedes añadir bloques con un formato ya definido y modificarlos a tu gusto: cambiar textos, imágenes, colores o estructura sin necesidad de conocimientos técnicos avanzados.

📘 Aprende a utilizarlos paso a paso

En la nueva entrada formativa de Portaledu te explicamos qué son los patrones, cómo insertarlos y cómo personalizarlos desde el editor.
Y recuerda que se basan en los patrones de WordPress, por lo que son totalmente editables.

🔗 Descubre cómo aprovecharlos y empieza a dar forma a tu web de centro de manera fácil y profesional con la última entrada de Portaledu – Uso de patrones

🗃️ Tips para organizar tu web de centro

¿Estás creando la web de tu centro y no sabes muy bien por dónde empezar a ordenar los contenidos? 🤔
¡No te preocupes! Aquí te dejamos algunos tips para organizar tu web de forma clara y eficiente.

A medida que construyas la web, verás que puedes trabajar con páginas, entradas, etiquetas y bloques. Cada uno tiene su función, y saber usarlos bien te ayudará a mantener una web limpia, fácil de navegar y sencilla de actualizar.

📌 1. Páginas: el contenido fijo
Usa las páginas para toda aquella información estable que no cambia con frecuencia: “Instalaciones”, “Oferta formativa”, “Contacto” o la portada de tu sitio… Son la estructura base de tu web.

⭐Tip extra: Las páginas suelen tener una estructura estable, ahora bien, esto no quiere decir que lo que muestran sea siempre igual: las páginas pueden incluir contenido dinámico, como por ejemplo listas de entradas por categorías (bucle de consulta), carruseles de imágenes o entradas, noticias, u otros elementos que se actualizan automáticamente.

📰 2. Entradas: el contenido vivo
Las entradas son ideales para publicar noticias, novedades o actividades del día a día del centro.
Además, pueden clasificarse por categorías y etiquetas para que tus visitantes encuentren fácilmente lo que buscan.

Tip extra: si clasificas tus entradas por categorías o etiquetas, como por ejemplo «Departamento de valenciano» o «Excursiones», podrás crear automatismos para mostrar dichas entradas de forma agrupada en los bloques de «Carrusel de entradas» o «Bucle de consulta».

🏷️ 3. Etiquetas: organiza, no repitas
Piensa en las etiquetas como pequeñas palabras clave que agrupan contenidos relacionados. No abuses de ellas: usa las justas para que el buscador interno y tus lectores puedan orientarse mejor.

🔠 4. Renombra tus bloques
Mientras editas tu web, te recomendamos renombrar los bloques con nombres descriptivos (por ejemplo: “banner principal” o “bloque de noticias”).
Así será mucho más fácil localizar cada sección cuando necesites modificar algo más adelante. Podrás hacerlo clicando en los 3 puntos del bloque:

5. Y recuerda: una buena organización al principio te ahorrará mucho tiempo después.
Mantén una estructura coherente, usa nombres claros y revisa de vez en cuando que todo siga ordenado, porque también te permitirá utilizar automatismos.

✍️ Completa la información de tu centro

Administra, completa y visualiza los datos de tu centro en su página web de Portaledu desde el «Escritorio > Herramientas > Información del Centro»

Solo las personas administradoras del sitio verán esta opción, que te permitirá revisar y modificar aspectos como:

  • 📍 Nombre del centro
  • 🌍 URL y dirección
  • 🏫 Otros datos identificativos

Además, podrás cambiar la imagen del centro fácilmente: haz clic en “Upload image”, elige una imagen de la biblioteca de medios o sube una nueva, ¡y listo!

Todo ello te servirá para generar el widget automático con la información de centro, que podrás incluir a través del bloque Shortcode poniendo:

[centre_info] 

📩 Cuando hayas realizado los cambios, recuerda pulsar “Guardar” para que se apliquen en la web.

💡 Un detalle importante: la opción “URL Amigable” te permite personalizar la dirección de tu web.
En el caso de los centros educativos, el sistema crea automáticamente una redirección desde la URL con código de centro hacia la nueva dirección amigable (por ejemplo: portal.edu.gva.es/01010111/*portal.edu.gva.es/centreenproves/*

🔗 Más información en Portaledu: Completa la información del centro en Portaledu – Portaledu

📋 Todas las píldoras formativas en un solo lugar

A lo largo de la web has ido encontrando pequeñas 💡 bombillas que te muestran cómo está construida cada sección y te ofrecen recursos prácticos para crear tu propia web de centro.

Para que te sea más fácil consultarlas y volver a ellas cuando lo necesites, hemos agrupado todas en un solo espacio.
Así podrás acceder directamente a los temas que más te interesen, según el momento en que te encuentres en la creación de tu web de centro. 🚀

☝️RECUERDA: Solo se indican el parámetros modificados, el resto no se han modificado para la creación del bloque.

01. PÁGINA PRINCIPAL

· Bloque ‘Pase de diapositivas’

📐 Estructura:

🛠️ Parámetros – Contenedor:

  • Margen: Superior 0px / Izquierda -40 px / Derecha -40 px / Inferior 0 px

🔗Enlaces de interés:

· Bloque – ‘Botones de navegación principal’

📐 Estructura:

🛠️ Parámetros – Contenedor:

  • Margen: Superior -10px / Izquierda 5% / Derecha 5% / Inferior 0 px

🛠️ Parámetros – Cuadrícula: 3 contenedores con una anchura del 33,33%

  • Relleno: 30px 🔗
  • Margen: 10 px 🔗
  • Borde: 5 px 🔗
  • Radio del borde: 5 px para ángulos de 90 grados y 50px para los ángulos redondos
  • Fondo: Opacidad de la imagen – 0,12
  • Tamaño: cover
  • Posición: center center

🛠️ Parámetros – Titular:

  • Margen: Superior 10px / Izquierda 10px / Derecha 10px / Inferior 20 px

🛠️ Parámetros – Botón:

  • Anchura: 200px
  • Relleno: Superior 15px / Izquierda 20px / Derecha 20px / Inferior 15px
  • Margen: Superior 0px / Izquierda 0px / Derecha 0px / Inferior 10px
  • Radio del borde: 50px 🔗
  • Tamaño del icono: 25px (⭐ Tip extra: puedes seleccionar el icono en svg que deseas copiando su código en esta web)

🔗Enlaces de interés:

· Conoce todos los bloques del editor en Portaledu

· Cómo copiar y pegar iconos SVG en HTML en Portaledu

· Bloque ‘Noticias’

📐 Estructura:

🛠️ Parámetros – Contenedor:

  • Margen: Superior 100px / Izquierda 6% / Derecha 6% / Inferior 0 px

🛠️ Parámetros – Titular:

  • Margen: Superior 50px / Izquierda 0 px / Derecha 0 px / Inferior 50 px
  • Tipografía: Font Weight: 700 – Bold / Tamaño de la fuente: 70 px

🛠️ Parámetros – Carrusel de entradas:

  • Selecciona categoría: #Notícies (👉 Recordatorio: tendrás que clasificar antes tus entradas con esta categoría)
  • Número de entrades: 5
  • Duración de cada diapositiva: 2000ms
  • Entradas por diapositiva: 4
  • Cubrir el fondo con la imagen: ✅

🔗Enlaces de interés:
· Conoce el bloque carrusel en Portaledu

· Bloque – ‘Información de centro’

📐 Estructura:

🛠️ Parámetros – Contenedor:

  • Marge: Superior 100px / Izquierda 6% / Derecha 6% / Inferior 0 px

🔗Enlaces de interés:
· ✍️ Completa la información de tu centro – Centre en proves!

· Completa la información del centro en Portaledu – Portaledu

01.1 – INSTALACIONES

· Bloque – ‘Galería de imágenes’

📐 Estructura:

🛠️ Parámetros – Galería de imágenes:

  • Nombre de columnas: 3
  • Disposición: uniforme
  • Relación de aspecto: 2:3
  • Espaciado entre imágenes: pequeño

🔗Enlaces de interés:

· Conoce el bloque de galería de imágenes en Portaledu

01.2 – OFERTA FORMATIVA

· Bloque – ‘Cuadrícula’

📐 Estructura:

🛠️ Parámetros – Cuadrícula: 4 contenedores con una anchura del 25%, una altura de 400px y un margen de 10px 🔗

🔗Enlaces de interés:
· Conoce el bloque cuadrícula en Portaledu

02. ORGANIGRAMA

· Bloque – ‘Cuadrícula – Cargos’

📐 Estructura:

🛠️ Parámetros – Cuadrícula: 5 contenidores con una anchura del 20%

🛠️ Parámetros – Imagen: Radio del borde: Superior izquierda 5px / Superior derecha 100px / Inferior izquierda 100px / Inferior derecha 5px

🛠️ Parámetros – Titular > Cargo: Margen: Superior 20px

🛠️ Parámetros – Titular > Nombre: Margen: Superior 4px

🔗Enlaces de interés:

· Conoce el bloque cuadrícula en Portaledu

· Bloque – ‘Departamentos

📐 Estructura:

🛠️ Parámetros – Botón con el ‘Nombre del departamento’:

  • Anchura: 80%
  • Espacio interior: Superior 15px / Izquierda 30px / Derecha 30px  / Inferior 15 px
  • Margen: Inferior 10px
  • Borde: 3px 🔗
  • Radio del borde: Superior izquierda 5px / Superior derecha 50px / Inferior izquierda 50px / Inferior derecha 5px
  •  Icono: 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>]
  •  Tamaño del icono: 25px

🛠️ Parámetros – Imagen del/la profesor/a:

  • Margen: Izquierda 10% / Derecha 10%

🛠️ Parámetros – Caja de información del departamento (Noticias, Documentación, Actividades…):

  • Bloque pestañas
  • Contenido: personalizado

🔗Enlaces de interés:
· Conoce el bloque pestañas en Portaledu

· Cómo copiar y pegar iconos SVG en HTML en Portaledu

· Bloc – ‘Tabla – Tutorías’

📐 Estructura:

🛠️ Parámetros:

  • Anchura fija: ✅
  • Cabecera de sección: ✅

03. SECRETARÍA

· Bloque – ‘Tarjeta – Secretaría’

📐 Estructura:

🛠️ Parámetros – Contenedor superior:

  • Altura: 400px
  • Margen: Superior 20px / Derecha 280px
  • Borde: 4px con código de color #d5d5d5
  • Radio del borde: 50px

🛠️ Parámetros – Contenedor con imagen:

  • Fondo: escoge una imagen de la biblioteca de medios
  • Tamaño: full
  • Posición: center center

🛠️ Parámetros – Contenedor con información:

  • Relleno: Superior 50px
  • Margen: Superior 30px / Izquierda 50px

· Bloque – ‘Cajas- Documentación’

📐 Estructura:

🛠️ Parámetros – Cuadrícula: 3 contenidores con una anchura del 33,33%

  • Relleno: Superior 15px / Izquierda 25px / Derecha 25px / Inferior 15px
  • Margen: 10px 🔗
  • Borde: 3px 🔗
  • Radio del borde: 50px para las esquinas redondas y 5px para las esquinas rectas

04. ALUMNADO

· Bloque – ‘Título Alumnado’

📐 Estructura:

🛠️ Parámetros – Título ‘ALUMNADO’:

  • Contenedor: Relleno – Superior 20px / Izquierda 40px / Derecha 10px / Inferior 10px
  • Titular > Icono: 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>]
  • Tamaño del icono:  1 em

🔗 Enlaces de interés:
· Cómo copiar y pegar iconos SVG en HTML en Portaledu

05. FAMILIAS

· Bloque – ‘Título Familias’

📐 Estructura:

🛠️ Parámetros – Título ‘FAMILIAS’:

  • Contenedor: Relleno – Superior 20px / Izquierda 40px / Derecha 10px / Inferior 10px
  • Titular > Icono: 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>]
  • Tamaño del icono:  1 em

🔗 Enlaces de interés:
· Cómo copiar y pegar iconos SVG en HTML en Portaledu

06. NOTICIAS

· Bloque – ‘Bucle consulta – Noticias’

📐 Estructura:

🛠️ Parámetros – Bucle consulta con entradas:

  • Tipo de contenido: posts
  • Entradas por página: 10
  • Taxonomías: Categorías > Nombre de la categoría escogida (en nuestro caso ‘Noticias’)

Tip extra: seleccionando el título, fecha o extracto de la entrada puedes ajustar el estilo de cada cual de ellos

🔗Enlaces de interés:
· Conoce el bucle de consulta en Portaledu

· Como incluir la paginación al bucle de consulta

💡 Consejo: marca esta página en tus favoritos.

Así tendrás siempre a mano todas las píldoras formativas y podrás consultarlas cuando necesites inspiración o un repaso rápido.

💡Dónde encontrar las píldoras formativas

¿Has visto una pequeña 💡 bombilla mientras navegabas por nuestra web?

¡No está ahí por casualidad! ✨

Cada bombilla es una píldora formativa, un pequeño recurso pensado para ayudarte a entender cómo está hecho cada bloque de la web, para que puedas aplicarlo fácilmente en la web de tu propio centro.

Al hacer clic sobre una bombilla, encontrarás:

  • Explicaciones breves sobre la estructura o el diseño del bloque.
  • Consejos prácticos para personalizarlo según las necesidades de tu centro.
  • Recursos extra (tutoriales, ejemplos o plantillas próximamente) para seguir aprendiendo a tu ritmo.

🎯 Nuestro objetivo es que esta web no solo te sirva de ejemplo, sino que sea una herramienta formativa en sí misma.
Así, mientras exploras los distintos apartados, irás descubriendo cómo se ha construido cada parte y qué decisiones hay detrás de su diseño.

👉 Te animamos a recorrer la web con curiosidad y a ir abriendo cada bombilla: ¡detrás de cada una hay una oportunidad de aprendizaje!

🏫 Bienvenidos al Centre en pruebas!

🌟Un espacio para aprender haciendo

El Centro en pruebas! es una página web de centro creada con una finalidad formativa: ayudaros a entender como se puede diseñar y gestionar una web de centro utilizando el editor estándar de WordPress (Gutenberg) de forma fácil y cómoda.

Esta web es un ejemplo práctico y vivo. Cada sección, cada bloque y cada elemento ha sido creado pensando que os sirva de inspiración para vuestro propio espacio digital.

🧭 Mientras navegáis por la web, encontraréis iconos formativos como este «💡» que os explicarán cómo se ha hecho cada apartado, qué bloques se han utilizado y qué buenas prácticas podéis aplicar a vuestro proyecto.

💻 Aprende a hacer la transición al editor estándar

El Centro en pruebas! quiere ser vuestro aliado en esta transición, mostrándoos como trabajar de manera ágil, clara y visual con el editor de bloques de WordPress (Gutenberg).
Así, además de explorar la web, aprenderéis haciendo: cada apartado contiene ejemplos reales de cómo se estructura, se organiza y se personaliza una página de centro con este nuevo sistema.

🚀 Explora, inspírate y crea tu web de centro

El objetivo final es que, después de recorrer el Centro en pruebas!, tengáis una visión clara de todas las posibilidades que ofrece vuestro espacio web institucional: desde como estructurar el menú, hasta como añadir noticias, imágenes o documentos con facilidad y accesibilidad.

💬 Te animamos a explorar, probar y, sobre todo, a hacer tuyo el proceso de aprendizaje. El Centro en pruebas! no es solo una demostración, es una guía viva para transformar la presencia digital de tu centro.

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