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:
· 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:
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:
· 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
· 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
💡 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.