Diseña y publica tus sitios rápidamente

Recrea un portafolio minimalista con Breezi

En esta ocasión te presentaremos un nuevo estilo de tutoriales en Breezi: recrearemos sitios existentes en Internet utilizando las herramientas disponibles en nuestro editor.  Es decir, si te gusta la idea o estilo de un sitio, puedes leer uno de estos tutoriales y aprender a hacerlo con Breezi.

En esta edición, tomaremos como base el sitio de matoweb, un diseñador gráfico de Slovenia que utiliza su sitio como un portafolio.

Sitio de Matoweb

Tomaremos este sitio como base para nuestro diseño

Video

En este video podrás ver todo el proceso de creación paso a paso.

Pasos

Dividimos la página de inicio en bloques para enseñarte a recrear el sitio bloque por bloque y paso a paso.

Estas son las secciones del tutorial:

  1. Header o encabezado (logo y navegación)
  2. Intro – (introducción)
  3. Body 1 – (portafolio)
  4. Body 2 – (acerca de)
  5. Body 3 – (blog)
  6. Body 4 – (testimonios)
  7. Body 5 – (contacto )
  8. Footer o pie de página – (sección de derechos reservados)

Antes de comenzar

Antes de empezar a diseñar el sitio, debes crear uno. Ve a nuestra página de inicio y haz clic en el botón verde para registrarte y crear tu sitio.

Si ya habías creado un sitio, dirígete a la barra inferior y abre el menú de More. Ahí, busca la opción de “Reset Site & Choose New Starting Point” para reiniciar el tu sitio.

"Reset Site" en el menú de More

Al reiniciar tu sitio TODO (apps, páginas, layout y contenido) será eliminado. ¡Así que ten cuidado!

Haremos esto para escoger un punto de inicio nuevo. Busca la que se llama “Blank”.

"Blank"

Elige esta opción al hacer clic en “Apply”

Esto hará que el punto de tu sitio esté en blanco y listo para modificarse y agregar apps.

Punto de inicio

Así se verá tu sitio después de que lo reinicies

1. Bloque de Header

Lo primero que haremos será el encabezado o header del sitio. Este es el encabezado del sitio original:

Header

Selecciona el dot de estilo del bloque y cámbialo a un color blanco (ya que el color predeterminado es gris).

Herramienta para seleccionar un color

Elige el color blanco para el Header

Después tenemos que combinar las columnas para que nos quede solo una. Además, debemos agregar una sección nueva debajo de la actual.

"Merge Columns"

Combina las columnas del Header al hacer clic en la “x” en el separador

Lo que sigue es empezar a agregar apps: una app de imagen para el logo y una de navegación para el menú.

Instalando apps

Instala una app de Image y otra de Navigation en el encabezado

Ahora sigue personalizarlas. En la app de Image, deberás agregar el logo.

Cambia el tamaño de la app para que se vea como tu quieras. En su forma predeterminada, la imagen se ve más grande, así que asegúrate que quede al 100%.

Cambia el tamaño de la imagen

Para cambiar la imagen de tamaño, solamente tienes que arrastrar la esquina inferior derecha

La app de Navigation tiene más contenido predeterminado, por lo que tendremos que personalizar más de sus elementos. Para empezar, abre sus opciones de configuración (“Edit Settings”) cambia su alineación (“Alignment”) para que esté centrada (“Center”).

"Center"

Centra el menú para que se parezca al del sitio original

Lo que sigue es editar su contenido y agregar los vínculos.

Edita y agrega vínculos en el panel CMS

Editaremos los vínculos predeterminados y agregaremos 2 más.

Como no queremos sub-vínculos, los eliminaremos en “Manage Links”.

"Delete" en el panel CMS

Si no los eliminas, aparecerán en tu menú de navegación

El siguiente paso es dar estilo a los textos. Aquí usaremos la tipografía llamada “Raleway Thin”. También cambiaremos el color predeterminado a un gris (código hex #747474) y agregaremos un azul para el color que aparece cuando pasas el cursor sobre el vínculo en “Default Color” (#419efb). El tamaño de la letra es de 24 pixeles y le quitamos la opción de negritas.

Dot de estilo del menú de navegación

Haz clic en este dot de estilo para estilizar los textos del menú de navegación

Así se verá al final.

Header

Hemos terminado el bloque de Header

2. Bloque de Intro

Lo que sigue es el bloque de Intro. Agregaremos una presentación de diapositivas para mostrar ciertos elementos.

Lo primero que debes hacer es editar el fondo con su dot de estilo.

Panel para seleccionar una imagen de fondo

Utilizaremos una textura para este bloque y la repetiremos

Al abrir el dot del bloque, haz clic en la casilla de “Background Image” y luego en el botón de “Edit” que está enseguida. Se abrirá un panel donde verás nuestra librería de imágenes. Usaremos una imagen que es como un degradado gris para este bloque del sitio.

Recuerda seleccionar la opción de “Repeat Horizontally” porque la imagen no es lo suficientemente ancha para cubrir todo el bloque. Al repetir la imagen horizontalmente, esta se duplicará las veces que sea necesario para ocupar todo el ancho del área.

Ahora instalaremos la app de Super Banner.

Super Banner

Esta es una de las apps con más opciones de personalización en Breezi

Le haremos estos cambios:

“Edit Settings” en la app de Super Banner

  • En “Content Settings”:
    • Content Position: Left
    • Habilita las opciones de: “Display Title”, “Display Subtitle”, “Display Button”
  • En Arrow Nav Settings:
    • Arrow Type: V-shape Thin
    • Arrow Location: Outside Image
    • Default Color: Light arrows
  • En Pagination Settings:
    • Pagination Location: Outside Image
    • Pagination Type: Dots
    • Default Color: Gris personalizado (código hexadecimal: #999999)
    • Active State Color: Azul personalizado (código hexadecimal: #419efb)

Deja las demas opciones de edición en su estado predeterminado.

Opciones para la app de Super Banner

Personaliza la app de Super Banner

Ahora editaremos el contenido.

Edita el contenido de la app de Super Banner

Abre el panel CMS, y selecciona una de las diapositivas para editarla. Ahí modificaremos estas opciones: “Slide Title” (título de la diapositiva), “Slide Description” (descripción) y el “Button Text” (texto del botón). También agregaremos una imagen propia. Hicimos que las dimensiones de las imágenes fueran parecidas a aquellas del sitio original (pero la altura puede variar un poco).

Panel CMS para la app de Super Banner

Edita el contenido en el panel CMS

Solamente tienes que modificar los espacios que mencionamos anteriormente.

Estiliza la app de Super Banner

Ahora aplicaremos ciertos estilos a la app. Empezaremos con el fondo. Cambia la  opacidad a 0%.

Dot de estilo para la app de Super Banner

Al bajar la opacidad el fondo será “transparente”

Lo que sigue es editar los estilos del botón. Modificaremos las siguientes opciones en su dot de estilo:

  • Cambia el color a azul (#419efb).
  • Cambia el color de “Rollover” a un azul más oscuro. Puedes usar alguno de los que te ofrecemos en nuestra herramienta.
  • Reduce el “Corner Radius” a 5 px.
  • Ajusta el ancho en “Width” a 38%.
  • Marca la casilla de “Gradient” para obtener un degradado y ajusta la intensidad.
Establece un color predeterminado y uno para cuando el cursor pasa sobre el botón

Establece un color predeterminado y uno para cuando el cursor pasa sobre el botón

Lo que sigue es dar formato al texto del botón. Pasa el cursor sobre el botón y haz clic en el dot de estilo del texto.

Dot de estilo para el texto del botón

Con este dot podrás abrir las opciones de estilo para el texto

En la barra de herramientas, haremos que la tipografía sea “Raleway Thin” con 18 px de tamaño y la pondremos de color blanco.

Barra de herramientas

Personaliza la tipografía, color y tamaño

Personaliza el título de la diapositiva: “Raleway Thin” a 42 pixeles y un gris oscuro como color. Para la descripción, usa en gris más claro y la letra con un tamaño de 14 px.

¡Y ya terminamos el bloque de “Intro”!

3. Bloque de portafolio

Para este bloque utilizaremos 3 apps: Text, Projects y Button.

App de texto

Usaremos esta app para agregar el título de nuestros bloques. Tienes la opción de darle formato una sola vez y duplicarla donde sea necesario.

Para el título usaremos la tipografía de Raleway Thin, con un tamaño de 48, color negro. También centraremos el texto y pondremos su altura o “Line Height” en 48.

Barra de herramientas

Duplica esta app donde la necesites

App de Projects

La app de Projects puede ser algo compleja. Instálala debajo del título y personaliza su configuración en “Edit Settings”:

  • Deshabilita la opción de “Show Categories Above List View”
  • Columns: 3
  • Show Project Info: Over Image
  • Show Project Info On: Rollover state
  • Image Rollover effects
    • Effect: Blend
    • Intensity: High
    • Color: #419efb (nuestro azul)
"Edit Settings" en la barra de herramientas de la app

Aquí personalizaremos la configuración de la app de Projects

Edita el contenido: solamente tienes que agrega una imagen y el nombre del proyecto.

Panel CMS para la app de Projects

No editaremos todas las opciones porque queremos que se parezca al portafolio del sitio original

Cuando hayas terminado de modificar los elementos existentes, deberás crear más para tener 6 en total. Al final, tu app de Projects debe verse como en la siguiente imagen.

Vista previa de la app de Projects

Lo que sigue a continuación es dar estilo al texto

Cambiaremos el estilo para los títulos de los proyectos. Para hacerlo, haz clic en su dot de estilo. Al modificar uno, el cambio se reflejará en todos ellos.

Dot de estilo para los títulos de los proyectos

Haremos que el texto sea más grande y que tenga un color y tipografía diferentes

El tamaño debe ser de 30 size. La tipografía: Raleway Thin; el color: blanco y asegúrate de hacer más gruesa la letra con la opción de negritas.

Instala la app de botón debajo de la de Projects. Si recuerdas, ya habíamos editado los estilos de un botón en la sección de la app de Super Banner. Utiliza las mismas opciones de estilo.

Primero, debes guardar estas opciones de estilo como un perfil. Haz clic en “Save Styles as Dot Profile” y asígnale un nombre al perfil. Ahora puedes usar dicho perfil en otros dots al hacer clic en “Load Dot Profile”.

Panel para el botón

Haz clic en “Save Styles as Dot Profile” para usar los estilos de un dot, en otro

Debes asegurarte de eliminar la segunda línea de texto, alinear el botón al centro y cambiar la tipografía. Haz doble clic en el texto para abrir la barra de herramientas. Selecciona Raleway Thin como tipografía, haz que el tamaño sea 18 y elije un color blanco para el texto del botón.

4. Bloque de “Acerca de”

En este bloque, cambiaremos el color del fondo a un gris claro (#f2f2f2). Después duplicaremos el título (app de texto) del bloque anterior (portafolio) y moverlo hasta el bloque nuevo. Cambia el texto para que diga “Acerca de”.

Agregaremos una sección nueva y la dividiremos en 4. Para separarlas, pasa el cursor sobre el separador de las columnas y haz clic en el signo de “+”.

Separa las columnas

Cuando creas una columna nueva, un separador dividirá la columna entera a la mitad, haciendo que ambas columnas nuevas tengan las mismas medidas

En cada de las columnas agregaremos dos apps: la de imagen y la de texto.  Las imágenes serán unos íconos y el texto lo tomaremos del sitio original. Modificaremos la tipografía, tamaño y el color: Raleway Thin azul a 22 puntos para el texto de superior y Arial 15 en gris para el texto inferior.

Reduciremos el espaciado inferior de la imagen, las cuales irán arriba del texto. De la misma manera, reduce el espaciado superior del texto.

Dot de estilo para la app de text

Logra que el texto y la imagen estén tan cerca como sea posible

Duplicaremos estas apps y colocaremos una de cada una en las columnas de enseguida. De esta manera, solamente deberás editar la imagen y el texto. Cuando termines, deberá verse así:

Nuestras columnas y sus apps

Ya casi acabamos el bloque de “Acerca de”

Sigue agregar una sección nueva debajo de esta e instalar otra app de texto.

"Add Section"

Necesitaremos una sección con una columna para las siguientes apps

El texto lo tomaremos del sitio original. El estilo: al centro, gris, Arial, 18.

Lo que sigue, es instalar una app de Social Icons en esta sección que acabamos de crear. Deberás configurarla de la siguiente manera:

  • Icons Theme: Candy
  • Alignment: Center
  • Add links to: Facebook, Twitter, Dribbble
Settings de la app de Social Icons

También puedes usar la opción de “Glossy Mono” para que tus íconos sean grises

5. Bloque de Blog

Ahora nos concentraremos en el bloque de blog. Primero, debemos duplicar el título anterior y traerlo hasta acá. Este bloque se llamará “Blog”, así que cambia el título. Debajo, agregaremos una sección nueva, la cual dividiremos en dos. En cada una de estas columnas, instalaremos una app de Text + Photo Block.

App de Text + Photoblock

Usaremos esta app en lugar de la de blog para que la apariencia sea más similar a la del sitio original

Personalizaremos ambas apps de la siguiente manera:

  • Eliminar el título de la app porque no lo necesitamos
  • Agregar una imagen, título y descripción a cada una
  • Cambiar el tamaño de la imagen para que esté al 100% (es posible que al cargar la imagen, aparezca de un tamaño más pequeño)
  • La letra deberá ser: Raleway Thin, gris oscuro, 18 para el título y Arial, gris claro, 13 para la descripción
  • En “Entries to Show” (en “Edit Settings”) pon que solo quieres mostrar 3 publicaciones a la vez.

Cada app debe tener 3 elementos.

"New Entry" en la Text + Photoblock

Si quieres, puedes modificar una sola app y luego duplicarla para no tener que editarla otra vez

Lo último que haremos será duplicar el botón de  ”all my work” que creamos en el bloque de Portfolio, y lo posicionaremos en el bloque de “Blog”. Ahí le cambiaremos el texto para que diga “view my blog” (visita mi blog).

"Duplicate App"

Al duplicar o “reciclar” apps, no hay necesidad de volver a establecer su estilo o su configuración

 6. Bloque de Clientes

Para este bloque, cambiaremos el color a un gris claro. Duplicaremos el título del bloque anterior y cambiar el nombre a “Clientes”. Lo que sigue será duplicar la app de Super Banne y personalizar algunas opciones. Edita las “Settings” de la siguiente manera:

  • Transition Fx: Dissolve
  • Fx Speed: Medium
  • Content Position: Top
  • Casillas de contenido: solamente marca “Display Title” y “Display Sub-Title”
  • Arrow Location: Don’t Show
"Edit Settings" de Super Banner

Personaliza algunas de las opciones de Super Banner. Las demás las puedes dejar como las establecimos en la versión original de la app.

Ahora sigue el contenido. Usaremos una imagen con el mismo color que el fondo del bloque. También editaremos el título y subtítulo.

Para el título, usaremos un gris (#6c6c6c) con la tipografía Georgia, en tamaño 30. También reduciremos el espaciado del subtítulo para que esté más cerca de la navegación.

7. Bloque de Contacto

Para este bloque,  usaremos 3 columnas con las siguientes medidas:

Columnas para el bloque de "Contact"

465 pixels para la columna de enmedio y 248 pixels para las laterales

Hacemos esto porque queremos que nuestras apps tengan un ancho limitado.

Para empezar con este bloque, duplicaremos el título y cambiaremos su texto a “Say Hello” o “Salúdame”.

Debajo del título, instalaremos una app de Contact.

Contact en su forma predeterminada

Editaremos los espacios y los botones para que se parezcan a los del sitio original

Modificaremos sus “Settings” o su configuración para que solamente muestre:

  • name & surname (nombre y apellido)
  • e-mail
  • company (compañía)
  • message (mensaje)

Para editar el nombre de las preguntas, tienes que hacerlo en “Edit Settings”. Para elegir qué preguntas mostrar, debes ir a “Form Settings”, que se encuentra en el lado inferior derecho del formulario.

Para el botón, podemos cargar el perfil del botón que creamos anteriormente. Le daremos el siguiente estilo a las preguntas o etiquetas: al centro, con color negro, letra Arial y tamaño 16.

8. Bloque de Derechos Reservados

El bloque de los derechos reservados es el último que haremos. Para él, usaremos una imagen y un poco de información. Para esto, usaremos la app de Image y de Text.

Bloque de Copyright

Como ves, no necesitamos mucha información aquí

Para terminarlo, solo tenemos que reemplazar la imagen y el texto. Para darle estilo a este último, utiliza un color gris con letra Arial en 18 puntos parala primera línea y 12 para las demás. Centra ambos textos.

¡Hemos terminado! Esperamos que hayas disfrutado esta publicación. Si tienes preguntas, háznoslas saber en la sección de comentarios.