Crear un Sticky Ad con GeneratePress

Este es una pequeña guía de como crear un Sticky ad en la parte inferior de tu sitio web usando GeneratePress y GP Premium.

Para quienes no lo saben, GeneratePress es uno de los mejores temas que puedes encontrar en el repositorio de WordPress.

GeneratePress es un tema algo limitado por lo que GP Premium es el plugin que expande las funciones del tema gratuito.

Una de las opciones que encontrarás una vez que instalas GP Premium es un la sección de elementos que tiene los famosos hooks.

Los hooks es una solución que te permite agregar código en diferentes partes de tu sitio.

Con los hooks puedes agregar anuncios en ciertas partes de tu sitio, breadcrumbs,agregar un caja de autor y algunas cosas más

Agregar hooks es algo sencillo, lo que no resulta sencillo es crear el código si no sabes ninguno de lenguajes asociados con los sitios de WordPress.

Pasos para Crear un Sticky Ad con GeneratePress

Estos son los pasos para crear un anchor ad o sticky en la parte inferior del sitio para que luzca así:

Activa los Elementos

El primer paso es ir a apariencia y luego a GeneratePress y activar la opción que dice Elements o elementos.

Una vez hecho eso, veras el menu que dice “Elements”

Ahora haz clic en ese menu.

Agregar un Nuevo Elemento

Ya estás en la sección que dice elementos,

  1. Haz clic en el botón que dice nuevo elemento.
  2. Escoge hook en las opciones disponibles.
  3. Haz click en “crear”
  4. Escribe el título y agrega este código:
<div class="grid-container custom-ad-container">


</div>

E ingresa el código de la unidad de Adsense que tenga 720 de ancho por 90 de altura entre el primer y segundo reglón.

Si deseas que el anuncio solamente se muestre en el escritorio como es mi caso, usa este codigo en vez del anterior

<div class="hide-on-mobile hide-on-tablet">
<div class="grid-container custom-ad-container">


</div>
</div>

Escoger la Posición del Hook

Ahora que ya tienes el codigo listo, debes ir a settings o configuración y seleccionar generate After Footer.

Ahora debes ir al menú a la par de configuración donde dice Display Rules y escoges “Entire Site” donde dice location

Una vez hecho eso, puedes darle publicar

Agregar CSS

El último paso es agregar un poco de CSS para corregir cómo luce el sticky ad.

Para hacer esto debes ir a apariencia y luego a personalizar.

Ese sticky ad es importante ya que es uno de los mejores unidades que genera ingresos en el escritorio.

Ve al menu que dice CSS adicional y agrega este código al final de lo que tengas en esa sección:

/* CSS For the sticky ad */

.custom-ad-container {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    height: fit-content;
}

.custom-ad-container ins.adsbygoogle {
    display: bloc

Y dale publicar a los cambios

Conclusión

Espero que esto te ayude a colocar un anuncio de adsense en una de las mejores posiciones de tu blog.

En mi caso, esta es una de las tres unidades que más ingreso genera.

Publicaciones sobre Plugins y Temas

Estas son algunas publicaciones sobre algunos plugins y temas para WordPress.

  1. Reseña Sobre GeneratePress
  2. Reseña sobre All in One WP Migration
  3. Reseña sobre Ad Inserter Pro
  4. Reseña sobre GenerateBlocks Pro
  5. La Era de los Bloques de Gutenberg
  6. Crear un Sitio de Membresia Sencillo
  7. Reseña sobre GPLDL: Plugins Gratuitos

Sobre Jose manuel

Soy José Manuel, empecé un blog en el 2011 como un pasatiempo y para hacerlo en mis clases y poco a poco, me enamoré de WordPress. Espero que algo de todo lo que he escrito te sirva de ayuda.

RevistaWP

RevistaWP es un sitio donde registro mis pensamientos y descubrimientos sobre todo lo que sucede dentro del mundo WordPress

Contacto

Puedes contactarme por medio de los siguientes canales