Wishes you a wonderful day

Wishes you a wonderful day

Wishes you a wonderful day

Wishes you a wonderful day

04

building social blocks

Structural Styles

This section explains how to add proper styles to your block's structural elements.

Overview

It's important to note that these styles are universal across all block types and are the base to building any block. The goal here is to keep design consistency so that you can add adding multiple blocks to a page and have them work together.

Element Name, Style Property, and Property Value

Cover Block #1

Background Color

Link to Swatch #5

Background Image






The Background Image is up to you.


Set the Image Properties to:

Image Size: Fill

Image Position: Center

No-Repeat

Width

100%

Padding

 

5% top and bottom

2% left and right

Display

Display Mode: Block

Position

 

Float: Left

Position: Relative

Properties

 

 

 

Check "Set as Dope Section"

For a full-height Cover Block add autoWindowHeight and align to the Custom Classes

Content Container

Width

100%

Max-width 

 

Choose a value from the Using our Grid Section: Usually 1042.5px

Display

Display Mode: Inline-Block

Position 

Float: None

Properties

 

  

If you decided to have a full-height Cover Block add autoHeightMaint and middle to the Custom Classes

Splash Tip: It's important to keep in mind that you should be naming your block according to what it is, and not where it is or how it looks. For example: if this is your first Cover Block name it Cover Block #1, if this is your second name it Cover Block #2, etc.

Step 1

Updating the Cover block #1 styles

Navigate into cover block #1 styles pane

Assuming you are still in the Content Container Styles Pane, click the Back button

Click Cover Block #1

Updating The Background Properties

In the Styles Pane, click Background, click into the Background Color field, and then select Swatch #5

Adding a Background Image

In Background, click into the Background Image field, and upload or select a photo from the gallery.

Updating the width property

In Background, click into the Background Image field, and upload or select a photo from the gallery.

adding padding

In Background, click into the Background Image field, and upload or select a photo from the gallery.

updating the display mode

In Background, click into the Background Image field, and upload or select a photo from the gallery.

updating position

In Background, click into the Background Image field, and upload or select a photo from the gallery.

Setting properties

In Background, click into the Background Image field, and upload or select a photo from the gallery.

Step 2

Updating the content container styles

Head into the content container styles pane

Click the Back button

Click Content Container

Updating The Width Property

In the Styles Pane, click Background, click into the Background Color field, and then select Swatch #5

updating the display mode

In Background, click into the Background Image field, and upload or select a photo from the gallery.

updating position

In Background, click into the Background Image field, and upload or select a photo from the gallery.

Setting properties

In Background, click into the Background Image field, and upload or select a photo from the gallery.