Diseña y publica tus sitios rápidamente

Recrea y reinventa una página de aterrizaje para un libro electrónico

En este tutorial te enseñaremos a crear una página de aterrizaje para un eBook (libro electrónico). Para hacerlo, intentaremos replicar el sitio de Chords For The Piano, pero le agregaremos detalles propios y otras cosas que puedes hacer con Breezi.

Así es como se verá el sitio al final. ¡Puedes tomarlo como inspiración y crear tu propiar versión del sitio!

"Chords For The Piano"

Video de construcción

Aquí está el video donde puedes ver todos los pasos. Además ¡ahora lo puedes ver en alta definición!

Para construir tu layout

Para empezar, utilizaremos el Bulk Style Editor (BSE). Ábrelo al hacer clic en el botón de “Styles” ubicado en la barra inferior. Una vez ahí, haz clic en la pestaña de “Page” y luego utiliza la herramienta de color para agregar un color personalizado con su código hexadecimal (el que aparece en la imagen).

Herramientas de color

Asegúrate de marcar las casillas para forzar la transparencia de esos bloques

Al hacerlo, notarás que el fondo de tu página cambiará de color.

Ahora debemos acomodar el layout. En la siguiente imagen podrás ver el acomodo, las apps que usaremos y dónde las ubicaremos. Para leer el tutorial sobre cómo utilizar el constructor de layouts, haz clic aquí.

Como verás, tenemos cuatro bloques y varias secciones y columnas, las cuales contendrán por lo menos, una app cada una.

Acomodo del layout y las apps

Así es como acomodaremos el layout: cada fila es un bloque diferente que contiene una, dos o hasta tres columnas.

Dirígete al menú de Apps en la barra inferior e instala cada una de las que están incluidas en la imagen (y ordénalas como aparecen en la imagen). Lo que sigue es modificar el contenido de cada una de ellas.

Un encabezado atractivo

Para empezar, modificaremos la app de imagen o image. Haz doble clic en ella para abrir el editor de imagen y reemplazar la imagen. Haz clic en “Replace” y elige una imagen de tu computadora.

Reemplaza la imagen

Esta es la imagen que usaremos

Ahora editaremos las apps que están en la columna de enseguida pero en ese mismo bloque. En esta tenemos tres apps: dos de texto y una de botón.

El texto y sus etiquetas

Editar una app de texto es muy fácil: solamente tienes que hacer doble clic en ella y escribir o pegar el contenido. Además, puedes utilizar la barra de herramientas que aparece en la parte superior. Una vez que termines de agregar el contenido, deberás asignarles etiquetas H.

Para hacerlo, selecciona el texto al que le quieras asignar una etiqueta, y selecciona la etiqueta que necesites para ese texto. Puedes utilizar la imagen a continuación como una referencia visual para aprender a hacerlo.

Etiquetas H

Aquí puedes ver que le agregamos una etiqueta de H2 a este texto

Llamado a la acción

Lo que sigue es editar el botón. Para empezar, cambiaremos el texto: haz doble clic en el texto predeterminado y escribe tu llamado a la acción. Después, debemos quitar la segunda línea de texto. Para ello debes pasar el cursor sobre la app y hacer clic en el botón de “Edit Settings” en su barra de herramients. Una de las opciones que verás ahí será “Display Slogan Text”; si quieres quitar el subtítulo o slogan del botón, elige “No”.

"Display Slogan Text"

Recuerda guardar los cambios al hacer clic en “Save”

Ahora tenemos que cambiar el objetivo del botón; es decir, configurarlo para que, cuando un visitante haga clic en él, lo lleve a la página donde puede comprar el producto. Pasa el cursor sobre la app y verás que aparecerá un botón que dice “Form Settings” en la esquina inferior derecha. Haz clic en él para abrir un módulo y cambiar la configuración del formulario. En la opción de “Link When Clicked”, pega el URL del sitio a donde quieres redirigir a tus visitantes y haz que dicho vínculo se abra en una ventana nueva (new window).

"Form Settings"

Cuando termines, haz clic en “Save” y luego en “Close”

Introducción e información importante

Cuando termines de editar el contenido y la configuración para las apps anteriores, debes comenzar a modificar el siguiente bloque: el de Intro. Ya debes de haber instalado una app de Text + Photo Block en él, así que lo que haremos será editarla. Usaremos esta app para agregar la biografía del autor (la cual no está incluida en el sitio original, así que le estamos dando un toque más personal).

Reemplazaremos el título principal para que diga el nombre del autor y le asignaremos una etiqueta de H2. Después eliminaremos el subtítulo predeterminado de la app y pegaremos el contenido en el espacio para la descripción. También debemos reemplazar la imagen predeterminada por una foto del autor.

Arrastra la esquina inferior derecha para cambiar el tamaño de la imagen en la app. A continuación podrás ver de dónde arrastrar la imagen con un círculo de color rojo.

Text + Photo Block

Utiliza esta herramienta para cambiar el tamaño de la foto del autor

Para la app a continuación, la de Tabs and Accordions, utilizaremos el botón de “Edit Settings” en su barra de herramientas para establecer que la app funcione como acordión. En la imagen a continuación podrás ver dónde configurar esta opción.

Tabs and Accordions

Recuerda hacer clic en “Save” para guardar los cambios

Lo que sigue será agregar el contenido. Haz doble clic en el acordión para abrir el panel CMS. Ahí es donde podrás editar cada pestaña (su título y contenido), cambiar su orden, agregar nuevas, etc.

Panel CMS para la app de Tabs and Accordions

Para acceder al panel CMS puedes hacer doble clic en el texto de la app o en el botón con el ícono del lápiz

En la app a continuación agregaremos reseñas y testimonios sobre el libro. Esto es muy importante porque un usuario puede basarse en las opiniones de los demás para saber si el libro va a ser de su agrado o no. Para lograrlo, utilizaremos la app de Carousel que instalamos.

Para empezar, eliminaremos la imagen predeterminada, cambiaremos el título y agregaremos contenido. Después, puedes agregar un artículo nuevo al hacer clic en el botón que dice “New Entry” en la barra de herramientas de la app.

"New Entry"

Presiona este botón para agregar más testimonios

Cuando termines de editar todos los testimonios, configuraremos la app para que muestre solamente uno a la vez. Pasa el cursor sobre la app y haz clic en “Edit Settings”.

"Entries to Show"

En “Entries to Show” escoge el número 1

La cita principal

Ya terminamos el segundo bloque. Ahora sigue el bloque de “Body”, el cual es muy fácil de hacer.

Haz doble clic en la app de Text ubicada al centro para editar su contenido. Céntralo y deja las demás opciones como están. Le agregaremos estilo más adelante.

Reemplaza las imágenes laterales con imágenes de comillas gigantes. Esto hará que el lector se enfoque en el texto de en medio. En la siguiente imagen podrás ver a qué nos referimos:

La cita

Este debe ser el resultado final para este bloque

Para cerrar con bloque de oro

Ahora nos ocuparemos del Footer o pie de página, el cual es el último bloque de la página. Ahí es donde agregaremos nuestra app de navegación para vincular el sitio. También incluiremos los derechos reservados en esta sección.

Pasa el cursor sobre los vínculos de la app y haz clic en el dot de estilo que te señalamos en la siguiente imagen.

Dot de estilo

Haz clic en este dot para abrir las opciones de configuración de la app de Navigation

Se abrirá un módulo donde deberás de cambiar la configuración de la app. Por ejemplo, haz clic en “Separators”, escoge la opción de “Bar” y elige un color.

Elige un color para los separadores

Elige un color para los separadores

Lo que sigue es editar el contenido. Haz clic en el ícono del lápiz en la barra de herramientas de la app o haz doble clic en la app para que se abra el panel CMS. Ahí deberás editar los vínculos y sus nombres.

Módulo de vinculación

Escoge a dónde quieres vincular a tus visitantes a través de esta app de navegación

Lo que sigue es bastante fácil: solo tienes que hacer doble clic en la app de texto y cambiar su contenido. Recuerda asignarle una etiqueta para que puedas editar su estilo más adelante.

Los encabezados y el Bulk Style Editor

Lo que queda es darle estilo a los textos a través del BSE. Ábrelo al hacer clic en el botón de “Styles” en la barra inferior. Después asegúrate de que la casilla “Merge All Selected Blocks”, ubicada en la parte inferior del BSE, esté marcada. Dirígete a la pestaña de “Text” y edita el texto regular. Para él usaremos la tipografía Georgía, le pondremos un tamaño de 14 pixeles, una altura de 21 y para el color, utilizaremos este código #333333. No debes agregarle ningún otro efecto.

BSE

Al editar el texto regular en el BSE, cualquier texto que no tenga una etiqueta se apropiará de estas características

Haz esto para cada encabezado (Heading) y etiqueta. En la siguiente imagen verás qué valores deberás aplicar para cada etiqueta y cómo deberá de verse al final.

Etiquetas H y sus características

Si necesitas más ayuda, puedes ver el video para una guía paso a paso

Fíjate en los detalles

Una vez que termines de editar el texto, podremos comenzar a agregar y eliminar bordes. Al ver la página, notarás que hay ciertos bordes. Para lograr ese efecto, tenemos que agregarlos. Haz clic en el dot de estilo de un elemento que necesite tener bordes. En el módulo que se abrirá, dirígete a la sección de “Borders” para agregar o eliminar los bordes que quieras.

"Borders"

Aquí puedes ver que, aunque sutiles, agregamos unos bordes en el bloque de Intro

Otro detalle importante es el espaciado. Asegúrate de que los márgenes y el espacio entre las apps sea el adecuado (que todo quede bien alineado). Haz clic en los dots y ajusta los controles. En la imagen a continuación podrás ver un ejemplo.

Espaciado

Agregamos espaciado superior y lateral para que el texto estuviera alineado con la imagen

Recuerda que los detalles son muy importntes, pues en ellos, se nota que hubo un proceso detrás del diseño del sitio. Cambia colores, agrega sombreados, alinea los elementos y prueba con diferentes estilos para que el sitio quede a tu gusto. Si necesitas ayuda, puedes referirte al video del principio.

¡Eso es todo, amigos!

Si tienes dudas, puedes dirigirte a nuestra sección de Tutoriales o comentar en la sección inferior. ¡Gracias por leer este tutorial!