Cómo crear una página de aterrizaje para tu tema WordPress con código

Si has comprado algo en Internet, probablemente te hayas encontrado con una página de aterrizaje. Son una forma muy eficaz para maximizar las conversiones de un sitio web.

Pero, ¿qué es una página de aterrizaje y cómo crear una para tu sitio WordPress?

En este tutorial, demostraré qué diferencia una página de aterrizaje de cualquier otra página de tu sitio y te mostraré cómo crear un archivo de plantilla para una página de aterrizaje que te permitirá disponer de páginas de aterrizaje propias.

• 
  WordPress
  Cómo crear un tema hijo para WordPress
  Rachel McCollin
• 
  Temas de WordPress
  Descifrando en tema Twenty Nineteen: Usar el nuevo tema predeterminado de WordPress
  David Gwyer
• 
  WordPress
  Crea una página de aterrizaje responsiva con WPBakery (Visual Composer)
  Ashraff Hathibelagal
• 
  WordPress
  Crear una página de inicio con el plugin Elements para WordPress
  Ashraff Hathibelagal

¿Qué es una página de aterrizaje?

Una página de aterrizaje es una página de tu sitio que está diseñada para vender algo.

Puedes dirigir a las personas a ella mediante SEO o a través de anuncios de pago, o tal vez de una llamada a la acción o un widget ubicado en otras páginas de tu sitio. Es un destino: un lugar en donde quieres que la gente haga algo concreto.

Tu página de aterrizaje solo tiene un objetivo. Ese objetivo variará dependiendo de la naturaleza de tu negocio, pero normalmente será una de estas dos cosas: vender algo, u obtener la dirección de correo electrónico de un usuario.

Por lo tanto, si vendes una suscripción, un servicio o un producto, tu página de aterrizaje estará diseñada para animar a la gente a comprarlo. El contenido se diseñará para superar las objeciones, demostrar cómo el producto, servicio o suscripción satisfará las necesidades del consumidor y conseguir que compren.

Si tu página de aterrizaje está diseñada para obtener direcciones de email, lo normal es que ofrezca algo a cambio. Puede tratarse de una muestra, un cupón, o cualquier obsequio gratuito que la gente pueda descargar.

De cualquier manera, cuando alguien aterrice en esa página (por eso se llama una página de aterrizaje), no querrás que vayan a ningún otro lugar hasta que te hayan comprado o te hayan proporcionado sus datos de contacto.

Por eso motivo las páginas de aterrizaje más eficaces no tienen ningún enlace a no ser que estén directamente relacionados con el objetivo de la página. Tu página de aterrizaje no debe tener ningún menú de navegación que tiente a las personas a dirigirse hacia otras partes del sitio, no hay logotipo en el que se pueda hacer clic para llevarlos a tu página de inicio, ni columnas laterales o widgets de pie de página que distraigan a la gente.

Esta es la razón por la que necesitas una plantilla de página específica que elimine todas estas cosas.

Aquí tienes la página de aterrizaje de uno de mis sitios:

Es muy simple. No tiene enlaces, no hay ni menú de navegación, ni un solo botón, lo que te lleva irremisiblemente a través de un formulario de registro.

No quieres proporcionar a la gente en tu página de aterrizaje ninguna opción que les permita hacer cualquier otra cosa, por eso necesitas un archivo de plantilla dedicado especialmente a ello. La página no tendrá enlaces que alejen al visitante del proceso de ventas o suscripción. Los únicos enlaces en esa página (que deberían ser grandes y obvios botones) representarán la parte superior de tu embudo de ventas.

Si usas una plantilla de página estándar para crear una página de aterrizaje, aumentarás las posibilidades de que un usuario se distraiga y acabe alejándose del proceso de ventas.

Así que, en lugar de hacer esto último, vamos a empezar a crear una plantilla de página personalizada.

Lo que necesitarás

Para ello, necesitarás lo siguiente:

• Una instalación de desarrollo de tu sitio
• Tu propio tema, o un tema hijo de un tema de terceros (no edites temas de terceros directamente)
• Un editor de código

Te mostraré el código de la plantilla de página de aterrizaje de mi propio sitio a medida que avancemos.

• 
  WordPress
  Cómo crear un tema hijo para WordPress
  Rachel McCollin

Crear la plantilla de página

En tu tema (o tu tema hijo), crea una nueva plantilla de página. Puedes hacer esto bien duplicando la plantilla page.php o bien creando un archivo en blanco y copiando los contenidos de page.php en él. Yo estoy llamando a mi plantilla landing-page.php.

Aquí está mi actual archivo page.php:

1

<?php

2

/**

3

 * The template for displaying all pages.

4

 */

5

get_header(); ?>

6

7

    <?php

8

	if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

9

10

	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>	

11

12

		<?php if ( has_post_thumbnail() ) { ?>

13

14

			<h2 class="entry-title desktop"><?php the_title(); ?></h2>

15

16

			<div class="quarter right"> 

17

				<?php the_post_thumbnail( 'large' ); ?>

18

			</div>

19

20

			<section class="entry-content three-quarters left">

21

				<h2 class="entry-title mobile"><?php the_title(); ?></h2>

22

				<?php the_content(); ?>

23

			</section><!-- .entry-content -->

24

25

		<?php }

26

27

		else { ?>

28

29

			<h2 class="entry-title desktop"><?php the_title(); ?></h2>

30

31

			<section class="entry-content">

32

				<?php the_content(); ?>

33

			</section><!-- .entry-content -->	

34

35

		<?php } ?>

36

37

	</article><!-- #post-## -->

38

39

<?php endwhile; ?>

40

41

<?php get_sidebar(); ?>

42

<?php get_footer(); ?>

Vamos a repasar el contenido de ese archivo:

• En primer lugar, encontramos una llamada al archivo header.php.
• A continuación, una comprobación condicional para ver si existe una imagen destacada. Si es así, se muestra alineada a la derecha. Esto es algo específico de mi tema: el tuyo podría o no tener algo similar.
• El bucle para mostrar el título y el contenido de la página.
• Una llamada a la columna lateral.
• Una llamada al pie de página.

Para crear una plantilla de página de aterrizaje, tendremos que hacer algunas cambios en este archivo:

• Añadir texto comentado al principio para que WordPress sepa que se trata de una plantilla de página
• Eliminar esa declaración condicional
• Eliminar la llamada a la columna lateral

No voy a quitar el pie de página, porque es necesario para el cierre del elemento body y el gancho de wp_footer. En su lugar, crearemos una versión del archivo de pie de página que será utilizado por esta plantilla de página.

Añadir texto comentado para crear una plantilla de página

En tu nuevo archivo landing-page.php, añade una línea de texto comentado para decirle a WordPress que esta es una plantilla de página. Aquí está mi comentario:

1

/**

2

 * Template Name: Landing page

3

 * The template for displaying the landing page.

4

 *

5

 */

Ahora, cuando edites o crees una página en la pantalla de edición de páginas, podrás seleccionar esta plantilla en la sección Atributos de página de la pestaña Documento a la derecha de la pantalla de edición de página:

Eliminar el código condicional

Ahora vamos a editar la comprobación condicional. Sólo tendrás que hacer esto si tu archivo page.php tiene una.

Mi página de aterrizaje siempre tendrá una imagen destacada: no necesito comprobar cuál. Esto se debe a que tendré una imagen que represente la descarga gratuita que las personas van a recibir tras suscribirse a mi lista de correo. También quiero hacer cambios en el diseño. Aquí está la nueva versión del código de mi plantilla de página:

1

<?php

2

if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

3

4

	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

5

6

		<h2 class="entry-title"><?php the_title(); ?></h2>

7

8

		<section class="featured-image one-third left">

9

			<?php if ( has_post_thumbnail() ) { 

10

				the_post_thumbnail( 'medium' );

11

			} ?>

12

		</section>	

13

14

        <section class="entry-content right two-thirds">

15

			<?php the_content(); ?>

16

		</section><!-- .entry-content -->

17

	</article><!-- #post-## -->

18

19

<?php endwhile: endif; ?>

Los estilos CSS para el diseño de esta página ya están en la hoja de estilos de mi tema si deseo mantener el mismo diseño, pero si deseas aplicar un estilo a tu página de aterrizaje distinto al de otras páginas, añade el nuevo CSS a la hoja de estilos de tu tema.

Eliminar la llamada de la columna lateral

Ahora vamos a eliminar esa llamada a la columna lateral.

Elimina la etiqueta get_sidebar(). Deja la llamada al pie de página sin tocar de momento: editaremos el pie de página para eliminar los vínculos en breve.

Editar la cabecera y el pie de página

No todo el contenido y los enlaces de cada página de tu sitio están en el archivo de plantilla. La cabecera (header.php) contiene el menú de navegación más un enlace a tu página de inicio a través de su logotipo o nombre del sitio. También puede contener otros enlaces en su banner.

Probablemente tu pie de página contenga un colofón con enlaces a tu página de inicio, además de widgets que a su vez pueden incluir enlaces tanto internos como externos.

Quieres deshacerte de todos ellos, para que la gente no pueda abandonar la página de aterrizaje sin haber comprado o haberse registrado antes.

Eliminar la navegación de la cabecera

Ahora vamos a empezar con la cabecera. Hay dos cosas de las que deshacerse: el enlace en el logotipo o el título del sitio, y el menú de navegación.

Comienza creando una copia del archivo de cabecera header.php. Llámalo header-landing.php.

Ahora en tu archivo landing-page.php, edita la llamada a la cabecera para que se lea así:

1

get_header( 'landing' ); ?>

Una vez hecho esto, puedes editar el archivo header-landing.php.

Aquí está mi código para el nombre del sitio:

1

<hgroup class="site-name one-third left">

2

    <!-- site name and description - site name is inside a div element on all pages execpt the front page and/or main blog page, where it is in a h1 element -->

3

    <h1 id="site-title" class="one-half-left">

4

        <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">

5

            <?php bloginfo( 'name' ); ?>

6

        </a>

7

    </h1>

8

9

    <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>

10

11

</hgroup>

Todavía queremos mostrar el nombre del sitio, por lo que editamos el código para generarlo pero sin el enlace:

1

<hgroup class="site-name one-third left">

2

    <!-- site name and description - site name is inside a div element on all pages execpt the front page and/or main blog page, where it is in a h1 element -->

3

    <h1 id="site-title" class="one-half-left">

4

        <?php bloginfo( 'name' ); ?>

5

    </h1>

6

7

    <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>

8

9

</hgroup>

Vamos a eliminar ahora el menú de navegación. Simplemente elimina todo el código perteneciente al menú de navegación en tu archivo header-landing.php.

Aquí está el código:

1

<nav class="menu main right">

2

3

  <div class="skip-link screen-reader-text">

4

    <a href="#content" title="<?php esc_attr_e( 'Skip to content', 'tutsplus' ); ?>">

5

      <?php _e( 'Skip to content', 'tutsplus' ); ?>

6

    </a>

7

  </div>

8

9

  <?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>

10

11

 </nav><!-- .main -->

Sencillamente borra todo eso. ¡Simple!

Eliminar los enlaces del pie de página

Pasemos ahora al pie de página.

Al igual que con el archivo de cabecera, debes crear otra versión del archivo de pie de página. Duplica footer.php y llámalo footer-landing.php.

En tu archivo landing-page.php, edita la llamada al pie de página para que se lea así:

1

<?php get_footer( 'landing' ); ?>

Ahora vamos a editar el archivo footer-landing.php.

En mi archivo de pie de página tengo un área de widget:

1

if ( is_active_sidebar( 'footer-widget-area' ) ) { ?>

2

    <aside class="footer-widget-area full-width" role="complementary">

3

		<?php dynamic_sidebar( 'footer-widget-area' ); ?>

4

	</aside>

5

<?php }

Simplemente elimínalo de footer-landing.php. Elimina también cualquier elemento en el que esté envuelto si quieres: experimenta para que se vea como quieres.

En mi archivo también tengo código para un colofón que incluye enlaces:

1

<section class="colophon" role="contentinfo">

2

    <small class="copyright left">

3

        &copy; <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">

4

            <?php bloginfo( 'name'); ?>

5

        </a>

6

    </small><!-- #copyright -->

7

8

    <small class="credits right">

9

        Proudly powered by <a href="https://wordpress.org/">WordPress</a>.

10

    </small><!-- #credits -->

11

</section><!--#colophon-->

Necesito editar esto para eliminar el enlace a la página de inicio y el enlace de WordPress, de la siguiente manera:

1

<section class="colophon" role="contentinfo">

2

    <small class="copyright left">

3

        &copy; <?php bloginfo( 'name'); ?>

4

    </small><!-- #copyright -->

5

6

    <small class="credits right">

7

        Proudly powered by WordPress.

8

    </small><!-- #credits -->

9

</section><!--#colophon-->

Ahora no habrá enlaces en el pie de página de aterrizaje ni en la cabecera.

Editar la hoja de estilos

El último paso consiste en editar el estilo de la plantilla de página para que el contenido se muestre ocupando todo el ancho de la pantalla de visualización.

Por defecto tengo el siguiente diseño de maquetación para mi contenido y mi columna lateral:

1

#content {

2

  width: 65%;

3

  float: left;

4

}

5

.sidebar {

6

  width: 32%;

7

  float: right;

8

}

Necesito añadir un poco de estilo para modificar el contenido que afecte solo a esta plantilla de página:

1

.page-template-landing-page #content {

2

  width: 100%;

3

  float: none;

4

}

No es necesario añadir ningún estilo adicional para la columna lateral ya que no se mostrará en la plantilla de página personalizada al no ser invocada desde el archivo de plantilla.

Crear tus páginas

El último paso es crear tu página de aterrizaje. Crea una nueva página desde tu escritorio de WordPress, y asígnale tu nueva plantilla de página de aterrizaje. Incluirá texto que invite a la gente a comprar o a suscribirse, además de un formulario o un botón de compra.

En mi sitio en realidad tengo dos páginas de destino: la primera es la página a la que llegarán las personas por primera vez, y la segunda es la página donde proporcionarán su dirección de correo electrónico. Lo he hecho de esta manera porque hay estudios que demuestran que la gente es más propensa a completar un proceso si previamente ha tenido que hacer clic sobre un enlace. Todavía no he comprobado si marca una diferencia significativa en mi sitio: ¡tal vez debería!

Si haces clic en el botón de la primera página de aterrizaje de mi sitio, pasarás a esta sencilla página de registro:

Esta página usa la misma plantilla que mi página de aterrizaje. Y en ambos casos he añadido la misma imagen destacada. Hacer esto refuerza el mensaje de que las personas que se suscriban recibirán ese regalo, e incluir elementos visuales hace que tu página sea más atractiva y aumente las conversiones.

Una plantilla de página de aterrizaje reduce las distracciones y aumenta las conversiones

Crear un archivo de plantilla para las páginas de aterrizaje las hará mucho más eficaces. Cualquier persona que llegue a esta página de tu sitio, o haga clic en un botón de tu sitio para llegar a ella, no tendrá ningún otro lugar a donde ir.

Sigue los pasos de este tutorial para crear una página de aterrizaje para tu sitio. Si es más extensa que la mía (las páginas de aterrizaje que venden un producto caro pueden necesitar mucho texto para realizar la venta), es posible que desees añadir un estilo adicional para dividir el contenido y así ayudar aligerándolo a que las personas lo lean.

Una vez tengas esta plantilla, te resultará fácil añadir nuevas páginas de destino en tu sitio en un futuro que apoyen próximas campañas o vendan nuevos productos. ¡Buena suerte!

• 
  WordPress
  Cómo crear un tema hijo para WordPress
  Rachel McCollin
• 
  Temas de WordPress
  Descifrando en tema Twenty Nineteen: Usar el nuevo tema predeterminado de WordPress
  David Gwyer
• 
  WordPress
  Crear una página de aterrizaje responsiva con WPBakery (Visual Composer)
  Ashraff Hathibelagal
• 
  WordPress
  Crear una página de inicio con el plugin Elements para WordPress
  Ashraff Hathibelagal