Diseña y publica tus sitios rápidamente

Recreación de un sitio caleidoscópico

¡Bienvenido a otro de nuestros tutoriales para recrear un sitio existente! En esta ocasión desglosaremos la página de aterrizaje de Kaleidoscope, un software que sirve para comparar archivos. Con la siguiente imagen podrás darte una idea de lo que estaremos haciendo. Haz clic en la imagen para ver una versión más grande.

El sitio de Kaleidoscope

Haremos este sitio desde una perspectiva más amplia para que el proceso sea más fácil. Para hacerlo, editaremos varios elementos al mismo tiempo (en lugar de modificarlos individualmente).

¿Por dónde empezar?

Lo primero que haremos será analizar la página original y decidir cómo construiremos nuestro layout. Al ver el sitio original, te darás cuenta de que los bloques ya están bastante definidos, así que podremos lograr un layout similar fácilmente. En la siguiente podrás ver a qué nos referimos.

El sitio de Kaleidoscope dividido en bloques

Haz clic en esta imagen para ver cómo acomodaremos los bloques para este sitio

Lo que sigue será determinar qué apps necesitaremos para recrear el sitio en Breezi. Revisa nuestros tutoriales para que aprendas más sobre las capacidades de cada app y que tomes una decisión informada sobre cuáles usar. En la siguiente imagen podrás ver las que nosotros utilizaremos. Haz clic en la imagen para ver una versión más grande.

Apps para el sitio de Kaleidoscope

Estas son algunas de las apps que usaremos. Haz clic en la imagen para verla en grande. Todas las apps están en su estado predeterminado.

A trabajar en contenido

Una vez que terminamos de construir el layout y que colocamos las apps, es hora de empezar a agregar contenido. Primero que nada, reemplazaremos todas las imágenes del sitio (puedes extraer las imágenes del sitio original). Haz doble clic en cualquier imagen predeterminada y utiliza el editor de imagen para reemplazarla.

En el editor que se abrirá, haz clic en el botón de “Replace” y escoge la imagen correspondiente desde tu computadora. Selecciona el botón de “Use Full” para que la imagen aparezca completa.

Editor de imágenes

Este es el editor en donde puedes reemplazar las imágenes

Asegúrate de reemplazar todas las imágenes del sitio. Al hacer clic en la siguiente imagen podrás ver una vista previa de cómo aparecerá el sitio una vez que termines de reemplazar las imágenes. Toma en cuenta que todavía falta modificar los textos y los estilos.

El encabezado con las imágenes reemplazadas

Así se verá el encabezado cuando termines con las imágenes

Ahora sigue modificar los textos y agregar los correspondientes. Este es un paso bastante sencillo porque todavía no tenemos que estilizarlo. Haz doble clic en el texto para editarlo.

En la siguiente imagen podrás ver el sitio con todo el contenido apropiado.

Texto reemplazado en el sitio de Kaleidoscope

El sitio con el texto adecuado. Haz clic en la imagen para engrandecerla.

Un paso muy importante es asignar etiquetas H a los textos. Esto nos permitirá organizar nuestros textos y, más adelante, a editar varios elementos al mismo tiempo y desde un mismo panel (en lugar de hacerlo individualmente). Para lograrlo, haz doble clic en el texto que quieras etiquetar y seleccionar una de las etiquetas disponibles. Para obtener una referencia visual, dirígete a la siguiente imagen.

Etiquetas H disponibles

Utiliza la barra de herramientas superior para definir los textos en tu sitio

Si necesitas un poco de ayuda con este paso, lee este y este tutorial para aprender a llevarlo a cabo efectivamente.

Una vez que hayamos reemplazado y etiquetado el texto, sigue lo más entretenido: aplicarle estilos. Los skins será de gran ayuda para esta etapa del proceso de creación. Haz clic en el botón de “Skins” ubicado en la barra inferior y luego, en el módulo que se abrirá, selecciona el botón de “Get More Skins”. Luego, escoge “Partial Skin” localizado en la parte superior. Para este sitio usaremos el skin llamado, Font Pairing #7.

Botón de "Get More Skins"

Haz clic en “Skins” para encontrar las opciones disponibles

Navega nuestra galería de skins parciales.

Opciones de skins parciales

Este es el skin que usaremos para este sitio

Haz clic en “Live Preview” y después en “Apply” para aplicar dicho skin. Esto logrará que la mayoría de los estilos se modifiquen al mismo tiempo. Es posible que la actualización tarde un poco porque hay mucho texto en este sitio. Cuando termines, verás que el sitio ya empieza a tomar forma.

Fondos y colores

Ahora tenemos que ocuparnos de los fondos y colores antes de continuar con los detalles. Para empezar, agregaremos color a cada uno de nuestros bloques.

Herramienta de color para el fondo

Haz clic en el dot de estilo del fondo (el más grande) para cada bloque y utiliza la herramienta de color para seleccionar uno o para incluir uno propio

Una vez que termines, agregaremos una imagen al fondo para darle textura y diseño. Haz clic en la opción de “Background Image” (en el mismo dot de estilo), carga un fondo personalizado y haz que se repita en “Repeat”. En la siguiente imagen podrás ver un ejemplo.

Panel del fondo

Estas son las opciones que tienes para la imagen de fondo

Al terminar, tendremos un sitio casi listo. Ahora continuaremos con el Bulk Style Editor para editar el estilo del texto.

El Bulk Style Editor

Selecciona la opción de “Styles” en la barra inferior. Se abrirá un panel donde podrás editar varios elementos al mismo tiempo. Dirígete a el menú desplegable de “All Blocks”. Solamente habilita un bloque a la vez. Al terminar con uno, continúa con el siguiente. Cada vez deberás escoger la pestaña de Text.

En la siguiente imagen verás que una flecha apunta al bloque que se está modificando.

Las opciones de texto para el pie de página en el Bulk Style Editor

Las opciones de texto para el pie de página en el Bulk Style Editor

Al terminar con las opciones más generales del texto, deberemos afinar los detalles. Puedes hacer doble clic en él o utilizar el panel CMS para ajustar el estilo del texto (dependiendo de la app que estés utilizando).

Barra de herramientas

Emplea la barra de herramientas para hacer que el texto tenga el estilo que necesitas

Ahora debemos editar los botones y el Bulk Style Editor puede ser de gran ayuda para ello. Al igual que con el texto, debemos editar bloque por bloque, solo que en esta ocasión, tenemos que seleccionar la pestaña de Buttons para cada uno.

Opciones para los botones en el Bulk Style Editor

Utilizaremos los dots de estilo para modificar las opciones de Background y Rollover Color

En la siguiente imagen podrás ver cómo editamos cada uno de los dots para los botones.

Dot de estilo para un botón

Como podrás ver, cambiamos el color y el ancho de cada botón con su dot de estilo

Y eso es todo lo que tienes que hacer para recrear el sitio de Kaleidoscope. Al hacer clic en la siguiente imagen podrás ver el sitio terminado.

Sitio de Kaleidoscope hecho con Breezi

Haz clic para ver una versión más grande de esta imagen

Gracias por leer este tutorial. Esperamos que te haya gustado y que sea de utilidad.

Si tienes alguna pregunta u opinión al respecto, no dudes en la hacérnosla saber en la sección de comentarios.