Mazzocco Sonoma

Style Guide


Header Styles

Heading h1

This is a heading h1 set in Nobile. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

Heading h2

This is a heading h2 set in Nobile. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

Heading h3

This is a heading h3 set in Nobile. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

Heading h4

This is a heading h4 set in Lustria. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

Heading h5

This is a heading h5 set in Lustria. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Heading h6

This is a heading h6 set in Lustria. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

 

List Styles

Unordered List
Ordered List
  1. Cras ornare tristique elit.
  2. Vivamus vestibulum nulla nec ante.
  3. Praesent placerat risus quis eros.
  4. Fusce pellentesque suscipit nibh.

Link Styles

Primary Link Button 

Modal Link Button

Large Link Button


Regular Text Link

Alt Link Button

Modal Link Alt Button

 

Instructions


Homepage Banner

The main homepage banner is a content block and can be edited under Content Editor > Content Blocks > Homepage Banner. The background image, title, text, button text, and link can be changed. 

Homepage Links

The two homepage links under the homepage banner are also managed by content blocks and can be edited under Content Editor > Content Blocks > Homepage Links. The background image, title, text, button text, and link can all be altered. 

Homepage Content

The main homepage content is being pulled in from Homepage in the Content Editor. The subtitle is using a bloquote. 

Featured Wines

This is a product group. You can add products to this by going to Store > Products > Click on the product > Categories > Product Groups > and select Featured Wines and then 'Save'.

Homepage Blog Section

The blog title and subtitle are managed through pods and can be edited under Content Editor > Pods > Blog Posts. The two lastest blog posts beneath it are being dynamically pulled in.

Newsletter Sign Up

This is connected to the Contact Type 'Newsletter'. The title can be edited under Content Editor > Pods > Footer Sign Up Title. 

Social Media

The social media icons available to use are Facebook, Twitter, Google Plus, Pinterest, Instagram, Vimeo, Yelp, and Youtube. These are not editable and must be changed by our design team. During the setup process, please send the corresponding links to your project manager. 

Footer Pages

The pages that show up in the footer are managed in the Content Editor. To add or remove a page from the footer, select the page, click Page Properties, for Footer Menu select Yes or No.

Custom Page

The custom page is being used on the About Us page. In order to apply this layout to one of your own pages, while in the Content Editor, click on a page, Page Properties, and set Page Layout to Custom Page.
The top content is being pulled in through the Content Editor. The image links below are managed through Content Blocks.  To add an image block go to Content Editor > Content Block > Add a Content Block and select Page Link as the group. You can enter the title, background image, button text, link, and whether you would like it to be full span or not. The last step is specifying which page you would like it to display on. 

 

Did you break something?


Luckily for you we have included the default HTML and CSS files for this template that you can download right here.

HTML

Download

CSS

Download