How to Tutorials

Quick web design tutorials for Elements

The following tutorials cover a lot of the popular design related questions for newer users in the Elements ecosystem.

👉 You can find even more tutorials on our YouTube channel.

Center an image (or component)

To change the alignment of the built-in Components, use the Margin setting under the Spacing Control. Watch the video below to learn more about setting the alignment of an object, including how to center an object.

Create a two column layout

The following tutorial will show you how to make a two coloumn layout in Elements using either the flex or grid components.

Design a photo banner

In this tutorial, you’ll learn how to design a bold, eye-catching photo header or banner using Elements. We’ll walk through adding background images, adjusting overlays, and layering text to create a professional hero section that captures attention right from the top of your page.

Change how things look on mobile (Responsive Design)

The responsive breakpoint system in Elements allows you to change component properties at different user defined breakpoints (i.e. Mobile, Table, Desktop, etc).

On the first “mobile” screen size you do not have any blue dots. As you move up to the next size (SM) you'll see grey dots beside the controls in the Component inspector. If you click on a grey dot (to turn it blue) you can override the setting for that control. Once you add a blue dot you will have that setting for everything above. It’s always left to right.

Watch the video below to see how this works in practice.

How to add HTML code snippets

You can use a Custom Component to add html code snippet anywhere on your website or page.

How to add Google Analytics

If you’d like to track traffic or integrate services like Google Analytics or Google Tag Manager, you’ll need to add their code snippets to your project. Where you add the code depends on whether you want it to apply to all pages or just one. You can learn more in the Analytics section of this manual.

Add a video background

To add a video header in Elements you’ll need to drop in a Container component, point it at your MP4 file, and then layer your text, buttons, or other components on top. This gives you a high-impact hero section that loads quickly and works across all modern browsers. Watch the video below to learn more.

Link within a page

Anchor tags let you create links that jump directly to a specific part of a page. This is useful for long pages where you want to give visitors a quick way to navigate to key sections. Watch the video below for a step-by-step walkthrough.

How to use Scaffolding Templates

Quickly create and design a profile card using the built-in Scaffolding Templates.

How to hide components at different breakpoints

To hide and show components at different breakpoints you'll need to use the responsive design system built-in to Elements.

Layout > Display > Hidden (toggle).