Los roles con capacidad para gestionar el sitio web, habitualmente direcció y manteniment, pueden modificar el Nombre del sitio (título) y su descripción (lema).
Esta configuración se realiza desde el Escritorio –> Ajustes –> General
Desde esa sección, se pueden modificar esos valores, entre otros. Además, es posible modificar los valores para cada idioma. Para ello, es necesario aplicar el filtro de idioma, y seleccionar así el idioma que estamos modificando.
Pulsamos sobre el filtro y seleccionamos idioma
Ajustamos los valores en valenciano
Ajustamos los valores en castellano
Es importante rellenar correctamente estos valores en ambos idiomas, ya que nos ayudan a que el sitio esté bien identificado y posicionado en los buscadores de Internet.
Gravity Forms es un plugin integrado en PortalEdu que permite crear formularios fácilmente para recoger información de los usuarios, como formularios de contacto, inscripciones, solicitudes o encuestas.
Sólo los roles más avanzados como son el rol Direcció y el rol Manteniment tienen permisos para crear formularios.
Para crear un formulario nuevo:
Accede al panel de administración de WordPress.
En el menú lateral, entra en Forms / Formularios.
Pulsa en Add New (Añadir nuevo).
Selecciona un formulario en blanco o una de las plantillas preestablecidas
Introduce:
Título del formulario
Descripción (opcional)
Una vez creado, podrás añadir los campos que necesites.
Tipos de campos disponibles
Gravity Forms permite añadir distintos tipos de campos que presenta organizados en dos grupos. Campos estándar y campos avanzados. Algunos ejemplos de ello son:
Campos estándar
Caja de texto
Párrafo
Lista desplegable
Casillas de verificación
…
Campos avanzados
Fecha
Enlace
Correo electrónico
Subida de archivos
CAPTCHA
…
Los campos se añaden arrastrándolos al formulario y se pueden reorganizar fácilmente.
Cada campo permite configurar opciones como:
marcarlo como obligatorio
añadir texto de ayuda
personalizar la etiqueta del campo
⚠ Uso obligatorio de CAPTCHA
Por motivos de seguridad, todos los formularios deben incluir un elemento CAPTCHA.
Esto ayuda a evitar:
envíos automáticos de spam
ataques de bots
sobrecarga innecesaria del sistema
El campo CAPTCHA se puede añadir desde los campos avanzados del formulario. Más información aquí
2. Configurar las notificaciones
Las notificaciones permiten enviar correos electrónicos automáticamente cuando alguien completa el formulario.
Para configurarlas:
Accede al formulario.
Haz clic en Configuración → Notificaciones.
Pulsa Añadir.
Aquí podrás definir:
Destinatario del correo
Asunto
Contenido del mensaje
Dirección del remitente
Es posible crear más de una notificación, por ejemplo:
una notificación para el administrador del sitio
una confirmación automática para la persona que ha enviado el formulario
Notificación por defecto
Cuando se crea un formulario nuevo, Gravity Forms genera automáticamente una notificación por defecto.
Esta notificación envía un correo electrónico al administrador del sitio con la información enviada en el formulario.
Si se desea, esta notificación puede:
modificarse
eliminarse
o complementarse con otras notificaciones.
3. Consultar las entradas recibidas
Cada envío de un formulario se guarda automáticamente como una entrada.
Para verlas:
Accede a Forms / Formularios.
Selecciona el formulario.
Haz clic en Registros / Entradas.
Desde esta sección puedes:
ver los datos enviados
buscar entradas concretas
exportar la información
eliminar registros
Esto permite gestionar fácilmente toda la información recogida a través del formulario.
⚠ Subida de archivos y cuota de disco
Si el formulario incluye algún campo para subir archivos, hay que tener en cuenta que estos se almacenarán en el sitio web.
Esto implica que:
los archivos computan dentro de la cuota de almacenamiento del sitio, que es limitada.
si se reciben muchos archivos o archivos grandes, el espacio disponible puede reducirse rápidamente.
Por este motivo se recomienda:
limitar el tamaño máximo de los archivos
evitar solicitar archivos si no es necesario.
Recomendación de mantenimiento
Si el formulario recibe muchas respuestas, es recomendable:
exportar periódicamente las entradas
eliminar los registros antiguos que ya no sean necesarios
De esta forma se evita acumular demasiada información y se facilita la gestión del sitio. Más información aquí
4. Insertar un formulario en una página o entrada
Una vez creado el formulario, habitualmente lo insertaremos en una página o entrada para que los usuarios puedan rellenarlo.
Para hacerlo:
Crea o edita una página o entrada en WordPress.
En el editor de bloques (Gutenberg), haz clic en Añadir bloque (+).
Busca el bloque Gravity Forms.
Selecciona el formulario que quieres insertar.
El formulario aparecerá automáticamente en la página.
Después de publicar la página, los usuarios podrán acceder al formulario y enviar sus respuestas.
Recomendaciones para crear formularios
Para mejorar la experiencia de los usuarios:
Utiliza solo los campos necesarios.
Marca como obligatorios únicamente los campos imprescindibles.
Configura correctamente las notificaciones.
Revisa periódicamente las entradas recibidas.
A tener en cuenta: Los formularios de gravity-forms no admiten multilingüismo, de forma que si queremos un formulario en diferentes idiomas tendremos que crear un formulario diferente para cada idioma. La otra opción sería incluir en cada item del formulario, las preguntas o textos traducidos a los diferentes idiomas.
WordPress nos permite realizar ciertas modificaciones sobre un grupo o lote de entradas. Estas modificaciones se aplicarán simultáneamente a todas las entradas seleccionadas. Entre las acciones que podemos aplicar sobre varias entradas a la vez, tenemos:
Asignar una categoría
Cambiar el estado (pasar a borrador o a publicada)
Cambiar el idioma
Mostraremos un ejemplo de cómo asignar una categoría a todas las entradas de un mismo autor
Paso 1: Listamos las entradas
Desde el Escritorio –> Entradas
Haciendo clic sobre el nombre del autor en cualquier fila del listado, obtendremos la vista filtrada de entradas de ese autor.
Paso 2: Seleccionamos las entradas que deseamos modificar
Podemos seleccionar varias entradas de una en una o bien todas las de esa página a la vez, clicando en la casilla superior, junto a la palabra «Título»
Importante: Si lo que vamos a hacer es asignar una categoría a varias entradas, es importante asegurarnos de que las entradas que vamos a modificar en lote tengan el mismo idioma y que la categoría que vamos a asignar tenga ese mismo idioma también.
Para asegurarnos de ello, seleccionaremos el idioma que corresponda en la parte superior, en el filtro de idioma:
Paso 3: Seleccionamos la opción «Editar» en el menú de acciones en lote o acciones masivas
Seleccionamos la opción «Editar» y pulsamos el botón «Aplicar»
Paso 4: Seleccionamos el cambio que queremos realizar (en este caso, añadir una categoría concreta a las entradas seleccionadas)
Tras pulsar el botón de «Aplicar» se nos abrirá un panel con las opciones disponibles para modificar. En este ejemplo, queremos asignar (añadir) una categoría al lote de entradas. Observamos que, en nuestro caso, aparece marcada la categoría «General», aparece marcada con un guión la categoría «Biblioteca», y aparece desmarcada la categoría «Secretaría». Esto significa:
1- Todas las entradas seleccionadas corresponden a la categoría «General»
2-Algunas de las entradas seleccionadas tienen asignada la categoría «Biblioteca»
3-Ninguna de las entradas seleccionadas tiene asignada la categoría «Secretaría»
Marcamos la categoría «Secretaría» y clicamos «Actualizar»
Comprobamos que se ha añadido la categoría «Secretaría» a todas las entradas seleccionadas, respetando cualquier otra categorización preexistente en las entradas.
Tener en cuenta que cuando seleccionamos todas las entradas simultáneamente, se seleccionan las entradas de esa página. Si existen otras entradas que también queramos modificar, en otras páginas, habrá que repetir el proceso en cada una de las páginas.
En WordPress, los contenidos se organizan principalmente en dos tipos: páginas y entradas. Aunque ambos son elementos que publicamos en la web, cumplen funciones diferentes y es importante saber cuándo usar cada uno.
Ejemplo de página de portada (estructura fija) que muestra contenido dinámico (entradas de la categoría «Noticias») mediante un bucle de consulta.
1.-¿Qué es una Página?
Una página es un contenido estáticoo con estructura estática, pensado para información o apariencia que no cambia con frecuencia. Ejemplos típicos en la web de un centro educativo son:
Portada
Secretaría
Departamentos
Quiénes somos
Oferta educativa
Contacto
Normativa del centro
Las páginas no se ordenan por fecha y no forman parte del blog o de las noticias. Son ideales para información permanente o bien para mantener una estructura fija, mostrando información dinámica y actualizada. Es un caso habitual utilizar las páginas para mostrar entradas recientes, novedades, etc.; la página mantiene una estructura pero el contenido que muestra no es estático.
Una entrada es un contenido dinámico, pensado para publicar noticias, novedades o artículos que se organizan cronológicamente o se pueden agrupar por categorías. Ejemplos:
Publicación de actividades recientes
Avisos importantes
Eventos del centro
Proyectos del alumnado
Las entradas se pueden categorizar y etiquetar, lo que permite agruparlas por temas (por ejemplo: «Noticias», «Novedades», “Primaria”, “Secundaria”, “Actividades extraescolares”). Encontrarás información al respecto en Uso de categorías – Portaledu.
En Portaledu, las páginas no solo muestran contenido estático, sino que también pueden incluir entradas categorizadas mediante diferentes formatos:
Carrusel de entradas: muestra las últimas noticias en forma de imágenes deslizantes. (+info).
Visor deslizante: permite navegar entre varias entradas destacadas. (+info).
Bucle de consulta: lista entradas según criterios (categoría, fecha, autor). (+info).
Acordeón de entradas: organiza las noticias en paneles desplegables. (+info).
Pestañas con entradas: agrupa contenidos por categorías en diferentes pestañas (+info).
Esto significa que una página puede convertirse en un contenedor dinámico, mostrando información actualizada sin perder su carácter estructural.
4.-¿Cuándo usar Página y cuándo Entrada?
Usa una Página para información fija y estructural (por ejemplo, «Portada», “Calendario escolar” o “Proyecto educativo”).
Usa una Entrada para noticias, avisos y contenidos que tienen carácter temporal (por ejemplo, “Excursión al museo” o “Resultados del concurso literario”) o bien contenidos que se pueden clasificar en una categoría o temática como «Preguntas Frecuentes», «Novedades», «Formación», «Secretaría». Las entradas que pertenecen a una misma categoría pueden mostrarse fácilmente en una o varias páginas, a través de los bloques mencionados anteriormente.
Consejo práctico: Si quieres que las familias encuentren fácilmente las novedades, publícalas como entradas y utiliza las páginas para organizar esas entradas por categorías, usando los módulos dinámicos que ofrece Portaledu.
Desde Portaledu presentamos una nueva página web formativa de un centro ficticio creada para aprender, inspirar y mostrar todas las posibilidades que ofrece una web de centro en Portaledu con el editor estándar, que es el ‘Centro en Pruebas!’
Aquí podrás:
💡 Descubrir ejemplos reales de diseño y estructura web 🧭 Acceder a píldoras formativas integradas en cada bloque 🛠️ Conocer trucos y recursos para mejorar la presencia digital de tu centro
En este post aprenderemos a confeccionar el menú superior de nuestro sitio web:
1-¿Desde dónde se configura el menú?
Lo primero que debemos saber es que podemos confeccionar un menú para cada idioma de nuestro sitio web. Los menús se configuran desde el panel izquierdo del escritorio: Apariencia –> Menús
Si tenemos más de un menú definido, en primer lugar seleccionaremos el menú que queremos editar y pulsaremos el botón «Seleccionar»
2-¿Qué clase de elementos pueden conformar el menú?
El menú está compuesto por enlaces que nos llevan directamente a:
Páginas
Entradas
Enlaces personalizados
Categorías
3-¿Cómo añadir los elementos al menú?
A la parte izquierda, seleccionaremos en el panel el tipo de elemento (páginas, entradas…) y marcaremos aquel elemento que deseemos incorporar al menú. Por defecto, se nos muestran los elementos más recientes. Si no encontramos el elemento que buscamos, seleccionaremos la pestaña «Ver todo», donde se nos mostrarán todos los elementos.
Una vez seleccionados los elementos deseados (pueden ser varios o incluso todos), pulsaremos el botón de «Añadir al menú».
4-¿Cómo ordenar los elementos del menú?
Una vez añadidos los elementos, estos se muestran como bloques en la parte derecha. Podemos ordenarlos pinchando sobre ellos y arrastrándolos. Si deseamos que un ítem aparezca como submenú de otro, lo arrastraremos debajo del otro, dejándolo sangrado levemente a la derecha. En este ejemplo, las páginas FAQs y SAI aparecerán como submenú de SUPORT:
5-Establecer idioma para el menú
En la parte de abajo de la configuración del menú, debemos seleccionar el idioma en que se mostrará ese menú. En este ejemplo, está marcado que el menú actual sea el menú utilizado para la web en valenciano.
6-Guardar el menú
No olvidemos guardar el menú con el botón correspondiente, que encontraremos abajo del mismo: «Guardar el menú»
7-Editar el nombre o eliminar un elemento del menú
En cada elemento del menú, a la derecha, encontraremos una flecha. Si hacemos clic sobre ella, se despliega el elemento para editarlo. Podemos modificar el nombre del elemento, esto permite mostrar en el menú un nombre diferente del que tenga la página o elemento originalmente.
También tenemos la opción de Suprimir el elemento del menú. Esto no elimina la página o post referenciado, solo elimina su aparición en el menú.
Advertencia: Tened mucho cuidado de no pulsar sobre el enlace de «Suprimir el menú» si solo queréis eliminar un elemento. Esta acción eliminará el menú y no puede deshacerse! Y recordad siempre pulsar el botón «Guardar el menú» después de cualquier cambio deseado.
Hemos configurado un bloque modal con algunos colores:
En esta entrada veremos como utilizar el bloque modal. Este bloque nos permite mostrar contenido en una ventana modal, que se superpone al contenido que estamos viendo. La ventana emerge al hacer clic sobre un elemento configurado para esta acción. Podéis ver un ejemplo en el botón siguiente:
Horario Escolar
Podemos configurar como elementos «disparadores» de las ventanas modales:
Cualquier texto (titular o párrafo completos)
Botón
Imagen
Quiere decir esto que al hacer clic sobre alguno de esos tipos de bloques, podemos hacer que se muestre contenido en una ventana modal. Vamos a verlo paso a paso:
1-Añadimos un bloque modal
Después de añadir el bloque, nos aparecerá en el contenido un bloque con este aspecto:
2-Añadimos contenido al bloque modal
En este paso, añadiremos el contenido que deseamos mostrar en la ventana emergente.
Al hacer clic sobre cualquier parte del bloque modal, este se abrirá en edición:
Vista del bloque modal en edición (contenido)
Vista de la barra lateral derecha (configuración del bloque)
Dentro del contenido modal podemos añadir bloques de gutenberg (imágenes, texto, tablas…), igual que lo hacemos en cualquier página o post.
En este ejemplo, incluiremos un titular y una tabla con un horario escolar:
Para guardar el contenido del bloque modal, simplemente pulsamos el botón de actualizar o guardar la página o post.
Para volver a editar el resto de bloques de nuestra entrada, simplemente cerramos el bloque modal con la «X» de la parte superior derecha del bloque.
3-Ponemos título y otras configuraciones
En la barra lateral derecha tenemos las opciones de configuración del bloque modal, como por ejemplo:
Etiqueta del modal: Es el nombre que pondremos a nuestro modal. Será útil si tenemos diferentes modales dentro de una misma entrada, para poder distinguirlos.
Ancho: Se puede indicar una anchura para la ventana modal (en píxeles)
Mostrar botón de cierre: Opción de mostrar la X para cerrar o no (igualmente la ventana modal se cierra al hacer clic fuera de ella)
Mostrar modal al cargar la página: Opción para mostrar la ventana modal sin necesidad de que el usuario clique en ningún elemento.
Configuración de estilos
En la configuración de estilos, también en la barra lateral derecha, podemos configurar diferentes opciones de colores y tamaño de letra, a destacar:
Texto: Color del texto de la ventana modal.
Fondo: Color de fondo de la ventana modal.
Fondo de superposición: Podemos configurar una capa de color sobre la cual se mostrará la ventana modal.
Icono de cierre: Color de la «X» de cierre.
Fondo icono de cierre: Color de fondo de la «X» de cierre.
4-Configuración del elemento disparador de la ventana modal
Ahora seleccionaremos el bloque que ha de disparar que se muestre la ventana modal. Como hemos dicho, puede ser un párrafo, un botón, etc.
Una vez seleccionado, miraremos en la barra lateral derecha, abajo del todo, la sección Avanzado
Activaremos el interruptor de Mostrar modal al hacer clic y seleccionaremos el bloque modal que deseemos.
Guardamos nuestro post y ya podemos comprobar el funcionamiento del contenido modal en el front.
Aquí tenéis varios ejemplos de ventanas modales y diferentes elementos disparadores:
Hemos incorporado a Portaledu el plugin Blocks Animation, que nos permite dotar de efectos animados a prácticamente cualquier bloque de Gutenberg. En este post os enseñaremos cómo utilizar esta funcionalidad.
1-Animación de textos. Efecto de escritura o tecleo.
En los elementos de texto, como párrafo, titular, encabezado, etc., veremos una nueva opción en el menú contextual de opciones del bloque. En primer lugar, seleccionamos la parte del texto que queremos animar; puede ser toda la frase o párrafo o bien solo una o varias palabras.
En segundo lugar, desplegamos el menú de la barra de herramientas del bloque, la flechita, donde seleccionaremos la opción de Animación de escritura. Al hacerlo, podremos seleccionar un tiempo de retardo de inicio y una velocidad para la animación.
Guardamos la entrada y la previsualizamos para ver cómo ha quedado. Veremos un efecto de tecleo, irá apareciendo el texto al que hemos aplicado la animación.
En el mismo desplegable podemos configurar una Animación de contador, disponible solo para números:
67
2.-Animación de imágenes u otros bloques
En la mayoría de bloques de gutenberg, como por ejemplo, en cualquier bloque de imagen, en la columna de ajustes de la derecha, aparece una sección de Animaciones:
En el menú desplegable de opciones de animación, encontraremos una gran variedad. Una vez hayamos seleccionado alguna, nos aparecerán nuevos ajustes, a saber, el retardo de inicio y la velocidad de la animación.
Reproducir al pasar el cursor: Se ofrece un ajuste para que la animación se ejecute (una vez) al pasar el ratón sobre el elemento. Hemos de tener en cuenta que si activamos esta opción, la animación se ejecutará solamente cuando pasemos el puntero del ratón por encima.
Además, el botón de Reproducir la animación nos permite comprobar la animación configurada para ese bloque. Podemos comprobar el efecto en esta imagen:
Toca o pasa el cursor para animar (solo una vez)
3.-Animación de un bloque contenedor (animaciones anidadas)
Como sabéis, el bloque contenedor se utiliza para agrupar bloques y ajustar de forma conjunta ciertos aspectos de su apariencia (color de fondo o imagen de fondo, márgenes, espaciado, contorno…). En este caso, podemos introducir en un bloque contenedor diferentes bloques como botones, texto, imágenes y configurar animaciones tanto para el contenedor, como para los subbloques. Veámoslo con un ejemplo:
4.-Configuración del sistema operativo para habilitar/deshabilitar animaciones
Por motivos de accesibilidad, las animaciones web se pueden deshabilitar para facilitar la lectura de las páginas web. Esta configuración se encuentra habitualmente en el sistema operativo. Los navegadores respetan habitualmente las configuraciones de accesibilidad del sistema operativo, como por ejemplo la de «Reducir movimiento».
En el caso de Windows, encontraremos esta opción en Configuración –> Accesibilidad –> Efectos visuales –> Efectos de animación
Un bloque contenedor padre, que engloba todo el conjunto y que contiene: Una imagen de fondo, así como una capa oscura sobre la imagen, para asegurar la legibilidad de los bloques que están dentro del contenedor (texto, botón), un borde redondeado y con color.
Un bloque Titular que contiene el texto que queremos mostrar.
Un bloque Botón que contiene un enlace a la información relacionada.
1.-Insertamos un bloque contenedor
2.-Configuramos la imagen de fondo
Desde la sección Fondo, de la zona de configuración de la derecha, podemos seleccionar cualquier imagen de la mediateca, o insertar una imagen con URL.
Una vez configurada, veremos que el contenedor muestra la imagen como fondo, pero únicamente se ve una franja horizontal. Nos falta todavía definir la altura del contenedor, si queremos ver más parte de la imagen o la imagen entera.
Desde la sección redimensionar, configuramos, por ejemplo, una altura mínima de 500 píxeles.
3.-Insertamos un bloque Titular
Dentro del contenedor, añadimos un bloque Titular.
Y configuramos el color del texto, tipografía, medida, negrita, alineación…
Podemos también aplicar márgenes al bloque Titular o bien relleno al bloque contenedor, para mover el texto hacia abajo, o bien podemos configurar, para todo el bloque contenedor, una posición/ubicación para los subbloques (véase apartado 6).
4.-Oscurecemos la imagen de fondo. Opacidad.
Para que el texto sobre la imagen sea más legible, será necesario aplicar una capa oscura. Lo haremos mediante las opciones de Colores de fondo y Opacidad de la imagen. Estas opciones corresponden al bloque contenedor.
5.-Insertamos un botón
Insertamos un bloque Botón y configuramos inicialmente algunas opciones del aspecto: Diseño de pantalla: Flex, alineación centrada, negrita para el texto.
Configuramos también los colores del botón y ponemos una anchura, por ejemplo 300 píxeles.:
Configuramos un enlace, donde nos dirigirá cuando pulsemos el botón:
6.-Posición de los contenidos dentro del contenedor
Desde la barra de herramientas contextuales del bloque contenedor, podemos configurar una posición general del contenido dentro del bloque.
Si escogemos la posición central, tanto el titular como el botón se distribuirán dentro del contenedor, alineados hacia el centro.
7.-Previsualización y ajuste de la profundidad de los elementos (z-index)
A pesar de que, en edición, el texto y el botón se muestran correctamente sobre la imagen de fondo, si previsualizamos el contenido en el front, resulta que ambos elementos han heredado la transparencia o falta de opacidad del contenedor, de forma que se visualizan desvanecidos, así:
Para solucionarlo, hace falta solo definir, para estos elementos, un número superior en la configuración de profundidad (z-index). Tenemos que imaginar que los contenidos se muestran en diferentes capas y nosotros queremos llevar los elementos a una capa superior, para que se muestran por encima del resto.
Vamos a la configuración del bloque titular y también a la del bloque botón y configuramos índex-z, por ejemplo a 1
Si previsualizamos ahora todo el contenido, ya se verá correctamente:
Cuando estamos trabajando en contenidos complejos, con muchos bloques, podemos hacerlo más cómodamente ampliando la zona de edición. En este ejemplo mostramos un contenido complejo, con muchas columnas, en el que no resulta cómodo trabajar en un área estrecha:
Opciones para ampliar la zona de trabajo
1-Reducir el menú de la izquierda
En el menú de secciones de la izquierda, en la parte de abajo, podemos clicar para reducirlo. Se mostrarán únicamente los iconos, quedando el menú más estrecho.
2-Modo pantalla completa
Desde la parte superior, haciendo clic sobre los tres puntos, se muestran las opciones de vista de edición disponible. Seleccionaremos Modo de pantalla completa.
Podemos comprobar que, al ampliar la zona de edición de esta manera, los elementos responsivos se muestran de forma más similar a como se ven en el front, esto es, como los ven los visitantes.
En cualquier momento, podemos volver a la configuración original deshaciendo estos pasos.
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.
