Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
Una "landing page" o página de aterrizaje en su sitio WordPress es una herramienta invaluable si deseas vender algo o conseguir que los visitantes se registren. En este artículo aprenderás a crear una página de aterrizaje en WordPress de forma gratuita, y a alentar a la gente a comprar o registrarse a tu servicio.
Crearemos una página de aterrizaje personalizando un tema WordPress de terceros. Esa es la mejor manera de crear gratuitamente una página de aterrizaje en WordPress, y te proporciona la mayor flexibilidad, no obstante, requiere algunos conocimientos sobre código. Si quieres crear una página de aterrizaje sin necesidad de tener que escribir código, echa un vistazo a algunos de nuestros otros tutoriales.
Páginas de aterrizajeCómo crear rápidamente una página de aterrizaje en WordPress
Páginas de aterrizajeLos 25 mejores temas de WordPress de página de aterrizaje para sitios web de 2020
WordPressCrear una página de aterrizaje responsiva con WPBakery (Visual Composer)
Una página de aterrizaje es un tipo de página crucial, diseñada para que los usuarios tomen una decisión o inicien una acción. En qué consista esa acción dependerá de cuál sea tu negocio, pero es probable que se trate de una de estas dos cosas:
- comprar algo, probablemente un artículo de alto valor económico, ya que si los productos fuesen más baratos, usarías páginas de productos en su lugar.
- registrarse a algo, podría ser una suscripción a un servicio o curso, o a una newsletter
Tendrás que obtener tanto tráfico hacia esta página como te sea posible, ya que será una de las páginas más importantes de tu sitio. Puedes hacerlo a través de técnicas SEO, de publicidad o mediante marketing directo. O tal vez una combinación de los tres.
Pero una vez que la gente haya llegado a esa página de destino, debes asegurarte de que compren o se registren.
Para conseguirlo tenemos, por un lado, el contenido de la página. No solo el contenido en sí, también es importante la forma en la que lo presentes a lo largo de la página. Por lo general, cuanto más caro sea el producto o servicio, más cantidad de texto y llamadas a la acción necesitarás.
Y tampoco se trata únicamente del contenido. También debes asegurarte de que cuando alguien aterrice en esa página, la única opción que tengan a su disposición sea hacer clic sobre el botón de compra. Si hay un menú de navegación, o algunos widgets, o un logotipo en el que se pueda hacer clic, existe la posibilidad de que acaben haciéndolo con el objetivo de investigar el resto de tu sitio y que nunca vuelvan a la página de aterrizaje.
Aquí es donde entra en juego la creación de una página de aterrizaje en tu tema. Una página de aterrizaje no tendrá enlaces externos que dirijan fuera de su contenido. En la cabecera no existirá ningún menú, ni widgets, ni enlaces sobre los que se pueda hacer clic, tampoco en el pie de página, ni en ningún otro lugar. Normalmente será una página con diseño a ancho completo (ya que no necesitarás tus widgets de barra lateral o sidebar) y tendrás una limpia maquetación de página diseñada para centrar la atención en el contenido.
En este tutorial, te mostraré cómo crear una plantilla de página de aterrizaje para tu tema. Consiste principalmente en hacer tres cosas:
- crear una plantilla de página para tu página de aterrizaje
- crear una cabecera sin enlaces para la página de aterrizaje
- crear un pie de página sin enlaces para la página de aterrizaje
- usar la plantilla la para crear tu página de aterrizaje
Así que empecemos. Voy a crear esta plantilla de página de aterrizaje para el tema Twenty Twenty, y eso implica la creación de un tema secundario conocido como tema "hijo", así que no voy a editar un tema de terceros.
Lo que vas a necesitar
Para seguir este tutorial, necesitarás lo siguiente:
- una instalación de pruebas o desarrollo de WordPress
- un editor de código
- un tema instalado
De modo que empecemos.
Crear un tema hijo
Si estás trabajando con un tema propio, puedes omitir esta sección. Pero si estás usando un tema de terceros que descargaste del repositorio oficial de temas de WordPress o que compraste en ThemeForest u otra fuente, necesitarás un tema hijo.
Sigue nuestra guía para crear un tema hijo y guarda tu nuevo tema en el directorio wp-content/themes de tu sitio.
Crear un archivo de plantilla para una página de aterrizaje
Ahora tienes que crear una plantilla de página que será tu futura plantilla de página de aterrizaje. Tendrás que duplicar la plantilla del tema que estés utilizando para mostrar las páginas y cambiar el nombre de ese nuevo archivo. En la mayoría de los temas, este archivo es page.php. En Twenty Twenty, es singular.php. Puedes consultar la jerarquía de plantillas de WordPress para averiguar qué archivo de plantilla está siendo utilizado.
Si trabajas con un tema hijo, tendrás que copiar el archivo duplicado en la carpeta de tu tema hijo. Si estás trabajando con el tema principal, guarda el duplicado en la carpeta del tema principal. Nota: ¡no hagas esto en tu sitio en publicado!
Si tu tema tiene una plantilla de página de ancho completo, usa esta en lugar de usar el archivo page.php, ya que el diseño ya estará configurado para que la página no tenga un columna lateral o sidebar, ya habrá sido eliminada.
He denominado a mi archivo landing-page-template.php. No le asignes un nombre que comience por "page". Si posteriormente creas una página con ese nombre, WordPress asignará automáticamente la plantilla a esa página. Mejor hacer que las cosas sean manuales para tener más control.
Aquí tienes el contenido completo de mi nuevo archivo landing-page-template.php. Si estás trabajando con un tema distinto, el tuyo tendrá un aspecto diferente.
1 |
<?php
|
2 |
/**
|
3 |
* The template for displaying single posts and pages.
|
4 |
*
|
5 |
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
|
6 |
*
|
7 |
* @package WordPress
|
8 |
* @subpackage Twenty_Twenty
|
9 |
* @since Twenty Twenty 1.0
|
10 |
*/
|
11 |
|
12 |
get_header(); |
13 |
?>
|
14 |
|
15 |
<main id="site-content" role="main"> |
16 |
|
17 |
<?php
|
18 |
|
19 |
if ( have_posts() ) { |
20 |
|
21 |
while ( have_posts() ) { |
22 |
the_post(); |
23 |
|
24 |
get_template_part( 'template-parts/content', get_post_type() ); |
25 |
}
|
26 |
}
|
27 |
|
28 |
?>
|
29 |
|
30 |
</main><!-- #site-content --> |
31 |
|
32 |
<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> |
33 |
|
34 |
<?php get_footer(); ?> |
Ahora es el momento de editar el archivo. Comienza con el texto comentado en la parte superior. Reemplázalo por el texto necesario para las plantillas de página:
1 |
<?php
|
2 |
/**
|
3 |
* Template Name: Landing Page
|
4 |
*
|
5 |
*/
|
El siguiente paso es eliminar cualquier llamada al sidebar o al pie de página. La forma de hacerlo dependerá de tu tema y de si empezaste usando una plantilla de ancho completo.
En el tema Twenty Twenty no hay ninguna llamada al sidebar, así que no necesito quitar ninguna. Si tienes esta línea en tu plantilla, sí tendrás que eliminarla:
1 |
<?php get_sidebar(); ?> |
Nota: Es posible que una vez hayas terminado de editar este archivo de plantilla, quede un hueco en el diseño allí donde debería aparecer el sidebar. Edita el CSS de la plantilla o cambia las clases de la sección de contenido principal para que se corresponda con una clase de ancho completo.
Ahora el pie de página. No deseas eliminar por completo el pie de página, ya que todavía necesitas tu colofón y tu llamada a wp_footer, por lo que en lugar de eliminar la llamada get_footer(), la dejas allí y creas un nuevo archivo de pie de página para tu página de destino.
En el tema Twenty Twenty, el pie de página no funciona de forma estándar. En mi archivo de plantilla existen dos llamadas:
1 |
<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> |
2 |
|
3 |
<?php get_footer(); ?> |
La primera llama a un archivo de inclusión que no tiene nada más que widgets. La segunda llama al pie de página que necesito, pero lo editaremos más tarde. Así que voy a eliminar esta línea:
1 |
<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> |
Ahora guarda tu archivo. Volveremos a esto en breve.
Crear una cabecera para tu página de destino
Ahora es el momento de crear una cabecera para tu página de destino sin navegación, ni widgets, ni enlaces.
Haz un duplicado del archivo header.php de tu tema (ya sea en el tema principal o en el tema hijo) y llámalo header-landing.php.
Eliminar el enlace del logotipo o el título del sitio
Busca el nombre o el logotipo del sitio en el archivo de cabecera. El mío consiste en una función:
1 |
twentytwenty_site_logo(); |
En lugar de intentar editar esa función, voy a reemplazarla con una llamada al logotipo:
1 |
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/xxx.jpg” > |
Reemplaza xxx.jpg en el código anterior por el nombre de tu propio logotipo y asegúrate de usar la ruta correcta.
Si tu sitio no tiene una imagen de logotipo en la cabecera, sino un título del sitio, usa esto:
1 |
<div class="site-title faux-heading"> |
2 |
|
3 |
<?php bloginfo( 'name' ); ?> |
4 |
|
5 |
</div>
|
Nota: las clases que he utilizado anteriormente son específicas del tema Twenty Twenty. Edítalas para adaptarlas a las que use tu tema.
Si tu tema funciona de una manera más estándar que Twenty Twenty, probablemente descubras que este código ya está allí. Todo lo que tienes que hacer es eliminar los elementos <a> que lo rodean, de manera que el título o el logotipo de tu sitio continúen ahí, pero no funcionen como enlaces.
Eliminar el menú de navegación
Ahora es el momento de eliminar el menú de navegación. Busca el código que lo conforma en el archivo de la cabecera. En el tema Twenty Twenty está dentro de un elemento parecido a este:
1 |
<div class=“header-navigation-wrapper"> |
2 |
|
3 |
</div><!-- .header-navigation-wrapper —> |
Si estás trabajando con Twenty Twenty, quita esto y todo lo que contenga. Si no, tendrás que encontrar un elemento div, aside o section que tenga un nombre similar.
Twenty Twenty también tiene dos botones de conmutación en la navegación para los dispositivos móviles, están dentro de estos elementos:
1 |
<button class="toggle search-toggle mobile-search-toggle"> |
2 |
|
3 |
</button>
|
1 |
<button class="toggle nav-toggle mobile-nav-toggle"> |
2 |
|
3 |
</button>
|
Elimínalos, asegurándote de no quitar el título del sitio y la descripción que hay entre ellos. Si tu tema tiene algo similar, elimínalo.
Eliminar cualquier área de widget u otro código con enlaces
Twenty Twenty también tiene código para la búsqueda, algo que también voy a eliminar. Tu tema puede tener implementada esta funcionalidad en un widget, en tal caso elimina cualquier área de widget del archivo de cabecera.
Y por último, en Twenty Twenty existe un menú modal al final del archivo que también quiero eliminar. Una vez más, tu tema podría no tener esto, ¡Twenty Twenty es más complejo que la mayoría!
Ahora mi archivo header-landing.php se ve mucho más simple:
1 |
<?php
|
2 |
/**
|
3 |
* Header file for the Twenty Twenty WordPress default theme.
|
4 |
*
|
5 |
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
|
6 |
*
|
7 |
* @package WordPress
|
8 |
* @subpackage Twenty_Twenty
|
9 |
* @since Twenty Twenty 1.0
|
10 |
*/
|
11 |
|
12 |
?><!DOCTYPE html>
|
13 |
|
14 |
<html class="no-js" <?php language_attributes(); ?>> |
15 |
|
16 |
<head>
|
17 |
|
18 |
<meta charset="<?php bloginfo( 'charset' ); ?>"> |
19 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" > |
20 |
|
21 |
<link rel="profile" href="https://gmpg.org/xfn/11"> |
22 |
|
23 |
<?php wp_head(); ?> |
24 |
|
25 |
</head>
|
26 |
|
27 |
<body <?php body_class(); ?>> |
28 |
|
29 |
<?php
|
30 |
wp_body_open(); |
31 |
?>
|
32 |
|
33 |
<header id="site-header" class="header-footer-group" role="banner"> |
34 |
|
35 |
<div class="header-inner section-inner"> |
36 |
|
37 |
<div class="header-titles-wrapper"> |
38 |
|
39 |
<div class="header-titles"> |
40 |
|
41 |
<?php
|
42 |
// Site title or logo.
|
43 |
bloginfo( 'name' ); |
44 |
|
45 |
// Site description.
|
46 |
twentytwenty_site_description(); |
47 |
?>
|
48 |
|
49 |
</div><!-- .header-titles --> |
50 |
|
51 |
</div><!-- .header-titles-wrapper --> |
52 |
|
53 |
|
54 |
</div><!-- .header-inner --> |
55 |
|
56 |
</header><!-- #site-header —> |
Guarda este archivo y vuelve al archivo de plantilla. Busca la línea que llama a la cabecera:
1 |
get_header(); |
Edítala para que llame al nuevo archivo de cabecera:
1 |
get_header( ‘landing’ ); |
Ahora guarda tu archivo.
Crear un pie de página para la página de aterrizaje
Ahora es el momento de crear un pie de página para tu página de aterrizaje.
Crea un duplicado de footer.php y llámalo footer-landing.php. Abre el nuevo archivo.
Busca cualquier código relacionado con áreas de widgets y elimínalo. Twenty Twenty no tiene áreas de widget en el archivo footer.php, están en un archivo de inclusión cuya llamada ya eliminé.
También necesitarás editar el colofón para eliminar enlaces. Aquí está el colofón en Twenty Twenty:
1 |
<div class="footer-credits"> |
2 |
|
3 |
<p class="footer-copyright">© |
4 |
<?php
|
5 |
echo date_i18n( |
6 |
/* translators: Copyright date format, see https://www.php.net/date */
|
7 |
_x( 'Y', 'copyright date format', 'twentytwenty' ) |
8 |
);
|
9 |
?>
|
10 |
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a> |
11 |
</p><!-- .footer-copyright --> |
12 |
|
13 |
<p class="powered-by-wordpress"> |
14 |
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentytwenty' ) ); ?>"> |
15 |
<?php _e( 'Powered by WordPress', 'twentytwenty' ); ?> |
16 |
</a>
|
17 |
</p><!-- .powered-by-wordpress --> |
18 |
|
19 |
</div><!-- .footer-credits --> |
Elimina los enlaces del código. El mío ahora es como sigue:
1 |
<div class="footer-credits"> |
2 |
|
3 |
<p class="footer-copyright">© |
4 |
<?php
|
5 |
echo date_i18n( |
6 |
/* translators: Copyright date format, see https://www.php.net/date */
|
7 |
_x( 'Y', 'copyright date format', 'twentytwenty' ) |
8 |
);
|
9 |
?>
|
10 |
<?php bloginfo( 'name' ); ?> |
11 |
</p><!-- .footer-copyright --> |
12 |
|
13 |
<p class="powered-by-wordpress"> |
14 |
<?php _e( 'Powered by WordPress', 'twentytwenty' ); ?> |
15 |
</p><!-- .powered-by-wordpress --> |
16 |
|
17 |
</div><!-- .footer-credits --> |
Ahora guarda el archivo de pie de página y vuelve al archivo de tu plantilla. Localiza la llamada al pie de página:
1 |
<?php get_footer(); ?> |
Edítalo para llamar al nuevo archivo de pie de página:
1 |
<?php get_footer( 'landing' ); ?> |
Mi archivo de plantilla ahora se ha vaciado y tiene este aspecto:
1 |
<?php
|
2 |
/**
|
3 |
* Template Name: Landing Page
|
4 |
*
|
5 |
*/
|
6 |
|
7 |
get_header(); |
8 |
?>
|
9 |
|
10 |
<main id="site-content" role="main"> |
11 |
|
12 |
<?php
|
13 |
|
14 |
if ( have_posts() ) { |
15 |
|
16 |
while ( have_posts() ) { |
17 |
the_post(); |
18 |
|
19 |
get_template_part( 'template-parts/content', get_post_type() ); |
20 |
}
|
21 |
}
|
22 |
|
23 |
?>
|
24 |
|
25 |
</main><!-- #site-content --> |
26 |
|
27 |
<?php get_footer( 'landing' ); ?> |
Guarda el archivo de plantilla y si estás trabajando con un tema hijo, actívalo desde el administrador de WordPress.
Utiliza la plantilla para crear tu página de aterrizaje
Crea una nueva página estática para tu página de aterrizaje, dándole un título adecuado a la función que quieras que cumpla.
Crea el contenido y, a continuación, en la sección Atributos de página del panel Documento de la derecha, en el menú desplegable Plantilla selecciona Landing Page (o el nombre que le hayas puesto a tu plantilla).
Publica la página.
Ahora, cuando la visites desde el front-end, descubrirás que no tiene enlaces ni navegación y que lo único sobre lo que las personas pueden hacer clic en esta página es tu botón de llamada a la acción.
Resumen
Una página de aterrizaje será mucho más potente si te aseguras de que la única acción que las personas pueden realizar cuando lleguen a ella será hacer clic en el botón "comprar". Al crear una plantilla de página de aterrizaje en tu tema de WordPress, lograrás que tu página de aterrizaje sea más eficaz y conseguirás más ventas o suscripciones.
¡Sigue esta guía y tendrás una poderosa página de aterrizaje para tu tema!
By
