Skip to main content

Section 2: Improve Your Design Skills - Drag-and-drop components (Lesson 2.1)

Sofia Maconi avatar
Written by Sofia Maconi
Updated over 2 months ago

Transcript

The component library is your secret weapon. Because it's a list of pre-built components such as header sections, or hero sections, footers, etc. that you can simply just drag and drop onto your canvas and adapt to your app's styling.

Let's take a look!

So I've created a fresh new page and I'm going to bring up the property editor. The first thing I'm going to do is just make sure on the Layout tab, that I set this to column. Remember, pages scroll top to bottom so we need to be in a column format. With that, I can click on the component icon and open up this right-hand component library.

Let's have a look at this dropdown. Here are the various components that make up what an app's page is. Now, app pages may vary with their layouts.

If we take a landing page for instance, scrolls top to bottom. If we take a dashboard page, often you have a left-hand column and a right-hand content section. So we have some page layouts.

Next, we have some header sections. You'll recognize this, navigation bars, logo on the left, buttons and icons on the right.

We also have marketing sections, sidebars, footers—basically most of what you need if you'd like to use the component library as a starting point.

Let's have a look at some marketing components. This looks like a two column hero section. Let me drag it in and there we go. Let me close the component sidebar and that looks pretty good to me.

So from here in my property editor, I can start changing things. Let's change this text. Collaborate better with Horizon, and you can see that this component has already inherited our brand colors.

What else do we have in the component library? This looks like a pretty good section to drop in below, drag and drop. There we go.

What else do we have? Drag this in, drop it on the page and now we have a fully fledged feature section that we can edit how we like.

Let me close the component library and let's preview this page.

Collaborate better with Horizon, Annotate your notes, Explore our features—so there we go, up and running in a few minutes with some beautifully predesigned components.

Did this answer your question?