Cómo crear una página de destino HTML de alta conversión

Hay pocas cosas más fáciles que acceder a toda la información del mundo. Todo lo que necesita es que haga clic en un anuncio, un enlace o copie una dirección web en su navegador y es probable que encuentre todo lo que estaba buscando y más.

Sin embargo, no siempre fue tan fácil.

Era el año 1989. Tim Berners-Lee trabajaba en el CERN en Ginebra, Suiza, donde propuso un proyecto de hipertexto global, un proyecto que llegó a conocerse como World Wide Web.

Durante dos años, Tim trabajó en el diseño, un diseño que incluía las especificaciones de HTML, URI y HTTP. En octubre de 1990, el programa World Wide Web estaba disponible en el CERN y en el verano de 1991, estuvo disponible para todos en el mundo.

El primer sitio web del mundo se puso en marcha el 6 de agosto de 1991 y su propósito era proporcionar información sobre cómo los usuarios podían configurar un servidor web y crear sus propias páginas web.

Ese sitio web todavía está activo y se ve así:

Según los estándares modernos, la página no es llamativa ni atractiva, no tiene enlaces de navegación, ni multimedia ni una estructura real. Además, requirió mucho tiempo y codificación HTML para completar.

El mundo ha cambiado inevitablemente a causa de ello. Lo que no ha cambiado es que todavía se necesita bastante tiempo para crear una página web, esto incluye páginas de destino posteriores al clic, desde cero.

Esto presenta un pequeño problema para los especialistas en marketing que no hablan los lenguajes del código.

Sí, son idiomas , plural.

Para crear páginas de destino post-clic, usted mismo, desde cero, necesita conocer HTML y CSS.

Profundicemos en qué son HTML y CSS y qué papel desempeñan en la creación de páginas de destino posteriores al clic.

¿Qué es la página de destino HTML?

HTML (Hyper Text Markup Language) se utiliza para colocar copias, imágenes y otros elementos en una página web, lo que ayuda a definir el diseño de la página.

HTML consta de etiquetas de marcado y estas etiquetas son palabras clave rodeadas por corchetes angulares.

Para demostrarlo, la siguiente imagen es un ejemplo muy básico de cómo las etiquetas HTML determinan cómo se verá su página:

Hay diferentes etiquetas HTML para decidir el diseño de los titulares, el logotipo de la marca, las imágenes, las viñetas, las listas numeradas, etc. Al crear una página de destino HTML, debe codificar manualmente:

1. Donde estará tu titular
2. La ubicación de la copia
3. Cómo enumerar los beneficios de su servicio
4. Qué debe decir la copia de su botón de CTA y dónde debe colocarse el botón

A continuación, se muestran algunas etiquetas html comunes para elementos de página:

Cada elemento de la página de destino posterior al clic debe escribirse con su etiqueta HTML respectiva.

Cuando haya terminado, su trabajo HTML se verá algo similar a esto:

Parece solo un montón de líneas, palabras y caracteres, ¿no es así? Cuando de hecho, todo es parte de un gran rompecabezas que genera esta página web:

Su página de destino publicada después del clic se verá genial solo si ha colocado todas las etiquetas HTML correctamente en sus ubicaciones adecuadas. HTML se usa actualmente en su quinta versión y se conoce como HTML5; la última versión numerada, no habrá una versión 6.

HTML5 incluye nuevos elementos como:

• Elementos semánticos, como encabezado, pie de página y sección
• Atributos de control de formulario, por ejemplo, fecha y hora
• Elementos gráficos, svg y lienzo
• Elementos multimedia, audio y video

Para obtener más información, pruebe los cursos de Codeacademy y Treehouse si está interesado en aprender a crear una página de inicio HTML post-clic simple.

¿Qué es CSS?

CSS (hojas de estilo en cascada) son las hojas que describen cómo se muestran los elementos HTML en la página web.

La parte "en cascada" de CSS permite que los cambios realizados en una hoja de estilo de nivel superior se distribuyan en cascada a lo largo de la página web. Esto le ahorra tiempo y le permite realizar cambios importantes en la apariencia de su página sin tener que pasar por cada hoja de estilo.

HTML se creó para describir el contenido de una página. CSS, por otro lado, fue creado por el World Wide Web Consortium para definir el estilo de la página, como la fuente y el color de la copia de la página de destino posterior al clic.

Así es como puede verse un ejemplo de CSS de fuente y color:

Para la opción de página de destino post-clic "hágalo usted mismo codificada", debe combinar HTML y CSS para crear una página que sea digna de generar clientes potenciales.

Veamos cómo se hace.

Cómo crear una página de destino HTML post-clic simple por ti mismo

Comience abriendo un editor de texto: use el Bloc de notas para Windows y TextEdit para Mac. No utilice procesadores de texto como MS Office u OpenOffice porque estos programas producen archivos que un navegador web no puede leer.

Para la codificación HTML y CSS, debe comenzar con archivos de texto sin formato.

Escriba código HTML como este en un editor de texto:

Ahora agreguemos algunos colores a este texto con la ayuda de CSS. Vaya al archivo HTML y agregue el código en rojo en la parte "encabezado" del archivo:

Esta hoja de estilo determina el color del cuerpo de la copia (violeta) y el color de fondo (amarillo verdoso). Recuerde ingresar los códigos de color correctos en la hoja de estilo, o su página final no saldrá como esperaba.

Así es como se verá su página:

A continuación, debe agregar fuentes. Para esto, agregue las siguientes líneas en el archivo HTML:

Así es como se ve su página después de agregar esas secciones de código:

Ahora, recuerde, los ejemplos anteriores son muy básicos y muy breves. Una página de destino optimizada después del clic sería más detallada, con imágenes, video, una llamada a la acción, formulario y también más larga. Imagínese cuánto tiempo llevaría codificar todos esos elementos de la forma tradicional ...

¿Listo para personalizar el código de tus páginas?

¿Qué pasaría si le dijéramos que hay otra forma, mucho más fácil, de crear su página de destino posterior al clic? Sigue siendo bricolaje, pero no requiere que te preocupes por las numerosas líneas de código en un editor de texto, lo que te hace pensar: "¿Cerré todas mis etiquetas?"

Crea tus páginas con Instapage

Instapage elimina la necesidad de un desarrollador y un diseñador, lo que permite a los especialistas en marketing que no son codificadores crear páginas dedicadas sin problemas en solo unos minutos.

Mostramos cómo crear una página con HTML y CSS, ahora veamos cómo puede crear una página de destino HTML post-clic con Instapage, sin necesidad de codificación.

Paso 1:

Configura una cuenta en Instapage:

Paso 2:

Haga clic en "Crear nueva página:"

Paso 3:

Elija cómo desea crear su página. Ya sea que desee elegir una plantilla optimizada previamente, escanear una página existente o cargar un archivo .instapage.

Comencemos con la opción de plantilla:

Paso 4:

Llegas a la galería de plantillas y puedes elegir la plantilla más adecuada que mejor se adapte a tu oferta. Para facilitar las cosas, las plantillas se clasifican por tipo de página de destino posterior al clic en la parte superior:

Paso 5:

Obtenga una vista previa de la plantilla elegida, haga clic en "editar" y asigne un nombre a la página:

Paso 6:

Personalice la página de la forma que desee seleccionando un elemento y luego haciendo clic en "editar:"

Paso 7:

Cambie entre la vista móvil y de escritorio con solo un clic:

Paso 8:

Una vez que haya realizado los cambios deseados, haga clic en "vista previa" para asegurarse de que todo se vea correcto:

Paso 9:

Una vez que esté satisfecho con su página, haga clic en "publicar" y elija su dominio de publicación:

En solo unos pocos pasos, puede tener una página de destino optimizada después del clic en vivo en la web y lista para convertir sin escribir una sola pieza de código. Instapage maneja todo por ti sin código.

Sin embargo, si aún desea agregar toques personales, le ofrecemos la opción de usar HTML, Javascript y CSS personalizados para que pueda agregar el código de seguimiento de anuncios de Facebook o Google Ads en su página, por ejemplo. Todo lo que necesita hacer es pegar el código necesario en la sección correspondiente y publicar sus cambios en la versión en vivo de su página.

También puede incrustar widgets HTML (video de YouTube, widget de redes sociales, formularios de intención de salida, etc.) en su página agregando los códigos HTML en el menú de "configuración".

Cree hermosas páginas de destino post-clic sin código

Instapage elimina la molestia del proceso de creación de la página de destino posterior al clic. No es necesario mirar las líneas de código, preocuparse por obtener los códigos de color correctos o perder un corchete en una etiqueta HTML. Por el contrario, puede centrar su atención en cada elemento de la página y perfeccionarlos para maximizar sus tasas de conversión.

La creación de páginas de destino posteriores al clic nunca ha sido tan fácil, hasta ahora. Por lo tanto, regístrese hoy para una demostración de Instapage Enterprise.