En este artículo, te mostraremos tres métodos fáciles y efectivos para crear una landing page con WordPress y discutiremos cuándo hacerlo.<\/p>
Crear una landing page en WordPress con un plugin<\/h2>
Una landing page se refiere a una página web diseñada con fines de marketing, como por ejemplo, la presentación de un nuevo producto. Esta puede ser una página independiente vinculada a un sitio web o una parte de él.<\/p>
Afortunadamente, WordPress<\/a> ofrece una amplia gama de funciones para <\/strong>crear fácilmente un sitio web y una landing page para tu negocio.<\/p> Una de las mejores formas de crear una landing page<\/a> <\/strong>consiste en utilizar un plugin. Con este método, incluso los principiantes pueden crear una página profesional y atractiva, ya que muchos plugins de WordPress proporcionan un creador de arrastrar y soltar y plantillas prefabricadas.<\/p> En base a la selección de nuestros expertos, aquí hay una lista de los mejores plugins disponibles para landing pages en WordPress:<\/p> Para este tutorial, usaremos el plugin SeedProd para crear una landing page de alta conversión para tu sitio de WordPress.<\/p> Primero, deberás iniciar sesión en tu panel de WordPress, ir a Plugins → Añadir nuevo<\/strong> y usar el cuadro de búsqueda para encontrar el plugin SeedProd. Luego, <\/strong>instala y activa el plugin<\/a> <\/strong>en tu sitio de WordPress.<\/p> SeedProd es un plugin freemium: puedes comprar su versión premium a partir de 39,50 dólares por año<\/strong>. Para configurarlo, deberás ingresar una clave de licencia de tu cuenta de SeedProd.<\/p> Una vez que hayas activado el plugin, serás redirigido al panel de control de la landing page de SeedProd. En la parte superior, habrá cuatro opciones para las landing pages.<\/p> Para agregar una nueva, haz clic en el botón Crear nueva landing page <\/strong>en la parte inferior.<\/p> Después de agregar una nueva página, deberás elegir una plantilla de diseño para ella. SeedProd ofrece muchas plantillas de landing pages adecuadas para diferentes tipos de campañas.<\/p> Alternativamente, comienza a crear una landing page desde cero haciendo clic en la plantilla en blanco<\/strong>.<\/p> Una vez que hayas elegido una plantilla, ingresa un nombre y un título de URL.<\/p> \n\n\n\n <\/p> Usa una palabra clave de enfoque en la URL de la página para mejorar su visibilidad en los motores de búsqueda y atraer más tráfico a tu sitio web de WordPress. <\/p>\n <\/div>\n\n\n<\/p> Una vez que hayas terminado de editar los detalles, selecciona Guardar y comienza a editar <\/strong>para personalizar tu primera landing page.<\/p> Con el menú Blocks <\/strong>en el lado izquierdo, puedes agregar o editar varios elementos como el texto, las imágenes y los videos. Para hacerlo, simplemente haz clic en el elemento que desees.<\/p> Cambia el color de fondo, la imagen y la alineación para que tu landing page coincida con tu marca. Alternativamente, selecciona la Global Setting<\/strong> en la esquina inferior izquierda.<\/p> Los bloques de formulario de contacto<\/a> se pueden integrar con el plugin WPForms, lo que te permite cambiar un formulario de WordPress recién creado por una landing page de formulario personalizado y utilizar sus funciones adicionales.<\/p> Si deseas duplicar un bloque, haz clic en el ícono de archivos <\/strong>que aparece al pasar el mouse. También hay otros íconos para eliminar, mover y guardar un bloque para agilizar el proceso de diseño.<\/p> Como SeedProd también está integrado con WooCommerce<\/a>, puedes crear una landing page para una tienda de comercio electrónico. La incorporación de sus bloques, como botones para agregar al carrito, cuadrículas de productos y productos en oferta, te ayudará a crear una página atractiva.<\/p> Por ejemplo, puedes crear una landing page de producto interactiva agregando un botón Comprar ahora <\/strong>y productos en oferta para tu tienda en línea.<\/p> Además, el menú Sections<\/strong> <\/strong>de SeedProd ofrece muchas opciones de categorías para el diseño de la landing page, incluidos el encabezado, la imagen hero, la llamada a la acción y las preguntas frecuentes.<\/p> Después de terminar el diseño, haz clic en el botón Save <\/strong>ubicado en la esquina superior derecha.<\/p> Muchas empresas utilizan varias herramientas para ayudarles a adquirir más clientes y aumentar sus ingresos.<\/p> Con SeedProd, tus landing pages se pueden conectar con herramientas de marketing populares para mejorar el rendimiento de tu campaña. Estas son nuestras principales recomendaciones para las herramientas de terceros de SeedProd:<\/p> Para conectar la landing page de tu sitio web de WordPress con herramientas de terceros, haz clic en la pestaña Connect<\/strong> <\/strong>y elige los servicios que desees.<\/p> Conectar tu página con un servicio de marketing por correo electrónico, por ejemplo, agregará automáticamente los datos de contacto de los visitantes del sitio que ingresaron en tu landing page a tu lista de correo electrónico.<\/p> Después de editar la plantilla y configurar las herramientas de terceros, es hora de publicar tu landing page.<\/p> Para hacerlo, vuelve a la pestaña Design<\/strong>, haz clic en la flecha desplegable junto al botón Save <\/strong>y presiona Publish<\/strong>.<\/p> Ahora, selecciona el botón See Live Page<\/strong><\/strong><\/strong> para ver los resultados.<\/p> Para una mayor personalización, puedes configurar tu página general, SEO y configuración de análisis a través de la pestaña Page Settings<\/strong>.<\/p> Por ejemplo, puedes vincular tantas landing pages como desees a tu nombre de dominio personalizado en lugar de utilizar varios sitios de WordPress. Para hacerlo, haz clic en el menú Custom Domain<\/strong> <\/strong>e ingresa tu nombre de dominio. Ten en cuenta que esta función solo está disponible en la versión premium de SeedProd.<\/p> Además de usar un plugin, otra forma de crear landing pages consiste en instalar un tema de WordPress<\/strong>. Si lo haces, te permitirá personalizar la disposición y el diseño de una landing page en WordPress sin cambiar tu tema.<\/p> Sin embargo, no todos los temas de WordPress ofrecen estas plantillas. Con esto en mente, recomendamos elegir de la siguiente lista de temas gratuitos de WordPress<\/strong>:<\/p> Ahora, repasemos una guía paso a paso sobre cómo crear landing pages en WordPress con un tema.<\/p> Sigue los pasos a continuación para agregar una nueva página en WordPress:<\/p> Después de eso, deberás configurar tu nueva página como una página de inicio estática. Ten en cuenta que esta es diferente de tu página de inicio habitual: la página estática garantizará que los visitantes lleguen a ella cuando hagan clic en tu sitio web.<\/p> Dirígete a Configuración → Lectura<\/strong> y selecciona el nombre de la página que has creado para la landing page en el menú desplegable Portada<\/strong>. Luego, haz clic en Guardar cambios<\/strong>.<\/p> Una vez que lo hayas guardado, comienza a personalizar el tema de la página yendo a Apariencia → Personalizar<\/strong>. Encontrarás opciones para editar los elementos de tu página, como el diseño, el encabezado, los botones, los colores y el fondo.<\/p> Además de modificar el tema, puedes personalizar la landing page utilizando el editor Gutenberg de WordPress<\/a>.<\/p> Ten en cuenta que este editor de bloques viene con las versiones de WordPress 5.0 y superiores. Si utilizas una versión anterior de WordPress, deberás instalar el plugin Gutenberg.<\/p> Para personalizar tu página, haz clic en el cuadro + <\/strong>para ver todos los bloques disponibles.<\/p> Encuentra el bloque que deseas usar con el cuadro de búsqueda y haz clic en él para agregarlo.<\/p> Una vez que hayas agregado el bloque, puedes editarlo a través de la pestaña Bloque <\/strong>de la barra lateral o haciendo clic en los tres puntos verticales<\/strong> que se encuentran arriba.<\/p> Por ejemplo, para agregar tus productos con sus descripciones a la landing page, utiliza el bloque Medios y texto<\/strong>, que presenta un diseño de dos columnas.<\/p> Para hacerlo, simplemente haz clic en Añadir bloque → Medios y texto → Cargar<\/strong>. Elige una imagen de tu computadora o de la biblioteca de medios de WordPress.<\/p> Además, puedes agregar enlaces a páginas de redes sociales con el bloque Iconos sociales<\/strong>. Hacer esto puede ayudar a aumentar el reconocimiento de tu marca.<\/p> Una vez que estés satisfecho con los resultados, revisa tu página con el botón Vista previa<\/strong> para asegurarte de que todo se vea bien.<\/p> Finalmente, haz clic en el botón Publicar <\/strong>en la esquina superior derecha.<\/p> El método final para crear una landing page en WordPress implica el uso de una plantilla de página. Ten en cuenta que necesitarás algunas habilidades de codificación para crear landing pages personalizadas desde cero.<\/p> Recomendamos el método manual cuando necesites más flexibilidad y opciones de personalización para el diseño. Por ejemplo, este método es perfecto para crear una landing page para un dominio dedicado.<\/p> En esta guía paso a paso, te mostraremos cómo crear una plantilla personalizada utilizando temas de WordPress existentes.<\/p> La creación de un tema secundario es esencial para crear una plantilla de página de WordPress personalizada, ya que te permitirá personalizarla sin romper su funcionalidad principal.<\/p> Para este método, usaremos el Administrador de archivos de Hostinger para crear un tema hijo<\/a>. Ten en cuenta que el proceso requiere algunos conocimientos de HTML, CSS y PHP.<\/p> Primero, dirígete a hPanel<\/a> → Administrador de archivos<\/strong>.<\/p> Luego, ve a public_html → wp-content → Temas<\/strong>, haz clic en Nueva carpeta<\/strong> en la esquina superior derecha e ingresa un nombre para tu tema secundario.<\/p> Alternativamente, conéctate a tu sitio a través de un cliente FTP<\/a> como FileZilla<\/a> y crea una nueva carpeta en tu directorio wp-content\/themes<\/strong>.<\/p> A continuación, deberás crear un nuevo archivo style.css<\/strong> que será la nueva hoja de estilo en la carpeta del tema secundario. Añádele el siguiente código:<\/p> Este código contiene información básica sobre el tema secundario, incluidos su nombre y el tema principal. Después de modificar el archivo style.css<\/strong> según el tema principal que hayas elegido, haz clic en Guardar <\/strong>y Cerrar<\/strong>.<\/p> El siguiente paso es poner en cola las hojas de estilo de los temas padre e hijo. Para hacer esto, crea un nuevo archivo llamado functions.php<\/strong> en la carpeta del tema secundario.<\/p> Comienza con una etiqueta PHP de apertura, luego agrega las funciones para poner en cola la hoja de estilo del tema principal. Por ejemplo, puedes insertar el siguiente código:<\/p> Ahora tienes un nuevo tema secundario en funcionamiento que se cargará después de tu tema principal.<\/p> Tu tema secundario ahora está listo para usar, así que dirígete al área de administración de WordPress y haz clic en Apariencia → Tema → Activar<\/strong>.<\/p> Después de activar el nuevo tema, puedes crear una plantilla de página de WordPress<\/strong> personalizada para tu landing page con un diseño único.<\/p> Comienza creando un nuevo archivo llamado landing-page.php <\/strong>en la carpeta del tema hijo y agrégale el siguiente código:<\/p> Cambia el nombre de la plantilla como mejor te parezca. Luego, haz clic en Guardar y Cerrar<\/strong>.<\/p> Si editas o agregas una página en tu sitio web de WordPress, verás tu nueva plantilla personalizada disponible para seleccionarla desde un menú en la barra lateral. Sin embargo, seguirá estando en blanco ya que aún no le hemos agregado ningún contenido.<\/p> Después de crear la plantilla de la página, es hora de personalizarla.<\/p> Primero, copia el código existente comenzando con la línea get_header()<\/strong>; del archivo page.php<\/strong> de tu tema principal: esta se ubicará en public_html → wp-content → Temas → yourtheme<\/strong>. Pégala en el archivo landing-page.php<\/strong> y guarda los cambios. Así es como debería verse tu código:<\/p> Puedes editar la plantilla de tu página y agregar código dirigiéndote a Apariencia → Editor de archivos de temas<\/strong>.<\/p> Dado que la mayoría de las landing pages generalmente no tienen barras laterales ni pies de página para minimizar la distracción, elimínalos borrando estas dos líneas:<\/p> Para agregar más contenido a tu landing page, usa el editor de WordPress. Además, puedes crear una página de inicio de formulario personalizada a través del editor de bloques con el plugin Gutenberg Forms<\/a> de forma gratuita.<\/p> Para ayudar a que tu página se destaque de la competencia, agrega más funciones a través del archivo style.css<\/strong> o navegando a Apariencia → Personalizar<\/strong>.<\/p> Con CSS adicional, puedes modificar tu hoja de estilo. Esto incluye cambiar el color de fondo y de la barra lateral y modificar su tipo de fuente.<\/p> Para cambiar el color de fondo, agrega el siguiente código:<\/p> Esto agregará un color de fondo verde claro basado en el código hexadecimal<\/a>, como en la imagen a continuación:<\/p> Mientras tanto, para cambiar el tipo de fuente, el tamaño y el color de tu landing page, inserta el siguiente código:<\/p> Ten en cuenta que este código solo cambia el texto del cuerpo, como en la imagen a continuación:<\/p> O, si deseas cambiar el encabezado, agrega este fragmento de código:<\/p> Para darte una mejor idea de cómo las landing pages pueden ayudar a tu empresa, consulta sus cuatro casos de uso:<\/p>1. Instalar el plugin<\/h3>
\n
![\"SeedProd](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/instalar-seedprod-1024x386.png\")
<\/figure><\/div>2. Agregar una nueva landing page<\/h3>
![\"Panel](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/seedprod-plugin-wordpress-2-1024x407.png\")
<\/figure><\/div>![\"Crear](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/boton-de-Add-new-landing-page-de-seedprod-3-1024x469.png\")
<\/figure><\/div>3. Seleccionar y personalizar la plantilla <\/h3>
![\"Plantillas](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/elegir-plantilla-para-nueva-pagina-en-seedprod-1-1024x471.png\")
<\/figure><\/div>Consejo profesional<\/h4>\n
![\"Pestaña](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/detalles-de-la-nueva-pagina-seedprod-1-1024x493.png\")
<\/figure><\/div>![\"Pestaña](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/personalizar-plantilla-en-seedprod-1-1024x501.png\")
<\/figure><\/div>![\"Menú](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/duplicar-bloque-en-plantilla-de-seedprod-1-1024x451.png\")
<\/figure><\/div>![\"Bloques](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/woocommerce-en-seedprod-1-1024x477.png\")
<\/figure><\/div>![\"Secciones](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/secciones-prefabricadas-seedprod.png\")
<\/figure><\/div>4. Integrar con herramientas de terceros<\/h3>
\n
![\"Pestaña](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/pestana-connect.png\")
<\/figure><\/div>5. Publicar tu landing page en WordPress<\/h3>
![\"Botón](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/boton-de-publish-en-seedprod-1024x546.png\")
<\/figure><\/div>![\"Pestaña](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/pestana-de-configuracion-de-pagina-seedprod.png\")
<\/figure>Crear una landing page con un tema de WordPress<\/h2>
\n
1. Agregar una nueva página<\/h3>
\n
![\"Añadir](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/anadir-tema-wordpress-1024x441.png\")
<\/figure><\/div>\n
![\"Añadir](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/anadir-pagina-wordpress-1024x298.png\")
<\/figure><\/div>\n
![\"Elegir](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/elegir-plantilla-en-la-nueva-pagina-de-wordpress-1024x416.png\")
<\/figure><\/div>2. Establecer la landing page como una página de inicio estática<\/h3>
![\"Ajustes](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/ajustes-de-lectura-1024x455.png\")
<\/figure><\/div>3. Personalizar la página con el editor de WordPress<\/h3>
![\"Personalizar](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/personalizar-la-landing-page-1024x452.png\")
<\/figure><\/div>![\"Configuración](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/configuracion-del-bloque-1024x439.png\")
<\/figure><\/div>![\"Bloque](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/bloque-medios-y-texto-1024x424.png\")
<\/figure><\/div>4. Presionar Publicar<\/h3>
![\"Publicar](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/publicar-landing-page-1024x443.png\")
<\/figure><\/div>Crear una landing page manualmente<\/h2>
1. Crear un tema hijo<\/h3>
![\"Menú](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2019\/04\/hpanel-files-filemanager-sidebar-es.png\")
<\/figure><\/div>![\"Gestor](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/filemanager-themes-createnewtheme-es-1024x467.png\")
<\/figure>2. Modificar el archivo style.css<\/h3>
*\/\nTheme Name: Twenty Twenty-One Child\nTheme URI: http:\/\/yourdomain.com\nDescription: Twenty Twenty-One Child\nTheme Author: Your Name\nAuthor URI: http:\/\/yourdomain.com\nTemplate: twentytwentyone\nVersion: 1.0.0\nText Domain: twentytwentyone-child\nLicense: GNU General Public License v2 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\nTags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images\n*\/<\/pre>
3. Crear un archivo functions.php<\/h3>
<?php\nadd_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );\nfunction enqueue_parent_styles() {\nwp_enqueue_style( 'parent-style', get_template_directory_uri().'\/style.css' );\n}\n?><\/pre>4. Activar el tema hijo<\/h3>
![\"Activar](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/tema-hijo-1024x437.png\")
<\/figure><\/div>5. Crear una nueva página personalizada<\/h3>
<?php \/* Template Name: Landing Page *\/ ?><\/pre>
![\"Plantilla](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/plantilla-landing-page-wordpress-1024x465.png\")
<\/figure><\/div>6. Personalizar la landing page con CSS<\/h3>
<?php \/* Template Name: Landing Page *\/ ?>\n \n<?php \nget_header();\n \n\/* Start the Loop *\/\nwhile ( have_posts() ) :\n\tthe_post();\n\tget_template_part( 'template-parts\/content\/content-page' );\n \n\t\/\/ If comments are open or there is at least one comment, load up the comment template.\n\tif ( comments_open() || get_comments_number() ) {\n\t\tcomments_template();\n\t}\nendwhile; \/\/ End of the loop.\n \nget_footer(); \n?><\/pre>![\"Editor](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/editor-de-archivos-de-temas-1024x383.png\")
<\/figure><\/div>get_sidebar(); \nget_footer();<\/pre>
![\"Pestaña](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/css-adicional-wordpress-1024x399.png\")
<\/figure><\/div>.site-content-contain {\n background-color: #DEF0F5;\n position: relative;\n}<\/pre>![\"Cambiar](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/css-adicional-1024x435.png\")
<\/figure><\/div>p {\ncolor: teal;\n}\np {\nfont-family: Georgia;\nfont-size: 22px\n}<\/pre>![\"Modificar](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/modificar-tipografia-css-adicional-1024x400.png\")
<\/figure><\/div>h1 {\n color: white;\n text-align: center;\n}<\/pre>Cuándo usar una landing page<\/h2>
\n
![\"Landing](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/10\/landing-page-food-for-others.png\")
<\/figure><\/div>![\"\"](\"https:\/\/blog.hostinger.io\/mx-tutoriales\/wp-content\/uploads\/sites\/39\/2024\/06\/ES-New-WP_in-text-banner.png\")
<\/a><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"