Meaning is an annual business conference. Today we’re recreating its 2012 event micro site with Breezi.

This is what their site looks like.

We’ll follow the next steps to recreate this website:

1. Create layout structure (containers)
2. Install apps
3. Enter content
4. Set and style up containers and apps
5. Additional configuration

Overview

We will have 9 Blocks in total, each of them with different numbers of Sections and Columns.

Here’s a diagram that will help picture better what we’re making.

Each white row is a Block, while the grayed ones are Sections. All Sections have at least one Column, or up to three.

Layout Structure

We’ll begin with the structure of our site. We’re building from scratch with a Blank starting point. As we examined it above, we’re creating several additional Blocks, and within each one, some Sections and Columns.

Remember to turn on “Layout Controls” from the Design Mode menu, so that the “plus” buttons for adding Blocks appears.

The structure should resemble the diagram above: the header, intro below it, six bodies and the footer at the bottom.

Installing Apps

Next step is to add all the apps that need installing, taking the diagram also as reference. There are mostly Text apps, and a a few others.

We’re not entering content nor styling them up just yet. This is what the micro site should look at this point.

Adding Content

In this step we have to copy and paste all text, images and content. For the Text and Image apps, double clicking around is the way to go.

For other apps like Navigation, we’ll have to click on its respective “Edit Content” button on its app toolbar.

Since we’re trying to mimic the same single-page navigation from the original site, we’ll be using anchors as links.

Check this article out for detailed steps on how to create sections that you can navigate to on the same page. The anchors we’ll be using on each item of our Navigation are:

•  #top
• #speakers
• #schedule
• #themes
• #location
• #partners

Right now they won’t work, but we’ll worry about setting  them up later.

Remember to mark headings on the text so it’s easier to style later on with the Bulk Style Editor (BSE).

The Schedule Block features 3 embed apps. On each of them we’ll insert some HTML tables so they resemble the original website.

We stored the code needed for each column and made it available for download on the following links.

• for the left column
• for the center column
• for the right column

The code above is for a table in each column. The first column features also the CSS needed to style the HTML correctly. We’re performing some styling on this phase (content) because its code. We’ll be taking care of the rest of the items’ styling on the next step.

Next we’ll edit the map. We’ll click on the app settings button and enter the details for the map, and its height.

Street Name and Number will be: “The Brighton Dome Corn Exchange, BN1 1UE “, City, State Or Region: “Brighton”, Country: “UK”, and Map Height 510. We’ll also move the Initial Map Zoom slider a little bit to the right.

Styling

Now that we have content entered in our site, we will proceed to the styling: colors, backgrounds, alignments and whatnot.

We’ll go Block by Block, including containers and apps. Make sure you have the “Dots” enabled on Design Mode.

For the first one, the header, we’ll change its background to color #222222.

We’ll change the settings for the button and select to not display “Slogan Text”. We’ll change its style and have its background be #d02441, its left/right spacing to 3, its top and bottom spacing (each of them) to 7 pixels, and its width to 76%. For the text, we’ll change it to Arimo (we’ll be using that one for several other items), its color to white and size 15.

Since there’s another button that will use the same settings, we’ll save this style as a profile, so we can import it back in the other button.

We’ll reduce the spacing of the Column that contains the Button too. It should be 0 (no spacing).

We’ll continue to the styling of the Navigation app. We’ll center on the settings and add some spacing between separators, to around 20 pixels.

Next, we’ll apply this styling to the text:

• Font: Arimo
• Size: 16 pixels
• Default color: white
• Rollover color: #d02441
• Treatment: not bold

Intro Block: we’ll change the background color to #333333, and select the custom image that repeats horizontally. We’ll move the vertical slider all the way to the right. And we’ll add 50 pixels to the bottom spacing.

The Text app inside has an image and some text. We’ll center both, and make the text Arimo white, 24 pixels, with a line height of around 30.

For the button below, we’ll import the profile we’ve already saved.

Will then be left with the text to edit by double clicking. It will have the same style as the former button (Arimo 15 white).

The next Block: speakers. The Block’s background will be #47BAC4, and a horizontally-repeating image will be set also to the bottom.

Here we can start using the BSE (Bulk Style Editor) to edit Text for this and all Blocks below. We don’t want to affect any of the previous Blocks’ style and we’ll later need to make some adjustments, Block by Block.

For the heading 2, we’ll use the following settings:

• Font: Arimo
• Size: 60px
• Color: white
• Treatment: none (unbold)
• Line height: 50px
• Top Margin: 10px
• Bottom Margin: 10px

Heading 3 will be:

• Font: Arimo
• Size: 26px
• Color: white
• Treatment: none
• Line height: 26px
• Top margin: 20px
• Bottom margin: 5px

Then, heading 4:

• Font: Arimo
• Size: 24px
• Color: #2B2B2B
• Treatment: none
• Line height: 30px
• Top & bottom margin: 10px

Finally, heading 5:

• Font: Arimo
• Size: 14px
• Color: #d02441
• Treatment: bold
• Line height: 18px

Bulk Style editing saves a lot of time! Instead of changing piece by piece, we can do it all at once. The only thing we’ll have to do manually wherever it’s needed is to center text (or images inside Text apps).

The next Block, “Schedule”, will have a yellow (#F1C326) background, with an image at the bottom, horizontally repeated. We’ll also add 50px to the bottom spacing.

Except a few settings of spacing here and there, and the centering of text, it should be mostly already styled.

The “Themes” Block has a white background, which is what we’ve got by default. We’ll add another horizontally repeating, decorative image at the bottom.

The text is already mostly styled, but it’s got the wrong colors. So we’re opening the BSE but making sure the only selected Block is body 3.

There we’ll change the color of h2′s and h3′s to #47BAC4.

After centering the text that needs it, and adding/removing some spacing here and there, we’re done with this Block.

“Location” (body 4) Block needs also its background updated. It should be #47BAC4, and this time we’ll use another image that will go around the middle, instead of bottom. This one might be a little tricky to get aligned with the map, so we have to play with the slider of the image-background settings.

The next Block, “Partners”, is also mostly done already. It needs updating the background, but instead of the image going down like we’ve done on the other Blocks, this will be moved to the top. Spacing to the bottom and top will be added too.

Then we’ll modify some text. Since it’s not too much, we won’t need the BSE, we can just use the Edit in Place toolbar (by double clicking on the text we want to edit). The h2 will be yellow (#F1C326), and all the text centered.

The next Block (body 6) will have a gray, #333333 background, as well as its top, horizontally-repeated image. The text will be centered, some white, the last line yellow (#F1C326).

The last Block, footer, will have a background color #222222, and its text #ADADAD, while the links white and all centered, Arial 13px.

Additional Configuration

Some additional stuff we can do is change the favicon and page settings, like name (title) and meta keywords and description.

That’s it

We’re done and ready to publish!

Here’s a screenshot of what the site will look in Breezi.

Liked this how-to? Let us know below!