Ejemplos prácticos de cómo usar Elementos de GeneratePress Premium

Diseños en papel

GeneratePress Premium es el tema cuyas virtudes ya he expuesto con anterioridad, y que uso en este sitio y recomiendo ampliamente ya sea que te interese usar Gutenberg, o Elementor o cualquier otro uso que quieras darle, simple y sencillamente es muy versátil. En este tutorial quiero mostrarte como se usa uno de sus módulos llamado Elementos que tiene la función de gestionar varios aspectos importantes de tu sitio con WordPress que tienen que ver con personalización en general. Vale la pena mencionar que este tutorial es para GeneratePress Premium. Aquellos con un tiempo considerable con GeneratePress Premium sabrán que el módulo Elementos reemplaza a los antiguos módulos GP Hooks y Headers que ya no existen en versiones nuevas.

¿Qué es Elementos?

Elementos es un módulo de GeneratePress Premium que te permite gestionar cuatro cosas:

  • Bloques: te permite crear bloques con condiciones de como y donde mostrarlos.
  • Encabezados (headers): cualquier encabezado que quieras construir, aquí lo puedes definir.
  • Ganchos (hooks): para aumentar la funcionalidad o comportamiento de alguna parte de tu sitio, para poder meter fragmentos de código.
  • Diseño (layout): para tener control fino sobre los templates que afectan a una o más páginas de tu sitio.

Cada uno de ellos tiene propiedades que nos ayudarán a configurarlos y a determinar cuando o como se muestran.

Leer más

Cómo añadir código y CSS personalizado a WordPress

Placa con la palabra "Custom" grabada encima

Una de las principales virtudes de WordPress es que puedes modificarlo a la medida de tus anchas; ¿no te gusta como se ve algún elemento del tema? Escribe un poco de CSS y cambia. ¿No te gusta como funciona algo? Escribe un pequeño bloque de código, añádelo y listo. Ahora bien, una de las primeras preguntas que se hacen los que empiezan en WordPress (y otros que ya llevan tiempo y se animan a modificarlo) , es la que viene a continuación: ¿dónde pongo mis personalizaciones de código y/o estilos CSS en WordPress?

Voy a contestar explicando donde NO poner tus personalizaciones de código y CSS.

Como seguramente sabes, todo en WordPress se actualiza; es decir, el software (core), temas y plugins…y cuando lo hacen se  sobreescribe todo lo que haya antes, y si modificaste algún archivo con tus personalizaciones, bueno, tengo malas noticias para ti, particularmente si no tienes un respaldo: acabas de perder tus modificaciones. En pocas palabras, esto nos lleva a la siguiente regla: 

Leer más

Cómo añadir íconos personalizados a Elementor

Constantemente me encuentro usando Elementor y me es necesario usar íconos de Font Awesome para usarlos en contadores y otros diseños; muchas de esas veces necesito íconos que no se encuentran en la distribución estándar de Elementor. Afortunadamente hay una forma sencilla de añadir íconos personalizados al builder Elementor. Básicamente hay dos formas de hacerlo, la primera es usar Elementor 2.6 o superior que ya cuenta con soporte de íconos personalizados, o bien si cuentas con Elementor 2.5 o menor puedes instalar el plugin Custom Icons for Elementor, y también usaremos un servicio de terceros que se llama Fontello. Vamos a empezar pues con el método para aquellos con Elementor 2.5 o menor:

Método 1, Elementor 2.5 o menor

Para este método necesitarás instalar el plugin Custom Icons for Elementor, que doy por sentado no debe darte ningún problema para añadirlo a tu WordPress. Recuerda que aunque yo o cualquiera te lo diga, revisa varias veces los plugins para ver si son seguros. Sigamos pues…

El proceso es como sigue: primero que nada hay que generar un archivo de webfont, que es el que contiene todos tus íconos, y posteriormente hay que añadirlos a la librería con la ayuda de Custom Icons for Elementor, para después poder usarlos. Así que primero que nada vamos a generar el webfont con Fontello:

Leer más

Hazlo con WordPress