Diseña y publica tus sitios rápidamente

Crea un sitio para una app del iPad

En este artículo continuaremos con nuestra serie de tutoriales en los que recreamos un sitio. Ya lo intentamos con una página de aterrizaje de una app para iPhone. En esta publicación haremos algo similar.

Pistachio es una app del iPad (y el iPhone) para hacer bosquejos minimalistas. Hoy te guiaremos y construiremos  toda esta página en Breezi.

Pistachio

Esta es la apariencia de la página

Analizando el sitio original

Lo primero que haremos será estudiar a detalle el sitio original. Estos serán los bloques y las apps que usaremos para este tutorial:

  • Header (encabezado): el logo de la compañía
    • 1 columna: app de Image
  • Intro: el logo de la app
    • 1 columna: app de Image
  • Body 1 (cuerpo 1): bloque de acerca de y llamado a la acción
    • 2 columnas: app de Image /app de Text, app de Text, app de Image
  • Body 2 (cuerpo 2): noticias y actualizaciones
    • 2 columnas: app de Text, app de Blog /app de Text, app de Text
  • Footer (pie de página): vínculos a la compañía y a las redes sociales
    • 2 columnas: app de Text / app de Social Sharing Buttons
Analizando el sitio de la app para el iPad

Podemos usar una app de Breezi para replicar cada contenido de la página original

Antes de empezar

Si vas a recrear la página en un sitio de Breezi existente, necesitarás reiniciar tu sitio para empezar desde cero con un lienzo en blanco.

"Reset Site & Choose New Starting Point"

Haz clic en la opción de “Reset Site” para empezar un sitio nuevo desde cero

Por otro lado, puedes registrarte y crear un sitio nuevo. Recuerda elegir el punto de inicio llamado “Blank”.

"Blank"

Elige el punto de inicio llamado “Blank” para obtener un layout vacío

Bloque de header

Para empezar, cambiaremos el color del fondo para que sea blanco.

El dot de estilo para el fondo del bloque

Utiliza esta herramienta para seleccionar el color blanco

Este bloque solamente tendrá una columna en la cual instalaremos la app de Image.

Cambiando el tamaño de la imagen

Cambia el tamaño de la imagen hasta que esté al 100%

Alíneala para que esté del lado derecho.

Dot de estilo para la app de Image

Haz clic en este botón para que la imagen esté alineada a la derecha

Bloque de intro

En este bloque personalizaremos el fondo y la app de imagen.

Empezaremos por cambiar el fondo. Haz clic en su dot para editarlo y darle estilo.

Este es el dot de estilo para el fondo del bloque de Intro

Este es el dot de estilo para el fondo del bloque de Intro

Seleccionaremos una imagen de fondo y haremos que se repita horizontalmente en “Repeat horizontally”. Ajusta su posición horizontal hasta que el botón quede a la mitad de la barra (en la siguiente imagen obtendrás una referencia visual para hacer esto).

Opciones para el fondo del bloque

Agrega una imagen personalizada, edita la opción de repetición y la posición horizontal

Haz que el espaciado sea de cero.

Ahí instalaremos la app de Image y reemplazar la imagen predeterminada con el logo de la app. Asegúrate que esté al 100% (en su tamaño original).

Ahora solo tenemos que editar el espaciado superior (Top) e inferior (Bottom) para que qude a 50 y cero pixeles respectivamente.

Dot de estilo para la app de Image

Utiliza el dot de estilo de la imagen para lograr el espaciado correcto

Bloque de Body 1

Ahora continuaremos con el siguiente bloque. El fondo lo dejaremos en color blanco. Lo que haremos será ajustar el espaciado superior del bloque para que esté en 30 pixeles.

Dividiremos la sección en dos columnas con la misma medida: 480 pixeles cada una.

Botón de "Split Column"

Utiliza el botón de “Split Column” para dividir la columna en dos

En la primera columna (la de la izquierda), instalaremos la app de Image. Cambia su tamaño para que esté en 85% .

Cambiando el tamaño de app

En la columna de enseguida, la de la derecha, agregaremos, primero, una app de Text. Su texto debe tener la tipografía “Pacifico”, con un tamaño de 36 puntos y en negritas.

Barra de herramientas

Personaliza el título. Más adelante lo duplicaremos.

Ahora aumentaremos el espaciado superior de la app de texto a 50 px con su dot de estilo.

Dot de estilo para la app de texto

Establece 50 pixeles para el espaciado superior en “Top Spacing”

Lo que sigue es instalar otra app de texto debajo de esta. Para ella usaremos la tipografía Georgia con un tamaño de 18. De ser necesario, ajusta la altura de la letra en “Line Height”.

"Line Height"

Usaremos 22 pixeles de altura para mejorar la legibilidad

Debajo de esta última app de texto, incluiremos una app de Image. Cambiaremos el tamaño de la imagen a 85% para que esté igual al tamaño de la imagen de la izquierda. Usaremos su dot de estilo y alinearemos la imagen a la izquierda.

Dot de estilo para la app de imagen

Haz clic en este botón para alinear la imagen a la izquierda

En otro dot de estilo también cambiaremos el espaciado superior de la imagen a cero. En la imagen a continuación verás el dot de estilo que utilizaremos para esto.

Dot de estilo con el que reduciremos el espaciado superior

Dot de estilo con el que reduciremos el espaciado superior

Bloque de Body 2

En este bloque agregaremos un fondo personalizado. Esto servirá para diferenciar este bloque del bloque anterior. Para empezar, cambiaremos el color a un gris con el código #E8E8E8.

Herramienta para seleccionar color

Selecciona un color para el bloque de Body 2

Luego insertaremos una imagen personalizada, como la de a continuación, para el borde:

Muestra de la imagen que utilizaremos para el fondo del bloque

Esta es una muestra de la imagen que utilizaremos para el fondo del bloque

Esta imagen no es lo suficientemente ancha para cubrir toda la página, así que haremos que se repita. Selecciona la opción de “Repeat horizontally” para lograrlo.

Dot de estilo para el bloque

Selecciona la imagen personalizada y haz que se repita horizontalmente

Una vez que termines con el fondo, dividiremos la columna en dos, como en el bloque anterior, de 480 pixeles cada uno.

En la columna de la izquierda instalaremos una app de  Text para el título y debajo, incluiremos la app de Blog. En la columna de la derecha, usaremos dos apps de texto: una para el título y otra para un mensaje.

Para los títulos del bloque solamente tenemos que duplicar el título del bloque anterior dos veces.

"Duplicate App"

Al duplicar esta app de texto, no tendrás que estilizarla de nuevo

Entonces, lo que sigue es actualizar el contenido, al hacer doble clic en él y reemplazarlo.

Títulos para el bloque

Al duplicar apps, ahorras tiempo

Debajo del título de la columna derecha, pondremos otra app de texto con el siguiente formato: Georgia y con 15 pixeles de tamaño.

Barra de herramientas para el texto

Da el estilo apropiado a esta app de Text

La última app para este bloque será la de Blog, la cual añadiremos debajo del título de la primera columna (la de la izquierda).

Para replicar el estilo del sitio original, haremos que la fecha sea el título de cada publicación.

Para hacerlo, tenemos que esconder la fecha en la condiguración de la app. Abre estas opciones al hacer clic en el botón de “Edit Settings” en la barra de herramientas de la app. Ahí deshabilita la opción de “Show Date”.

Opción de "Show Date"

No marques la opción de “Show Date” para que no se repita la fecha

Lo que sigue es editar la tipografía del título: Georgia, tamaño 15 en negritas y de color #333333 (para el “Default” y el “Rollover”).

Barra de herramientas para el texto

Al editar uno de los textos, los cambios se reflejarán en todos los títulos

Además tendremos que editar la tipografía del contenido en sí. Localiza el dot del contenido y haz clic en él para abrir el Bulk Style Editor con las opciones de texto. Ahí elige estas especificaciones: Georgia, tamaño 16 de color negro.

Opciones de Text en el Bulk Style Editor

Al editar las opciones del texto de una publicación, el cambio se verá reflejado en todas las publicaciones

Para editar el contenido, debes hacer doble clic y el panel CMS de esa publicación se abrirá. Ahí podrás cambiar su contenido.

Panel CMS para la app de Blog

Edita el contenido de las publicaciones en tu app de Blog

Para agregar todos los elementos que necesites, haz clic en la pestaña de “New Post” de la izquierda. Una vez que termines con la app de Blog, se verá como en la siguiente imagen.

La app de Blog terminada

La app de Blog terminada

Si quieres que se parezca más a aquella del sitio original, deberás ajustar el espaciado.

Lo último será eliminar el borde inferior de la app. Haz clic en su dot de estilo y deshabilitar la opción de “Border”.

"Borders" en el dot de estilo

Deja esta casilla sin marcar para eliminar los bordes

Bloque del pie de página

Y este es nuestro último bloque. Lo primero será cambiar el color del fondo a #E8E8E8 y agregar un poco de espaciado inferior.

Dividiremos la sección de este bloque en dos columnas, ambas de igual medida.

Lo que sigue será eliminar el espaciado superior y agregar un borde en la parte superior de la sección. Para hacerlo, sigue estas instrucciones:

  • Selecciona el dot de estilo de toda la sección
  • Desplázata hasta donde dice “Borders” y habilita esta opción al marcar la casilla
  • En “Thickness” establece que el grosor sea de 1 pixel
  • Cambia el tipo de borde para que sea punteado
  • Solamente selecciona la opción de “Top” para que el borde sea superior. Es posible que necesites deshabilitar la opción del eslabón.
  • Selecciona un tono gris para el color con el código #BBBBBB
"Borders" en el dot de estilo

Manipula el borde superior para esta sección

La columna de la derecha contendrá una app de texto. El estilo de la letra será: Georgia de tamaño 15. Ahí insertaremos dos vínculos al hacer clic en el botón del estabón. Haremos que el color sea negro para ambas opciones (para el estado predeterminado, llamado “Default”, y para el color de Rollover).

Barra de herramientas superior para editar el texto

Utiliza la barra de herramientas superior para editar el texto

En la columna de la derecha instalaremos la app de Social Sharing Buttons.

Social Sharing Buttons en el menú de "Apps"

Búscala en el menú de “Apps”

No necesitaremos configurarla, ya que se instalará como la queremos.

¡Eso es todo!

Ahora puedes publicar el sitio replicado y ver cómo quedó.

Haz clic en la imagen a continuación para obtener una vista previa.

Vista previa del sitio

Haz clic en la imagen para verla en grande.

Si te quedó alguna duda con el tutorial, pregunta lo que quieras en la sección de comentarios.