Diseña y publica tus sitios rápidamente

Cómo crear un sitio sobre tu boda con Breezi

Las redes sociales y la vida en línea se han convertido en parte significativa de la vida de mucha gente. A partir de esto, se empezaron a ver tendencias como la de anunciar eventos importantes y compartir información a través de estas redes. Es una manera de estar conectado y poner al día a familia y amigos. Un evento como una boda no es la excepción así que en este tutorial te enseñaremos a crear un sitio para una boda en el que puedes agregar detalles e información sobre ese día especial.  Hazlo único y compártelo. Aquí verás varias ideas que puedes aplicar a tu sitio:

Así se puede ver tu página:


Haz clic en el vínculo para dirigirte al sitio de la boda terminado

Cómo hacerlo

Verás videos tutoriales que te guiarán paso a paso a crear un sitio para una boda desde cero. También puedes usar las imágenes como referencia para aprender a usar nuestro creador de sitios y hacer este sitio especial para tu boda. Para empezar, te mostraremos las secciones del sitio (lo diseñaremos todo en una sola página).

  • Inicio
  • Nuestra historia
  • Fotos
  • Madrinas y padrinos
  • Cuándo, dónde y cómo
  • Registro de regalos
  • Encabezado siempre visible y menú de navegación

Inicio e introducción

El primer paso es crear el encabezado y la introducción. Ve este video tutorial para ver los elementos que se usaron y ve las imágenes para información y pasos importantes.

Así se verá el layout para la primera seccion con las apps acomodadas.

Inicio en el sitio de boda

Usa el dot de estilo para cambiar el fondo, subir una imagen propia o utilizar una de la biblioteca. También puedes usar el fondo que te adjuntamos en el archivo zip al principio del tutorial.

Adding backgrounds

Estas flechas rojas indican los lugares donde debes hacer clic. El dot de estilo a la izquierda, el botón de “Background Image” en medio y el de “Custom Image” a la derecha para agregar una imagen propia

Cambia la tipografía del menú de navegación al hacer doble clic en la app, seleccionar el texto completo y usar el editor superior para cambiarle el estilo. Asegúrate de que el espaciado lateral y vertical sean apropiados. Acomoda las apps para que veas cómo será el resultado final. Puedes copiar y pegar el menú del sitio que ya está diseñado.

Tipografías

Usaremos la tipografía Merriweather

Lo que sigue es agregar otro bloque para el contenido principal donde tendrás que escribir el nombre del novio y la novia y un mensaje de bienvenida al sitio. En esta imagen puedes ver la información e imágenes que fueron agregadas a la app de texto. Ve el video tutorial para que puedas seguir el proceso de creación del sitio para que puedas hacer uno personalizado.

Botón de insertar imagen en la barra de herramientas superior

Las flechas apuntan al botón para agregar imágenes y al lugar donde se insertará dicha imagen

Una de las cosas más importantes es crear una apariencia homogenia. Para lograrlo, agrega un fondo simple pero uniforme a la página. Haz clic en el dot de estilo del fondo y haz clic donde dice “Page Background”. Carga el fondo que quieras usar.

Botón de "Edit" para agregar un fondo para toda la página

Haz clic en el botón de “Edit” para agregar un fondo para toda la página

Una vez que hayas agregado el fondo a la página, puedes seleccionar los bloques en los que quieres que se vea este fondo. Ya que nuestro encabezado continene el menú de navegación, no queremos que se vea el fondo en este bloque. Marca la casilla para “forzar la transparencia” de los bloques que quieras (“force transparency”).

Forzar transparencia

La imagen de fondo se verá a través de los bloques que selecciones

Una vez que hayamos agregado nuestro fondo y el encabezado y mensaje de bienvenida ya estén hechos. Agregaremos una imagen de bienvenida. Para añadirla, deberás crear un bloque nueva debajo del anterior, insertar una app de imagen y hacer que su tamaño sea el más grande posible. Esta imagen es para que los visitantes sepan quién se va a casar.

Para cambiar el tamaño de una imagen

Flecha que apunta a la esquina que puedes arrastrar para cambiar el tamaño de la imagen

Nuestra historia

Aquí es donde puedes decirle a la gente cómo se conocieron, hablar sobre los puntos clave en su relación y de cómo ha sido su vida juntos. Recuerda que debes ser breve y solamente mencionar lo que consideres importante. Si tienes algún problema, puedes usar el video tutorial a continuación como guía.

Esta es la estructura de la página y las apps que debes instalar.

Nuestra historia

Empieza describiendo un poco sobre cada uno y colocando imágenes, nombres e información básica. La mayoría de los visitantes ya deben saber quiénes son los novios pero de todas maneras es bueno presentarse. En esta imagen verá cómo acomodar las apps para agregar el nombre, una foto y algo de información sobre la novia. Una vez que esté como quieres y con los estilos apropiados, deberás duplicar la app al pasar el cursor sobre la app y hacer clic en el botón de “Duplicate App”. Arrastra la app hasta su sección y reemplaza el contenido.

Botón para duplicar la app

Las flechas indican dónde está el botón para duplicar la app y los elementos que usamos en la página

Una vez que hayas agregado todo lo que va en cada sección en su lugar correspondiente, puedes insertar títulos y subtítulos a tus textos. En el video podrás ver cómo se hace paso a paso. Al agregar encabezados, permites que el diseño sea personalizable en el futuro porque solamente tendrás que usar el bulk style editor para cambiar todos los estilos de la página. En la siguiente imagen verás cómo cada uno de estos títulos está en H2 (Heading 2 – encabezado 2). Una vez que decidas el tipo de títulos que utilizarás, podrás hacer clic en Styles de la barra inferior para editar todo en esa sección.

Headings

Las flechas indican el texto que ha sido modificado y el formato de título que se utilizó

Una vez que el texto tenga estilo y que el subtítilo esté categorizado, puedes usar el Bulk Style Editor para editar todo desde su panel. Haz clic en “Styles” de la barra inferior y elegir “Text”.  Deselecciona la opción de “Merge Selected Block Controls” para que solamente modifiques las que quieras.

Pestaña de "Text" en el Bulk Style Editor

Las flechas apuntan a donde se utilizaron Heading 1, Heading 2 y texto normal

Fotos y galerías

En esta sección podrás contar una historia muy fácilmente. Una imagen vale más que mil palabras así que es buena idea agregar algunas imágenes a tu sitio. En el video tutorial a continuación verás cómo hacerlo.

Así quedarán acomodadas las apps.

La app de texto y de slideshow

Una vez que instales la app de Slideshow, tendrás que asegurarte de hacer las imágenes lo más grandes posible; para ello revisa que el espaciado no interfiera con la app. Haz clic en cada dot de estilo alrededor de la app para ver que los márgenes y el espaciado esté en cero.

Márgenes

Ve que los márgenes estén en cero con los dots de estilo

Una vez que le hayas cambiado todas las imágenes a la app de Slideshow, agregaremos un borde para estilizarla. Haz clic en el dot de la imagen y desplázate hasta donde dice “Borders”. Puedes modificar el estilo de los bordes, su grosor, su color y posición.

Border

Las flechas apuntan a los lugares donde puedes cambiar el estilo de los bordes con los dots.

Madrinas y padrinos

Si alguien es muy importante y es parte de la ceremonia, debes de tener por seguro que necesitas agregarlos al sitio de tu boda. En esta sección podrás agregar a tu familia y amigos de forma interactiva. Puedes agregar información sobre ellos o dejar que ellos se expresen en un pequeño párrafo. También puedes hacer que compartan sus opiniones sobre la boda. Con el siguiente video tutorial, aprenderás a hacerlo.

Este es el acomodo de esta sección:

Guest

Para esto usaremos la app de Carousel, la cual es muy fácil de manejar. Con esta app puedes agregar elementos con títulos , información y fotos con su descripción. Recuerda que puedes ver el video para aprender a usarla. En la imagen a continuación verás un artículo de la app de Carousel terminado y el botón de “New Entry” para agregar más.

"New Entry" en la barra de herramientas de la app

Como verás, puedes agregar un título, texto y una imagen. Para agregar más artículos haz clic en “New Entry”

Una vez que hayas agregado todos los elementos, debes de hacer que roten con la ayuda de flechas. Pasa el cursor sobre la app y haz clic en el ícono de la herramienta. En “Entries to Show” selecciona 1 para que solamente se muestre un elemento a la vez (si quieres que se muestren más, también puedes modificarlo aquí). Hacer esto agregará el menú de paginación a tu app para que, al hacer clic en él, puedas navegar entre ellos.

Configuración

Con este menú puedes elegir cuántos elementos mostrar al mismo tiempo

Una vez que termines de arreglar los estilos y de agregar elementos, puedes cambiar su orden fácilmente. Pasa el cursor sobre la app y, debajo de la esquina inferior izquierda de la app, verás dos botones: uno es una “x” para eliminar la entrada y el otro, con las flechas en sentidos opuestos llamado “Reorder”, es para cambiar el orden.

Reorder

Este es el botón de “Reorder” para cambiar el orden de los elementos

Al hacer clic en este botón, se abrirá una ventana llamada “Testimonials”. Tendrás dos pestañas: una para reorganizar los elementos, editar y los elementos y la otra para agregar uno nuevo. En “Manage Testimonials” podrás hacer clic y arrastrar tus elementos hasta su nuevo orden. Cuando termines, haz clic en Close para salir de la ventana. Se cargará la app nuevamente con el orden que estableciste.

Manage Testimonials

En esta ventana puedes reorganizar tus elementos

Cuándo, dónde y cómo

Una de las secciones más importante de este sitio es agregar el lugar, fecha, hora y el hotel.  No es necesario que incluyas muchos detalles aquí, solo necesitas mencionar lo esencial. Para hacer que la información sea más visual, agregaremos un mapa. Así tus invitados podrán planear el camino que más les convenga tomar con anticipación. Es muy importante que agregues la información sobre la ceremonia, el hotel donde podrán hospedarse y cómo llegar a esos lugares así que para ver cómo hacerlo, pon atención al siguiente video.

Así es como estarán acomodadas las apps:

Information

Esta es la app de map o mapa. Es parecida a la app de Embed HTML en la que puedes insertar un código de Google. Para instalarla, haz clic en Apps de la barra inferior y busca la app de Map. Arrástrala hasta el lugar de tu layout donde quieras instalarla. Pasa tu cursor sobre la app y haz clic en el botón de “Edit Content” para editar su contenido. Se abrirá un panel donde podrás colocar el código de Google Maps. Para ver cómo se hace, puedes ver el principio del video de esta sección.

Map App

Pega el código en la sección de “Google Map Embed Code”

Registro de regalos

La sección sobre el registro de regalos es muy importante para tu sitio. Para esto, tienes la opción de agregar un vínculo al sitio donde tienes registrada tu mesa de regalos o, de incluir un texto explicando lo que quieres que te regalen. Solamente recuerda que debe ser algo claro y conciso. En el siguiente video podrás ver cómo hacerlo.

Así es cómo se dividieron las secciones y cómo están organizadas las apps.

Sección de registry

Ya terminamos de crear las secciones principales para tu sitio. Lo que sigue es para mostrarte cómo agregar estilo a tu sitio y darle un toque especial.

Un encabezado siempre visible

Si te diriges a nuestro sitio, verás que el encabezado está siempre visible. Es decir, no importa a dónde te muevas en el sitio, siempre verás el encabezado. Como verás en esta sección de el tutorial, es algo muy fácil de lograr. Ve el video a continuación para una referencia visual de los pasos que debes tomar para agregar este efecto a tu sitio.

Lo primero que debes hacer es abrir el URL/Custom Tracking Code que se encuentra en el menú de More.

URL/Custom Tracking Code en el menú de Admin

Haz clic en el menú de More para encontrar la ocpión de URL/Custom Tracking Code

Esto abrirá una ventana donde tendrás que pegar el siguiente código en la sección de Custom Analytics. En la imagen a continuación podrás ver dónde debes pegar el código.

Custom Analytics

En Custom Analytics es donde debes pegar el código

Haz clic en “Save” para guardar los cambios una vez que hayas terminado. Para ver los cambios deberás publicar tu sitio y salir del editor ya que no podrás ver el efecto en el modo de vista previa. En la siguiente sección te enseñaremos a animar tu menú de navegación.

Menú de navegación

Una vez que todo esté en su lugar, es hora de vincular el menú de navegación a las diferentes secciones de la página. Aunque usaremos código para lograrlo, esto no requiere que sepas programar o codificar un sitio. Ve el siguiente video para que sepas cómo se hace.

Instala una app de Embed HTML justo arriba de cada sección que quieras vincular. Pasa el cursor sobre ella y haz clic en el botón de “Edit Content” en la barra de herramientas de la app.

Embed App

Haz clic en el botón con el símbolo del lápiz

Se abrirá una nueva ventana donde deberás pegar ESTE y reemplazar la palabra que está entre las comillas. Es importante que reemplaces la palabra entre comillas con el nombre de la sección que quieras vincular. Por ejemplo, si quieres vincular la sección de “Fotografías” deberás escribir “fotos” en el código para que tenga sentido. Además, tendrás que usar este mismo código en el menú de navegación así que mantén un orden para que todo salga bien.

Código

La flecha apunta a la sección en la que deberás incluir el nombre de la sección

En el menú de navegación deberás editar los vínculos. Para ello, como usamos una app de texto para el menú, deberás seleccionar el texto que quieras vincular y hacer clic en el ícono del eslabón (el que se muestra en la imagen a continuación). Se abrirá un módulo donde deberás seleccionar la opción de URL y en Open in, poner Same Window para que el vínculo se abra en la misma ventana. En el espacio para el vínculo, deberás introducir un símbolo de número (#) seguido por el nombre exacto que usaste en el código (el que pusiste entre comillas) para esa sección de la página. En el ejemplo anterior donde vinculamos la sección de fotografía y reemplazamos parte del código con “fotos”, el texto en el URL debe ser #fotos.

Opciones de vínculos

Aquí puedes ver el ejemplo de cómo debes incluir el URL en el menú de navegación con el mismo nombre que usaste en la Embed HTML App

Haz esto para cada sección que quieras vincular

¡Y eso es todo, amigos!

Si tienes alguna pregunta, no dudes en escribirla en la sección de comentarios. Recuerda que puedes usar los videos como una guía visual para saber qué hacer paso a paso.