Diseña y publica tus sitios rápidamente

Construye un sitio para un evento o conferencia

En este tutorial recrearemos otro sitio. En esta ocasión, replicaremos un sitio sobre una conferencia de diseño web.

El sitio original se llama New Adventures in Web Design. Dicho evento se llevó a cabo el 18 y 19 de enero. Este es el diseño que queremos imitar para esta publicación:

Evento de "New Adventures in Web Design"

Evento de “New Adventures in Web Design”

Formando la estructura

Para empezar, veremos el sitio original y pensaremos cómo podremos adaptarlo a Breezi. El siguiente diagrama nos ayudará a organizar el layout.

Dividiremos el layout en contenedores, secciones, columnas y apps de la siguiente manera:

  1. Header (encabezado)
    1. 2 Columnas (Imagen / Texto)
  2. Intro
    1. 2 Columnas (Navegación / Imagen)
  3. Body 1
    1. 1 Columna (Fondo personalizado, Texto)
  4. Body 2
    1. 3 Columnas (Texto, App de Text + Photo Block / Text + Photo Block / Texto, Texto)
    2. 3 Columnas (Texto / Texto / Texto, Texto)
  5. Body 3
    1. 1 Columna (Texto)
    2. 4 Columnas (14 Imágenes)
  6. Footer (pie de página)
    1. 2 Columnas (Texto / Texto)
    2. 2 Columns (Navigación / Texto)

Un fondo para toda la página

Como podrás ver, el fondo del sitio original es negro en su totalidad. Entonces, lo primero que haremos será establecer un fondo para toda la página. Para hacerlo, haz clic en el botón de “Styles” en la barra inferior. Esto abrirá el Bulk Style Editor.

El botón de “Styles”” width=

Una vez ahí, deberás hacer clic en la pestaña de “Pages” para cambiar el fondo de la página.

Bulk Style Editor

Utiliza la herramienta para elegir el color negro

Hemos deshabilitado la opción de “force transparency” en todos los bloques porque usaremos un fondo personalizado para  cada uno y no queremos que sean transparentes.

Encabezado: logo y fechas

Para el primer bloque (el de encabezado), utilizaremos una sola sección con dos columnas.

En la primera columna, la de la izquierda, instalaremos una app de imagen o Image. Haremos uso de su dot de estilo para alinearla a la izquierda.

Dot de estilo para la imagen

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

Asegúrate de que la imagen tenga sus dimensiones originales; es decir, que esté al 100%.

La primera imagen a 100%

La primera imagen a 100%

En la columna de enseguida, colocaremos una app de Text. Una vez que agreguemos el texto, le daremos el siguiente formato:

  • Tipografía: Ubuntu Condensed (utilizaremos esta misma para otros encabezados)
  • Tamaño: 18
  • Alineación: derecha

La único diferente será el color. Debes utilizar el código #BD3632 para la primera línea (el cual es un color rojo) y un color negro para la segunda.

Herramienta de color

Para cambiar el color del texto a un rojo personalizado

Cambiaremos el color de fondo de la app y modificaremos su configuración.

  • Color: #F8EBEA
  • Opacidad (Opacity): 100%
  • Espaciado lateral (Left/Right Spacing): 13 pixeles
  • Espaciado superior (Top Spacing): 20 pixeles
  • Espaciado inferior (Bottom Spacing): 20 pixeles
Las opciones del dot de estilo para la app de texto

Altera los estilos para la app de texto

Navigación y llamado a la acción

El siguiente bloque lo dividiremos en dos columans.

Del lado izquierdo, instalaremos la app de Navigation. A ella le editaremos los elementos predeterminados y eliminaremos los subvínculos. Al final, nos quedaremos con 6 vínculos principales como en la imagen a continuación.

Panel CMS para la app de Dropdown Navigation

Vínculos para el sitio de conferencia

Cuando hayamos terminado de configurar la app, continuaremos en el proceso de diseño al modificar el estilo del texto. Utilizaremos la tipografía “Ubuntu Condensed”, en tamaño 20 con el color predeterminado “Default Color” en negro y el “Rollover” en #BD3632.

Opciones de estilo para nuestros vínculos de navegación

Opciones de estilo para nuestros vínculos de navegación

En la siguiente imagen verás los cambios que haremos en el dot de estilo de esta app: eliminaremos el espaciado inferior y aumentaremos un poco el superior.

Dot de estilo para la app de Navigation

Haz que el “Top Spacing” sea de 37 pixeles y deja las demás opciones en cero

Para la columna de la derecha, utiliza una app de imagen alineada a la derecha y sin espaciado inferior. Puedes dejar el espaciado superior en 25 pixeles.

Opciones para la app de Image

Así es como deben de quedar las opciones para esta imagen

Eliminamos el espaciado inferior para que el siguiente bloque esté lo más cerca posible.

Banner y mensaje introductorio

Lo primero que haremos para este bloque será cambiar el fondo. Utilizaremos una imagen personalizada y le pondremos que no se repita en “No Repeat”. El espaciado superior (Top) debe ser de 30 pixeles y el inferior (Bottom), de 12.

Opciones para el fondo del bloque

Elige una imagen para el fondo de este bloque

Lo que sigue será instalar una app de Text. De nuevo, utilizaremos la tipografía “Ubuntu Condensed”, pero esta vez, el color debe ser blanco y el texto tiene que estar alineado a la izquierda. El texto de la primera línea debe de ser de 42 pixeles de alto y el resto, de 22. Es posible que tengas que modificar la altura para que vaya de acuerdo al tamaño de la letra.

Barra de herramientas

Utiliza la opción de Line Height para modificar la altura del texto

Editaremos el espaciado para que el texto quede del lado derecho. Primero, ajusta los estilos: cero pixeles para el espaciado inferior y 10 pixeles para el superior.

Dot de estilo para la app de Text

Ajusta el espaciado con el dot de estilo de la app de Text

El espaciado superior de la sección debe medir 50 pixeles.

Bloque del programa: oradores y características

Agregaremos 2 secciones para este bloque. Cada uno tendrá 3 columnas, las cuales medirán 320 pixeles para que sean simétricas.

Para empezar, instalaremos una app de Text + Photo Block en la primera columna de la primera sección.

App de Text + Photo Block en su estado predeterminado

Utilizaremos esta app para mostrar a los oradores invitados

Tenemos varias cosas que modificarle. Primero, personalizaremos el título de la app (el texto que está en la parte superior).

Cambiando el estilo del título de la app de Text + Photo Block

Utiliza la letra en “Ubuntu Condensed” con nuestro color personalizado (#BD3632)

Lo que sigue será eliminar solamente el primer título de los elementos porque ecesitamos que el texto esté del lado derecho de la imagen. Así que recuerda eliminar el título del elemento cada vez que agregues uno nuevo.

Cambiaremos el texto predeterminado y modificaremos su estilo. La primera línea será el nombre del orador. Para ella debemos asignarle una etiqueta de H3, usar la tipografía Ubuntu Condensed a 22 puntos y en color negro. La descripción sobre la persona será en el color rojo personalizado, con la tipografía “Georgia”, en tamaño 14 e inclinada.

Lo más probable es que tengas que cambiar el tamaño de la imagen (a menos que la imagen sea muy pequeña). Toma en cuenta que, al cambiar su tamaño, los demás elementos de la app se verán afectados.

Barra de herramientas para la app de Text + Photo Block

El cambiar el tamaño de la imagen o no, dependerá del tamaño de la imagen original

Al final, deberás tener 5 elementos para cada uno de los oradores y deberás estilizarlos como lo mencionamos anteriormente.

Primera columna con la app de Text + Photo Block

Esta es la primera columna de oradores terminada

Ya que la siguiente columna tendrá el mismo estilo y configuración como la anterior, solamente duplicaremos la app y reemplazaremos su contenido.

"Duplicate App"

Nos ahorraremos el tener que configurar la app nuevamente al duplicarla

Entonces, solo tenemos que arrastrarla a la clumna de enseguida. Recuerda que depes reemplazar el texto y la imagen de cada elemento.

Desplázala hasta el lugar deseado

Desplázala hasta el lugar deseado

Cuando termines, el resultado será parecido al siguiente:

Los oradores de la conferencia

Los oradores de la conferencia

En la última columna agregaremos dos apps de texto. En la primera, donde irá el título, utilizaremos la letra “Ubuntu Condensed”, tamaño 30 y de color rojo. Los demás textos serán en  ”Georgia”, con color negro y a 14 puntos.

Agrega dos apps de texto para la última columna

Agrega dos apps de texto para la última columna

Como sabes, la siguiente sección también debe contener 3 columnas de 320 pixeles cada una.

En la primera y segunda columna agregaremos algunas citas con apps de texto. Su estilo será el siguiente: Georgia 16, color negro con la cita inclinada y el nombre del autor normal y en rojo. Modifica estas opciones en el dot de estilo de la app:

  • Left/Right Spacing: 20 px
  • Top Spacing: 25 px
  • Bottom Spacing: 25 px
  • Top Margin: 30 px
  • Bottom Margin: 0 px

Estas columnas deberán tener un fondo rosa (hex #F8EBEA) con cero pixeles de espaciado en todos sus lados.

Dot de estilo para la columna

Los espaciados deben de estar en ceros

Bloque de patrocinadores: apps de imagen

Agregaremos una imagen personalizada para el fondo de este bloque. Después, agregaremos una app de texto en una sección y muchas apps de imagen en una sección más abajo.

Empezaremos por el fondo. Haz clic en el dot de estilo del bloque y luego en el botón de “Edit” en “Background Image”. Usaremos una imagen gris con un borde superior un poco más oscuro. Haz que se repita horizontalmente (Repeat horizontally).

Cambia el fondo para el bloque de patrocinadores

Lo que sigue será duplicar la app de Text que usamos para el título del bloque anterior. Solamente arrastra la versión duplicada hasta su nueva posición y actualiza el contenido.

"Sponsors"

Al duplicar la app, no tendremos que volver a configurar su estilo

Dividiremos la siguiente sección en 4 columnas de 240 pixeles cada una. Ahí colocaremos las imágenes.

Sección dividida en cuatro columnas

Haz que las columnas sean simétricas

Para no complicarnos mucho con las imágenes, agregaremos una primero, le daremos estilo y luego duplicaremos la app. De esta manera, solamente tendremos que reemplazar la imagen de la app duplicada.

Tras instalar la primera app de Image, abriremos su dot de estilo para centrar la imagen y agregarle un borde de un pixel de cada lado en color #CCCCCC. El espaciado superior debe estar en 25 pixeles y el inferior en 10.

Dot de estilo para la app de Image

Añade bordes a la imagen

La imagen que estamos usando mide 300 x 180 pixeles. Reduciremos su tamaño hasta que quede en 66%.

Cambiando el tamaño de la imagen

Para conseguir la apariencia adecuada, reduce la imagen hasta el 66%

Lo que sigue será duplicar y actualizar cada imagen junto con su vínculo.

Editor de imágenes

Utiliza el botón de “Replace” para reemplazar la imagen y el del ícono del eslabón para cambiar el vínculo. En total, debemos tener 14 imágenes.

Cuando termines, deberán verse como en la siguiente imagen.

Vista previa del bloque de patrocinadores

Vista previa del bloque de patrocinadores

Último bloque: pie de página

El último bloque lleva dos secciones: dos apps de texto en la sección superior y una app de Dropdown Navigation y otra de Text en la sección inferior. Todos los textos tendrán la tipografía Georgia y serán blancos o rosas (#DE9A98).

Lo primero que haremos será cambiar el color del fondo del bloque: #BD3632. Después agregaremos las apps de Texto en los lugares indicados.

Haremos algo un poco diferente con el menú de navegación: le agregaremos separadores. Una vez que hayas instalado la app y ya hayas establecido los vínculos, deberás usar el dot de estilo (casi a la mitad del primer vínculo) y seleccionar la opción de “Separators”. Luego elige “Bar”, haz que su color sea igual al del texto (rosa) y agrega 10 pixeles de espaciado.

Dot de estilo de la app de Dropdown Navigation

Utiliza las barras para separar los elementos en tu menú de navegación

Cambia el color de “Rollover” a blanco.

¡Hemos terminado!

He aquí un vistazo del producto terminado:

Sitio de conferencia terminado

Haz clic para ver la imagen más grande

Esperamos que esta publicación te haya ayudado o servido de inspiración para tu sitio. Como sabes, esto es solamente una guía: tu puedes hacerle los cambios que quieras.

Si te quedó alguna duda o quisieras expresar tu opinión, hazlo en la sección de comentarios.