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

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.

Cómo activar el módulo Elementos en GeneratePress Premium

Suponiendo que ya tienes instalado GeneratePress Premium, basta con que vayas a Apariencia > GeneratePress y en la lista de módulos disponibles ubiques Elementos y hagas clic en su correspondiente enlace “Activar” que se encuentra a la derecha. Una vez que lo hayas hecho, verás que en Apariencia aparece un nuevo menú titulado Elementos. Ya activo, también podrás llegar a el si visitas el panel de GeneratePress Premium, donde lo encontrarás en un botón con el mismo nombre en la parte de arriba.

Estructura básica de cualquier entrada en Elementos

Sea que elijas bloque, encabezado, hook o diseño, hay un patrón en todos ellos; en cada uno encontrarás lo siguiente:

1. Un editor para el contenido del elemento; en el caso de bloque será Gutenberg, en todos los demás es el editor antiguo.
2. Un conjunto de propiedades para controlar el elemento que pueden ser:
   • Ajustes propios del bloque
   • Reglas para mostrar
   • Notas internas.

Poco a poco irás encontrándole sentido a esta potente herramienta, que es una de las razones por las cuales creo que GeneratePress es un tema superior a otros y vale cada centavo que cuesta.

Ejemplos prácticos de como usar Elementos de GeneratePress Premium

Originalmente el artículo era una larga explicación de como funciona la característica, pero quedó más como manual de documentación que otra cosa y a decir verdad no era muy útil, así que me lo replantié con ejemplos para que puedan ver como se usan las características y que pueden producir. Iré poniendo casos concretos de situaciones frecuentes en un sitio con WordPress y como solucionarlos con Elements de GeneratePress Premium. Para algunos de estos ejemplos también usé GenerateBlocks, un nuevo plugin del mismo programador de GeneratePress.

Caso práctico #1: Eliminar funcionalidad innecesaria de WordPress

Seguro te habrás encontrado que hay varias características de WordPress que ya son útiles y por lo tanto lo mejor es deshabilitarlas; tradicionalmente para esto tienes que recurrir a cualquiera de los métodos para añadir código y CSS personalizados que mencioné en otro artículo. Pero en algunas ocasiones involucra irte hasta los archivos de tu sitio, o crear un functions.php o alguna otra cosa que no tan sencilla para muchos.

GeneratePress Premium lo soluciona fácil con un hook; vamos a iniciar; ve a Apariencia > Elementos y presiona el botón de arriba “Añadir un nuevo Elemento” y del selector que sale en pantalla elige “Hook“; ya en el editor, nombra el hook como gustes, y en el contenido debajo del título pon todo esto:

// Remover basura de la cabecera
<?php
remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'wp_generator' );
remove_action( 'wp_head', 'feed_links', 2 );
remove_action( 'wp_head', 'feed_links_extra', 3 );
remove_action( 'wp_head', 'index_rel_link' );
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action( 'wp_head', 'start_post_rel_link', 10, 0 );
remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 );
remove_action( 'wp_head', 'adjacent_posts_rel_link', 10, 0 );
remove_action( 'wp_head', 'wp_shortlink_wp_head', 10, 0 );
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_action( 'template_redirect', 'rest_output_link_header', 11, 0 );
remove_action( 'wp_head', 'rest_output_link_wp_head', 10 );
remove_action( 'wp_head', 'wp_oembed_add_discovery_links', 10 );
remove_action( 'wp_head', 'wp_shortlink_wp_head');

function my_deregister_scripts() { 
  wp_deregister_script( 'wp-embed' );
}

add_action( 'wp_footer', 'my_deregister_scripts' );
?>

Ahora configura lo siguiente:

• Pestaña Ajustes:
  • Hook: elije “wp_head“, de modo que se ejecute en la cabecera.
  • Habilita “Ejecutar PHP“, lo cual indica que lo que se puso en el editor es código PHP que debe ejecutarse y no contenido; si no lo pones, verás el código en la página como si fuera cualquier cadena de texto.
  • Prioridad: ponlo a 9. En el argot de WordPress, la prioridad se indica de 1 a 10, mientras más bajo el número, más temprana la ejecución, y viceversa.
  • Todo los demás ajustes déjalos en default.
• Pestaña Reglas para mostrar:
  • Sección Posición: abre el selector y elige “Todo el sitio“.

Presiona Publicar para guardar y activar el hook. Si revisas el código fuente del sitio verás que ya no está nada de la basura que eliminamos antes. Si aún no has caído en cuenta, esto bien puede sustituir a un plugin de los cien mil que hay de limpieza, de los cuales muy probablemente tienes uno por ahí.

Caso práctico #2: Establecer un diseño o estructura consistente en todas tus entradas

Elementos de GeneratePress Premium hace esto muy sencillo; en otros temas (*coff*Astra*coff*) tienes que instalar un plugin para hacer una edición masiva de las entradas de modo que puedas aplicar los valores del metabox que se ve dentro del post. No sé ustedes, pero me parece extremadamente “sucio” el método y hasta cierto punto algo destructivo, porque sobreescribimos valores en las entradas. Y sin mencionar que se crea la dependencia en otro plugin que esperemos se siga desarollando, o de lo contrario te quedarás chiflando en la loma.

En fin, veamos como se resuelve con Elementos; voy a replicar lo que hago en las entradas del sitio el sitio, es decir, mis entradas no tienen barras laterales:

1. Ve a Apariencia > Elementos y presiona el botón de arriba “Añadir un nuevo elemento“, y elije el tipo “Diseño“.
2. Nombra tu Elemento, es importante para que lo identifiques en la lista cuando tengas muchos.
3. En la pestaña Barra lateral puedes elegir la configuración para estas; las opciones se explican solas, no hay mucho que ahondar aquí; en mi caso, yo elijo “Contenido (sin barras laterales)“.
4. En la pestaña Pie de página puedes elegir cuantos widgets tener, desde cero hasta 5, dejo a tu elección la cantidad.
5. En la pestaña Contenido puedes elegir entre ancho completo o bien o contenido, y el ancho del mismo; para replicar el estilo de este blog, elije “Contenido“.
6. En Reglas para mostrar puedes indicar en que lugares quieres aplicar esta configuración; elige “Entrada” y en el combo que aparece a la derecha “All entradas” (yep, no todo está traducido al 100%, tendré que aplicarme en eso).

Da clic en publicar y listo, todas tus páginas de entrada tendrán el mismo diseño. Simple y elegante.

Caso práctico #3: Carga condicional de scripts o CSS

En este sitio – y me imagino que en los suyos igual – habrán cosas que quieres usar sólo de vez en cuando, sin tener que instalar otro plugin más o meter una modificación permanente más. Por ejemplo, yo uso algunas tablas del sitio Can I Use en algunas entradas del sitio (puedo recordar dos de memoria), y para usar estas tablas tengo que enlazar un script que por supuesto no quiero en todas las entradas, porque consume recursos y peticiones. ¿Así que podemos hacer? cargar el script de Can I Use sólo en las entradas que lo requieran.

Vamos a resolver la carga condicional de scripts o CSS con Elementos de GeneratePress Premium:

1. Ve a Apariencia > Elementos y da clic en el botón superior “Añadir un nuevo elemento“, y elije el tipo “Hook“.
2. En el editor nombra tu hook como quieras y en el editor pon:

<script src="https://cdn.jsdelivr.net/gh/ireade/caniuse-embed/caniuse-embed.min.js"></script>

Ahora configura lo siguiente:

• Pestaña Ajustes:
  • Hook: elije “wp_footer“, de modo que se ejecute en el pie de página.
  • Todo los demás ajustes déjalos en default.
• Pestaña Reglas para mostrar:
  • Sección Posición: abre el selector y elige “Entrada“, y verás que se abre un segundo selector a la derecha, en el cual se cargarán todas las entradas que haya en tu sitio; elige la entrada donde deseas que se incruste ese script.

Presiona Publicar, y listo, puedes cargar esa entrada y examina el código fuente, verás que aparece el script indicado; para comprobar abre cualquier otra, y podrás comprobar que no está el script en cuestión.

Este mecanismo te permite incrustar contenido a voluntad y de manera selectiva en tus publicaciones, con lo cual puedes reducir considerablemente el gasto inútil de recursos en páginas que no los necesitan.

Caso práctico #4: Crear un encabezado personalizado para tus entradas

Con Elementos de GeneratePress Premium también puedes generar bonitas cabeceras para tus publicaciones, y funciona a manera de template podríamos decir. Imagina que quieres definir un template como el que muestra esta publicación en la parte de arriba; una imagen grande con título y algunas metas del post al centro. Con Elementos de GeneratePress Premium se hace en un dos por tres, veamos como:

1. Ve a Apariencia > Elementos y haz clic en el botón superior “Añadir un nuevo Elemento“, y del selector que aparece elige “Cabecera“.
2. Pon un título para tu cabecera; en el editor pondrás básicamente lo que tu quieras, pero en este caso nos interesan algunos valores meta del post, como el título, la categoría y las etiquetas. ¿Cómo lo hacemos? GeneratePress nos ofrece algunos metadatos que funcionan a base de una especie de macros que se llaman “Template tags“, y que son:
   • {{post_title}}: incrusta el título del post actual.
   • {{post_date}}: incrusta la fecha del post actual.
   • {{post_author}}: incrusta el autor del post actual.
   • {{post_terms.<taxonomy>}}: despliega los términos asociados a <taxonomy>, que puede tomar los valores category, post_tag, product_cat.
   • {{custom_field.<name>}}: se usa para desplegar el valor del campo personalizado <name>.

Así que algo como:

<h4>Publicado en {{post_terms.category}}</h4>
<h1 class="entry-title">{{post_title}}</h1>
<h4>Por <span class="vcard author post-author"><span class="fn">{{post_author}}</span></span>, actualizado en {{post_date}}</h4>

Produce algo como lo siguiente:

Ahí está mostrando la barra superior, haz caso omiso de ella.

Pero aún falta más; como puedes ver en este sitio las entradas tienen una cabecera con imagen de fondo, y encima de eso tienen una capa superpuesta con un degradado oscuro de modo que contraste bien más o menos con el 90% de las publicaciones. Algo muy importante que tienes que tener en cuenta es que aquí se define la estructura (y un poquitín de formato, no está separado al 100%) y en el Personalizador hay más opciones de formato que pueden afectar la cabecera.

El Elemento Encabezado tiene más cosas a configurar que los otros: en la pestaña Ajustes encontrarás:

1. Clase de Elemento: por si quieres añadir tus propias clases personalizadas a este elemento.
2. Contenedor: ancho del contenedor.
3. Contenedor interno: ancho del contenedor interno.
4. Alineación horizontal: sin necesidad de explicaciones.
5. Relleno: fondo en pixeles arriba, derecha, abajo e izquierda.
6. Imagen de fondo: aquí puedes elegir entre “No imagen de fondo“, “Imagen destacada” e “Imagen personalizada“; en mi caso uso “Imagen destacada“. Cuando usas “Imagen destacada” aparece otro selector de imagen titulado “Imagen de retorno“, que es básicamente una imagen a poner por default en caso que la publicación no tenga imagen destacada.
7. Posición de fondo: como se alineará la imagen de fondo horizontal y verticalmente.
8. Parallax: el famoso efecto de Parallax, que añade un desplazamiento suave al fondo.
9. Desactivar la imagen destacada: al estar activo, oculta la imagen destacada de modo que no aparezca duplicada.
10. Superposición de fondo: permite usar el color de fondo como capa de color superpuesta. En mi caso es negra al 70% de opacidad aproximadamente.
11. Color de fondo: para usar en lugar de la imagen.
12. Color del texto, Color de enlace y Color de enlace (hover): determinan los colores correspondientes.

Así que como podrás ver que en su nivel más básico, con definir un poco de contenido con los template tags de GeneratePress Premium, una imagen de fondo (tentativamente la destacada de cada post), una capa de color encima, e indicar que quieres que se muestre en todas las entradas, así como apoyarse en las opciones del Personalizador, ya tienes para definir cabeceras de todas tus publicaciones. Funciona de maravilla.

Caso práctico #5: Definir y cargar SVGs en el sitio

Esos íconos que ves en el menú no son íconos de fuente, son SVG’s; para colocarlos ahí usé Elementos de GeneratePress Premium, claro está. ¿Cómo se hace? bueno, el planteamiento del problema es que los SVG’s se definen en dentro del cuerpo del código de la página (dentro del <body>), así que lo que me sirve esta vez es un hook. Vamos a ver como se hace:

1. Ve a Apariencia > Elementos y haz clic en el botón superior “Añadir un nuevo Elemento” y selecciona “Hook” del desplegable.
2. Como en las otras ocasiones, ponle un título descriptivo a tu hook de modo que sepas que hace.
3. En el editor, pon el código de tus SVG’s; en mi caso va algo como esto:

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-facebook2" viewBox="0 0 25 25">
<path d="M22.656 0h-20.313c-1.289 0-2.344 1.055-2.344 2.344v20.313c0 1.289 1.055 2.344 2.344 2.344h10.156v-10.938h-3.125v-3.125h3.125v-1.563c0-2.583 2.104-4.688 4.688-4.688h3.125v3.125h-3.125c-0.859 0-1.563 0.703-1.563 1.563v1.563h4.688l-0.781 3.125h-3.906v10.938h7.031c1.289 0 2.344-1.055 2.344-2.344v-20.313c0-1.289-1.055-2.344-2.344-2.344z"></path>
</symbol>
<symbol id="icon-twitter" viewBox="0 0 25 25">
<path d="M25 5.527c-0.918 0.41-1.909 0.684-2.944 0.806 1.060-0.635 1.87-1.641 2.256-2.837-0.991 0.586-2.090 1.016-3.257 1.245-0.938-0.996-2.271-1.616-3.745-1.616-2.832 0-5.127 2.295-5.127 5.127 0 0.4 0.044 0.791 0.132 1.167-4.263-0.215-8.042-2.256-10.571-5.361-0.439 0.757-0.693 1.641-0.693 2.578 0 1.777 0.903 3.35 2.28 4.268-0.84-0.024-1.631-0.259-2.324-0.64 0 0.020 0 0.044 0 0.063 0 2.485 1.768 4.561 4.116 5.029-0.43 0.117-0.884 0.181-1.353 0.181-0.332 0-0.649-0.034-0.967-0.093 0.654 2.036 2.549 3.521 4.79 3.564-1.758 1.377-3.965 2.197-6.372 2.197-0.415 0-0.82-0.024-1.226-0.073 2.275 1.46 4.971 2.305 7.866 2.305 9.434 0 14.595-7.817 14.595-14.595 0-0.225-0.005-0.444-0.015-0.664 1.001-0.718 1.87-1.621 2.559-2.651z"></path>
</symbol>
<symbol id="icon-youtube" viewBox="0 0 25 25">
<path d="M24.751 7.5c0 0-0.244-1.724-0.996-2.48-0.952-0.996-2.017-1.001-2.505-1.060-3.496-0.254-8.745-0.254-8.745-0.254h-0.010c0 0-5.249 0-8.745 0.254-0.488 0.059-1.553 0.063-2.505 1.060-0.752 0.757-0.991 2.48-0.991 2.48s-0.249 2.021-0.249 4.048v1.895c0 2.021 0.249 4.048 0.249 4.048s0.244 1.724 0.991 2.48c0.952 0.996 2.202 0.962 2.759 1.069 2.002 0.19 8.501 0.249 8.501 0.249s5.254-0.010 8.75-0.259c0.488-0.059 1.553-0.063 2.505-1.060 0.752-0.757 0.996-2.48 0.996-2.48s0.249-2.021 0.249-4.048v-1.895c-0.005-2.021-0.254-4.048-0.254-4.048zM9.917 15.742v-7.026l6.753 3.525-6.753 3.501z"></path>
</symbol>
</defs>
</svg>

De resto configura los siguiente:

• Pestaña Ajustes:
  • Hook: elije “wp_body_open“, es decir, se incrustará justo después de abierto el cuerpo de la página.
• Pestaña Reglas para mostrar:
  • Posición: elige “Todo el sitio“.

Todo lo demás en default, y publica el Elemento.

Ahora bien, por poner completo el ejemplo, pondré lo demás que hago, pero ya no tiene que ver con Elementos; como mencioné, lo pongo para que esté completo el ejemplo.

Posteriormente, en Personalizar > Editar CSS, añado lo siguiente:

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

.icon-facebook2 {
  font-size: 13px;
  color: #fff;
}

.icon-twitter {
  font-size: 13px;
  color: #fff;
}

.icon-youtube {
  font-size: 13px;
  color: #fff;
}

Finalmente, en la entrada del menú uso:

<svg class="icon icon-facebook2"><use xlink:href="#icon-facebook2"></use></svg>

Esto obviamente para el menú con el ícono de Facebook, hace falta replicarlo con las clases e id’s adecuadas. Y con eso se visualiza el ícono pero usando el SVG que Elementos ayudó a incrustar en el código del cuerpo.

Caso práctico #6: Cómo crear una caja de autor con bloques

Finalmente veamos como podemos crear una caja de autor o como se le conoce también, un “author box“; vamos a ver como se hace;

1. Ve a Apariencia > Elementos y haz clic en “Añadir un nuevo Elemento” y elige “Bloque” del desplegable.
2. Lo primero que necesitamos es hacer un diseño para nuestro bloque de autor, así que en mi caso haré algo como lo que ves a continuación; yo lo hice con GenerateBlocks y con los bloques nativos de Gutenberg, nada más. Si necesitas más instrucciones, no es más que un bloque de contenedor con dos columnas, y dentro una imagen, un párrafo y luego otro contenedor de una columna con un bloque de íconos sociales; sencillo, ¿no te parece?

3. Ahora tenemos que indicar donde queremos mostrar nuestro bloque; para ello usaremos de nuevo un hook, y el que elegiremos será “generate_after_entry_content“, es decir, justo después que se muestre el contenido de la publicación, se mostrará este bloque si no definimos ninguna restricción más peeeero…
4. No vamos a mostrar el bloque en todos lados; sólo lo queremos en entradas, así que vamos a la sección Posición y elige “Entrada” y luego en el segundo desplegable elige “All entradas“, para indicar que sólo queremos restringir este bloque a este tipo de contenido.

Publica tu bloque y revisa una entrada, cualquiera. Verás que al final se muestra tu caja de autor, como se ve aquí abajo (obvio con lo que hayas diseñado):

Ahora bien, me queda claro que esto se puede hacer con otros métodos, pero quise ejemplificar el hecho de crear un bloque y controlarlo por medio de condiciones de GeneratePress Premium. Y otra observación: esto mata otro plugin. 😀

Sobre las notas internas de Elementos de GeneratePress Premium

Habrás notado que en todos los Elementos hay una pestaña que se llama Notas internas y de la cual nunca hablé; sólo es una opción para que puedas documentar tu Elemento, y a pesar de que pueda sonar tonto te recomiendo encarecidamente lo hagas, pues algunas veces aunque Elementos nos ayuda, puede que lo que hagamos quede fragmentado (por ejemplo en el caso de como empotré los SVGs), y un poco de documentación no nos vendría mal para recordar como funciona.

Hooks disponibles en las condiciones de GeneratePress Premium

Como podrás ver el control de hooks de GeneratePress Premium es genial, pero hay muchos hooks y muchas veces no se sabe que hacen: esta es una relación de los hooks que ofrece GeneratePress Premium:

• Scripts y estilos
  • wp_head: un hook estándar de WordPress que se usa para empotrar contenido en ; cosas como estilos, meta tags, Google Analytics y similares pueden ir aquí.
  • wp_footer: otro hook estándar de WordPress, que se dispara justo antes del .
  • wp_body_open: usado en los ejemplos, y como vimos, se dispara justo después del .
• Cabecera:
  • generate_before_header, y generate_after_header: para meter contenido antes del <header>, en y después del </header>.
  • generate_before_header_content, generate_after_header_content: antes y después del elemento .inside-header.
  • generate_before_logo, generate_after_logo: como su nombre lo dice, antes y después del logo.
• Navegación
  • generate_inside_navigation
  • generate_inside_secondary_navigation
  • generate_inside_mobile_menu
  • generate_inside_mobile_menu_bar
  • generate_inside_mobile_header
  • generate_inside_slideout_navigation
  • generate_before_navigation
  • generate_after_navigation
  • generate_after_mobile_menu_button
  • generate_inside_mobile_menu_control_wrapper
• Contenido
  • generate_inside_site_container
  • generate_inside_container
  • generate_before_main_content
  • generate_after_main_content
  • generate_before_content
  • generate_after_content
  • generate_after_entry_content
  • generate_after_primary_content_area
  • generate_before_entry_title
  • generate_after_entry_title
  • generate_after_entry_header
  • generate_before_archive_title
  • generate_after_archive_title
  • generate_before_archive_description
  • generate_after_loop
  • generate_before_do_template_part
  • generate_after_do_template_part
• Comentarios
  • generate_before_comments_container
  • generate_before_comments
  • generate_inside_comments
  • generate_below_comments_title
• Bara lateral
  • generate_before_right_sidebar_content
  • generate_after_right_sidebar_content
  • generate_before_left_sidebar_content
  • generate_after_left_sidebar_content
• Pie de página
  • generate_before_footer
  • generate_after_footer
  • generate_after_footer_widgets
  • generate_before_footer_content
  • generate_after_footer_content
  • generate_footer
  • generate_before_copyright

Y te aconsejo dos recursos maravillosos de documentación de GeneratePress:

• Referencia de hooks: aquí encontrarás todos los hooks explicados.
• Referencia visual de hooks: aquí encontrarás imágenes donde se puede apreciar visualmente donde está cada hook.

Sobre las reglas de visualización de Elementos de GeneratePress Premium

Como habrás notado, las Reglas para mostrar son tres y son las siguientes:

1. Posición: te permite elegir cualquier tipo de publicación válida que tenga WordPress, que van desde “todo el sitio” hasta páginas, entradas, archivo, medios y todo lo que haya, sea uno o más de uno. De las tres, es la única obligatoria.
2. Excluir: contrario a lo anterior, también puedes excluir; los casos más simples que se me vienen a la cabeza son implementar una condición de algo como “aplicar un encabezado a todo el sitio, excepto a algunas entradas“; bien, ese “excepto” se puede implementar con el apartado Excluir, las opciones son iguales a las de Posición, así queda a tu criterio aplicarlas correctamente y probar para determinar que no chocan entre ellas.
3. Usuarios: por último, también puedes segmentar si aplicar o no un Elemento dependiendo del rol del usuario.

¿Qué pasa cuando hay más de una regla?

Otra cosa que habrás notado es que debajo de cada selector hay un botón que dice “Añadir regla de ubicación“, “Añadir regla de exclusión” o “Añadir regla de usuario“; cada uno de estos añade una regla más al apartado correspondiente, enlazándola con la conjunción “y”. Es decir, que se aplicará el Elemento si se cumplen todas.

Palabras finales

Por si aún no te has percatado, Elementos es una herramienta extremadamente potente de GeneratePress Premium; sólamente con Elementos que es UNO de los módulos de GeneratePress Premium puedes sustituir varios plugins de tu sitio si así lo deseas. Este artículo sólo fue para darte una idea de lo que puedes hacer, y como puedes ver es bastante; seguro tu cabeza ya empezó a girar pensando en que partes de tu WordPress aplicar Elementos. Así de efectivo es, y como siempre, te vuelvo a recomendar GeneratePress Premium para todo tipo de sitio; a veces no se trata de tener cientos de opciones (posiblemente inútiles) como otros temas, sino que muchas veces el producto mejor pensado gana, como en el caso de GeneratePress Premium.

¿Tienes más recetas de como usar Elementos? anímate y compártelas en los comentarios.

Créditos

Foto de cabecera por Hal Gatewood en Unsplash