Learn & Design As You Go!

This template is a desktop down workflow. Set your default styles for wide screens then tweak for smaller devices.

By double-clicking on the canvas, you may type out your text. To modify the font type, size, color go to the Styles pane > Typography. To make changes to an individual word(s) such as emphasizing a statement, use the Inline Editor that appears when you type on the left.

Visit the Site Designer Guide
Use Containers to Organize Regional Elements.

This container uses Flexbox to position the elements. Go to the Styles pane > Layout > Display section to explore the controls.

Learn more about Flexbox
"Use the Apply Styles controls to set Type (default styles), Class (style variation), and ID (single style change) for every element. Will save you from repeatedly choosing the common style choices."
— Classes may be used inline as well like this citation!
Learn more about Selectors
Placeholder Picture
This region is a 2 column layout.

Make them stack for small screens on the Layout section using CSS Grid.

Move the magic slider to the left. When you want to make the items stack go to the Style pane > Layout > Display > Grid. Use the +/- arrows to create a 2-row single column layout for the content to position itself within.

Learn more about CSS Grid >
preview to see the image hover effect.

Change the 'In State' control to Hover to create an effect.

The image on the right has a hover effect. The image is nested in a container that is set to the hidden position. This means that when you do hover, the image expands but is constrained within the container size. You can change the time of the transition in the Effects section.

Learn more about States >
Placeholder Picture

HTML Elements

Use the HTML Element to inject custom markup into the page. From the Element pane, you can manage custom HTML, CSS, and JavaScript and edit within the handy code dialog.

Learn more >

Symbols

Set common page items as a Symbol on the Content pane to keep items in sync across your project. This is helpful for your nav menus and page footers so changes are applied globally.

Learn more >

Components

Browse the Components Library to access a growing collection of premade, customizable website features and page regions to insert into your web pages.

Learn more >

Manage your project

Add new pages to your project from the Page Manager from the Pages toolbar icon. Here you can configure page SEO details, adjust page names, or change the page order.

Learn more >
build websites at the speed of light

Visit our growing library of website templates and components to make your workflow faster than ever. 

Visit CoffeeCup Store