Quick web design tutorials for Elements
The following tutorials answer many common design questions for people who are new to Elements.
To change the alignment of a built-in component, use the Margin setting under the Spacing control. Watch the video below to learn how to align an object, including how to centre it.
The following tutorial shows you how to make a two-column layout in Elements using either the Flex or Grid component.
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.
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.
You can use a Custom Component to add html code snippet anywhere on your website or page.
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.
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.
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.
Quickly create and design a profile card using the built-in Scaffolding Templates.
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).
Last updated
Was this helpful?
Was this helpful?
