Cómo construir una página de aterrizaje con WordPress desde cero

Category: Tutorial 13 0

Una página de aterrizaje es una página web diseñada principalmente para captar la atención del visitante y sus detalles – como una dirección de correo electrónico – a través de un formulario. Están diseñadas para dirigirse a una audiencia específica dependiendo del producto que se esté comercializando.

Una página de aterrizaje también puede ser una página de estrujamiento usada para redirigir el tráfico al sitio web principal. Puedes tener tantas páginas de aterrizaje como quieras en tu sitio. De hecho, cuantas más páginas de destino tenga, más clientes potenciales tendrá.

Por ejemplo, si está comercializando un nuevo producto a través de una campaña de correo electrónico, puede redirigir el tráfico de su campaña de correo electrónico dirigida a una página de destino de producto especialmente diseñada. Lo mismo se aplica a cualquier promoción que hagas por correo electrónico u otros medios. La clave es crear una página de destino única para cada campaña que lances.

Fundamentos de la página de aterrizaje

No hay reglas escritas sobre lo que debe tener o parecer una página de aterrizaje. Sin embargo, después de años de experimentar con una serie de estilos de páginas de aterrizaje, he llegado a la conclusión de que ciertos aspectos clave deben ser considerados al diseñar las páginas de aterrizaje. Aquí están los cuatro primeros:

  1. Especificidad : Cuando diseñes una página de destino, sé específico sobre lo que ofreces. También debes saber lo que hay en ella para ti. Por ejemplo, si ofreces información gratuita cuando un usuario se registra en tu página de destino. ¿Cómo te vas a beneficiar?
  2. Beneficios: La mejor jerga de marketing puede conseguir la atención de un visitante. Pero si no explicas claramente cómo se van a beneficiar, tus conversiones pueden ser escasas. Una buena página de destino debe ser clara en cuanto a cómo el usuario se va a beneficiar de la oferta.
  3. Urgencia: La redacción de su página de destino debería crear una sensación de urgencia. Explique por qué un visitante de la página debe tomar su oferta ahora y no más tarde.
  4. Conversión: Ahora has captado la atención de un visitante y has conseguido convencerle de tu gran oferta. Entonces, ¿cómo la consiguen? Tu página de destino debe hacer que la conversión de clientes potenciales sea lo más simple posible.

Creando páginas de aterrizaje con WordPress

WordPress ofrece muchas maneras de construir páginas de destino impresionantes. Discutiré dos opciones que puedes usar para crear tus páginas de destino, así como una tercera opción que recomendamos sólo para desarrolladores o usuarios avanzados de WordPress con conocimientos de codificación.

1. Cómo crear una página de aterrizaje con un tema de WordPress

Hay un montón de temas de WordPress diseñados específicamente para crear páginas de destino. Estos temas de una sola página a menudo incluyen grandes características como el desplazamiento local, deslizadores llamativos, cuadros de características y más para hacer que la construcción de tu propia página de destino sea fácil. Aquí están algunos de nuestros favoritos.

Zerif ProWordPress Tema

Zerif Pro WordPress Theme

Ver la demostraciónAprender más & Descargar

Zerif Pro es la versión premium del súper popular tema de Zerif lite de una sola página de negocios de WordPress. Con opciones fáciles de usar para crear un sitio web profesional como secciones de página de arrastrar y soltar, el constructor de páginas Site Origin, colores personalizables, deslizadores y más, es una gran opción para tu página de destino.

Tema total de WordPress

Total Responsive Multipurpose WordPress Theme

Ver la demostraciónAprender más & Descargar

Por supuesto, el Total WordPress Theme (que incluye más de 40 demostraciones de inicio rápido) es una excelente opción especialmente para las páginas de destino. El tema cuenta con más de 500 opciones de diseño personalizadas (colores, fuentes, anchos de página, etc.), frontal arrastrar y apretar; creador de páginas desplegables, 100 elementos de creación de páginas, tipos de publicaciones personalizadas (para el personal, portafolio y testimonios), un encabezado y pie de página personalizables y mucho más. No hay nada que no puedas construir con Total.

Tema de WordPress independiente

Freelancer Single Page WordPress Theme

Ver la demostraciónAprender más & Descargar

Freelancer es un tema flexible de WordPress de una sola página diseñado para diseñadores, desarrolladores, fotógrafos y otros creativos independientes. El tema incluye una sencilla disposición modular para añadir secciones y mostrar información importante como servicios, trabajos anteriores, información de contacto y más.

Tema de la prensa de palabras de SImpleShift

SimpleShift WordPress Theme

Ver la demostraciónAprender más & Descargar

El SimpleShift tema de WordPress de una página es un tema de estilo empresarial limpio y simple que puedes usar para construir un sitio web de una página. El tema tiene muchas características para mostrar el punto clave usando cajas de iconos, llamadas, testimonios y más para tu página de destino.

WP SingularWordPress Theme

WP Singular One Page WordPress Theme

Ver la demostraciónAprender más & Descargar

WP Singular es un tema intuitivo de WordPress de una página con un sencillo creador de páginas, widgets personalizados, colores ilimitados, portafolio ajaxed, fuentes de Google y más. Es un gran comienzo para una página de aterrizaje para promover tus bienes o servicios.

Una vez que hayas decidido tu tema favorito, instálalo y actívalo. Para añadir un nuevo themego a Appearance > Themes > Add New y luego busca un impresionante tema gratuito del repositorio de WordPress.org, o haz clic en el enlace Upload para instalar un tema premium o gratuito de otro lugar.

Creación de su página web con un tema

En este ejemplo usaremos Zerif Lite de ThemeIsle, que puedes conseguir en su sitio web o en tu panel de control de WordPress. Sólo tienes que instalar y activar el tema para empezar.

Activate A Landing Page Theme

La mayoría de los temas de WordPress de una sola página utilizan una plantilla de página de inicio para facilitar la puesta en marcha. Para usar una plantilla ve a Pages > Add New , dale un nombre a tu página y luego selecciona la plantilla de la sección Page Attributes en la barra lateral.en Zerif esta es la plantilla Frontpage . Luego publica tu página.

Landing Page: Use Homepage Template

Con su página de inicio publicada, tendrá que establecerla como su página principal para que se muestre cuando los visitantes lleguen a su URL. Sólo tienes que ir a Ajustes > Lectura y seleccionar la página que acabas de crear debajo de Visualización de la página de inicio; Una página estática . A continuación, guarda los cambios.

Landing Page: Homepage Reading Settings for Front Page

Ahora puedes empezar a personalizar el contenido de tu página de destino. Zerif Lite utiliza opciones de temas en el Personalizador bajo la opción “Secciones de la página de inicio” (a la que se puede acceder bajo Apariencia También puede hacer clic en los iconos de lápiz azul para editar rápidamente parte del contenido de la página. Cuando termines, sólo tienes que guardar y tu página de destino estará lista para empezar!

Landing Page: Homepage Template Customizations

No todos los temas de las páginas de destino utilizarán el Personalizador de WordPress para las opciones de la página de inicio. Algunos temas utilizan tipos de entradas personalizadas que aparecerán en tu panel de control de WordPress (normalmente cerca de tus entradas, medios, páginas, etc.), algunos incluyen elementos incorporados de arrastrar y soltar sólo para la plantilla de inicio y otros incluyen constructores de página (de los que hablaremos a continuación). Si tienes alguna duda sobre cómo utilizar tu tema consulta la documentación, o si se trata de un tema premium contacta con el soporte.

2. Cómo crear una página de aterrizaje con WordPressPlugins

Los temas son geniales, pero una de las formas más fáciles de construir una página de destino con WordPress es usando un plugin. Hay un montón de plugins para páginas de destino de la variedad gratuita y premium. Todos funcionan más o menos de la misma manera: típicamente, ofrecen una colección de plantillas de páginas de destino para diferentes propósitos.

Después de la instalación y la activación, puedes administrar las personalizaciones de la página mediante la página de configuración del plugin. Algunos plugins permiten extensiones de terceros donde puedes añadir más personalización y funcionalidad a tus páginas de destino usando ganchos, filtros y acciones. Hay algunos plugins notables de páginas de destino de WordPress que debes considerar:

  • Thrive LandingPages
  • Páginas de aterrizaje de WordPress
  • Parallax Gravity LandingPages
  • Optimizar la prensa

Pero también recomendamos considerar un plugin de construcción de páginas generales como:

  • WP Bakery Page Builder
  • Beaver Builder
  • Elemental

Nuestro favorito es el WP Bakery Page Builder que viene gratis con nuestro tema de WordPress más vendido.

Cómo construir una página de aterrizaje con un plugin

Para utilizar un plugin de construcción de páginas, primero tendrás que instalar y activar un tema compatible. No deberías tener problemas con la mayoría de los temas, pero siempre es mejor si puedes encontrar un tema que haya sido creado o probado específicamente para funcionar con tu plugin preferido. En nuestro ejemplo usaremos el WP Bakery Page Builder con el temaTotal, que te pedirá que instales y actives los plugins recomendados.

Install WordPress Theme and Activate Plugins

Si el tema no incluye indicaciones, consulta la documentación para ver cómo instalar los plugins incluidos. O si has comprado un constructor de páginas por tu cuenta ve a Plugins > Add New > Upload Plugin para instalar y activar.

Una vez que el plugin de construcción de páginas esté activo, ve a Pages > Agrega New para empezar a construir.

Total Landing Page Template

El total incluye una opción especial para una plantilla de página de “Landing Page”. Cuando construya su página, esta plantilla eliminará las secciones de encabezado y pie de página para usted (lo cual tiene sentido porque estas áreas son más adecuadas para los sitios web de varias páginas en las que tendría que navegar entre las páginas). Sólo asegúrese de guardar su página si desea seleccionar una plantilla.

Con tu página lista para salir, es hora de empezar a construir. Si usas el Compositor Visual, ahora tendrás la opción de usar el editor del backend o el del frontend en vivo. Total es totalmente compatible con el editor del frontend y recomendamos encarecidamente su uso ya que puedes ver cada elemento a medida que construyes. Sólo asegúrate de actualizar o publicar tu página una vez que hayas terminado de editar. Si quieres aprender más sobre el uso de este constructor de páginas específico, echa un vistazo a nuestra guía del Compositor Visual.

Total Frontend Page Building

A continuación, tendrás que ajustar la página de inicio a la página que acabas de crear (este paso debería sonar un poco familiar ya que los temas más importantes requieren que edites este ajuste). Así que ve a Settings > Reading >Front page displays > A static page y selecciona tu nueva página de inicio.

Bono: Importar una plantilla lista para usar

Oh, y si estás usando el tema de WordPress total también hay la opción de importar una página de aterrizaje prefabricada (o un diseño de sitio multipágina) para empezar. Total incluye una tonelada de importaciones en el panel de temas ; Importador de demostración .

Total Theme Demo Importer

Haga clic para comenzar a importar. Total incluso te pedirá que instales y actives los plugins necesarios para la demo específica que quieres importar.

Total Demo Importer: Install and Activate Plugins

A partir de ahí, tendrás la opción de importar el contenido XML, las imágenes, la configuración del personalizador de temas, los widgets e incluso los deslizadores (si procede). Una vez finalizada la importación, podrás editar y personalizar tu(s) página(s) a tu gusto.

Landing Page Front-end Editing

Para hacer cambios sólo tienes que ir a tus páginas, localizar la página que quieres editar, pasar el cursor por encima y hacer clic en la opción “Editar con Page Builder”. Esto abrirá el editor de portada. Simplemente apunta y haz clic para obtener la edición, luego haz clic en el botón “actualizar” en la parte superior de la pantalla para guardar tus cambios. Realmente no se hace mucho más fácil!

Otras herramientas en línea

Al igual que los plugins, hay muchas herramientas en línea para crear páginas de destino (sólo haz una búsqueda rápida en Google y podrás verlo por ti mismo). Estas básicamente funcionan como los constructores de sitios web WYSIWYG, permitiéndote seleccionar y usar componentes de la interfaz de usuario para crear una página de aterrizaje en poco tiempo. Sin embargo, tienen sus limitaciones y algunas no son flexibles. Una página correctamente diseñada y codificada a mano es a menudo muy superior e infinitamente más flexible.

3. Cómo construir una página de aterrizaje con plantillas de página de WordPress (Avanzado)

Si eres un desarrollador o un usuario experto/avanzado de WordPress puedes editar tu tema actual de WordPress para añadir plantillas de página personalizadas para tu página de destino. Muchos temas comerciales de WordPress vienen con una gran cantidad de plantillas de página, cada una con un propósito específico. Un tema puede tener una o varias plantillas. Aunque los temas de alta calidad ofrecen varias plantillas de página de destino pre-construidas para varios propósitos.

Dicho esto, puedes crear tu propia página de destino a partir de una plantilla de página en blanco. Sólo necesitas algunas habilidades CSS y un ojo para el diseño. Para fines ilustrativos, voy a construir una simple página de aterrizaje usando una plantilla de página en blanco en el tema Veintitrés . Voy a poner un gran encabezado pegajoso junto con un gran botón en una plantilla de página en blanco.

Tenga en cuenta que este método es ideal si está construyendo una página de aterrizaje que va a tener un dominio dedicado – es decir, no va a ser parte de su sitio web principal. Multisite no te da mucha flexibilidad en el diseño pero un dominio dedicado te da la libertad de desmontar el tema de cualquier manera que quieras sin preocuparte por otras páginas.

Nota: Sólo recomendamos esta opción para desarrolladores o usuarios avanzados de WordPress que sean codificadores con conocimientos y experiencia. Si eres nuevo en WordPress, te recomendamos encarecidamente que te ciñas a los temas y plugins cuando construyas tus páginas de destino.

Paso 1: Crear una carpeta de temas infantiles

Como voy a hacer cambios en otro tema, es importante empezar por crear un tema infantil. De esta manera, cualquier cambio en el tema no se perderá cuando se actualice el tema principal.

Para empezar, primero tendrás que conectarte a tu página web vía FTP y crear una nueva carpeta para el tema de tu hijo en tu directorio wp-content/themes . Te recomendamos que añadas “child” al final del tema que estés editando (por ejemplo, twenty-thirteenchild o algo similar que reconozcas). Aquí es donde añadirás nuevos archivos para hacer cambios en tu tema principal.

Paso 2: Crear un nuevo archivo style.css para el tema de su hijo

Abre la carpeta de temas infantiles que acabas de crear y añade un nuevo archivo llamado style.css (esta será tu nueva hoja de estilos). A continuación, en tu panel de control de WordPress ve a Appearance > Editor . En la ventana del editor, verás los estilos por defecto del temaheetopen.

Twenty Thirteen Theme Files

Utilizando el archivo de tema original como guía, crea la sección de encabezamiento para el archivo style.css de tu tema infantil que acabas de crear, que podría tener un aspecto similar a este:

/* Nombre del tema: TwentyThirteenChild Tema URI: Descripción: Un tema infantil para el tema predeterminado de Twenty Thirteen WordPress Versión: 1.0.0 */ 

Con la nueva hoja de estilo lista, el siguiente paso es cargar la hoja de estilo de los padres poniéndola en cola.

Paso 3: Crear un archivo functions.php para el tema de su hijo

Al activar el tema para niños, tu sitio web no cargará ningún estilo, así que tendrás que cargar la hoja de estilos del tema para padres. Para ello, crea un nuevo archivo en blanco llamado functions.php en la carpeta de tu tema hijo. A continuación, añade el siguiente código:

<?php functionar mi_tema_estilos_de_cola() {     $estilo_de_padre = estilo veintitrés;     wp_enqueue_style( $parent_style, get_template_directory_uri() . /estilo.css );     wp_enqueue_style( twentythirteenchild-style,         get_stylesheet_directory_uri() . /estilo.css,         array( $parent_style ),         wp_get_theme()- &gt &gtVersion)     ); } add_action( wp_enqueue_scripts, my_theme_enqueue_styles ); 

Esto cargará el estilo del tema infantil editado después de la hoja de estilos del tema para padres. Ahora tienes un tema infantil funcional para el tema Veintitrés, ¡es hora de hacer cambios!

Paso 4: Personaliza tu estilo

Con el tema de tu hijo listo para empezar, puedes empezar a personalizar tu página de destino. En primer lugar, es posible que quieras eliminar la navegación principal ya que estás creando una página de destino. Para ello, añade el siguiente código a tu tema infantil style.css archivo ( Nota: tu nombre de elemento de navegación podría ser diferente del nuestro. Para encontrar el nombre del elemento puedes usar tu herramienta de inspección de navegadores o revisar el archivo header.php):

/* Nombre del tema: TwentyThirteenChild Tema URI: Descripción: Un tema infantil para el tema predeterminado Veintitrés Versión: 1.0.0 */ /*Estilo personalizado para la página de aterrizaje*/ body .navbar { display: none; } 

Si ves tu sitio ahora, la navegación ha desaparecido. En su lugar vamos a insertar un gran botón CTA que redirigirá a una página de registro y más tarde al sitio web principal.

A continuación, simplemente personalizaremos el encabezado del sitio (h1) en la hoja de estilos cambiando el tamaño de la fuente. El encabezado del sitio se identifica por la clase .site-title . De nuevo, comprueba tu propio tema para ver qué nombre de elemento utiliza tu encabezado, ya que puede ser diferente al del ejemplo. Para ampliar el tamaño de la fuente, añade la última línea de este código a la hoja de estilos del tema de tu hijo:

/* Nombre del tema: TwentyThirteenChild Tema URI: Descripción: Un tema infantil para el tema predeterminado Veintitrés Versión: 1.0.0 */ /*Estilo personalizado para la página de aterrizaje*/ body .navbar { display: none; } body .site-title { tamaño de fuente: 90px; } 

Guarda y actualiza tu página. Deberías ver un título más grande:

page14

Paso 5: Crear una plantilla de página en blanco y nombrarla front-page.php

En el editor de WordPress, haz clic en Page Template ( page.php) para ver su código. Copia las primeras líneas hasta get_header() que debería ser similar a esto:

<?php /** * Nombre de la plantilla: Mi página de aterrizaje * * Esta es la plantilla que muestra todas las páginas por defecto. * Por favor, ten en cuenta que esta es la construcción de páginas de WordPress y que otras "páginas" de tu sitio de WordPress usarán una plantilla diferente. * * @ paquete WordPress * @subpaquete Veinte_Trece * @since Twenty Thirteen 1.0 */ get_header(); ?nbsp; ?nbsp;? 

Abre un editor de código y crea un nuevo archivo llamado front-page.php Pega las líneas que has copiado en el paso anterior. Guarda este nuevo archivo en la carpeta de temas de tu hijo.

¿Por qué front-page.php ? Dado que esta va a ser una página de inicio estática, es necesario asegurarse de que siempre se seleccione y se muestre en primer lugar y front-page.php tiene la mayor prioridad en la jerarquía de plantillas de WordPress). Además, puede o no insertar el pie de página (usando la función get_footer() ) en su archivo de plantilla. Lo he omitido.

Eliminar la primera línea de la sección de comentarios y reemplazarla con el nombre de la plantilla - llamamos a la nuestra My Landing Page .

Guarda los cambios. Si intentas ver tu sitio ahora, serás recibido por una página en blanco con sólo el encabezado modificado. Esa es la plantilla front-page.php . Está en blanco, ya que aún no hemos puesto ningún contenido.

Paso 6: Insertar el marcado de contenido personalizado para la página de aterrizaje

Ahora que hemos editado el encabezado y creado una plantilla de página en blanco, es el momento de añadir el contenido real a la página de aterrizaje.Todo lo que queda es poner nuestro gran botón en nuestra nueva plantilla de página de inicio. Sólo tienes que pegar este código en tu archivo y guardarlo. Es sólo un enlace envuelto en un div y eso es todo.

/** * Nombre de la plantilla: Mi página de aterrizaje * * Esta es la plantilla que muestra todas las páginas por defecto. * Por favor, ten en cuenta que esta es la construcción de páginas de WordPress y que otras "páginas" de tu sitio de WordPress usarán una plantilla diferente. * * @ paquete WordPress * @subpaquete Veinte_Trece * @since Twenty Thirteen 1.0 */ get_header(); ?nbsp; ?nbsp;?     ...un gran botón aquí..;     ?;/div..; 

Cuando vea su sitio, verá el encabezado que acabamos de insertar en la parte de contenido de la página junto con el texto del enlace para el botón:

Landing Page Example

Ahora es el momento de dar vida a la página con el estilo CSS.Ir a Apariencia; Editor . Haz clic en Hoja de estilo para abrir el archivo style.css para editar. Pega este código y guárdalo:

<código l

Related Articles