MANUAL

Drag and Drop Blocks

Discover how to build new pages and manage content with visual drag and drop blocks.

Many pages on your site may have been built using custom design blocks – flexible, modular elements that you can add, remove, or re-order on the page to create new visual compositions that are always on-brand.

Adding a new block:

Scroll to the bottom of the page and click “Add a Block.” Then choose the type of block you want to add.  There are several block types to choose from:

Content blocks

are the most flexible for building a page with text and photos. There are different styles and column formats to choose from, depending on your site. You can add attachments or photos to any column.

Gallery blocks

let you create slideshows anywhere you want to display multiple photos in a set. You can select from the Slideshow, Grid, or Masonry layout. Add captions, sliders, and arrows for a more interactive experience.

Hero blocks

are a chance to be dramatic. They feature a large visually compelling image with text overlay or a video with a prominent headline. Hero blocks are often found as a header at the top of a page, but you can use this block type anywhere on your site.

Subpages

If your site allows you to add and remove subpages within a section, this block type is where you view and manage those subpages. For example, if your site has a Services or Team section, this is where you would add or remove individual Service pages or Team members. 

Forms / CTA

Some sites allow you to add a form to any page.

Every site will have its own Call to Action, and we will design a special CTA block for your site's particular needs. This block type usually has shared content throughout the site. You can use it anywhere on your site.

Video

You can always add a youtube video embed to any content block. But if you want something fancier like a custom video image or a multi-video player, use this block type.

Special

This category shows up for unique blocks that we created just for your site. Go ahead and create one to explore the options.

How to use blocks

  • When you first add a new block, that block's setting bar will be open. Look for the grey gear on the left and a row of tools for customizing the block.
  • You may choose from several different styles and layouts for each type of block.
  • Now that you have selected your block type, you can place that block in the desired area of your page.

Placing a Block

  • Place your curser in the grey area with the gear on the far left. This should highlight the entire block in pink.
  • Grab the block by its handlebar and scroll up to “drag and drop” the block to the desired location on your page. You can also use the arrows to slide the block up or down the page.
  • The block turns red to show it is in motion.
  • Once the block is placed, you can begin adding or editing content, or creating styles within that block.
  • You can add your content before or after placing the block. Both work! It’s just a matter of personal preference.
  • You can reorder blocks on a page at any time by dragging and dropping them to the desired location.

Block Settings

  • The Block Settings bar allows you to fine-tune the design of your content. For Content blocks, you will see options for Background, Layout, and Style. For Hero blocks, you will see an additional Theme option.
  • Background refers to the background color of the site. The background color choices that you see have been selected by our designers to match the palette of your site. Some block types, like the Hero/Banner Block,  also give you the option to upload a background image.
  • Layout has to do with spacing of content. Here you can decide to center everything in that block or add additional space called “padding” to the top or bottom of the block.
  • Style gets more specific. The number of choices depends on the type of block as well as the level of customization for your particular site.
  • Some blocks have options for special settings.
  • The Hero blocks, for example, allow you to select a Theme that pulls together the look of the whole block and adds visual impact. 
  • Gallery blocks offer different visual presentation options, a slider feature, and the ability to add captions to images.
  • For Content blocks, you will need to decide on the number of columns. Under Style, you can add a block topper or an accent.

To Re-order Blocks on a Page

  • You can grab any block by its handlebar on the left, and drag it up or down the page. The block turns red to show that it’s in motion.
  • Drop the block anywhere on the page and it will anchor there.
  • You can also move blocks by using the up/down arrows. 

To Remove a Block

  • Click the gear that opens the Settings bar for that block.
  • Click the black X on the right.
  • The system will ask if you are sure. A deleted block is gone forever! Please be careful about deleting blocks.

BE CAREFUL! When you delete a block, it's gone forever!

DID YOU KNOW? Some blocks, like CTAs, have “shared content.” This means they have the same content throughout the site.