Unlimited PowerPoint templates, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Business
  2. Web Design

Cómo Hacer a una Gran (Muy Pronto) Página de Lanzamiento de Producto

by
Read Time:11 minsLanguages:

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

Lanzar un nuevo producto es un negocio interesante, que podría significar una gran diferencia para su negocio. Sin embargo, como estás preparando para el lanzamiento, es importante pensar en cómo vas a promocionar su producto, así como hacer posible para la gente a comprarlo. Aquí hay dos opciones:

  1. Crear una venida pronto la página en su sitio de Internet existente de su nuevo producto.
  2. Crear un sitio web muy pronto página (o página de inicio de lanzamiento) sólo para el producto.

Un beneficio de un página de inicio del lanzamiento de producto HTML es que es más fácil de configurar que un Sistema de Gestión de Contenidos o una plataforma de e-commerce. Una entrada dedicada pronto página también te da la ventaja de su página de aterrizaje en una meta singular y que es promover el producto y a la gente a comprar.

En el tutorial de hoy, se camina a través de los pasos de configuración de lanzamiento de un producto basada en una plantilla y compartir consejos sobre aterrizaje página copia de la escritura de la página de inicio así como la promoción del producto. Usted puede encontrar algunas plantillas de página de aterrizaje geniales que va a trabajar bien como producto lanzan aterrizaje páginas (o cualquier tipo de landing page, realmente) en Envato Elements ThemeForest.

Cómo Configurar Su Plantilla de Página de Inicio del Lanzamiento de Producto

Una vez haya descargado la plantilla, estarás listo para empezar a configurar su sitio Web próximamente o página de inicio del lanzamiento del producto.

El proceso de creación de su sitio de Internet muy pronto plantilla de página de aterrizaje tiene unos pasos. En primer lugar, usted necesita para familiarizarse con la forma de trabajo de plantillas HTML. Entonces, necesitará modificar el código HTML y el archivo CSS para que pueda reemplazar el contenido con su propia y estilo de la plantilla para que coincida con su marca. El último paso es subir los archivos a su servidor de hosting así que viene pronto página de inicio puede acceder en línea. Veamos los pasos uno por uno:

Paso 1. Familiarizarse con la Estructura de la Plantilla HTML

Cuando usted compra una plantilla HTML, a descargar como un archivo zip. Tendrás que descomprimirlo y luego podrás ver todos los archivos que compone tu página de aterrizaje futuro.

En la mayoría de los casos, usted encontrará uno o más archivos HTML que representan las páginas individuales de su sitio o variantes de la página. Cada archivo HTML será nombrado semejantemente a la página que representa, excepto el archivo index.html que significa la Página principal. Estos archivos de control qué elementos se utilizan en la página de inicio. Esto incluye varios bloques como encabezamientos, párrafos, imágenes y más.

La plantilla también tendrán unas carpetas que lo contienen archivos CSS, archivos JavaScript e imágenes de marcador de posición. En algunos casos, puede encontrar las carpetas con archivos de fuentes o archivos PSD que fueron utilizados para diseñar la apariencia de la plantilla. Por último, también habrá una carpeta de documentación o un archivo que proporciona información sobre la plantilla e instrucciones para modificarlo.

Los archivos CSS controlan la apariencia de la plantilla y los archivos JavaScript generalmente controlan animaciones y transiciones.

Para este tutorial, podrá ser utilizando la plantilla Proland de Envato elementos. Se trata de una plantilla de página de aterrizaje sensible y polivalente que integra con MailChimp, PayPal y correo electrónico. También incluye características tales como varias variantes de página de aterrizaje, fondos de vídeo, un kit de prensa y más. Aquí está un vistazo:

Proland templateProland templateProland template
La plantilla de Proland es como un página de inicio del lanzamiento de producto.

Como se puede ver en la captura de pantalla siguiente, la plantilla incluye todos los archivos antes mencionados así como carpetas extras como PHP que contiene los archivos PHP utilizados para los formularios de contacto, el orden y el boletín:

template structuretemplate structuretemplate structure

Paso 2. Modificar el Código HTML

El siguiente paso es modificar los archivos HTML. Mientras que no cambia de código HTML, usted va reemplazando el texto simulado y la información con su propio.

Edición de archivos HTML es fácil, una vez que entienda lo que está sucediendo. La forma más fácil de comprender sobre el código HTML es verlo en acción. Comience haciendo clic en index.html y seleccionando abrir con Google Chrome o el navegador de preferencia.

Una vez que la plantilla se ha cargado en su navegador, haga clic derecho en cualquier parte de la página y seleccione revisar. En este ejemplo, yo estoy inspeccionando la cabecera grande en la parte superior de la página.

Inspecting the headerInspecting the headerInspecting the header

Mientras inspeccionas el elemento, observará un panel en la parte inferior de la ventana del navegador. Que el panel te muestra el código HTML subyacente que compone su plantilla. Como se puede ver, el texto del encabezado grande es en medio <h2> etiquetas. Esto significa que necesitamos encontrar las etiquetas en el archivo index.html y reemplazar ese texto.

Usted querrá ir a carpeta de la plantilla, haga clic derecho en el archivo index.html otra vez y seleccione Abrir Con, pero esta vez elegir un editor de texto como el Bloc de notas o TextEdit.

editing the HTML templateediting the HTML templateediting the HTML template

Cuando el archivo se abre en tu editor de texto, buscar <h2> las etiquetas y el texto que usted ha examinado apenas. En mi caso, las etiquetas se encuentran en la línea 106 del archivo HTML. Ahora todo lo que tienes que hacer es haga clic entre los <h2> etiquetas, borrar el texto de relleno y reemplazarlo con su titular deseado.

Volviendo a la plantilla de HTML en el navegador, vamos a examinar el texto que está justo debajo del título. Este texto es un párrafo en <p> etiquetas, que significa que necesitaras y localizar las etiquetas en el editor de texto.

En su editor de texto, usted notará que el párrafo está inmediatamente por debajo de la cabecera así como antes, haga clic en entre el <p> etiquetas, elimine el texto existente y escribe su descripción.

El resto de la plantilla de la edición es fácil. Simplemente siga el mismo pasos hasta que todos los contenidos han cambiado: haga clic derecho en el elemento, inspeccionarlo, localizar las etiquetas en el editor de texto y sustituir la información falsa.

Después ha sustituido todo el contenido, haga clic en Archivo > Guardar. Actualizar la ventana del navegador y podrás ver los cambios.

Paso 3. Editar los Archivos CSS

Una vez que has reemplazado todo el contenido con el suyo propio, usted necesita estilo de la plantilla a tu gusto. Esto se realiza editando el archivo CSS. Comenzar por localizar la subcarpeta CSS en la carpeta de la plantilla y busca el archivo llamado style.css. Esto significa generalmente el archivo CSS principal que necesita editar. En algunos casos, puede que tenga más de un archivo CSS así que revise la documentación de la plantilla para obtener información sobre que se necesita editar.

Del mismo modo modificar HTML, usted tendrá un tiempo más fácil edición y estilo de la plantilla si usted sabe que los estilos se utilizan para que elemento. La forma más fácil de encontrar que es hacer clic derecho en un elemento y la lo inspección de. El panel Inspector familiar aparecerán otra vez y podrás ver los estilos CSS en el lado derecho del panel. La parte CSS del panel Inspector te dirá incluso que línea de código contiene este estilo particular. Si la plantilla tiene varios archivos CSS, también diré que archivo CSS que necesita editar.

Inspecting a button in CSSInspecting a button in CSSInspecting a button in CSS

Como se puede ver en la captura de pantalla, quiero cambiar el color de la tecla azul. Según el Inspector, necesito cambiar la línea 45 del código CSS en el archivo de orange.css azul.

Si usted está siguiendo a lo largo de, abrir ese archivo con tu editor de texto y línea 45. Ahora, introduzca su código hexadecimal para el color de fondo. En mi caso, el código tiene este aspecto:

fondo: #8a6d3b;

Guardar los cambios y luego actualizar la ventana del navegador. Puede seguir editando los archivos CSS de esta manera hasta que estés satisfecho con la apariencia de la plantilla. Puede utilizar los estilos CSS para cambiar los tipos de letra, ajustar el espaciado y más. Simplemente Recuerde inspeccionar el elemento que quiere estilo, ubicar la correcta línea de código y el archivo CSS correcto y luego ajustar los estilos.

Paso 4. Subir Su Lanzamiento Aterrizaje Plantilla de Página a Su Servidor de Hosting

El último paso es subir todos los archivos de plantilla a su servidor de hosting. Tenga en cuenta que si vas a usar sólo el sitio Web próximamente página de inicio, no hay necesidad de subir otros archivos HTML. Sin embargo, usted necesitará subir el CSS, JavaScript y otras carpetas que se encuentran en la carpeta HTML.

Para comenzar el proceso de carga, debe utilizar la información de FTP proporcionado por su anfitrión. Usted también necesitará un programa FTP que te permitirá conectarte a tu servidor. FileZilla es un cliente FTP gratuito que puede utilizarse en computadoras Windows, Mac y Linux y es lo va a utilizar.

Descargar FileZilla y lanzarlo. Utilice la barra de Conexión Rápida en la parte superior para introducir la información de alojamiento. A continuación, haga clic en el botón Conectar.

Una vez establecida la conexión, localizar la carpeta HTML de la plantilla en el lado izquierdo de la ventana de FileZilla. Seleccione el archivo HTML y todas las carpetas y arrástrelas sobre a la derecha. Coloque los archivos en la carpeta public_html. Luego, espere a que el proceso de carga hasta el final. Luego puede visitar el URL de la página de inicio del lanzamiento de producto y asegúrese de que todo funciona como está previsto.

Cinco Consejos de Redacción para Tu Página de Inicio del Producto

Ahora que hemos cubierto cómo configurar la plantilla de página de inicio de producto, usted necesita para asegurarse de que la copia en tu página el precio de los sellos y convence a los visitantes a hacer la compra. Aquí hay cinco consejos que te ayudarán a escribir copia estelar para tu página de inicio del producto:

1. Evite la Jerga

El primer Consejo es evitar la jerga y lenguaje técnico que los visitantes no entienden. Mientras que usted necesita describir lo que es el producto y cómo les ayuda, usted será mejor utilizar lenguaje cotidiano. Imagine que usted está describiendo su producto a un amigo. Se sorprenderá cuánto más un sonido natural.

2. Enfoque en los Beneficios

La copia debe hacer los visitantes quieren y necesitan su producto. Hay les dejo con el "tengo que tenerlo!" reacción. Una manera segura de llegar debe centrarse en los beneficios del producto. Más precisamente, es necesario darles una idea clara de cómo su producto se va a hacer su vida mejor.

3. Trabajo en Su Título Primero

El titular será lo primero que Descubre a sus visitantes y necesita para enganchar desde el principio. Su título le ayudará a moldear el resto de su historia por lo que es una buena idea para elaborar su titular primero y pasar más tiempo en asegurarse de que hacerlo bien.

4. Uso de Viñetas

Páginas de aterrizaje son generalmente largos para que uso puntos para romper para arriba la copia y hacen más fácil de digerir. Puntos son ideales para describir los beneficios, así como esbozar las características de su producto.

5. Centrarse en Su Cliente Ideal

Por último, centrarse en su cliente ideal. Pensar acerca de sus preferencias, sus problemas y cómo su producto soluciona sus problemas. Al hacerlo, vas a tener sin problemas con una copia convincente para tu página de inicio del lanzamiento de producto.

Cómo Promover Su Página de Inicio Lanzamiento

Una vez que ya tienes tu copia y tu página de inicio del lanzamiento de producto es bueno para ir, es hora de promover y dirigir el tráfico a ella. Aquí están algunas maneras para comercializar su próximamente página de aterrizaje:

  • Usarlo como el enlace por defecto en su bio de medios sociales y asegúrese de crear un post que anuncia su producto con un enlace a tu página de inicio
  • Enviar un correo electrónico a sus suscriptores existentes y hacerles saber que su producto ya está disponible
  • Crear un concurso en las redes sociales donde sus seguidores tienen que hacer algo (por ejemplo, leyenda de una foto, subir con una foto en la que se relaciona con su producto o etiqueta a un amigo que se beneficiaría de él) para ganar el producto en sí.

Más Información Sobre Páginas de Aterrizaje

Si desea más información sobre páginas de aterrizaje, revise estos tutoriales:

Una gran selección de plantillas de página de aterrizaje más, echa un vistazo en:

Hacer Más Ventas con un Producto de Lanzan de Plantilla de Página

Una plantilla de página de lanzamiento de gran producto puede ayudar a hacer más venta de su producto y el resultado en un lanzamiento rentable. Encontrar el producto perfecto próximamente plantilla de página de aterrizaje en Envato Elements o ThemeForest y luego utilizar este tutorial para ayudar a configurarlo.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.