¿Cuál es la mejor manera de crear una página de destino usted mismo? Cómo crear una página de destino usted mismo: instrucciones paso a paso

La creación de una página de destino (página de destino) o página de destino, página de destino, simplifica al máximo el camino del usuario hacia su objetivo deseado. Una página de este tipo está diseñada para influir en los instintos básicos de una persona, para animarla a realizar acciones específicas: hacer clic, llamar, realizar un pedido, comprar "ahora mismo".

Las páginas de destino son las más adecuadas para realizar campañas publicitarias para un servicio u oferta específica con un precio único (bajo), así como para atraer al público objetivo desde los sistemas de publicidad contextual Google AdWords, Yandex.Direct, redes sociales y boletines informativos por correo electrónico:

¿Qué es la página de destino?

La página de destino es una página independiente que se utiliza para:

• ventas de un producto o servicio específico;
• creando una base de suscripción.

Una vez que haya decidido crear una página de destino, debe utilizar los factores desencadenantes de influencia necesarios que impulsen al usuario a tomar una decisión rápidamente (comprar un producto, ingresar información para recibir un descuento, realizar un curso, un seminario web, etc.).

Desde el punto de vista del usuario, una página de destino es la página a la que llega después de hacer clic en un informador, banner, publicación publicitaria, etc. Una página de destino es fundamentalmente diferente de una tienda online. Para vender un producto y realizar una campaña publicitaria, crea su propia página y utiliza diferentes activadores de influencia.

Tipos de páginas de destino:

• Autónomo. Este es el tipo más común de página de destino. La tarea principal es incentivar al usuario a comprar o realizar una acción específica recomendada por la página;
• Micrositio. Un sitio web pequeño, a menudo independiente, que consta de no más de cinco páginas que contienen información sobre un producto o servicio;
• Sitio principal. Para una página de destino, utiliza una o más páginas de recursos;
• Sitio web de Lando. Un recurso que consta íntegramente de páginas de destino independientes:

Tipos de páginas de destino

• Publicidad. Contener una gran cantidad de información textual, gráfica y en video sobre el servicio;
• Viral. El anuncio se disfraza de artículo o juego. A menudo se trata de correo electrónico, redes sociales, chats;
• Páginas principales dirigidas. Diseñados para recopilar información sobre el público objetivo, por regla general, contienen un mínimo de información.

Una página de destino bien diseñada puede aumentar la conversión de visitantes en compradores reales.

¿Por qué necesitas una página de destino?

El objetivo principal de una página de destino son las ventas. La página de destino contiene texto de venta, una presentación de un producto o servicio y un llamado a la acción. La página de destino es una excelente herramienta para iniciar rápidamente un servicio o producto en Internet. Las páginas de destino le permiten recopilar suscriptores y solicitudes de servicios, etc.

Si presentas correctamente tu producto/servicio, haces una buena presentación, indicas tus puntos fuertes y además estableces un flujo de tráfico (publicidad en redes sociales, publicidad contextual, etc.), todo lo que tienes que hacer es recopilar solicitudes de tus clientes y vender. ellos el producto/servicio anunciado.

Beneficios de usar la página de destino

El aterrizaje, en comparación con las páginas de recursos habituales que ofrecen servicios o productos, tiene una serie de ventajas:

• Dirigirse a una audiencia específica. La página de destino no ofrece muchas decisiones que requieran que el usuario elija, sino una oferta única a la que es difícil resistirse;
• Alta conversión. Según las estadísticas, el uso de páginas de destino con fines publicitarios puede aumentar la conversión entre un 10% y un 15%;
• Información completa sobre el producto/servicio ofrecido, pero sin transiciones ni enlaces adicionales;
• La capacidad de recopilar contactos de visitantes y reponer la base de datos de clientes potenciales, a quienes luego podrá enviar información sobre próximas promociones/sorteos;
• Bajo costo de creación de una página de destino. Incluso los empresarios novatos pueden permitirse el lujo de crear una página de destino, probando así nichos de productos para comenzar a vender en Internet:

¿Dónde y cómo se utilizan las Landing Pages?

Puede hacer que una página de destino sea la página interna o principal de un recurso corporativo, un sitio web de una página o una página en una red social. Recientemente, se han vuelto cada vez más populares (páginas offline) para productos clave, en un momento en el que la empresa ya cuenta con un sitio web corporativo. Esto es lo que hacen las empresas jurídicas y médicas, los bancos, los operadores de telefonía móvil y muchos otros.

¿Dónde se utilizan las páginas de destino?

• En campañas publicitarias que utilizan publicidad contextual con pago por clic (PPC) en Yandex.Direct, Google AdWords, Comenzado. En este caso, el tráfico se redirige a páginas de destino optimizadas para consultas clave;
• En campañas de publicidad mediante banners, siempre que el material gráfico se coloque sobre recursos temáticos diseñados para el público objetivo. Por ejemplo, en los portales de noticias del segmento para especialistas en el campo de las tecnologías de la información se colocan carteles publicitarios de nuevos productos en el campo de la electrónica;
• En boletines de cartas informativas y de marketing que contienen un enlace a la página de destino. Por ejemplo, newsletters para una tienda online que tengan en cuenta las compras anteriores del usuario;
• Realizar campañas de blog en las que el usuario es redirigido a la página de destino del recurso, con cuyo propietario el blogger previamente celebra un acuerdo de asociación para la colocación de anuncios publicitarios, postales y artículos de relaciones públicas;
• Campañas en redes sociales (VKontakte, Facebook, Twitter, etc.) o en sitios de alojamiento de medios populares (por ejemplo, YouTube, Flickr, etc.). Los usuarios son redirigidos a la página de inicio del anunciante que tiene un acuerdo para colocar materiales publicitarios con el recurso de medios seleccionado:

Formas básicas de crear una página de destino

• Plantillas y generadores de páginas de destino gratuitos. Hoy en día existen muchas opciones en Internet de plantillas y diseñadores gratuitos que permiten generar una página de destino. El servicio más popular. Esta es una excelente opción para empresas con presupuesto limitado, pero con un staff de especialistas versados ​​en marketing y diseño;
• Contactando con especialistas. Puede solicitar texto para una página de destino a un redactor, desarrollo de diseño a un diseñador e integración con el motor a un programador. Al mismo tiempo, la empresa debe contar con un comercializador en plantilla que realizará el seguimiento del proyecto en todas sus etapas. Las ventajas de este método incluyen un costo relativamente bajo y resultados bastante altos, las desventajas son el riesgo de error al elegir especialistas;
• Subcontratación de agencias. Este método de creación de una página de destino implica contactar a una agencia que se encargará de analizar a la competencia, seleccionará un concepto, desarrollará una estrategia de campaña publicitaria, resolverá el problema de la integración con el motor y lanzará el proyecto. Todo lo que se requiere de usted es un informe para crear una página de destino, y la agencia se hará cargo del desarrollo de una página de destino llave en mano. Las ventajas de este método incluyen alta eficiencia y ahorro de tiempo, las desventajas son el mayor costo que en las opciones anteriores;
• Disponer de un equipo de especialistas que se ocuparán de... Ésta es la forma más cara y eficaz. Su propio equipo, formado por un diseñador, redactor, comercializador y programador de maquetación, le permitirá promocionar plenamente su producto/servicio en el mercado.

¿Es posible crear una página de destino usted mismo?

Puede crear una página de destino usted mismo, pero necesitará tener ciertas habilidades en desarrollo, análisis y diseño web. Si no tienes esa experiencia, utiliza servicios que ofrecen plantillas listas para usar en las que solo necesitas completar el texto y configurar el dominio y el hosting.

Crear una página de destino usted mismo le ahorrará tiempo y dinero. En Internet se pueden encontrar recursos con plantillas de diversos temas, que vienen con instrucciones para una rápida instalación y software que permite editar. El costo de dichos kits puede ser mucho menor que el precio de desarrollar una página de destino en una agencia especializada:

¿Es posible crear una Landing Page gratis?

Dado que el interés por las páginas de destino crece constantemente, los desarrolladores ofrecen cada vez más herramientas para crear páginas de destino basadas en plantillas. Aquí hay una lista de los métodos y servicios más populares:

• Puedes crear una página de destino gratuita si te registras en Wix;
• Puede crear una página de destino con Adobe Photoshop;

La tercera opción es la más adecuada para principiantes que tienen un mínimo de conocimientos y no quieren perder el tiempo aprendiendo sistemas complejos de programación web.

Optimización de la página de destino

Crear una página de destino es la mitad de la batalla, es importante optimizarla correctamente. Los sitios web de una sola página tienen un inconveniente, pero bastante importante: a los motores de búsqueda les resulta bastante difícil encontrarlos. Los recursos de varias páginas tienen títulos únicos, enlaces adecuados y una estructura compleja que indica el peso de las páginas, etc.

La arquitectura de un sitio de una sola página no permite realizar una optimización interna de alta calidad en el sentido clásico, para "adaptar" el sitio a los requisitos de los motores de búsqueda. Una solución de Google nos permitió deshacernos de este problema: el diseño mediante JavaScript y el método PushState.

Para optimizar su página de destino, debe hacer lo siguiente:

• dividir la página de destino en bloques;
• Cada bloque debe recibir su propio indicador único, título, descripción y título, URL.

Es decir, cada bloque debe tener las mismas propiedades que cualquier página individual del sitio, mientras que el robot de búsqueda percibirá su sitio como varias páginas únicas. Es posible que los visitantes de la página de destino no se den cuenta de esta decisión; sólo los más atentos notarán que mientras se desplazan por la página, la URL y el título cambian. Para implementar un proyecto de este tipo, necesitará ciertos conocimientos en el campo de SEO y diseño con JavaScript.

Si solo necesita información sobre los servicios con los que puede crear una página de destino, vaya directamente al paso 5: elegir una herramienta de diseño. Si desea comprender el algoritmo para crear una página de destino de la A a la Z, lea el artículo completo.

Cómo crear una página de destino: instrucciones paso a paso en 9 etapasEtapa 1. PreparaciónPropósito de la página de destino

En primer lugar, determinamos el propósito de la página de destino, qué queremos recibir de los visitantes de la página. Normalmente esto es una de tres cosas:

1. Venta de bienes/servicios (ejemplo: vender miel, vender servicios de diseño de logotipos, vender un curso en línea);
2. Recibir un contacto (ejemplo: suscripción al newsletter, solicitud de medición);
3. Información (ejemplo: invitación a un evento gratuito fuera de línea, página de promoción de una tienda con promociones).

Determinamos el público objetivo y lo que es importante para ellos.

En este paso, es importante para nosotros entender quién es el público objetivo de nuestra oferta, qué dolores tienen, qué deseos, qué miedos y qué quieren recibir estas personas. Es importante comprender todo esto para que los elementos del sitio web, como el texto y el diseño, se realicen centrándose en el público objetivo (público objetivo).

¿Cómo determinar el público objetivo?

• Analiza aquellos clientes con los que ya has trabajado o estás trabajando actualmente;
• Pregunte a los clientes qué es importante para ellos. Sí, así es, simplemente llama o escribe, prepara una lista de preguntas con anticipación;
• Recuerda, o mejor aún, anota las preguntas que más te hacen sobre tu producto;
• Lea sitios/foros temáticos, vea qué preocupa a sus clientes.

Observar a los competidores (evaluación comparativa)

Cuando hayas anotado todos tus pensamientos e ideas sobre la futura página de destino, es hora de empezar a analizar a la competencia (benchmarking). Si ya conoces a tus competidores, genial; si aún no, busca en los motores de búsqueda utilizando las palabras clave de tu nicho.

El objetivo del análisis es encontrar y ver qué hacen mal los competidores y no repiten sus errores, y qué hacen bien, observar ideas, bloques faltantes y soluciones de diseño interesantes. Esto no significa que solo necesites copiarlos, por supuesto que no necesitas hacerlo, guárdalos para ti y luego, en la etapa de escribir el texto y desarrollar el diseño, adáptalos a tu proyecto.

Cómo hago esto: creo una carpeta separada llamada "Ideas" y tomo capturas de pantalla de bloques interesantes.

Etapa 2. Redacción de texto para la página de destino.

Para muchos (incluyéndome a mí), escribir un texto es la etapa de desarrollo más difícil, por lo que personalmente siempre trato de delegar esta etapa en un redactor.

Pon el caos en tu cabeza en papel

Simplemente, sin pensar en la secuencia, transfiera al papel todos los pensamientos e ideas para el futuro aterrizaje. Escribe todo de lo que quieras hablar. Cuando escribe una lista de pensamientos de este tipo, además de analizar las ideas de la competencia, el siguiente paso es combinar todo esto y componer los bloques y la estructura de la página de destino.

Hacer bloques de aterrizaje

Una página de destino consta de ciertos bloques; no puedes simplemente escribir un texto sólido como un artículo y simplemente publicarlo. Será terriblemente incómodo de leer.

Aquí está la lista principal de bloques que se pueden encontrar en el 90% de las páginas de destino:

Primera pantalla con PVU (propuesta de venta única)

Divulgación del producto (Descripción del servicio o producto)

Información del autor/empresa

Reseñas

Casos (Historias de Éxito)

Formulario/llamado a la acción

Preguntas frecuentes (Respuestas a preguntas frecuentes)

Contactos/pie de página del sitio

¿Qué otros bloques puede haber en el sitio?

• Hechos en números
• Beneficios (ventajas)
• Video
• portafolio
• Para quien
• Etapas de cooperación (o Cómo realizar un pedido, Cómo dejar una solicitud)
• Tarifas y precios
• Socios
• Galería
• Cronograma
• Equipo
• Certificados, diplomas, cartas de agradecimiento.
• Documentación
• Temporizador

Cuando el marco de la página de destino está listo, comenzamos a escribir el texto. Puede hacerlo usted mismo o subcontratarlo a un redactor.

Ponemos lo principal al principio. No es necesario que escribas sobre ti al principio del sitio; muestra tu producto primero.

Reemplazar palabras generales con hechos. No es necesario convencer a los visitantes de nada; déjeles ese derecho. (Ejemplo: no escriba que son líderes del mercado en los que se puede confiar, muestre reseñas de empresas a las que prestó servicios y quedaron satisfechas, además adjunte la reseña original para que no sea infundada).

Funciona especialmente bien en la primera pantalla y USP. Después de que un visitante llega a su página de destino, tiene tres segundos para captar su atención. Si no tuviste tiempo, la persona cerrará la página y seguirá navegando. La primera pantalla debe ser lo más relevante posible para la consulta a través de la cual el visitante llegó al sitio. (Ejemplo: si una persona busca "Contabilidad de un empresario individual", no es necesario mostrar una página de destino con el título "Contabilidad de una LLC").

PVU (propuesta de venta única). En pocas palabras, el título principal y la descripción, que deben indicar de manera sucinta de qué trata esta página de destino. Puede crear una PVU utilizando tecnología 4U.

Cuanto más corto, mejor. Intente escribir bloques de texto lo más cortos posible. Nadie lee largos párrafos de texto, hoy en día a la gente siempre le falta tiempo y esto hay que tenerlo en cuenta. Si aún necesita proporcionar mucha información, divídala en párrafos y bloques.

Más títulos. Los párrafos de texto no deben escribirse así, sin título. La mayoría de los visitantes, cuando visitan un sitio web, primero se desplazan por el sitio tratando de evaluar si llegaron allí o no. Y aquí son los títulos los que juegan un papel importante, porque él hojeará el sitio y lo evaluará precisamente a partir de ellos.

¿No quieres redactar el texto tú mismo? Encuentre un redactor que haga esto por usted.

Dónde buscar un redactor

Intercambio de redacción publicitaria ContentMonster.ru

Intercambio de redacción Etxt.biz

Empresas privadas o especialistas. Puedes buscarlos mediante una búsqueda o en las redes sociales (VK, Facebook, Instagram).

Puedes recurrir a un redactor no sólo para desarrollar texto desde cero. Por ejemplo, puede contactarnos con una lista de bloques ya preparada, con bocetos iniciales o incluso con un texto ya compilado que el redactor “revivirá”, hará más interesante y corregirá errores.

Etapa 3. Hacer un prototipo

Antes de la etapa de diseño, es importante crear un prototipo, déjame decirte por qué. Hay varias razones:

Sin un prototipo, pasarás más tiempo, por extraño que parezca :) Al comienzo de mi carrera, después de escribir el texto, inmediatamente hice el diseño. Pensé que así ahorraría tiempo, pero en realidad resultó que todo llevó aún más tiempo, porque no es conveniente idear elementos de diseño de inmediato sin un marco.

Problemas con el cliente si crea una página de destino para realizar un pedido. Todos tuvieron esta situación. Aprobó el texto e inmediatamente comenzó a hacer el diseño, pasó mucho tiempo, se lo envió al cliente y él dice que todo está mal y que hay que rehacerlo, cambiar el texto, etc. Esto es mucho más difícil de hacer cuando el diseño ya está listo que cuando solo tienes un prototipo de texto y círculos.

Un prototipo se puede comparar con el boceto que haces antes de pintar. Pocas personas pueden tomar pinturas y pintar un cuadro inmediatamente. Así que aquí, primero hacemos un boceto, vemos cómo queda aproximadamente, qué bloques se pueden mover, cambiar, agregar o quitar texto, etc.

Un ejemplo de mi caso de un prototipo y un diseño realizado con este prototipo.

Ejemplo de prototipo

Ejemplo de diseño de prototipo

Sobre el prototipo indicamos:

• Colocación de texto, resaltar títulos;
• ¿Dónde se ubicarán los gráficos (imágenes, íconos)?
• ¿Dónde estarán los botones?
• En qué bloque el fondo será claro y en qué bloque será oscuro.

Servicios de creación de prototipos:

• Photoshop. Lo hago en Photoshop. Después de que aprobemos el prototipo con el cliente, es conveniente hacer aquí un diseño basado en el prototipo.
• Servicio de maquetas. Un servicio especial con elementos listos para usar, simplemente arrastre y suelte y agregue su texto.
• En papel. Puedes esbozar un prototipo a mano si la página de destino no es complicada y no quieres molestarte demasiado.

Siempre empiezo un prototipo en papel, me resulta más cómodo. Luego lo transfiero a Photoshop.

Utilice la cuadrícula Bootstrap

También te aconsejo que hagas el diseño en cuadrícula para que luego se pueda adaptar fácilmente a diferentes dispositivos. Si elige una herramienta de diseño para el diseño, donde el diseño en sí se adapta a diferentes pantallas (más sobre las herramientas de diseño más adelante) y no utiliza una versión móvil separada del sitio, entonces el diseño debe desarrollarse en una cuadrícula.

La plantilla de cuadrícula de Photoshop que uso en mi trabajo, puedes hacerlo.

Etapa 4. Realización del diseño.

Todos los elementos del diseño de la página de destino se pueden dividir en tres partes, esta es la selección:

Fuente

Colores

Gráficos (fotos, iconos, imágenes)

Cada elemento crea un estado de ánimo determinado, para nosotros es importante elegir una combinación de todos los elementos para que el visitante desarrolle una actitud correcta y de confianza hacia nuestra empresa y nuestro producto.

Por ejemplo: en un sitio que ofrece servicios funerarios, los colores brillantes y una chica con una sonrisa radiante con la inscripción en letras grandes ¡PROMOCIÓN! no son apropiados. O un sitio sobre cómo organizar vacaciones en colores grises y descoloridos, con botones negros y una fuente slab serif, después de verlo querrás deprimirte y no pedir unas vacaciones para tu hijo. Los ejemplos son, por supuesto, exagerados; es poco probable que los veas en la vida (aunque es posible), pero creo que entiendes la esencia.

Analicemos cada elemento con más detalle.

Fuente

El texto es la base de cualquier sitio web, por lo que la fuente no es menos importante que el color o los gráficos. Una fuente también puede crear el ambiente: puede ser ligera o brutal, evocar una sensación de caridad o sencillez, etc.

Según tu tema y la emoción que quieras evocar en los visitantes.

Si no quiere molestarse en pensar en combinaciones, elija las opciones neutrales ya preparadas que he preparado para usted. Se adaptarán a cualquier tema. Este:

• roboto
• abierto sin
• PT sin

Elija uno o dos de ellos y mezcle.

Por ejemplo:

Título: Roboto (negrita)
Texto - Roboto (Luz)

Título: Abierto sin (negrita)
Texto - Roboto (Luz)

Título - PT sans (Regular)
Texto - Abierto sans (Light)

¿Dónde puedo conseguir fuentes?

Hay fuentes gratuitas y de pago. En las primeras etapas, te aconsejo que utilices fuentes gratuitas de Google Fonts. Hay buenas opciones allí, y las que describí anteriormente también están ahí.

¿Por qué recomiendo las fuentes de Google?

Porque su licencia le permite utilizar las fuentes tanto para usted como para fines comerciales. Si decide comprar la fuente que le gusta a desarrolladores o en tiendas especiales en línea, entonces está bien, no hay problemas, pero si planea descargar fuentes de forma gratuita desde sitios de terceros, entonces es importante verificar la licencia, porque puedes violar los derechos de autor si usas una fuente paga, pero no la compraste.

Si está creando un sitio web para usted, sustitúyalo usted mismo; si lo está creando para un cliente, sustitúyalo por el cliente.

Color¿Cómo elegir la combinación de colores adecuada para un sitio web?

Los colores blanco, gris y negro ya están incluidos en el conjunto, siempre se usan, por ejemplo, la fuente es blanca, gris o negra, el fondo del sitio es blanco, gris o negro. Digas lo que digas, estos colores ya se utilizarán en la página de destino. Se llaman acromáticos (no contienen matices de color). Solo queda seleccionar colores cromáticos (tonos de color).

Normalmente, un sitio web utiliza uno, dos o tres colores cromáticos. Le aconsejo que elija uno o como máximo dos, de lo contrario existe la posibilidad de que no pueda combinarlos armoniosamente y el sitio se verá feo y poco armonioso.

Mira un vídeo interesante sobre este tema.

También debe seleccionarlos según su tema.

Ejemplos de qué estado de ánimo evoca cada color:

El material sobre colores está tomado de aquí.

Gráficos (fotos, iconos, imágenes)

La tendencia reciente es que es mejor utilizar tantas fotografías como sea posible que utilizar imágenes de archivo o gratuitas de Internet. Esto sucedió porque las fotografías de archivo ya se han vuelto aburridas: mujeres idénticas sonrientes de un centro de llamadas o trabajadores de mudanzas felices y deportistas con monos azules evocan un sentimiento de, como mínimo, desconfianza.

Para ser honesto, yo también pecé con esto antes, pero ahora pido (ruego) a los clientes que envíen la mayor cantidad posible de fotos “en vivo” de productos, personal, instalaciones, etc.

Es cierto que es mejor tomar una foto con tu teléfono, aunque sea de menor calidad, pero el cliente entenderá que no te escondes detrás de la máscara de una imagen de Internet, sino que estás mostrando tu cara, otro punto para Confía en tu persona.

Eso sí, hay temas en los que no hay nada especial que mostrar, entonces ya puedes recurrir a las fotografías de archivo. Todavía recomiendo comprar fotos allí en lugar de buscar fotos gratuitas en la búsqueda, porque se usan con más frecuencia en otros sitios.

Alguien dirá: "¡Ilya, las fotografías de archivo parecen un avión!" - existe tal cosa :) Hay una manera de descargar imágenes por un dólar, sobre el servicio. Bueno, si estás haciendo un proyecto para una gran empresa comercial, entonces es mejor presupuestar esta cantidad y comprar fotografías de un banco de fotografías oficial, nuevamente para protegerte.

• Servicio ShopDiz.pro: descarga de imágenes en stock por entre 0,5 y 1 dólar.
• El servicio ShutterStock es el archivo más popular con una gran cantidad de fotografías, vectores y vídeos.

Al elegir imágenes, céntrese también en el tema y en las emociones que desea evocar en los clientes. Confianza, alegría, confiabilidad, felicidad, etc.

¿Cómo generar ideas de diseño para bloques? Aquí no existe una regla universal. Lo principal es eliminar todo lo que te parezca innecesario, acortar el texto, utilizar los gráficos con moderación y no sobrecargar. Mira ejemplos de buenas páginas de destino, toma notas, toma capturas de pantalla de los bloques que te gusten, para luego poder hacer algo similar en tus proyectos.

Etapa 5. Seleccione una herramienta de diseño

Hay muchas herramientas de diseño disponibles hoy en día, solo hablaré de aquellas que yo mismo he usado y que son más convenientes para mí y para los clientes.

1. CMS WordPress + constructor WPBakery o Elementor

Instalas el CMS de WordPress, instalas la plantilla, el constructor WPBackery es pago, pero viene gratis con el 99% de las plantillas que uso. Hay un segundo diseñador conveniente, este es Elementor, es gratis, pero para ampliar su funcionalidad, compre la versión Pro de Elementor. Para mí, ambos diseñadores son convenientes, no puedo recomendar uno, cada uno tiene sus propias ventajas. Mire las descripciones y opciones de los sitios con ambos constructores y elija el adecuado.

Utilizo esta opción principalmente si, además de la página de destino, necesitamos páginas adicionales, es decir, estamos creando un sitio de varias páginas. O, para no estar vinculado a ninguna plataforma, el sitio debe estar ubicado en su alojamiento personal.

Por ejemplo, en este blog utilizo la plantilla The7, que viene con el complemento WPBakery.

Puede seleccionar un dominio en el servicio:

• Reg.ru - registro de dominio
• Timeweb.com: si compra un dominio inmediatamente con hosting, entonces será más rentable comprarlo aquí

El registro de dominio es el mismo para todos los servicios:

Registrar una cuenta en el servicio;

Seleccione una opción de dominio, el nombre debe ser libre;

Seleccione una zona (ru, com, рф, etc.);

Ingrese los datos de su pasaporte, si se está registrando como entidad legal, luego los datos de la empresa;

Pague por un dominio por un año (o varios años a la vez);

¡Listo!

Para asociar un dominio con el diseñador o hosting seleccionado, debe registrar servidores ns en la configuración del dominio. El soporte le ayudará a afrontar esta tarea si no puede resolverla por su cuenta.

Etapa 7. Diseñar la página de destino.

Cuando el diseño esté listo y haya decidido el método de distribución. El siguiente paso es terminar todo esto.

Sería imposible hablar de todas las herramientas de diseño en un solo artículo; tendrás que estudiarlas tú mismo. Opciones sobre cómo puedes hacer esto:

- este es mi curso, que grabé usando la plantilla The7 y el constructor WPBakery;

Tilda.Education: lecciones y seminarios web sobre el diseñador Tilda;

canal WPlovers- el chico está grabando lecciones en Elementor;

Base de conocimientos de LPGenerator: respuestas a preguntas frecuentes sobre la plataforma LPGenerator.

Etapa 8. Adjunte herramientas adicionalesChat en línea

El chat online aumenta la conversión, ¡comprobado! Si hay algo que una persona no entiende y necesita consejo. No todo el mundo llamará o enviará un correo electrónico al soporte, es más conveniente preguntar y recibir una respuesta inmediatamente en un chat en línea. Puedes conectar, por ejemplo, Jivosite, yo mismo lo uso, me “trae” nuevos clientes. Puedes escribirme al chat “¡Hola!”

Devolución de llamadaMétrica

Es importante realizar un seguimiento de los indicadores del sitio web; sin números serás como un gatito ciego. Es importante comprender cuántas personas visitaron el sitio, cuántas dejaron una solicitud, qué indicadores generales tiene el sitio, incluso puede observar el comportamiento de los visitantes, cómo ven el sitio. Puede instalar Yandex Metrics y/o Google Analytics.

Reorientación

Si planea publicar publicidad en las redes sociales, instale el código de la red social deseada en su sitio web. Este código recopilará una lista de visitantes que visitaron su página de destino (es decir, interesados ​​en la oferta) y que tienen un perfil en las redes sociales. Luego podrás mostrarles tu publicidad en la red social seleccionada.

CRM

El CRM es responsable de garantizar que no desaparezca ni una sola aplicación del sitio, de modo que para cada aplicación comprenda qué acción se debe tomar (devolver la llamada, enviar una solicitud, reunirse, recordarse a usted mismo en 14 días, etc.). Esto es cierto si tienes un flujo de clientes, pero si tienes 2 o 3 por mes, entonces creo que no necesitas CRM.

Los CRM más populares son:

• AmoCRM (precio 499 - 1499 rublos/mes)
• Bitrix24 (precio, desde el plan gratuito hasta 11.990 rublos/mes)
• Hoja de cálculo de Google, Excel o lápiz y papel (si lo necesita con un presupuesto limitado)

Calculadora

Para algunos nichos, es importante utilizar una calculadora para calcular un servicio o producto. Esto no sólo es conveniente, sino que también aumenta la conversión de aplicaciones. Porque siempre es interesante pulsar botones, mover palancas y ver cuál será el precio final. Y también aumenta los indicadores de comportamiento de los motores de búsqueda.

La calculadora se puede solicitar a los desarrolladores, lo cual es costoso, o se puede utilizar un servicio ya preparado. Existe un servicio uCalc, que se puede adaptar a CMS populares, diseñadores o un sitio web personalizado. Construya su calculadora usando un constructor conveniente y agréguela al sitio.

Recolectar una base de suscriptores

Si decide recopilar los contactos de los clientes en una base de datos de suscriptores para enviarles correos electrónicos o mensajes SMS más tarde, deberá utilizar un servicio especial. Quizás quieras considerar SendPulse. Recientemente revisé este servicio, y puedes hacerlo. SendPulse tiene un plan gratuito con el que puedes probar el servicio. Si no es la suya, existen otras ofertas en el mercado, por ejemplo MailerLite, UniSender, JustClick, GetResponse, etc.

Etapa 9. Verificación

¡Entonces! Todo está configurado, conectado, el sitio ya está en Internet, hurra, bien hecho. Ahora es el momento de comprobarlo. ¿Qué debo comprobar exactamente?

Comprobación de texto

Asegúrese de revisar el texto o comuníquese con un corrector o redactor para que lo haga. Comprobamos el texto en busca de errores, bloques copiados accidentalmente durante el diseño, etc. Nada estropea más la impresión de una empresa seria que los errores en el texto.

Control de adaptabilidad

Asegúrese de revisar el diseño de la página de destino en su tableta y teléfono. ¿Se está adaptando todo bien? Sí, a veces sucede que no es posible disponerlo todo a la perfección, pero al menos conviene que sea legible y más o menos ordenado. Si un bloque no se puede adaptar correctamente, entonces deberá crear dos bloques idénticos, ocultar uno en la versión para computadora y ocultar el segundo en dispositivos móviles. Y cada bloque es conveniente de configurar para la resolución seleccionada.

Probando los botones

Compruebe que todos los botones tengan adjunto el valor requerido: anclar a la ubicación deseada, abrir una ventana modal, ir a otra página, etc.

Comprobación de formularios de solicitud

Envíe una solicitud de prueba y verifique la capacidad de entrega del correo electrónico. Si se ha integrado con CRM, verifique que la aplicación esté incluida en CRM.

Ejemplos de páginas de destino

Puedes ver ejemplos de landing pages que he desarrollado

Si necesita crear una página de destino para realizar un pedido, escriba los comentarios o deje una solicitud

RESULTADO

Si ha completado todos los pasos, felicidades, ¡su página de destino está lista para funcionar! Ahora necesita que su página de destino le atraiga clientes, para ello necesita configurar publicidad, pero esa es una historia para otro artículo. Espero que este artículo te haya resultado útil y hayas podido comprender todo el proceso de desarrollo de una página de destino llave en mano de alta calidad. Para cualquier duda, puedes escribir en los comentarios debajo de esta publicación. También puedes anotar tus métodos y trucos al crear un sitio web, será interesante leer y conocer tus logros :)

Fuentes de Google

Escribe tus pensamientos en los comentarios. ¡Nos vemos en otros artículos!

Aterrizaje, aterrizaje, aterrizaje, página de aterrizaje, sitio de una página, página de inicio, una página, sitio de venta, página de aterrizaje.

Tantos nombres, incluso completamente pervertidos, de una misma cosa. La cuestión es que casi no importa lo que hagas, necesitas un sitio de este tipo.

Bueno, ya que es necesario, resolvamos el problema de crearlo. ¿Crear una página de destino usted mismo? Después de este artículo, ¡no hay dudas!

Además, es correcto, significativo y da en el blanco. Como dicen, usted mismo puede crear su preciada página de destino de ventas.

Por si acaso o etapa 0

Se suele decir que los sitios de una sola página se crean para vender o conseguir contactos de una persona en línea, pero en realidad aquí hay una gama mucho más amplia de tareas:

Recibir nuevas solicitudes de bienes/servicios;

Aumentar el conocimiento de la marca;

Informar sobre la provisión de bienes/servicios;

Proporcionar asesoramiento sobre servicios;

Recibir currículums de los candidatos;

Atraer socios, distribuidores, representantes;

Proporcionar acceso al servicio;

Etcétera.

Antes de comenzar a crear, debe recordar que no puede intentar vender un producto y atraer distribuidores en un solo sitio. Y todo porque se trata de tareas diferentes, y esto significa páginas de destino diferentes.

Importante. Antes de crear, debes definir claramente el propósito de tu página de destino. Y recuerde: debería haber un objetivo.

Dejemos que esto reduzca el alcance de personas potenciales, pero aumente la efectividad de la página, lo que justificará todo económicamente.

PASO 1 – Dona o hazlo tú mismo

En este paso, debe determinar cuál de las dos opciones de solución elegirá.

Que hacer que hacer

Y serán seleccionados en función de sus recursos económicos y de tiempo. Veamos cada uno de ellos con sus pros y sus contras.

Constructor

Una vez, un cliente nos escribió una queja después de recibir el sitio. Su esencia era que no tomamos mucho dinero de manera justificada.

Todo parecía muy extraño, porque ya se había familiarizado con todo y había firmado el acuerdo. Pero no somos una mala empresa, por lo que nos resulta más fácil dejar ir en paz al cliente (no siempre) que intentar demostrar algo. Eso es lo que hicimos.

Y todo esto sucedió porque encontró un diseñador de páginas de destino en Internet y descubrió que podía hacerlo todo él mismo, dedicando literalmente de 5 a 6 horas y pagando no más de 1000 rublos al mes.

Pero usted y yo entendemos que usted mismo puede montar un “automóvil”, pero hasta dónde llegará, qué individual será, cuánto tendrá el equipamiento técnico adecuado...

Describimos en detalle todas las etapas de la creación de una página de destino con plazos en el artículo.

Ventajas:

• Barato. Mucho es así. 500-1000 rublos al mes y usted es el feliz propietario de un sitio web de una sola página;
• Justo. No necesita pensar en el diseño, la adaptación para dispositivos móviles o conectar notificaciones por SMS sobre nuevas aplicaciones a su teléfono. Todo esto ya está ahí y hecho para su conveniencia;
• Rápido. Puedes hacer y configurar todo muy rápidamente. Además, realizar cambios tampoco será difícil;
• Apoyo técnico. ¿Tienes una pregunta? Te responderán de la forma más rápida y exhaustiva posible. Una gran ventaja;
• Período de prueba gratuito. Ahora casi todos los diseñadores de páginas de destino tienen un período de prueba gratuito de 14 días. Regístrate y...

Una pequeña verdad de la vida. “¡14 días de regalos! Durante este tiempo, ganaré dinero usando una página de destino en el creador de sitios web y encargaré un hermoso sitio web a una agencia”, pensaron.

Después de 14 días, apenas lograron derrotar al diseñador, hicieron todo mal y no recibieron ni un solo pedido a través del sitio, se dieron cuenta de que los one-pagers no funcionaban.

Desventajas :

• Conocimiento. Necesita saber qué bloques utilizar, su secuencia, etc.

  ¿Decidiste echar un vistazo a tus competidores? ¡Excelente! Pero, ¿cómo sabes que tus competidores tienen una página de destino eficaz y muestran un buen rendimiento?

• Diseño. Si está trabajando con un diseñador por primera vez, no podrá mirar el diseño de la página de destino al final del trabajo sin lágrimas.

  Incluso si esta no es la primera opción. No esperes un diseño genial que diga "¡Guau!"

• Limitación. El número de bloques prefabricados es limitado, al igual que su funcionalidad. Las soluciones de diseño tampoco se presentan en la gama más amplia.

  Por lo tanto, si desea que un pájaro vuele aquí cuando una persona deja una solicitud (como si su solicitud se le hubiera ido volando con palomas mensajeras), puede olvidarse de esa idea.

Personalmente, podemos recomendar este creador de páginas de destino. Por lo general, remitimos a clientes que recién están comenzando o probando un nicho.

autónomos

Vayamos directo al grano y desde la experiencia. Encontrar un profesional independiente que cree por sí solo una página de destino de venta desde cero y llave en mano es IMPOSIBLE. Bueno, es verdad.

Es posible encontrar especialistas individuales: un diseñador que creará el diseño de un futuro sitio web, o un programador que lo creará, pero no existe ningún monstruo que pueda crear un sitio web de CALIDAD por dentro y por fuera.

Por todo el trabajo me refiero también a personas como: comercializador de Internet, redactor publicitario, director de proyectos. Es simplemente imposible ser bueno en todo, al menos físicamente.

Por tanto, la forma ideal de trabajar con un autónomo es cuando tú mismo analizas, recopilas y preparas todo.

Y el diseñador y maquetador que se encuentra en el intercambio independiente simplemente lo implementa y sin ninguna iniciativa.

Ventajas:

• Tiempo. Tanto un más como un menos. El beneficio es que usted se libera de la mayor parte de la molestia de implementar la apariencia y el componente técnico.
• Calidad. La principal ventaja. Lo harán cien por ciento mejor que si lo hicieras tú mismo desde cero.

  Como mínimo, porque tienen experiencia y conocimientos que tú tienes en su campo, seamos honestos, casi ninguno.

Desventajas :

• Responsabilidad. Si el sitio no funciona, nadie tiene la culpa excepto usted. Ya que eres tú quien los controla y habla según sea necesario.

  Buscar. Necesitas conocimientos especiales de dónde buscarlos, cómo asignarles tareas y… también necesitas rellenar un brief, mostrar especificaciones técnicas, etc.

• Tiempo y nervios. Es hora de encontrar un profesional independiente, es hora de crear tareas, es hora de hacer un prototipo de página de destino, es hora de controlar. Perderás mucho tiempo y nervios.

  La mayoría de los autónomos son unos vagos (pido disculpas, pero así son las cosas), por lo que se producirán retrasos en los plazos y pérdidas periódicas de los radares de comunicación.

  Y esto es lo mínimo que puede esperar cuando desea crear una página de destino de forma económica.

• Dinero. Tendrás que desembolsar dinero, ya que un buen especialista sin “conexiones” cuesta bastante.

  Un diseño de calidad media costará entre 8 y 10 mil, el diseño también costará alrededor de esta cantidad. Nuevamente, todo depende de la complejidad del proyecto y de los propios artistas.

• Estafadores. El trabajo se estructura de la siguiente manera: 50/50.Pago por adelantado y luego el pago restante una vez finalizado el proyecto.

  No quiero ofender a nadie, pero entre los autónomos hay mucha gente que... no acepta el proyecto después de recibir un anticipo. En pocas palabras, se pierden.

Ahora un poco sobre el pago: si decides trabajar con un profesional independiente, te recomiendo el siguiente esquema de pago: haz un pago por adelantado del 50 por ciento como transacción segura (casi todos los intercambios lo tienen).

Y transferir el resto del importe directamente al autónomo. En este caso, pagará de más el 15%, pero se protegerá.

Truco de vida. Si un autónomo le va a estafar, le disuadirá de realizar una transacción segura. Esta será tu señal.

Etapa 2: ¿a quién y qué?

El bloque más aburrido (pero más necesario) de este artículo. No importa hacia dónde vayas. Usted mismo creará una página de destino eficaz o la enviará a una agencia especializada. En cualquier caso, necesitas saber 3 cosas:

Su público objetivo;

La escalera de Hunt;

El interior de su empresa.

La única diferencia es que si crea una página de destino usted mismo, tendrá que escribir y pensar en todo usted mismo.

La agencia le pedirá que complete un resumen detallado, gracias al cual ellos mismos hacen la programación del público objetivo, etc. Nosotros, sin embargo, tomamos una ruta diferente y completamos el informe nosotros mismos, comunicándonos con usted a través de Skype.

Creemos sinceramente que esta es la única forma de obtener toda la información, ya que es posible realizar las siguientes preguntas durante la conversación. Y esas preguntas siempre aparecen.

El público objetivo

Ya hemos escrito sobre la definición del público objetivo, o incluso sobre la definición más profunda del cliente.

Este estudio le permitirá comprender quién es su cliente potencial, qué miedos, objeciones y deseos tiene en relación con su producto/servicio.

¿En qué deberías presionar en una futura página de destino, qué palabras usar, qué imágenes es mejor insertar? Un diagrama de resumen simplificado se ve así:

Escalera de búsqueda del público objetivo

Pero, ¿qué aportará el conocimiento de la escalera de Hunt? Al igual que el avatar del cliente, proporcionará la estructura misma de la futura página de destino.

Te lo contaré brevemente, pero en aplicación a un sitio web de una sola página, porque muy a menudo los dueños de negocios no entienden en qué etapa de conocimiento se encuentra su cliente potencial (si eres demasiado vago para leer, entonces mira el video).

En definitiva, antes de tomar una decisión de compra una persona pasa por 5 pasos/niveles de conciencia:

Etapa “Indiferencia”. No hay ningún problema.

Etapa “Conciencia”. Hay un problema, pero no hay solución.

Etapa “Comparación”. Las opciones para resolver el problema se comparan entre sí.

Etapa “Selección”. La opción de solución ha sido seleccionada. Buscando productos.

Etapa “Compra”. Elección entre proveedores de productos.

¿Cómo puede ayudarle esta complejidad a la hora de crear una página de destino? Veamos cada etapa y cómo proceder:

Etapa “Indiferencia”. Primero debes crear el problema en la cabeza de la persona. Demuestre que si no lo compra, entonces todo irá mal.

Etapa “Conciencia”. Debes mostrar en las primeras pantallas que existen diferentes opciones para solucionar su problema.

Etapa “Comparación”. Debe transmitir que su solución es mejor que otras, y para ello puede hacer una tabla comparativa, ofrecer una reseña del producto, resultados de investigaciones, asesoramiento personal sobre la selección, etc.

Etapa “Selección”. Debe mostrar qué oferta es adecuada para él, o mejor dicho, en qué forma/paquete. Para ello, te revelamos más beneficios de nuestros productos.

Etapa “Compra”. Es necesario mostrar, en primer lugar, los beneficios de trabajar con su empresa, y solo luego hablar sobre el producto y que es el mejor.

Parece que no es necesario, pero... Por ejemplo, si una persona elige entre comprar un apartamento o construir su propia casa, entonces la página de inicio de la casa debería tener un bloque que explique por qué una casa es mejor que una. departamento.

Paquete

Puedes imaginar aproximadamente cómo se verá tu sitio web en tu cabeza. Y es bueno si tienes una identidad corporativa o un libro de marca (ideal, incluso diría).

¿Qué pasa con los beneficios de su producto o empresa en su conjunto? Y varias docenas de preguntas más que debes responder antes de pasar a crear un prototipo y un sitio web.

Porque las preguntas correctas forman las respuestas correctas, que usted toma y empaqueta en su sitio web. Esta etapa te ayudará a tomar todas las cosas más valiosas de tu empresa y lucirlas.

Para que entiendas la esencia, aquí tienes un ejemplo de 10 preguntas que te ayudarán a entender mejor/profundo tu empresa y tu producto, y servirlo “con una salsa maravillosa”:

Formule de 3 a 5 "razones por las que objetivamente es más rentable comprarle a usted que a la competencia".

¿Qué características de producción tiene su empresa?

¿Ofrecen capacitación interna al personal?

Compare el producto con productos similares. Indique las ventajas y desventajas.

¿Quién es la persona o personas de la empresa?

¿Qué bonos estás dispuesto a dar a los clientes al comprar grandes cantidades?;

Describir detalladamente las etapas de trabajo con el cliente desde el primer contacto hasta la finalización del trabajo.

Cuéntenos sobre las condiciones financieras de trabajo (pago anticipado, cuotas, aplazamiento de primeros pagos, préstamos de productos, descuentos, venta de productos, recompra de activos ilíquidos, etc.).

¿Qué publicaciones existen sobre la empresa o de la empresa? (comentarios de expertos, entrevistas, jueces de programas de televisión, columnas, artículos).

Tus clientes son estrellas.

ETAPA 3 – Prototipo

Finalmente llegamos a la parte más interesante. Ahora crearemos tu futuro sitio web.

O más bien, por ahora, cómo hacer un prototipo usted mismo, pero al menos esto es más interesante que simplemente describir al público objetivo.

Paso 1. Estructura del prototipo

Un prototipo es la estructura y secuencia de bloques de una futura página de destino, que puedes construir fácilmente a partir de los criterios de selección y las objeciones de tu público objetivo.

La mejor manera de hacerlo es la siguiente: toma una hoja de papel y escribe una secuencia de bloques/significados. Se parece a esto:

Una gorra;

Beneficios de la empresa;

Catalogar;

Producción propia;

Existencias;

Equipo;

etc.

Los bloqueos los prescribimos tú y yo, pero tampoco debemos olvidarnos de las dos estructuras clásicas sobre las que se construye cualquier material publicitario, y la landing page no es una excepción:

(productos y servicios);

PmPHSA(). Significa Dolor, más Dolor, Esperanza, Solución, Acción (dolor, mayor dolor, esperanza, solución, llamado a la acción).

Para que no te devanes los sesos pensando en cómo transmitir uno de los significados seleccionados y te hagas la vida mucho más fácil al crear tú mismo un prototipo, este artículo te ayudará.

Perdón por mi franqueza, pero para mí es muy agradable ver gente que también trabaja de noche (simplemente hazlo sin comprometer tu salud). Empecé a pensar que los adictos al trabajo se habían extinguido. En cuanto a los resultados de la cooperación, solo mencionaré un hecho: en los días pico recibimos 140 solicitudes por día y tuvimos que contratar un departamento de ventas completo para el canal de marketing en Internet. ¡Gracias!

reseña abierta Dmitry Novozhilov, D-color

¿Sabes qué es el marketing por correo electrónico? Por ejemplo, no lo sabía antes de conocer a los chicos de Convert Monster. Ingenuamente creí que ésta era simplemente una hermosa palabra. Creí y al mismo tiempo escuché que ayuda a trabajar de manera más efectiva con la base de clientes. Hace seis meses adquirimos una base de clientes. Fue compilado a partir de aplicaciones diarias para franquicias de jardines de infantes. Hubo muchas solicitudes, pero la conversión se mantuvo en un nivel muy bajo. Luché con este fenómeno: intenté enviar cartas a la base de datos yo mismo. Siempre no había tiempo suficiente: para redactar bien el próximo boletín se necesitaba medio día laborable. Con cada minuto invertido, surgía cada vez más la necesidad de hacer una cadena competente. Pero hasta ahora las cartas se han enviado una vez por semana o una vez cada 2 meses. No hubo coherencia en el trabajo. Algo faltaba. Durante mucho tiempo no pudimos entender qué era exactamente. Los chicos de Convert Monster rápidamente se pusieron manos a la obra. Los primeros resultados no se hicieron esperar. Después de habilitar la cadena de correo electrónico inicial, realizamos varias transacciones utilizando la base de datos anterior. Cubrieron los costos de lanzamiento del marketing por correo electrónico. Después de un par de meses, notamos que la conversión se ha triplicado. Y esto es sólo el principio. Actualmente estamos trabajando para aumentar aún más la tasa de conversión actual. Por ejemplo, tres veces más. Calcule usted mismo: - ¿Cuánto dinero generará aumentar la tasa de conversión 2 veces? ¡Es mínimo! - ¿Cuánto obtendrás si cierras el porcentaje mínimo de clientes de tu base existente? ¿Aún no estás seguro de si contactar con Convert Monster?

reseña abierta Sergey Degtyarev

Llevamos mucho tiempo utilizando el tráfico de Internet para atraer clientes. Aproximadamente un año y medio. Durante este tiempo, cambiamos 2 proveedores hasta que nos recomendaron Convert Monster. Las condiciones de cooperación para la mayoría de empresas que prestan servicios similares son similares: presupuesto mensual, elaboración de una campaña publicitaria y listo. Entonces la campaña se vuelve obsoleta, comienza el declive y, como consecuencia, la falta de clientes. Luego pide a los directivos que cambien de táctica, estrategia, titulares, núcleo semántico: apela a todos los santos. Y ellos (los administradores, no los santos) no hacen nada. O tal vez lo hagan, pero no hay resultado. Un día te pone los dientes de punta, dejas esta oficina por otra y luego empiezas a buscar la siguiente. ¡Importante! Antes de empezar a buscar el primero, pruébelo usted mismo. Por supuesto, tus resultados en este momento son los mejores posibles, ¡son simplemente CERO! Llegamos a Convert Monster desesperados. Este fue el momento en que Yandex hizo una configuración: eliminaron la garantía en la que estábamos tan bien sentados y la exprimieron tanto como fue posible e IMPOSIBLE. Entendimos que la felicidad no llegaría instantáneamente, pero la esperamos. ¡Y de hecho! Comenzó a llamar lentamente a nuestras puertas: las solicitudes y las ventas comenzaron a llegar. Luego el fracaso: verano, temporada baja, trabajo en negativo. Pero los muchachos no se dieron por vencidos y no redujimos los presupuestos, porque sabemos QUÉ amenaza. ¡Nunca bajes tu presupuesto ni abandones el sitio que te genera ingresos! Resultado final: más de 6 millones de ingresos a través de Yandex.Direct. ¡Estamos más que satisfechos con nuestra cooperación! Si tienes alguna duda sobre si trabajar con Convert Monster o no, ¡contáctanos! Te diremos por dónde empezar. Entonces tu camino hacia ellos será más largo y la salida final a Convert Monster será tu "exhalación" y la luz al final del túnel. Todos los caminos seguirán conduciendo a ellos. Si los estás buscando, claro. Es cuestión de tiempo. Simplemente posicionarse como una empresa que está lista para desarrollarse y escalar. De lo contrario, simplemente no estarán interesados ​​en ti.

abrir reseña Isabella Ritz, Ritz Group LLC

Antes de comunicarme con usted, pedí una página de destino a una empresa y la configuración de Yandex Direct a otra. Ambas empresas son muy conocidas en el mercado, pero cada una de nuestras combinaciones de sitio + campaña publicitaria no buscaba ayudar, solo criticaba al otro intérprete: programadores - directólogos, directólogos - programadores. Como resultado, siguiendo su recomendación, nos pusimos en contacto con usted y en solo 4 meses aumentamos 4 veces el número de solicitudes (hasta 120 por mes) y nuestro volumen de ventas en línea a varios millones de rublos.

reseña abierta Vladislav Shupenya, empresa Kimberlit

Saludos, mis queridos lectores. Hoy hablaremos de aspectos técnicos con los que podemos incrementar la conversión en ventas de nuestros bienes o servicios. Uno de los puntos importantes es una página de destino bien diseñada con productos. La llamada página de destino, de cuya creación hablaremos más adelante y obtendremos códigos de página ya preparados.

¿Qué es una página de destino? Esta es la página a la que suelen acceder las personas después de hacer clic en un anuncio. Creado para una oferta: producto, servicio o suscripción. Una página de destino eficaz es la piedra angular del éxito del marketing online. El producto puede ser el mejor del mercado, los anuncios están perfeccionados, pero sin una buena landing page los esfuerzos no dan resultados al 100%. Les dice a los visitantes qué se ofrece y por qué deberían quererlo. El sentido de urgencia contribuye a una rápida toma de decisiones y a la transición del usuario a la categoría de cliente.

¿Cómo crear una página de destino? Es un error creer que la respuesta está en la capacidad de componer tipografía. Una buena página de destino es el resultado de un trabajo coordinado en objetivos, texto, diseño y código. Las páginas de destino, cuyos ejemplos se encontrarán a continuación, ayudarán a los principiantes a aprender los conceptos básicos del diseño, pero no reemplazarán los textos de conversión ni la comprensión del público objetivo. También puedes crearlos utilizando varios diseñadores de páginas de destino.

Entonces, antes de crear una página de destino, pregúntese:

• ¿Qué hará una persona después de llegar a la página de destino? ¿Comprará algo? ¿Llenarás el formulario? ¿Suscribirse al boletín? Antes de realizar un seguimiento de su tasa de conversión, establezca objetivos claros.
• ¿Quiénes son mis competidores? En realidad, se trata de tres preguntas: ¿quiénes, qué tan exitosos son y cómo se pueden aplicar sus logros? La imitación es la forma más sincera de adulación. Si sus competidores están haciendo algo que funciona, replíquelo en su sitio.
• ¿Quién es mi audiencia? Cuanto mejor comprenda su nicho y público objetivo, mayores serán las posibilidades de que sus esfuerzos valgan la pena.

Debes ofrecer toda la información necesaria, pero no tanta como para abrumar y ahuyentar a tu cliente potencial.

Ejemplos de creación de una página de destino + codificación para principiantes

Antes de comenzar, echemos un vistazo rápido a HTML y CSS. Comprender cómo funcionan le ayudará a crear un aterrizaje.

HTML es un lenguaje de marcado del navegador para la visualización de sitios web. Escrito utilizando etiquetas entre corchetes angulares que definen el contenido.

La etiqueta se abre () y se cierra () alrededor del relleno:

contenido

Para realizar ajustes, se agregan atributos después del nombre:

contenido

CSS: define cómo organizar los elementos HTML. Consta de selectores, propiedades y valores:

#selector (propiedad: valor;)

El selector coincide con el nombre de una etiqueta específica en html. Cambiar valores y agregar propiedades ajusta su apariencia. Puede crear páginas que se vean diferentes entre sí aplicando diferentes estilos CSS al mismo HTML.

5 pasos iniciales

Para un diseño rápido, usaremos una plantilla con un diseño mínimo basado en bootstrap. Se trata de un sistema con selectores propios, que se utiliza en todo el mundo para agilizar el diseño.

Parece modesto.

A partir de este pescado se crea en varias etapas un sitio web para todos los gustos.

Estructura de directorios en la carpeta:

• index.html: Este es el archivo principal que editaremos.
• /assets: los archivos auxiliares se encuentran aquí:
• /css: el directorio contiene estilos de iconos y de arranque. El archivo que editaremos es main.css.
• /img: carpeta para imágenes del sitio.
• /fonts: fuentes de iconos.
• /js: arranca archivos javascript.

Paso 1: usar un encabezado

El título y los subtítulos son lugares clave que ayudan a transmitir el valor de la oferta de manera clara.

Cambiemos el título y el nombre del sitio. Aquí no es necesario tener habilidades de mecanografía: usted escribe su propio texto en los lugares resaltados en amarillo en la pantalla.

Paso 2. La brevedad es hermana de la conversión. Agregar beneficios y tarifas

Necesitará 4 secciones:

• ventajas;
• tarifas;
• reseñas;
• llamada a la acción.

Creemos una sección del contenido principal “main”, en la que insertaremos las secciones necesarias:

…..
…..
…..
…..

Rellenar con relleno en lugar de puntos.

Para la sección de beneficios necesitarás este código:

Ventajas
Rápido

Confiable

Sed diam noummy

Rentable

Elit, sed diam noummy

Técnicamente

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Confiable

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Rentable

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Técnicamente

Lorem ipsum dolor sit amet, consectetuer adipiscing

Confiable

Lorem ipsum dolor sit amet, consectetuer adipiscing

Rentable

Lorem ipsum dolor sit amet, consectetuer adipiscing

Contenido para mayor claridad:

Todavía parece descuidado, pero no hay motivo para entrar en pánico, continuemos.

Anotamos precios. El contenido cambia de la misma forma que en el primer paso. Descripción general con la clase “tarifs” y tres tarifas.

Planes tarifarios

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Tarifa No. 1
$10

por mes/por persona

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Orden
Tarifa No. 2
$20

por mes/por persona

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Orden
Tarifa No. 3
$30

por mes/por persona

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Orden

Tiene este aspecto.

Por ahora, no estamos interesados ​​​​en la apariencia de la futura página de destino; veremos ejemplos de cambios de estilo a continuación.

Paso 3: señales de confianza y llamado a la acción

El uso de señales específicas indica a los visitantes que la marca es digna de confianza. Las señales pueden adoptar muchas formas, pero la clásica son los comentarios de los clientes.

Opiniones de los usuarios

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo:

“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo".
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo".

Hagamos un llamado a la acción.

Benefíciese al realizar su pedido hoy

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:

¡Ordenar ahora!

Las reseñas ayudarán a los clientes potenciales a decidir comprar el producto. Para mayor claridad, necesitamos avatares, por lo que los colocaremos inmediatamente debajo de cada cita.

Nombre del cliente.

Paso 4: Integración compatible con redes móviles y dispositivos móviles

Para implementar la grilla, necesitamos contenedores Bootstrap. Es importante recordar el número total de segmentos de columna válidos: 12. La clase determina el ancho de visualización del contenido. Lo bueno de esta cuadrícula prefabricada es que los contenedores están diseñados teniendo en cuenta la capacidad de respuesta y se pueden utilizar inmediatamente en dispositivos móviles. Descripción detallada en el sitio web oficial. La cuadrícula se ve así.

El contenido de “principal” se envolverá en un contenedor. Para ello, en la parte superior está escrito lo siguiente:

… .

Si necesita que el bloque se ajuste a todo el ancho de la pantalla, entonces se inserta el contenedor en su interior. Aquí será un jumbotron y un llamado a la acción.

Envolveremos todos los elementos que requieran colocación uno encima del otro con separadores de líneas.

Ahora podemos ajustar el ancho de las columnas, centrándonos en la cuadrícula de arranque. Después de envolver, el relleno dejó de pegarse a los bordes de la pantalla y aparecieron prolijas muescas.

Establecemos precios en una fila usando la clase de columna col-lg-4. Dentro de las líneas de las filas, ya no es necesario escribir divs separados para ajustarlos; se pueden combinar con los existentes separados por un espacio.

Por analogía, configuramos columnas para la sección de reseñas y beneficios. Si necesita mover un elemento hacia un lado, use la clase de columna de desplazamiento col-lg-offset-2. El número al final determina en cuántas columnas base se producirá el cambio.

Paso 5. Fuentes e íconos

Implementamos fuentes de encabezado de Google Font. Cuando esté seleccionado, abra la pestaña de importación y copie los datos de ella al archivo main.css. También agregamos selectores de títulos al archivo para el cual se usa la nueva fuente.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* importar fuente para encabezados */
.navbar-marca,
h1,
h2,
h3,
h4,
h5,
h6 (
familia de fuentes: "Roboto Condensed", sans-serif; /* Salida de fuente de Google */
}

Para mayor claridad, las ventajas se describen mediante una clase con el nombre autoexplicativo text-center e íconos FontAwesome del conjunto de arranque.

En este punto la preparación está completamente completa.

Página de destino: ejemplos de códigos con oferta, paralaje y contador

Utilizamos los tres tipos más populares: con frase, con forma y con contador de cuenta atrás. A medida que avance el diseño, la plantilla se complementará con efectos.

Ejemplo 1: con una frase

Configuremos el fondo de la parte principal y el relleno para que cubra la primera pantalla.

Jumbotrón (
fondo: #f5f5f5 url(../img/fon.jpg) parte superior central sin repetición;
ancho máximo: 100%;
relleno superior: 250 px;
fondo de relleno: 200px;
alineación de texto: centro;
}

Cambiemos el tamaño del encabezado del jumbotron de h2 a h1. A continuación, escribimos estilos para los elementos que deben cambiarse.

Empecemos por los iconos.

Beneficios i(
color: #cac4c4;
}

Después del signo almohadilla, se especifica un color. Puede elegir su propia opción utilizando tablas de colores html o un editor de imágenes.

Sangría para títulos de sección

sección h2 (
relleno superior: 30px;
margen inferior: 25px;
}

Estamos arreglando la apariencia de los aranceles. Por conveniencia, creamos nuestras propias clases para los elementos que queremos resaltar específicamente.

Tarifa No. 1
$10

por mes/por persona

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Orden

Y mucho CSS. Los lugares de los que son responsables las secciones se indican en los comentarios - /* entre barras con un asterisco */

/* =========Estilos tarifarios======== */
/* vista general de la tarifa */
.precio_artículo(
fondo: #f2f2f2;
posición: relativa;
mostrar: -webkit-flex;
pantalla: flexible;

dirección flexible: columna;

alinear elementos: estirar;
alineación de texto: centro;
-webkit-flex: 0 1 330px;
flexionar: 0 1 330px;
relleno: 2em 3em;
margen: 1 em;
color: #262b38;
cursor: predeterminado;
desbordamiento: oculto;

}
/* cambia el fondo al hacer clic */
.pricing_item: pasar el cursor (
color: #444;
antecedentes: #daebef;
}
/* fondo de etiqueta de precio individual en cada tarifa */
.pricing_item:primer hijo .price (
antecedentes: #9ba9b5;
}
.pricing_item:nth-child(2).precio (
antecedentes: #1f6098;
}
/* en pantallas anchas la columna de tarifa central tiene sangría y está resaltada */
@media pantalla y (ancho mínimo: 66.250em) (
.precio_artículo(
margen: 1,5 em 0;
}
.presentado(
índice z: 10;
margen: 0;
tamaño de fuente: 1,15 em;
}
}
/* título */
.pricing_item h3 (
tamaño de fuente: 2em;
margen: 0,5 em 0 0;
color: #1d211f;
}
/* fondo de la etiqueta de precio */
.precio(
tamaño de fuente: 2em;
peso de fuente: negrita;
color: #fff;
posición: relativa;
índice z: 100;
altura de línea: 95 px;
ancho: 100px;
altura: 100 píxeles;
margen: 1,15em automático 1em;
radio fronterizo: 50%;
fondo: #77a5cc;
-webkit-transición: color 0,3 s, fondo 0,3 s;
transición: color 0,3 s, fondo 0,3 s;
}
/* divisa */
.divisa(
tamaño de fuente: 0,5 em;
alineación vertical: súper;
}
/* aclaración de la propuesta */
.oración (
peso de fuente: negrita;
margen: 0 0 1em 0;
relleno: 0 0 0,5 em;
color: #2a6496;
}
/* lista */
.pricing_item ul (
tamaño de fuente: 0,95 em;
margen: 0;
relleno: 1,5 em 0,5 em 2,5 em;
alineación de texto: izquierda;
}
/* listar elementos */
.pricing_item li (
relleno: 0,15 em 0;
}
/* botón de orden de tasa */
.botón de elemento de precio (
peso de fuente: negrita;
margen superior: automático;
relleno: 1em 2em;
color: #fff;
radio del borde: 5px;
antecedentes: #428bca;
-transición-webkit: color de fondo 0,3s;
transición: color de fondo 0,3 s;
}
/* cambia de color cuando se presiona el botón */
Botón .pricing_item: desplazar el cursor,
Botón .pricing_item: foco (
color de fondo: #285e8e;
}
/* antecedentes arancelarios*/
.bg-2 (
fondo: #dddddd;
}

Resultado

Opiniones de los usuarios. Démosles una mirada ordenada e indiquemos su ubicación.

/* =========Estilos de testimonios======== */
testimonios (
relleno: 4em 0;
alineación de texto: centro;
}
.testimonios .avatar img (
radio fronterizo: 50%;
flotador izquierdo;
pantalla: en línea;
margen derecho: 1em;
ancho: 65 píxeles;
altura: 65 píxeles;
margen inferior: 30px;
}
.testimonios .avatar p (
alineación de texto: izquierda;
acolchado superior: 1em;
color: #5d5d5d;
peso de fuente: 900;
}

Ya solo queda decorar la última llamada a la acción y el pie de página.

/* Acción */
.acción(
antecedentes: #476177;
altura mínima: 180 px;
ancho: 100%;
relleno: 4em 0;
alineación de texto: centro;
}
.acción h2 (
color: #fff;
peso de fuente: 300;

}
.acción p(
color: #fff;
sombra de texto: 0 1px 2px rgba(0, 0, 0, .2);
tamaño de fuente: 1,2 em;
}
.acción .contenedor (
margen superior: 3 em;
}
/* Pie de página */
pie de página (
antecedentes: #333333;
relleno: 1em 0;
alineación de texto: derecha;
}
pie de página p(
color: #fff;
altura de línea: 1;
transformación de texto: mayúsculas;
tamaño de fuente: 0,7 em;
margen superior: 0,5 em;
}

Al botón de pie de página se le asigna la clase de arranque incorporada btn-default.

Dando vida a la plantilla. Introduciremos un desplazamiento suave y botones para las secciones, así como animación de texto en la primera pantalla.

Para que las transiciones funcionen, reemplazaremos algunas de las clases de la sección con id, para beneficios y tarifas. Y agregaremos enlaces a la identificación de los botones. Captura de pantalla: qué se adjunta a qué, resaltado con un marcador amarillo.

Establecemos sangrías para los botones: jbutton. El desplazamiento cuando se presiona funciona, pero de manera muy abrupta.

Las transiciones suaves se crean usando javascript o jquery. Este último está conectado a las plantillas Bootstrap de forma predeterminada.

El desplazamiento ahora es fluido.

Agregar animación al texto usando Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Este es un código fuente abierto listo para usar y se puede utilizar en cualquier sitio web. Coloque el archivo de Github en la carpeta css y especifique la ruta.

Seleccionamos los efectos aquí: https://daneden.github.io/animate.css/. Hemos seleccionado fadeInDown. Está escrito en el código así:

Ahora, cuando la página se cargue o actualice, el texto se animará. Listo.

Ejemplo 2: con forma y efecto de paralaje

Cuantos más campos de formulario se presenten a un visitante, es menos probable que los complete. Solicite sólo la información mínima necesaria.

Está ensamblado por analogía. Cambiaremos fondos y colores. Y, por supuesto, agregaremos una forma.

Comencemos con el paralaje.

Cambiemos el fondo del jumbotron a transparente:

fondo: transparente;

Dentro del encabezado insertaremos el script:

$(ventana).scroll(función(e)(
paralaje();
});
función paralaje())(
var desplazado = $(ventana).scrollTop();
$(".bgparallax").css("arriba",-(desplazado*0.2)+"px");
}

La primera línea del cuerpo es un contenedor de paralaje:

Y en CSS su comportamiento es:

Bgparalaje (
fondo: url(/../img/fon.jpg) repetir;
posición: fija;
ancho: 100%;
altura: 300%;
arriba: 0;
izquierda: 0;
índice z: -1;
}

El paralaje está listo. Pero realizar cambios en el código y un nuevo fondo requiere reasignar la combinación de colores.

Oscurecer el menú:

Barra de navegación predeterminada (
color de fondo: #333;
color del borde: #444;
color: gris oscuro;
radio de borde: 0;
}

Barra de navegación predeterminada .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
color: gris oscuro;
color de fondo: rgba(0, 0, 0, 0.5);
}

Reemplazamos la oración en jumbotron por una nueva, con el código de formulario:

La página de destino convierte a los visitantes en clientes
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.

• 
  
  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  

Y prescribimos la apariencia.

/* forma */
.lista de formularios de cabeza (
tipo de estilo de lista: ninguno;
altura de línea: 26px;
peso de fuente: 400;
relleno: 0px;
margen inferior: 40px;
}
.forma de cabeza (
desbordamiento: oculto;
posición: relativa;
color de fondo: rgba(0,0,0,.4);
relleno: 35px 40px;
radio del borde: 8px;
}
entrada, botón, seleccionar, área de texto (
ancho: 100%;
margen inferior: 10px;
}
.headform-lista li .fa (
posición: absoluta;
arriba: 0px;
izquierda: 0px;
ancho: 42px;
tamaño de fuente: 24px;
alineación de texto: centro;
}
.headform-lista li(
posición: relativa;
altura mínima: 38px;
relleno-izquierda: 62px;
margen inferior: 20px;
}
.jumbotron p (
color: #fff;
tamaño de fuente: 16px;
estilo de fuente: cursiva;
}

Aquí también acabó el texto del jumbotron, que exigía cambios.

Estamos cambiando las tarifas.

/* vista general de la tarifa */
.precio_artículo(
color de fondo: rgba(0,0,0,.4); /* línea cambiada */
radio del borde: 4px; /* línea cambiada */
posición: relativa;
mostrar: -webkit-flex;
pantalla: flexible;
-webkit-flex-direction: columna;
dirección flexible: columna;
-webkit-align-items: estirar;
alinear elementos: estirar;
alineación de texto: centro;
-webkit-flex: 0 1 330px;
flexionar: 0 1 330px;
relleno: 2em 3em;
margen: 1 em;
color: #f2f2f2; /* línea cambiada */
cursor: predeterminado;
desbordamiento: oculto;
sombra de cuadro: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* cambia el fondo al hacer clic */
.pricing_item: pasar el cursor (
color: #444;
fondo: #ddd; /* línea cambiada */
}

Ahora se ven así: un fondo transparente y esquinas redondeadas.

La plantilla está lista.

Ejemplo 3: con contador de cuenta atrás

Volvemos a cambiar el relleno del jumbotron y volvemos a colorear la plantilla para que coincida con el nuevo fondo, similar a la plantilla anterior. Conecte el guión del contador:

HTML





el tiempo no espera
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  

var myCountdown1 = nueva cuenta atrás((
tiempo: 86400 * 3, // 86400 segundos = 1 día
ancho: 300
, altura: 60
, rangoHola: "día"
, estilo: "voltear" //