Advertisement
  1. Business
  2. Web Design

Cómo Diseñar una Página Web Increíble para Lanzamiento de Producto

Scroll to top
Read Time: 11 min

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

El Lanzamiento de un Producto nuevo es una aventura comercial emocionante, que podría significar un mundo de diferencia para tu negocio. Sin embargo, mientras te preparas para el lanzamiento, es importante pensar en cómo promoverás tu producto y en cómo hacer posible que la gente lo compre. Aquí hay dos opciones:

  1. Crea una página de próximamente en tu sitio web existente para tu nuevo producto.
  2. Crea una Landing Page de Producto de próximamente en tu sitio web (o landing page de prelanzamiento) solo para el producto.

Una ventaja de una Landing Page de Producto HTML es que es más fácil de configurar que un sistema de gestión de contenido o una plataforma de comercio electrónico. Una landing page de próximamente también te da la ventaja de que tu landing page se centra en un objetivo singular y es promover el producto y alentar a las personas a comprar.

En el tutorial de hoy, te guiaremos a través de los pasos de Cómo Hacer una Landing Page de Lanzamiento de Producto basada en una plantilla y compartiremos consejos sobre cómo escribir una copia de la landing page, así como la promoción del producto. Puedes encontrar plantillas increíbles que funciones bien como landing page de Lanzamiento de Producto (o cualquier tipo de landing page) en Envato Elements o ThemeForest.

Cómo Hacer una Landing Page de Lanzamiento de Producto con una Plantilla

Una vez que hayas descargado tu plantilla, estarás listo para comenzar a configurar tu sitio web de próximamente o la landing page del Lanzamiento del Producto.

El proceso de configuración de la plantilla de landing page de próximamente para tu sitio web consta de algunos pasos. Primero, debes familiarizarte con la forma en que funcionan las plantillas HTML. Luego, debes modificar el archivo HTML y CSS para que puedas reemplazar el contenido con el tuyo y diseñar la plantilla para que coincida con tu marca. El último paso es subir los archivos a tu servidor de alojamiento para que se pueda acceder en línea a tu landing page de próximamente. Veamos los pasos, uno por uno:

Paso 1. Familiarízate con la Estructura de la Plantilla HTML

Cuando compres una plantilla HTML, la descargarás como un archivo zip. Deberás descomprimirlo y luego podrás ver todos los archivos que conforman tu futura landing page.

En la mayoría de los casos, encontrarás uno o más archivos HTML que representan páginas individuales de tu sitio o diferentes variaciones de la página. Cada archivo HTML se nombrará de manera similar a la página que representa, excepto por el archivo index.html que significa la página de inicio. Estos archivos controlan qué elementos se usan en la landing page. Esto incluye varios bloques como encabezados, párrafos, imágenes y más.

Tu plantilla también tendrá algunas carpetas que contendrán archivos CSS, archivos JavaScript e imágenes de marcador. En algunos casos, puedes encontrar carpetas con archivos de fuentes o archivos PSD que se usaron para diseñar el aspecto de la plantilla. Por último, también habrá una carpeta de documentación o un archivo que da información sobre la plantilla e instrucciones para modificarla.

Los archivos CSS controlan el aspecto de la plantilla y los archivos JavaScript generalmente controlan las animaciones y las transiciones.

Para este tutorial, usaré la plantilla Proland de Envato Elements. Esta es una plantilla de landing page responsiva y multiusos que se integra con MailChimp, PayPal y correo electrónico. También incluye características como muchas variantes de landing page, fondos de video, un kit de prensa y más. He aquí un vistazo:

Aprende a Diseñar una Página Web con Plantillas de Landing Page de ProductoAprende a Diseñar una Página Web con Plantillas de Landing Page de ProductoAprende a Diseñar una Página Web con Plantillas de Landing Page de Producto
La plantilla Proland es increíble cómo landing page de Lanzamiento de Producto.

Como puedes ver en la captura de pantalla a continuación, la plantilla incluye todos los archivos mencionados anteriormente, así como carpetas adicionales como PHP, que contiene archivos PHP usados para formularios de contacto, pedidos y boletines:

Descubre Cómo Lanzar un Producto con una Plantilla HTMLDescubre Cómo Lanzar un Producto con una Plantilla HTMLDescubre Cómo Lanzar un Producto con una Plantilla HTML

Paso 2. Modifica el Código HTML

El siguiente paso es modificar los archivos HTML. Si bien no cambiarás nada del código HTML real, reemplazarás el texto ficticio y la información con la tuyos.

Editar archivos HTML es fácil, una vez que comprendes lo que está sucediendo. La forma más fácil de entender el código HTML es verlo en acción. Comienza haciendo clic derecho en index.html y luego seleccionando Abrir con Google Chrome o tu navegador preferido.

Una vez que la plantilla se haya cargado en tu navegador, haz clic con el botón derecho en cualquier parte de la página y selecciona Inspeccionar. En este ejemplo, estoy inspeccionando el encabezado grande en la parte superior de la página.

Descubre Cómo Hacer una Landing Page de Producto en EnvatoDescubre Cómo Hacer una Landing Page de Producto en EnvatoDescubre Cómo Hacer una Landing Page de Producto en Envato

Mientras inspeccionas el elemento, verás un panel en la parte inferior de la ventana de tu navegador. Ese panel te muestra el código HTML subyacente que compone tu plantilla. Como puedes ver, el texto del encabezado grande se encuentra entre las etiquetas <h2>. Esto significa que necesitamos encontrar esas etiquetas en el archivo index.html y reemplazar ese texto.

Quieres volver a la carpeta de tu plantilla, haz clic con el botón derecho en el archivo index.html nuevamente y selecciona Abrir con, pero esta vez escoge un editor de texto como el Bloc de notas o TextEdit.

Edita la Plantilla HTML para Diseñar tu Página Web de ProductoEdita la Plantilla HTML para Diseñar tu Página Web de ProductoEdita la Plantilla HTML para Diseñar tu Página Web de Producto

Cuando el archivo se abre en tu editor de texto, busca las etiquetas <h2> y el texto que acabas de inspeccionar. En mi caso, esas etiquetas se encuentran en la línea 106 del archivo HTML. Ahora todo lo que tienes que hacer es hacer clic entre esas etiquetas <h2>, eliminar el texto ficticio y reemplazarlo con el título que quieras.

Volviendo a la plantilla HTML en tu navegador, inspeccionemos el texto que está justo debajo del título. Este texto es un párrafo envuelto en etiquetas <p>, lo que significa que debemos hacer una copia de seguridad y ubicar esas etiquetas en el editor de texto.

En tu editor de texto, notarás que el párrafo está inmediatamente debajo del encabezado, así que, al igual que antes, haz clic entre las etiquetas <p>, elimina el texto existente e ingresa tu descripción.

Editar el resto de la plantilla es sencillo. Simplemente sigue los mismos pasos hasta que hayas cambiado todo el contenido: haz clic con el botón derecho en el elemento, inspecciónalo, ubica las etiquetas en el editor de texto y reemplaza la información ficticia.

Una vez que hayas reemplazado todo el contenido, haz clic en Archivo > Guardar. Actualiza la ventana de tu navegador y podrás ver tus cambios.

Paso 3. Edita los Archivos CSS

Una vez que hayas reemplazado todo el contenido con el tuyo, debes diseñar la plantilla a tu gusto. Esto se hace editando el archivo CSS. Comienza por ubicar la subcarpeta CSS en la carpeta de tu plantilla y busca el archivo llamado style.css. Esto generalmente significa el archivo CSS principal que necesitas editar. En algunos casos, es posible que tengas más de un archivo CSS, así que verifica la documentación de tu plantilla para información sobre cuál necesitas editar.

De manera similar a la modificación de HTML, te resultará más fácil editar y diseñar la plantilla si sabes qué estilos se usan para qué elemento. La forma más sencilla de averiguarlo es hacer clic derecho en un elemento e inspeccionarlo. El familiar panel Inspeccionar volverá a aparecer y podrás ver los estilos CSS en el lado derecho del panel. El lado CSS del panel Inspeccionar incluso te dirá qué línea de código contiene este estilo en particular. Si tu plantilla tiene varios archivos CSS, también te dirá qué archivo CSS necesitas editar.

Aprende Cómo Diseñar ti Página Web en el Panel InspeccionarAprende Cómo Diseñar ti Página Web en el Panel InspeccionarAprende Cómo Diseñar ti Página Web en el Panel Inspeccionar

Como puedes ver en la captura de pantalla, quiero cambiar el color del botón azul. Según Inspeccionar, necesito cambiar la línea 45 del código CSS en el archivo blue-orange.css.

Si lo estás siguiendo, abre ese archivo con tu editor de texto y busca la línea 45. Ahora, ingresa tu propio código hexadecimal para el color de fondo. En mi caso, el código se ve así:

background: #8a6d3b;

Guarda los cambios y luego actualiza la ventana de tu navegador. Puedes continuar editando los archivos CSS de esta manera hasta que estés satisfecho con el aspecto de tu plantilla. Puedes usar los estilos CSS para cambiar las fuentes, ajustar el espaciado y más. Simplemente recuerda inspeccionar el elemento que quieres diseñar, ubica la línea correcta de código y el archivo CSS correcto, y luego ajusta los estilos.

Paso 4. Carga la Plantilla del Landing Page de tu Producto en tu Servidor de Alojamiento

El último paso es cargar todos los archivos de tu plantilla en tu servidor de alojamiento. Ten en cuenta que si vas a usar solo la landing page de próximamente del sitio web, no es necesario que cargues otros archivos HTML. Sin embargo, deberás cargar CSS, JavaScript y otras carpetas que se encuentran en la carpeta HTML.

Para comenzar el proceso de carga, deberás usar la información de FTP que te proporcionó tu host. También necesitarás un programa FTP que te permitirá conectarte a tu servidor. FileZilla es un cliente FTP gratuito que se puede usar en computadoras con Windows, Mac y Linux y es lo que usaré.

Descarga FileZilla y ejecútalo. Usa la barra QuickConnect en la parte superior para ingresar la información de tu alojamiento. Luego, haz clic en el botón Conectar.

Una vez que se haya establecido la conexión, ubica la carpeta HTML de la plantilla en el lado izquierdo de la ventana de FileZilla. Selecciona el archivo HTML y todas las carpetas y luego arrástralas hacia el lado derecho. Pon los archivos en la carpeta public_html. Luego, espera a que finalice el proceso de carga. Luego, puedes visitar la URL de la Landing Page de Lanzamiento de tu Producto y asegurarte de que todo funcione como se esperaba. 

Cinco Consejos de Redacción Publicitaria para Diseñar la Página Web de tu Producto

Ahora que hemos cubierto cómo configurar la plantilla de la Landing Page de tu Producto, debes asegurarte de que la copia en tu página cierre el trato y convenza a los visitantes para que compren. Aquí hay cinco consejos que te ayudarán a escribir un texto estelar en la Landing Page de tu Producto:

1. Evite el Argot

El primer consejo es evitar el argot y el lenguaje técnico que los visitantes no entenderán. Si bien necesitas describir qué es el producto y cómo les ayuda, será mejor que uses lenguaje cotidiano. Imagina que estás describiendo tu producto a un amigo. Te sorprenderás de lo mucho más natural que suena.

2. Céntrate en los Beneficios

Tu copia debe hacer que los visitantes quieran y necesiten tu producto. Necesitas dejarlos con la reacción de "¡Tengo que tenerlo!". Una forma infalible de conseguirlo es centrarse en los beneficios del producto. Más precisamente, debes darles una idea clara de cómo tu producto mejorará su vida.

3. Trabaja en tu Título Primero

El título será lo primero que vean tus visitantes y debes engancharlos desde el principio. Tu título te ayudará a dar forma al resto de tu historia, así que es una buena idea crear tu título primero y dedicar más tiempo a asegurarte de hacerlo bien.

4. Usa Viñetas

Las landing page suelen ser largas, así que usa viñetas para dividir la copia y hacerla más fácil de digerir. Los puntos con viñetas son excelentes para describir los beneficios y también para describir las características de tu producto.

5. Céntrate en tu Cliente Ideal

Por último, céntrate en tu cliente ideal. Piensa en sus preferencias, sus problemas y cómo tu producto resuelve sus problemas. Al hacerlo, no tendrás problemas para crear una copia convincente para la landing page del Lanzamiento de tu Producto.

Cómo Promocionar tu Landing Page de Próximamente

Una vez que tengas tu copia y la landing page de Lanzamiento de tu Producto esté lista, es hora de promocionarla y dirigir el tráfico hacia ella. Aquí hay algunas formas de comercializar tu landing page de próximamente:

  • Úsala como el enlace predeterminado en tu biografía de redes sociales y asegúrate de crear una publicación que anuncie tu producto con un enlace a tu landing page
  • Envía un correo electrónico a tus suscriptores existentes y hazles saber que tu producto ya está disponible
  • Haz un concurso en las redes sociales en el que tus seguidores tengan que hacer algo (por ejemplo, subtitular una foto, crear una foto relacionada con tu producto o etiquetar a un amigo que se beneficiaría de ella) para tener la oportunidad de ganar el producto en sí.

Aprende Más sobre las Landing Page

Si quieres más información sobre landing pages, consulta estos tutoriales:

Para una gran selección de más plantillas de landing page, ve:

Consigue Más Ventas con una Plantilla de Página de Lanzamiento de Producto

Una excelente plantilla de Landing Page de Producto puede ayudarte a conseguir más ventas de tu producto y resultar en un lanzamiento rentable. Encuentra tu perfecta Landing Page de Producto de próximamente en Envato Elements o ThemeForest y luego usa este tutorial para ayudarte a configurarlo.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Business tutorials. Never miss out on learning about the next big thing.
Advertisement
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.