EDITOR GUTENBERG

Bloque archivo para visualizar PDF

Observación: Anteriormente se ha estado utilizando el bloque PDF Embedder pero se recomienda la utilización del bloque Archivo, estándar de WordPress, que ha evolucionado y tiene ahora una mejor funcionalidad.

La mejor forma para compartir, visualizar y ofrecer la descarga de un fichero PDF en Portaledu es la utilización del bloque Archivo. Te explicamos cómo utilizarlo en este post.

El bloque «Archivo» de WordPress permite incrustar un enlace de descarga para diferentes tipos de archivo, directamente en tu contenido. Además, en el caso de ficheros pdf, el bloque carga un visor que muestra el documento con un iframe.

Bloc fitxer per a visualitzar PDF – PortaleduBaixar


En la siguiente imagen se muestra el uso de este bloque para diferentes tipos de fichero:

  • ZIP y JPG: Tanto cuatro_escaleras_matemáticas.zip como paisaje04.jpg (1) son mostrados por su nombre seguidos de un botón de descarga.
  • PDF: Mientras que para el caso del fichero loren-ipsun.pdf el navegador muestra su contenido en el visor, además de la opción de descarga. (2)

Para utilizarlo, buscaremos «Archivo» en el listado de bloques.

Una vez añadido el bloque a la página, sólo hay que elegir el archivo pdf que queremos mostrar, bien subiéndolo directamente, bien seleccionándolo desde la mediateca.

Nuevo bloque de galería de imágenes

Hemos incorporado a Portaledu un nuevo bloque de galería de imágenes, con funcionalidad mejorada para la disposición y visualización de las imágenes. Observa este ejemplo!

Quadern
Quadern
Rellotge
Rellotge
Autobús
Autobús
Telèfon
Telèfon

Hasta ahora, el editor estándar en Portaledu disponíamos de dos bloques de galería que vienen de serie con WordPress y con nuestro plugin de carpetas (Real Media Library)

-Galería

-Real Media Gallery

Ahora hemos incorporado un bloque llamado Galería de Imágenes que permite una mayor configuración, adaptación responsiva y pase de imágenes.

1-Selecciona el bloque Galería de Imágenes:

2-Una vez insertado el bloque, pulsamos sobre el botón de Seleccionar imágenes. Podemos utilizar atajos como CTRL+clic o MAY+clic para seleccionar simultáneamente varias imágenes de la mediateca.

3-Una vez escogidas las imágenes, podemos editar las leyendas de las mismas, en caso de que queramos mostrarlas en la galería. Si no deseamos mostrar las leyendas, podemos hacer clic directamente sobre el botón de Insertar una galería.

4-Después de añadir la galería, podremos modificar diferentes configuraciones de visualización, desde las opciones de la derecha:

Configuraciones disponibles:

  • Número de columnas
  • Disposición (Uniforme, Masonry – Mosaico, se adapta a los diferentes tamaños y proporciones)
  • Relación de aspecto (diferentes relaciones de aspecto para la configuración uniforme)
  • Espaciado entre imágenes
  • Mostrar leyendas

5-Este sería el aspecto al visualizar:

6-Al hacer clic sobre cualquier imagen, se accede al modo presentación, en que se puede ir pasando de una imagen a otra con las flechas

Últimas entradas

Si bien WordPress incorpora de serie el bloque llamado Últimas Entradas, que permite mostrar de diferentes formas y según diferentes criterios los contenidos de tu sitio web, en Portaledu te recomendamos estos otros bloques para realizar esta misma función:

Bucle de consulta con paginación

Si deseas añadir paginación a tu bucle de consulta, para mostrar de forma paginada un mayor número de contenidos, te enseñamos cómo hacerlo.

1-En la barra de herramientas del bucle de consulta, aparece la opción de añadir paginación. Solo hay que pulsar el botón:

2-Se nos mostrará entonces el bloque de paginación, justo debajo de las entradas del bucle de consulta. El propio bloque de paginación incorpora una barra de herramientas que nos permitirá algunas operaciones como centrarlo.

3-Seleccionando después los diferentes subbloques, es decir los indicadores de página anterior y pagina siguiente, o los números de página, podremos modificar numerosos parámetros desde la columna de configuración, a la derecha de la pantalla. Por ejemplo, podemos modificar los colores del fondo y de los números del paginador.

Como siempre, te recomendamos explorar todas las opciones de configuración disponibles si deseas modificar los valores por defecto.

Recuerda la información general sobre el bloque de bucle de consulta:

Gutenberg: Bucle de consulta

Vista responsiva: orden de visualización

Como sabéis, nuestro portal se visualiza desde todo tipo de dispositivos electrónicos y pantallas. La mayor parte del contenido generado con el editor estándar tiene un comportamiento responsivo, adaptándose automáticamente al tamaño y orientación de la pantalla en que se visualiza.

En ocasiones, podemos requerir un mayor control de la disposición de los elementos de nuestro contenido, en función del tamaño de la pantalla. Esto es posible gracias a las opciones que nos ofrece el editor estándar de WordPress (Gutenberg), combinado con nuestro tema (GeneratePress), y con la funcionalidad de algunos bloques, como los bloque de cuadrícula y contenedor.

Mostraremos un ejemplo sencillo sobre cómo alterar el orden de visualización de dos elementos cuando pasamos a vista con teléfono móvil.

La siguiente imagen representa la vista de una página desde un PC, lo que se conoce como vista en modo escritorio:

Observamos dos imágenes, una al lado de la otra

Este contenido está formado por un bloque de cuadrícula que contiene dos bloques contenedores. Cada uno, a su vez, contiene una imagen. Explorando la vista del editor en modo lista:

El comportamiento por defecto, cuando se visualiza este contenido en un dispositivo móvil, sería mostrar arriba lo que está a la izquierda y abajo lo que está a la derecha, así:

Pues bien, si deseamos que en vista móvil se muestren las imágenes de forma inversa, esto es, la de la derecha arriba y la de la izquierda abajo, podemos hacerlo, gracias al ajuste de «orden» que nos permite el bloque contenedor. Para ello, seleccionaremos el bloque contenedor de la primera imagen:

Iremos a los ajustes del bloque y seleccionaremos los ajustes para dispositivo móvil:

Después en la sección de ajuste «flex child», pondremos un número natural que especifique el orden del bloque (por defecto es cero o vacío).

Solo con poner un 1, veremos que ya cambia la disposición de las imágenes, ya que el contenedor de la otra imagen, tiene por defecto el orden 0, que es inferior a 1 y por ello se mostrará antes (arriba, en este caso).

En caso de tener más de dos elementos, podemos igualmente asignar un orden a cada uno de ellos, alterando el comportamiento de la vista responsiva a nuestro gusto.

Recordad que es un ajuste del bloque contenedor de generateblocks.

Gutenberg: Bloque pestañas

El bloque pestañas nos ayuda a mostrar contenidos organizados en pestañas. Estas pueden estar dispuestas vertical u horizontalmente.

Este bloque permite trabajar de dos formas:

  • Entradas. Permite seleccionar las entradas de una o varias categorías y visualizar los títulos, dejando el cuerpo o el inicio del cuerpo de la entrada oculto hasta que se selecciona la pestaña correspondiente.
    Esta modalidad resulta recomendable para presentar información relacionada.
  • Contenido personalizado. Si se elige contenido personalizado, el componente nos permitirá crear elementos con un título y un contenido que se visualizarán tal y como sucede en el caso de elegir el modelo de entradas. Mostrando el título y ocultando el contenido, que se visualizará al seleccionar la pestaña correspondiente.

Los contenidos personalizados se confeccionan utilizando bloques estándar de gutenberg!

Selección de los colores del contorno y de las pestañas:

La configuración del plugin nos permite seleccionar ambos colores. El color del texto de las pestañas no es configurable. Cambiará automáticamente de negro a blanco en función del fondo escogido, para favorecer el mejor contraste y legibilidad de los textos.

La opción de contenido completo solo está disponible cuando el bloque se inserta en una página y no en una entrada.

Podemos ver un ejemplo de bloque de pestañas de tipo «Entradas» a continuación 

Cómo actualizar contenidos en Portaledu sin afectar la publicación con «Reescribir y Republicar» Mantener los contenidos actualizados es una de las mejores prácticas para mejorar la experiencia de usuario y reforzar la estrategia SEO. Sin embargo, editar directamente una entrada publicada puede provocar que los visitantes vean cambios incompletos, errores temporales o contenido en revisión. Para evitarlo, el plugin Yoast
Con la actualización a WordPress 6.9.4 se incorporan varias mejoras en el editor de bloques que afectan directamente a la creación y gestión de contenidos. A continuación se resumen las novedades más relevantes. 1.- Ocultación de bloques WordPress 6.9 incorpora una opción nativa para ocultar bloques sin necesidad de eliminarlos. Hasta ahora, en PortalEdu se utilizaba una solución propia que
En este artículo explicaremos la vista de lista de bloques del editor Gutenberg de WordPress, su utilidad, el funcionamiento del arrastre y reordenación de bloques, y las ventajas específicas cuando se trabaja con bloques contenedores. 1.-Introducción La vista de lista de Gutenberg (o List View) es una de las herramientas más potentes y menos aprovechadas del editor de bloques de
Como sabéis, WordPress ofrece una serie de patrones (o plantillas) genéricos que podemos incorporar a nuestras entradas o páginas. Estos patrones nos ofrecen diseños concretos, elaborados con bloques del editor estándar. Una vez añadidos a nuestro contenido, podremos editarlos y personalizarlos a nuestro gusto. Veamos cómo hacerlo. 1-Acceso a los patrones Cuando creamos una nueva entrada o página, o bien
1-¿Cómo nos ayudan las categorías en wordpress? Las categorías de WordPress nos permiten agrupar las entradas en grandes grupos para poder gestionar o visualizar aquellas entradas relacionadas con esa categoría. Un sitio web puede tener categorizados diferentes temas. Por ejemplo, novedades, secretaría, general, preguntas frecuentes, o niveles educativos como primaria, secundaria, etc… La categorización del contenido es útil en muchos

Gutenberg: Editor estándar

Tal como se ha informado en ocasiones anteriores (Gutenberg: el editor por defecto de Portaledu – Portaledu), el editor estándar en Portaledu es el editor estándar de WordPress, llamado también Gutenberg o Editor de bloques.

Se trata de un potente editor visual que se va reforzando constantemente con la incorporación de plugins y desarrollos que aportan nuevos bloques para enriquecer nuestras publicaciones.

Se recuerda a aquellos usuarios de Portaledu en cuyos sitios está todavía activo el editor Beaver Builder (también conocido como editor visual), que deben ir abandonando este editor. Este plugin fue incorporado en los inicios de Portaledu porque ofrecía una forma de edición visual que no aportaba en aquel momento el editor clásico de WordPress, en su versión 4.9. Este plugin ha continuado ofreciendo a algunos usuarios de Portaledu una edición visual y numerosos componentes de visualización, que han sido y son apreciados por ellos. Sin embargo, ese editor resulta excesivamente pesado para asegurar un funcionamiento óptimo de nuestra plataforma. A pesar de ello, se ha mantenido en Portaledu durante varios años, para dar tiempo a una transición paulatina a Gutenberg. Mientras tanto, el editor de bloques de WordPress ha ido evolucionado en funcionalidad.

En este momento, la funcionalidad que ofrece el editor de bloques resulta más que suficiente para satisfacer los requerimientos de cualquier web en Portaledu.

Os recordamos algunas funcionalidades (bloques) disponibles en el editor estándar:

Este post sobre cómo convertir contenidos confeccionados con Beaver Builder a Gutenberg puede resultar de utilidad:

Conversión de un post de Beaver Builder a Gutenberg

Gutenberg: Bloque visor deslizante

Portaledu está aumentando las herramientas disponibles en el editor Gutenberg. Dentro de esta serie de bloques que estamos incorporando, presentamos el bloque visor deslizante de entradas.

Este bloque permite seleccionar las entradas de una o varias categorías y visualizarlas en diapositivas, de una en una, de modo circular, realizando una presentación de las mismas y añadiendo así dinamismo a las páginas. De cada entrada se mostrará, a ancho completo del contenedor, la imagen destacada y, opcionalmente, el extracto de la misma.

Resulta ideal para la presentación visual de categorías como noticias u otros temas, ya que el bloque elegirá las últimas entradas de la categoría seleccionada para su presentación. Podemos ver un ejemplo a continuación 👇🏽

El bloque es fácilmente configurable desde el editor, presentando las siguientes opciones:

Imagen Configuración Bloque Visor Deslizante de Entradas
  • Categoría. Al elegir una categoría, las entradas pertenecientes a esta, ordenadas descendentemente por fecha de creación, serán seleccionadas para su visualización. Puedes elegir varias categorías.
  • Número de entradas. Número total de entradas seleccionadas para su visualización. Si se deja en su valor por defecto 5, optarán a la visualización las cinco últimas entradas pertenecientes a la categoría elegida.
  • Duración de cada diapositiva. Tiempo en milisegundos que permanecerá visualizada una diapositiva. Pasado dicho tiempo, el visor mostrará la siguiente.
  • Mostrar extracto. Indica si en las diapositivas se mostrarán o no las primeras líneas de las entradas.
  • Fondo Blanco/Negro: Metadatos de la entrada en negro sobre fondo blanco o a la inversa.
  • Cubrir fondo con la imagen: Esta opción amplia la imagen i la recorta para que ocupe tot el fons del contenidor.

    Los elementos que estarán siempre presentes en las dispositivas y cuya presencia no es configurable son:
    • Imagen destacada de la entrada. En caso de que la entrada carezca de imagen personalizada, se utilizará una imagen por defecto propia del bloque.
    • Título de la diapositiva
    • Fecha de su creación
    • Enlace (leer más) para navegar hasta la entrada.

Podemos también configurar el color de los puntos y flechas de navegación del visor, así como ocultar cualquiera de los elementos.

Los usuarios con roles superiores en el sitio web, como por ejemplo dirección o mantenimiento, verán una configuración adicional, que les ofrece la posibilidad de definir una imagen de sustitución para aquellas entradas que no tengan definida ninguna imagen destacada. Hay que tener en cuenta que se trata de una configuración única para todo el sitio web. La imagen definida se utilizará en cualquier bloque carrusel o visor deslizante solo cuando las entradas que muestran no tengan definida la imagen destacada.

Gutenberg: Bloque Acordeón GVA

Blocs acordió GVA i acordió

La explicación de esta entrada se refiere al bloque Acordeón GVA. Este bloque es propio de Portaledu y ofrece más opciones de configuración y aspecto, en comparación con el bloque Acordeón nativo de WordPress, que también está disponible en Portaledu.

El bloque acordeón nos ayuda a mostrar contenidos de forma desplegable, permitiendo al lector centrarse inicialmente solamente en los títulos.

Este bloque permite trabajar de dos formas:

  • Entradas. Permite seleccionar las entradas de una o varias categorías y visualizar los títulos, dejando el cuerpo o el inicio del cuerpo de la entrada oculto hasta que es desplegado por el usuario al hacer click en el «+» a la derecha del título.
    Esta modalidad resulta recomendable para presentar una serie de artículos a modo de formación.
  • Contenido personalizado. Si se elige contenido personalizado, el componente nos permitirá crear elementos con un título y un contenido que se visualizarán tal y como sucede en el caso de elegir el modelo de entradas. Mostrando el título y ocultando el contenido, que puede ser desplegado mediante el botón «+»
    Este componente así empleado es muy típico verlo por ejemplo en páginas de FAQs (Frequently Asked Questions)

Los contenidos personalizados se confeccionan utilizando bloques estándar de gutenberg!

Podemos ver un ejemplo de acordeón de tipo «Entradas» a continuación 👇🏽

Roles disponibles en Portaledu (Permisos)

La persona con rol direcció, como responsable del sitio web del centro, es quien debe asignar los diferentes roles a los usuarios miembros del mismo, en función del papel que deban desempeñar en el portal. Este rol, permite además el acceso a toda la edición de la web, ajustes, menús, contenidos, etc. En esta entrada os recordamos como podéis organizar

Contador de visitas

El plugin: «Contador de Visitas Matomo» tiene como objetivo poder mostrar el número de visitas que se realizan a nuestros sitios web. Este contador de visitas obtiene la información a partir del sistema de analítica llamado Matomo, que aloja los datos de analítica en los servidores de Conselleria, no dependiendo de terceros. 1.-Inserción del contador mediante bloque de Gutenberg (Novedad

Gutenberg: Bloque pestañas

El bloque pestañas nos ayuda a mostrar contenidos organizados en pestañas. Estas pueden estar dispuestas vertical u horizontalmente.Este bloque permite trabajar de dos formas: Entradas. Permite seleccionar las entradas de una o varias categorías y visualizar los títulos, dejando el cuerpo o el inicio del cuerpo de la entrada oculto hasta que se selecciona la pestaña correspondiente.Esta modalidad resulta recomendable para

Gutenberg: Editor estándar

Tal como se ha informado en ocasiones anteriores (Gutenberg: el editor por defecto de Portaledu – Portaledu), el editor estándar en Portaledu es el editor estándar de WordPress, llamado también Gutenberg o Editor de bloques. Se trata de un potente editor visual que se va reforzando constantemente con la incorporación de plugins y desarrollos que aportan nuevos bloques para enriquecer

Gutenberg: Bloque visor deslizante

Portaledu está aumentando las herramientas disponibles en el editor Gutenberg. Dentro de esta serie de bloques que estamos incorporando, presentamos el bloque visor deslizante de entradas.Este bloque permite seleccionar las entradas de una o varias categorías y visualizarlas en diapositivas, de una en una, de modo circular, realizando una presentación de las mismas y añadiendo así dinamismo a las páginas.

El bloque es fácilmente configurable desde el editor, presentando las siguientes opciones en función del tipo de contenido seleccionado:

  • Tipo de contenido. Permite seleccionar entre Post / Contenido personalizado. Lo cual hará que el bloque acordeón funcione con entradas ya creadas o bien permita crear nuevo contenido.
    En función del tipo elegido las opciones del bloque mostradas más abajo variarán.
  • Categoría. Al elegir una categoría, las entradas pertenecientes a esta, ordenadas descendentemente por fecha de creación, serán seleccionadas para su visualización. Puedes escoger varias categorías.
  • Número de entradas. Número total de entradas seleccionadas para su visualización. Si se deja en su valor por defecto 5, optarán a la visualización las cinco últimas entradas pertenecientes a la categoría elegida.
  • Contenido completo. Indica si al visualizar el desplegable se mostrará el contenido completo de la entrada o bien el primer párrafo de esta más un enlace para seguir leyendo. (La opción de contenido completo solo está disponible cuando el bloque se inserta en una página y no en una entrada)

  • Tipo de contenido. Permite seleccionar entre Post / Contenido personalizado. Lo cual hará que el bloque acordeón funcione con entradas ya creadas o permita crear nuevo contenido.
    En función del tipo elegido las opciones del bloque mostradas más abajo variarán.
  • Añadir nuevo elemento. Añade un nuevo bloque al acordeón. El formulario presentado se divide en Título y Cuerpo. En el cuerpo del ítem o elemento, podemos utilizar bloques estándar.

Gutenberg: Bloque carrusel

Portaledu está aumentando las herramientas disponibles en el editor Gutenberg. Dentro de esta serie de nuevos bloques que se van a ir incorporando, presentamos el bloque de carrusel.

Este bloque permite seleccionar las entradas de una o varias categorías y visualizarlas en diapositivas de modo circular, realizando una presentación de las mismas y añadiendo así dinamismo a las páginas.

Resulta ideal para la presentación visual de categorías como noticias u otros temas, ya que el bloque elegirá las últimas entradas de la categoría seleccionada para su presentación. Podemos ver un ejemplo a continuación 👇🏽

El bloque es fácilmente configurable desde el editor, presentando las siguientes opciones:

  • Categoría. Al elegir una categoría, las entradas pertenecientes a esta, ordenadas descendentemente por fecha de creación, serán seleccionadas para su visualización. Puedes elegir varias categorías.
  • Número de entradas. Número total de entradas seleccionadas para su visualización. Si se deja en su valor por defecto 5, optarán a la visualización las cinco últimas entradas pertenecientes a la categoría elegida.
  • Duración de cada diapositiva. Tiempo en milisegundos que permanecerá visualizada una diapositiva. Pasado dicho tiempo, el carrusel rotará para seleccionar la siguiente.
  • Entradas por diapositiva. Con un valor mínimo de 2 y máximo de 4. Permite seleccionar cuántas diapositivas mostrará el carrusel simultáneamente.
  • Mostrar extracto. Indica si en las diapositivas se mostrarán o no las primeras líneas de las entradas.
  • Mostrar leer más. Se puede ocultar/mostrar el enlace (leer más) para navegar a la entrada.
  • Mostrar fecha. Se puede ocultar/mostrar la fecha del post.

    Los elementos que estarán siempre presentes en las dispositivas y cuya presencia no es configurable son:
    • Imagen destacada de la entrada. En caso de que la entrada carezca de imagen personalizada, se utilizará una imagen por defecto propia del bloque carrusel.
    • Título de la diapositiva

También podemos crear un carrusel minimalista, solamente con las imágenes destacadas de los posts. Para hacerlo, activaremos la opción Ocultar información de la entrada y seleccionaremos una proporción de la imagen.

Conseguiremos un resultado como este:

Podemos también configurar el color de los puntos y flechas de navegación del visor, así como ocultar cualquiera de los elementos.

Los usuarios con roles superiores en el sitio web, como por ejemplo dirección o mantenimiento, verán una configuración adicional, que les ofrece la posibilidad de definir una imagen de sustitución para aquellas entradas que no tengan definida ninguna imagen destacada. Hay que tener en cuenta que se trata de una configuración única para todo el sitio web. La imagen definida se utilizará en cualquier bloque carrusel o visor deslizante solo cuando las entradas que muestran no tengan definida la imagen destacada.

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