Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Cómo crear una plantilla para una página de aterrizaje en WordPress

by
Read Time:8 minsLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Uno de los propósitos de un sitio web es generar clientes potenciales. Esto puede ocurrir de varias maneras: puedes tener un formulario para que las personas se comuniquen contigo para una cotización específica, puedes alentar a las personas a crear una cuenta al comprar productos en tu sitio, o puedes obsequiar un incentivo a cambio de su dirección de correo electrónico.

Si estás utilizando un incentivo o tienes una página en tu sitio especialmente diseñada para vender un artículo, ya sea una suscripción, un servicio o un producto, entonces necesitas evitar que las personas hagan clic fuera de esa página sin comprar o sin dejar su dirección de correo electrónico.

A este tipo de página se le denomina página de aterrizaje (también conocida como página de destino). Es una página diseñada para ser parte de tu embudo de marketing, para generar clientes potenciales o para vender algo. El propósito de la página es muy simple, y no querrás que las personas hagan otra cosa una vez que hayan llegado a ella.

Para minimizar las posibilidades de que las personas naveguen lejos antes de comprar o registrarse, necesitas reducir el número de enlaces en tu página de aterrizaje. No debe tener widgets, ni menús de navegación. No querrás que la gente la abandone para navegar por tu sitio. Incluso el enlace a la página de inicio en el encabezado debe ir, junto con cualquier enlace en su colofón en la parte inferior de la página.

En este tutorial, te mostraré cómo crear una plantilla de página para que tu tema logre eso. No contendrá enlaces a nada fuera del contenido de la página. Los visitantes de la página no tendrán más remedio que pulsar el botón Comprar o Registrarse.

Para realizar esto trabajaremos con algunos archivos en nuestro tema:

  • Crearemos una nueva plantilla de página personalizada para las páginas de aterrizaje.
  • Editaremos el archivo del encabezado para que cuando se muestre la plantilla, los enlaces no estén presentes.
  • Editaremos el archivo de pie de página para eliminar widgets y cualquier enlace en el colofón.

¡Así que empecemos!

Lo que necesitarás

Para seguir este tutorial, necesitarás:

  • Una instalación de desarrollo de WordPress: no añadas la página de aterrizaje a tu sitio en vivo hasta que la hayas probado.
  • Un tema que puedas editar. Si se trata de un tema de terceros, crea un tema child y edítalo.
  • Un editor de código.

La página inicial

He creado una página ficticia en mi sitio para utilizarla como página de aterrizaje. Así es como luce utilizando la plantilla de la página normal:

the landing page using a standard page template the landing page using a standard page template the landing page using a standard page template

Durante el curso de este tutorial, eliminaré el menú de navegación, la barra lateral y las áreas de widgets en el pie de página, y me aseguraré de que nada fuera del contenido sea un enlace en el que se pueda hacer clic.

Creando la plantilla de la página de aterrizaje

Primero necesitas crear una plantilla para la página de aterrizaje. Haz esto de una o dos formas:

Si está trabajando con tu propio tema, duplica page.php y cámbiale el nombre.

Si estás trabajando con un tema de terceros, crea un tema child. Duplica page.php desde el tema principal en el tema child y renómbralo.

No nombres al archivo comenzando con el prefijo page-, ya que esto confundirá a WordPress si más tarde creas una página con el slug que utilizas después de page-. Yo he  denominado a la mía landing-page-template.php.

Ahora abre el archivo de tu plantilla. Añade esta línea de código en la parte superior:

Guarda esto y verás que puedes seleccionar la nueva plantilla cuando crees una nueva página en tu sitio:

Picking a page template in the page editing screenPicking a page template in the page editing screenPicking a page template in the page editing screen

Ahora elimina la barra lateral del archivo. Encuentra esta línea:

... y borrarla. Guarda tu archivo. Tu nueva plantilla de página está lista. Pero todavía no has terminado.

Editando del archivo Header

El siguiente paso es editar el archivo header.php, para eliminar cualquier enlace cuando esa plantilla de página esté en uso. Para esto usaremos la etiqueta condicional is_page_template ().

Abre tu archivo header.php y localiza el código del título de tu sitio.

Nota: Si estás usando un tema de terceros, crea un archivo header.php en tu tema child que sea un duplicado del que está en el tema principal y edítalo.

En mi tema se ve así:

Edítalo para que se lea algo como esto, haciendo ajustes para tu propio tema:

Al utilizar la plantilla de la página de aterrizaje, el nombre del sitio se mostrará, pero no se mostrará como un enlace.

También es necesario eliminar la navegación. Localiza el código de tu menú principal. En mi tema se ve así:

Edítalo para que todo el código del menú se sitúe dentro de una etiqueta condicional que verifique que NO estamos utilizando la plantilla de la página de aterrizaje:

Si hay otros menús o enlaces en tu archivo header, envuelve aquellos con la misma etiqueta condicional; lo mismo ocurre con cualquier área de widgets.

Ahora guarda el archivo header.php y ciérralo.

Editando el archivo Footer

La etapa final es garantizar que las áreas de widgets no se muestren en el pie de la página.

Utilizáremos la misma etiqueta condicional para generar solo áreas de widgets si no usamos la plantilla de la página de aterrizaje.

Abre tu plantilla footer.php (o crea un duplicado en el tema child si es relevante).

Lozaliza el código para generar tus widgets. Aquí está el mío:

Ahora envuélvelo en una etiqueta condicional tal como lo hiciste en el archivo header.

A continuación, tendremos que modificar el colofón. Esto puede incluir un enlace a tu página de inicio y/o al sitio de WordPress.

Aquí está el mío:

Ahora usa una etiqueta condicional para generar el colofón sin enlaces en la página de aterrizaje:

Verifica dos veces el archivo footer para ver si hay otros enlaces y, si los hay, envuélvelos también en una etiqueta condicional.

Ajustando el estilo

Puedes encontrar que, al eliminar la barra lateral de la plantilla de la página de aterrizaje, necesitas ajustar el estilo del contenido. Si el área de contenido aún ocupa solo dos tercios de la pantalla, puedes usar la clase body generada por WordPress para que la plantilla de la página lo arregle.

Digamos que tienes el siguiente estilo para tu contenido y barra lateral:

Tendrás que agregar un estilo adicional bajo eso para apuntar hacia la clase del contenido en tu plantilla:

Deberás ajustarlo para tener en cuenta los márgenes o el padding que estás usando, pero esto te dará una idea general.

La página final

Aquí está mi página de aterrizaje sin ningún enlace:

the landing page with all links removedthe landing page with all links removedthe landing page with all links removed

Ahora luce un poco vacía, pero la llenarás con bastante contenido jugoso destinado a alentar a las personas a comprar o suscribirse: imágenes, grandes botones rojos, ¡y ese tipo de cosas! Y puedes ver que no hay nada que distraiga al visitante del contenido de la página.

Espero que tu página de aterrizaje te traiga bastantes negocios. ¡Buena suerte!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.