Diseña y publica tus sitios rápidamente

Recrea un sitio en Breezi sobre una app para compartir archivos

En este tutorial desglosaremos otro sitio de una app para Mac.

En este caso, la app es para compartir archivos y se llama CloudApp.

El sitio original de CloudApp

El sitio original de CloudApp

Analizaremos el sitio original para saber cómo lo abordaremos desde Breezi. Toma en cuenta que solamente nos concentraremos en la página principal del sitio.

Estos son los contenedores y las apps que usaremos:

  1. Header (encabezado): Logo y menú de navegación
    1. 2 Columnas: app de Image/Navigation
  2. Intro: Banner y llamado a la acción
    1. 1 Columna: app de Image
    2. 1 Columna: app de Button y de Text
  3. Body (cuerpo): “Features”
    1. 2 Columnas: Text/Image
    2. 2 Columnas: Image/Text
    3. 2 Columnas: Text/Image
    4. 2 Columnas: Image/Text
    5. 2 Columnas: Text/Image
  4. Footer (pie de página): Derechos de autor y menús de navegación
    1. 3 Columnas: app de Text/Navigation/Text

Este es el orden que en el que crearemos el sitio:

  1. Primero nos adentraremos en el layout
  2. Luego, apps
  3. Contenido
  4. Por último, Estilo y configuración

Layout

Como sabes, empezaremos este sitio desde cero; es decir, necesitamos una plantilla en blanco. Puedes reiniciar tu sitio o crear uno nuevo y escoger el punto de inicio llamado “Blank”.

As mentioned above, we’ll have 4 Blocks. It won’t be necessary to create additional Blocks, since the blank template already has those 4.

4 Bloques en el layout

Este es el layout que necesitamos para empezar este sitio

El encabezado (Header) y el pie de página (Footer) solo tendrán una sección. El bloque de Intro tendrá 2 secciones y el bloque principal, de Body, necesita 5 secciones.

Botón de "Add Section"

Para agregar una sección, haz clic en el botón de “Add Section”

Para crear las columnas, necesitaremos dividirlas y ajustar su ancho según lo requieran.

Botón de "Split Column"

Haz clic en “Split Column” para dividir las columnas

Cuando termines, el layout, sin apps ni contenido todavía, se verá así:

Layout vacío

Los bloques, secciones y columnas que necesitaremos para este sitio

Apps

Lo que sigue es instalar las apps.

Arrastra las apps requeridas desde la App Store hasta su respectivo lugar.

Botón de "Install New" para las Apps

Para instalar una app, solamente arrastra su botón de “Install New” hasta el layout

Contenido

Ahora sigue el contenido; es decir, el plato fuerte. Insertaremos imágenes, editaremos los textos y los elementos y añadiremos todo el contenido necesario.

El editor de imágenes

Utiliza el editor de imágenes para reemplazar aquellas que lo necesiten

En ocasiones, dependiendo del contenedor, las imágenes aparecerán más grandes o pequeñas. En estos casos, reajusta el tamaño para que esté al 100% (o al tamaño deseado).

Para cambiar el tamaño de la imagen

Arrastra la esquina inferior derecha para cambiar el tamaño de la imagen

Recuerda que en esta porción del tutorial, solamente estamos agregando contenido. El estilo, colores, fondos, etc., lo haremos más adelante.

"Edit Content" en la barra de herramientas de la app

Para editar el contenido, haz clic en “Edit Content” de la barra de herramientas de la app

Al terminar el contenido, el sitio se verá así:

Bloques de Header y de Intro

Ahora solo falta estilizar y configurar el sitio

Sin embargo, antes de continuar, debemos etiquetar los textos y los encabezados del sitio. Esto será de ayuda para la próxima etapa, en la que editaremos el estilo.

Opciones de etiquetas H

Asigna etiquetas H para que, al usar el Bulk Style Editor, puedas editar varios a la vez

Estilo

Ahora sigue jugar con los colores y agregar estilo a las apps y contenedores.

Por ejemplo, la alineación de las imágenes:

Dot de estilo para una imagen

Cambia la alineación dentro de las opciones del dot de estilo

O, podemos cambiar predeterminado o de rollover para los vínculos de la app de Navigation:

Herramienta de color

Utiliza esta herramienta de color y el código proporcionado para cambiar la coloración de los vínculos en el menú de navegación

También puedes editar el color de fondo para un botón, al giual que su degradado y borde:

Dot de estilo para un botón

Haz clic en ese botón para que, al cambiar el color de un lado del borde, el cambio se refleje en todos

Para algunos elementos, como vínculos y encabezados, podemos utilizar el Bulk Style Editor para editarlos a la vez.

Pestaña de Text en el Bulk Style Editor

El Bulk Style Editor es una herramienta que te puede ayudar a ahorrar tiempo

Configuración adicional

Para este sitio, utilizaremos un Favicon personalizado. Dirígete a la barra inferior y, en “More”, selecciona la opción de “Favicon & Breezi Badge” y ahí, carga el archivo del favicon.

Panel para agregar un favicon

El Favicon es una imagen que aparece en el marcador o pestañas en el navegador

Por último, editaremos la configuración de la página en “Page Settings”.

"Pages" en la barra inferior

Cambiaremos el nombre de la página y las opciones de SEO

El nombre de la página, las palabras claves y la meta descripción son muy importantes para propósitos de SEO.

Panel de "Edit Page"

El aspecto más importante para SEO es el título

¡Hemos terminado!

Esta es una vista previa del sitio recreado en Breezi:

Vista previa del sitio en Breezi

Haz clic en la imagen para ver una versión más grande

¿Qué te pareció este tutorial? Háznoslo saber en la sección de comentarios.