Ask a Question ?
Design & Publish Websites Faster

A Creative Wedding Website Idea for Your Breezi Site

Since social networking and online chatting have become a  trend and a must trough the years, it has become important to announce important life events and information about you through a social network and online to keep your friends an family aware of what’s going on in your life. Getting married is no exception, so today we are going to show you how to build a wedding website that you can use to add details and information about your wedding. Share it in a really fast and unique way. We have come up with this creative wedding website idea to share with you.

This is what your site can look like:


Click on the link to go to the actual wedding website.

How will you do it?

You will be seeing a step by step tutorial on our videos that will show you how to create a wedding website from scratch and you can check the images for important information on how to use our website builder and add extra spice to your wedding. We are going to start by diving into our tutorial in sections since this will be a one page design.

  • Home
  • Our Story
  • Photos
  • Bridesmaids & Groomsmen
  • When, Where & How
  • Registry
  • Sticky Header and Navigation Menu

Home & Introduction

The first step is to create a good header and introduction. Check the video tutorial to see the different things used and check our images for important steps and information.

This is what the layout for this first section is going to look like and how the apps are going to get arranged.

Home

Open the dot so you can change the background, upload your own background or use the ones that we have provided already on the zip file at the beginning of the tutorial.

Adding backgrounds

Red arrows indicate places where to click. From left to right we have the background dot, the background image button and the custom image button.

 

Change the font of the navigation menu by double clicking on the app and selecting the whole text, then check the options for styling that you have on the toolbar that shows at the top of the page. Make sure line height and spacing are properly placed and styling fist the theme fo the website. Check the arrangement of apps so you see how this is going to work, you can copy and paste the menu from our actual website.

Fonts

Font used is Merryweather

 

Next thing that we have to do is to add another block, place your main text in the main section of this new block and add the Bride and Groom names and also a welcoming message to the website. On this picture you see how the information is handled and arrows pointing to the addition of InLine Images. InLine images are images that can be used inside a Text App and can me aligned and resized too. Check out the video for step by step instructions on what do to to get the right look on your website.

InLine Image

Red arrow at the top points to the button to add the InLine Image and the one at the bottom shows the place where it will be inserted.

 

One of the most important things is to set up a homogeneous look and you can achieve this by adding a simple but uniform background through out the page. Do this by clicking on the background dot and clicking where it says page Background. Upload your background as we have done previously.

Page BG

Click on the Edit button to add a page background.

 

Once that you have added a page background you can select what blocks you want this background to show at. Since our header will contain our navigation menu we will not show our page background on this one. Select blocks that you want the background to show at.

Page BG2

Blocks selected will display the page background instead of it’s own background.

 

Once that we have  added our background and the header and introduction message are ready we are going to also add an introduction image. To do this add another block under the previous one, insert an image app and resize it to its maximum. This image will work somewhat as a splash image, allowing visitors to know who is getting married and sets the mood and tone of your website.On this image we show you how  to resize the app to it’s maximum. Check video for step by step procedure.

Image resize

Red arrow points to a resizer corner. Use this to drag and drop the image size.

 

Our Story

This is where you tell everybody how you met, the journey you traveled together and highlights about your relationship. Remember to be brief and mention what you would consider as important. If you have any problems, check video below and see how this was done step by step.

This is the structure of the page and apps to be installed.

Story

Start by describing a little bit about yourselves and placing pictures, names and basic information. Most of your visitors already know you but give an introduction to who you are. On this image you will see how the app is arranged to display a name, a photo and some information about the bride. Once everything is properly styled duplicate the app by hovering over it and clicking on the Duplicate App button. After that drag and drop the app to its section and replace important content.

Duplicate App

Red arrows indicate the duplicate app action and elements used on the page.

 

Once every section has been added and everything its on its right space you can add headings and titles to your text. See on the video how this was done step y step. Adding headings allows for a design to be customizable in the future and will allow you to bulk style everything on the editor. On this picture you see how one of the titles of our text is being styled as a Heading 2 text. Once you decide what kind of headings you are going to use you can click on styles at the bottom of the editor to edit everything in batch.

Headings

Arrows show text being modified and heading used.

 

Once that text is styled and headings have been categorized you can bulks style everything from your bulk style editor. Simply click on the style tab at the bottom of our editor and choose text. Uncheck the Merge Selected Block Controls to only style the one you want. See on this picture how the modal looks like and try it on your own.

Bulk Editing

Arrows on top indicate Heading 1, Heading 2 and regular text.

 

Photos & Gallery

On this section you can tell a story in a simple way. A picture is worth a thousand words so it could be good to add pictures of you as a couple to your website. Check video below on step by step instructions and see images for important information.

This is how the apps are going to be arranged at the end.

Photos

Once that the Slideshow App its installed we have to make sure that pictures show as big as possible on the website so we have to make sure spacing is not interfering with our app. Click on every dot surrounding the app and make sure margin and spacing values are at zero.

Margins

See how margins values show at zero after opening the dot.

 

Once the Slideshow App has been filled with entries and its at its maximum size we can add a border to style the app itself. Click on the dot for the image itself and scroll down to the Border Sections. Mark the box for the section and change its style. With the dots you can modify borders style, thickness, color and position!

Border

Red arrows indicate places where you have to click and how you can change its style by the use of our Dots.

 

Bridesmaids & Groomsmen

If someone is really important an is an essential part of your wedding ceremony then they are sure important enough to be on your Wedding Website. In this section we are going to add part of your family in a fun and interactive way. You can place some information about them or let them describe themselves trough a little paragraph. You can also have them share their opinions about your wedding too. Check video below for step by step instructions on how to build this section and see important information on images below.

This is the app and section arrangement that we will be using for this section.

Guest

We are going to be using the Carousel App which is something really fair and easy to use. With this app you can add entries with titles and information and even place a photo with a description on it. See video on how the process goes to create a good entry. On the picture below you will see a somewhat already finished entry, once that you have styled this entry you can add more by hovering over the app itself and hitting the New Entry button.

New Entry and App Configuration

See how our app has an App Title and each one of the entries allows for a photo, a title and a description.

 

Once that you have added all entries the next step is to make them rotate by the use of arrows. Hover over the app and click on the Wrench Icon to edit the settings, on the Entries To Show section choose only one or as many as you prefer. Doing this will add pagination to your app and will allow the entries to rotate. See website to try it.

Settings

This shows how many entries you can showcase on a single app.

 

Once that entries have been added and they have been properly styled you can change the order they show up with a simple steps. Hover over the app itself and get close to the bottom right corner, you’ll see a little tooltip come up with two options, one is to re order the entries and the other one is to remove the current one. Click on the reorder button that shows on the picture below.

Reorder

This is the re order button.

 

As soon as you click on this button a PageSlide will show up where you can manage what we call “Testimonials”. You will have two tabs, one to reorder, edit and delete the entries and another one two add a new one. Hover over the name of the entry and click on oen of them, Hold the click, then drag and drop the entry on any order that you want. Once you are satisfied with the order entries are presented you can click on close or simply click out of the slide to close it. Once you do this your app will reload quickly and it will show you the new order.

Manage Testimonials

This is the Carousel App Slide. Use to to manage every entry on your app. red arrow points to the cursor that shows you that you can reorder the entries.

 

When, Where & How

One of the most important sections that you can add to your website is the place where you add information about location, date, time and hotel accommodation. don’t extend too much into this section since placing essential info gives it an important but brief look to it. We will be adding a map also, that way guest can plan the trip way ahead. Adding info about the ceremony, hotel to stay and how to get to those places will be really important, take a look at the video below  and see how it was done step by step in a simple way and check images below for a glimpse of the important parts.

This is how apps are going to be arranged and placed, check actual site for a proper look or see video above on a step by step procedure.

Information

This is the Map App, is somewhat of an embed app where you can place a Google Map Embed Code. Open the app shelf and drag and drop the app on the section where you want it to be. Hover over the app and click on the Edit content button. A little modal will you up where you can place the code that you get from your Google Maps location. Check video at the beginning of this section to see how it was done,, but trust us, this is fairly easy and simple.

Map App

This is the code that needs to be replaced from the Google Maps page.

 

Registry

 

The Registry is an important part of your website. You have a few options over here; either add links to places where you are registered or add a piece of text telling them what you really want. At the end this is up t you, but keep in mind this sets the mood for one part of your website so we sugest you to keep it concise and simple. video below will show you really quick how this is done.

This is how the sections are divided and how the apps are arranged.

Registry

So far we have finished creating the main sections of our website so its time to show you how to stylize your website and add a special touch to it.

 

Sticky Header

As you see on our website the header is sticky, this may seem like a difficult thing to achieve but it’s quite simple to to. Doing this gives a really cool and smooth look to your website and allows users a sense of continuity between your sections. Check video below for a step by step procedure and see images for the important steps of it.

First thing that you need to do is to open the URL/Custom Tracking Code of your website. Do this by clicking on the More menu of the shelf at the bottom of the editor and clicking on the URL/Custom Tracking Code section. Check image below.

Sticky Header

Tab showing the place to open the Slide.

 

Once the section is clicked you will see a Slide coming up. On this slide you have to place THIS code onto the Custom Analytics section. The code includes two things; a specific code to make your header sticky and a code that includes a script to make navigation smooth, the last thing is something that we will use later. Check image below for a proper look on how the code needs to be placed.

Custom Analytics

Custom Analytics section with code already placed.

 

Once code is placed hit save, now the page will automatically reload. Publish your website and logout of the editor to see changes since the sticky header is only visible from your public site. Now scroll down to the next section to show you how to animate your navigation menu.

 

Navigation Menu

 

Once everything has fallen into place it’s time to link the navigation menu to specific sections of the page. This requires a little bit of code that it’s not harmful to your page and requires no previous knowledge of coding. Check video below to see how it was done and see actual website to see how it functions.

Install an embed app right on top of the section that you want to link. Hover over the app and click on the Edit Content button that has a pencil in it. A slide will show up. see image below for more info.

Embed App

The embed app Edit Content button.

 

A slide will open up. Delete all current content and place THIS once, replace words and quotation marks just like in the video. One important thing to do is to make sure name you place on this code between the quotation makrs is the one you want for the section since this is exactly the same name that you will be using inside the link of the Navigation Menu.

Embed App

Red arrow points to the name of the section to be linked, showing “photos” here.

 

Go back to the top of your page and double click on the Text App that contains your navigation menu. Select text to be linked and click on the Link Icon shown on the far right side of the picture below. A modal will pop up, click on the URL tab and make sure that the Open in option says Same Window, on the URL field place the numeral symbol and the name of the section that you want to link, keep in mind this has to be exactly the same name that you placed inside the embed app that was placed on top of section where link will go to.

Link It

See how the URL field shows #photos the same way that the embed app shows “photos”, name is the same, but using the # symbol instead of quotation marks.

 

Do this with every section that you want to link.

 

That was it guys!

This is all folks, if you have any questions check the videos again or write in the comments section to get a quick response!

 

 

Menu