Ask a Question ?
Design & Publish Websites Faster

Creating “Meaning” in Breezi

Meaning is an annual business conference. Today we’re recreating its 2012 event micro site with our web design app.

This is what their site looks like.

Meaning conference micro site

Meaning conference website

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.

Layout diagram of the "Meaning" conference site

Containers and apps used for this breakdown

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 "Add Block" button highlighted

These controls won’t be visible unless you check the box for “Layout Controls” on Design Mode

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.

Dragging an "Install New" button from the App Store

We’ll fill our layout with apps wherever they belong

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

Apps with default content

This is what “empty” apps look, right before adding content

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.

The "Edit Content" button for a Navigation app

Click on this button to open the CMS panel for the Navigation app

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

CMS Panel for the Navigation app, highlighting the link URK

Edit links from the Navigation app to anchors that we’ll set up throughout the page later on

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).

Headings on Text apps

This is how the “Speakers” text headings should be marked

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

Code for the Embed HTML app of first (left) column

Entering CSS + HTML code

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

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.

Adjusting the Super Map settings

We’ll edit the location and height of the Super Map app

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.

Design Mode options

Deselect Layout Controls and enable “Dots”

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.

Style Dot for a Button

Click “Save Styles as Dot Profile” to recycle these same styles in other Dots

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.

Changing the spacing between items

Changing the spacing between items

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.

Style Dot and background image settings for a Block

Moving the slider to the right on the vertical position will cause the background image to go to the bottom

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.

Style Dot for the "Follow Us" button

Clicking on “Load Dot Profiles” will open a modal window to select a previously-saved profile

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.

Bulk Style Editor for Text

We’re only selecting some Blocks to be affected and we’re keeping the style options merged

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.

Edit in place toolbar for editing text

Centering text manually

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.

Bulk Style Editor, with only "Body 3" selected

We’re selecting only a Block for bulk editing, so it won’t mess the others

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.

Background image settings of the "Location" Block

Adjusting the vertical slider will position the background image higher or lower

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.

Footer text with Edit in Place toolbar

The footer has only this line of text with some links

Additional Configuration

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

Page settings window

Here we can edit the page title, add meta keywords and description (for Search Engines)

That’s it

We’re done and ready to publish!

Here’s a screenshot of what the site will look in our web tool.

Meaning conference site converted to Breezi

This is our finished version, click to enlarge!

Liked this how-to? Let us know below!

Menu