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 al editar cualquiera de las que ya tenemos creadas, podemos añadir patrones. Para ello, haremos clic sobre el «+» que aparece en la parte superior izquierda del editor:
Tras hacer clic, se nos abrirá un panel a la izquierda, para añadir bloques, patrones o ficheros. Seleccionaremos la pestaña de patrones:
2-Listado de patrones
Al hacer clic sobre Patrones nos aparecerá un listado de categorías de patrones. La mayoría vienen por defecto con WordPress. Os animamos a echar un vistazo por si os interesa algún diseño.
En todo caso, Portaledu ha incorporado su propia colección de patrones, que encontraréis en la categoría con su nombre.
3-Patrones de Portaledu
Portaledu ofrece una selección de patrones confeccionados con bloques estándar, tanto genéricos como propios de Portaledu. Al hacer clic sobre la categoría Portaledu, se mostrarán a la derecha los patrones correspondientes. Si pasamos el ratón por encima de alguno de ellos, se mostrará una descripción del mismo.
4-Insertar un patrón
Añadir un patrón a nuestro contenido es tan fácil como hacer clic sobre el mismo. Al hacerlo, aparecerá automáticamente en nuestro contenido. Un mensaje emergente nos notifica el evento (Patrón de bloque «nombre del patrón» añadido)
5-Idioma de los patrones de Portaledu
Los patrones no tienen idioma asignado, ya que son simplemente plantillas de bloques, pensadas para facilitar diferentes diseños de maquetación, siendo el contenido de textos e imágenes irrelevante. Así, encontraremos en los patrones, textos en diferentes idiomas y también imágenes que están pensados para ser editados y sustituidos, adaptando cada usuario su contenido.
6-Ampliación de la colección de patrones
Portaledu irá ampliando su colección de patrones en función de las necesidades detectadas. Comprueba de vez en cuando la categoría de patrones de Portaledu, por si hubiera alguna novedad.
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 aspectos:
Darle al usuario una experiencia cómoda donde le sea rápido encontrar información sobre un tema.
Cuando un usuario entra en un artículo y le gusta su contenido, puede seguir leyendo sobre otros asuntos relacionados accediendo a los demás artículos de la categoría.
El contenido estructurado de nuestra web puede ayudar al posicionamiento, ya que los robots de indexado pueden leer y categorizar el contenido de forma ágil.
En Portaledu disponemos de diferentes bloques capaces de mostrar, de diferentes formas, las entradas de una misma categoría. Esto nos permite que cualquier nueva entrada categorizada y publicada pueda mostrarse automáticamente en las páginas configuradas con esos bloques dinámicos.
Al final de este post, encontrarás toda la información sobre estos bloques.
2-Añadir una categoría
Desde el menú de Categorías (Entradas –> Categorías), podemos crear una categoría para después asociar cualquier entrada a esta. Crear una categoría es simple; el formulario de creación nos explica qué es cada cosa para que no nos perdamos.
Ejemplo formulario nueva categoría
Ejemplo formulario relleno nueva categoría (Novedades)
Como se puede ver, en el formulario, aparecen explicaciones de todos los apartados: Nombre, Slug, Categoría madre, Descripción e Idioma. Hacemos énfasis en el campo slug, que será el identificador de la categoría. Se recomienda que sea lo más claro y sencillo posible para que los visitantes entiendan qué contenido estará adscrito a esa categoría.
3-Categoría en varios idiomas. Traducciones.
Los sitios web en Portaledu son habitualmente bilingües o multilingües. Necesitaremos crear las traducciones para cada categoría y enlazarlas entre sí. Pongamos un ejemplo:
Si hemos creado la categoría Novetats, en valenciano:
Nombre: Novetats
Slug: novetats-va
Categoría madre: ninguna
Descripción: Categoria per a classificar les novetats del portal
Idioma: Valencià
Crearemos su equivalente en castellano:
Nombre: Novedades
Slug: novedades-es
Categoría madre: ninguna
Descripción: Categoría para clasificar las novedades del portal
Idioma: Castellano
Una vez creadas ambas categorías, editaremos una de ellas y le asignaremos su traducción, desde el campo Traducciones. Simplemente tecleando el nombre de la categoría en el idioma correspondiente, WordPress nos ofrecerá la opción.
Asignar traducción a una categoría
Otra opción, que podéis explorar, es generar la traducción desde el listado de categorías. En este caso, crearíamos la categoría en el primer idioma y después, desde el listado de categorías, utilizaremos la opción de «+» o «crear traducción» como mostramos en la imagen siguiente:
Una vez creadas y emparejadas las traducciones, podemos comprobar en el listado que ya no aparece el «+» de crear traducción, sino un icono de un lápiz, para editar las traducciones:
4-Administrar categorías
Desde el menú de categorías, podemos editar, borrar y actualizar las categorías. El listado es idéntico a como se muestran las entradas o las páginas de WordPress. Se muestra su nombre con las opciones de Edición, Edición Rápida, Borrar o Ver.
5-Categoría por defecto
WordPress añade la categoría llamada ‘Sin categoría’ por defecto, ya que todos las entradas se añaden a esta categoría para tener un orden a pesar de que el usuario no utilice las categorías o se añadan a esta categoría especial para saber si existe una entrada sin categorizar.
Esta categoría se puede modificar, pero no borrar. Si no queremos mostrar esta categoría a nuestros visitantes, simplemente debemos asegurarnos de que ninguna entrada pertenece a la categoría «Sin categoría».
Es una práctica habitual, renombrar esa categoría (y el slug) a «General»:
Para saber cuántas entradas pertenecen a una categoría, basta mirar, en el listado de categorías, el número que se muestra a la derecha. Si hacemos clic sobre este número, se mostrarán las entradas adscritas a esa categoría.
Listado de categorías con número de entradas asociadas a cada una
6-¿Cómo categorizar una entrada?
Se puede hacer de dos formas: desde la edición rápida de cada post o bien editando el artículo, desde la barra lateral de utilidades. Recomendamos la segunda opción, ya que en la edición rápida no aparecen todas las posibilidades de edición de las entradas.
Cuando estamos editando la entrada o durante la creación de esta, podemos observar que hay un pequeño recuadro donde pone ‘Categorías’. En él, podremos observar todas las categorías que tenemos ya agregadas, las más utilizadas o incluso crear categorías nuevas si se necesita alguna en un momento específico. Obviamente, no vamos a poder añadir toda la información desde este panel, pero podemos crear rápidamente una categoría para que nuestro artículo no quede sin categorizar.
En la imagen de arriba, podemos ver la categoría seleccionada para la entrada que estamos editando.
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.
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.
Los bloques botón y titular de generateblocks permiten la utilización de iconos SVG. En este post aprenderemos a utilizarlos.
Imagen ejemplo de uso de iconos en botones
En primer lugar, añadiremos desde el editor uno de los dos bloques mencionados, que son los que permiten inserción de textos e iconos svg
Utilizaremos, por ejemplo, un bloque Titular:
Podemos escribir el texto que deseemos.
2-Configuramos el icono SVG
Después, en la configuración del bloque, podemos identificar una sección donde se definirá el icono SVG. Se aprecian tres subsecciones:
Icona SVG HTML: Aquí pegaremos el código SVG cuando lo hayamos obtenido externamente.
General: Disponemos de algunos SVG genéricos
Social: Disponemos de algunos SVG relacionados con redes sociales
3-Uso de repositorios externos de SVG
Si no encontramos ningún icono de los disponibles que nos encaje, podemos obtener más iconos de diferentes temáticas en algún repositorio externo como SVG Repo – Free SVG Vectors and Icons
En el repositorio indicado, podemos buscar entre un gran número de iconos.
Cuando seleccionemos uno, es importante fijarse en el tipo de licencia, que nos indicará si hay algún tipo de restricción en su uso, por ejemplo, vamos a escoger este icono con licencia de dominio público.
A continuación, editamos el vector y utilizamos la opción de Copiar SVG
Tal como se ve en la captura, podemos editar ciertos parámetros si nos interesa, antes de copiar.
Ahora pegamos en nuestra sección de Icono, en la configuración del bloque titular. Una vez pegado el código, se previsualiza el icono justo debajo.
Además, también se visualiza el icono en nuestro bloque titular:
4-Últimos ajustes: color de relleno y tamaño del icono
Dependiendo del código del icono que hayamos obtenido, puede ser necesario configurar el color. En este caso, observamos que en el bloque se visualiza completamente negro, incluyendo el relleno. Eso no es lo que queríamos. Para que se visualice tal como queremos, con el relleno blanco, simplemente ajustaremos, también en los ajustes del bloque, el color del icono:
Inmediatamente, comprobaremos que el icono se visualiza con el relleno blanco, tal como queríamos:
Este es un bloque titular, con texto y con icono SVG
También podemos cambiar el tamaño del icono, independientementa del tamaño del texto.
5-Otra opción: descargar el svg como fichero
Desde el repositorio de svg, podemos también exportar el icono a un fichero svg. Este fichero podremos después subirlo a la mediateca y utilizarlo con un bloque de imagen. Esta opción es la recomendada cuando el código svg en HTML no funciona bien en WordPress. A veces, WordPress puede filtrar por seguridad alguna de las etiquetas del código, produciendo que no se visualice bien el icono.
Advertencia: Este procedimiento funciona bien, en general. Aun así, podría ser que copiar y pegar no funcione en casos determinados como por ejemplo cuando el tipo de bloque copiado no exista en el wordpress de destino o bien algún bloque tenga algún tipo de restricción en origen o destino.
Con el editor de bloques de WordPress es sencillo copiar uno o varios bloques desde una página o post a otra página o post diferente.
Para ello, solo has de seguir estos pasos:
1-En una pestaña del navegador, abre en edición el post de donde quieres copiar.
2-Abre en otra pestaña del navegador, también en edición, el post que ha de recibir los bloques copiados
3-En el post original, selecciona el bloque o bloques a copiar. Recomendamos hacerlo desde la vista resumen del documento, ya que se controla mejor la selección. Utiliza el botón derecho del ratón y selecciona Copiar, o bien utiliza CTRL+C. Puedes utilizar la tecla MAYÚSCULAS + CLIC izquierdo del ratón para seleccionar varios bloques.
4-En el post de destino, haz clic en el lugar donde quieres pegar el contenido y utiliza el botón derecho del ratón para pegar, o bien utiliza CTRL+V
5-Como resultado, se pegarán en el nuevo post los bloques copiados:
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.
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.
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
Rellotge
Autobús
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
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:
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.
