How to Create a Material Design About Page Using Elementor and Hestia

Your About page is likely one of the most visited pages on your website.

Why’s that?

Well, people just naturally flock to that page whenever they want to learn more about the person or business behind the site. And especially if you have it in the main menu.

With that in mind, why not capitalize on that fact and put your About page to work? With a good structure, you can use that page as a lead generation tool, a sales mechanism, a follower-growth tool for your social media channels, and a number of other goals.

But before you can achieve any of that, you need to actually build yourself a great-looking About page that deserves the attention.

This is where Elementor comes into the picture.

In this guide, I’m going to show you how to build a material design About page using Elementor, together with the free Hestia theme (though, this process works with most themes).

First, this is the result we’re going for in this guide:

Like it? Okay, let me show you how it’s done.

TL;DR: We have a downloadable template at the bottom of this guide, in case you can’t be bothered to go through the motions. 🤓

Step 1: Decide what you want on your About page

There are a handful of things that you can achieve through your About page. Some of them:

  • It lets you explain who you are (or what your business is). 🤺
  • It describes briefly what your offer is. It explains why would anyone pay attention, and it tells people what’s in it for them if they keep reading. 🎁
  • It introduces the team behind the site. 🤼
  • It lists your top content from the blog. ✍️
  • It promotes your social media profiles. 👱

In this tutorial, I’m going to focus on the technical side of things – how to put all those elements in place on the actual page, so I assume that you already have the storytelling part figured out.

To keep the tutorial versatile, I’m going to make space for each of the elements listed above, just so you can pick and choose what you’ll put on your exact About page.

Step 2: Get Elementor and Hestia (or another theme)

  • Since you’re on Elementor.com then you probably already have the plugin installed on your site. If not, just go here and click the main download button.
  • For Hestia, you can go here. It’s a free theme.

Two reasons why I recommend Hestia. First, I’m part of the company that built Hestia, and I really want to introduce you to it. Secondly, we’ve tested Hestia with Elementor a lot, so we know that they just play well together and will give you the kind of results that you expect.

Once you have both Elementor and Hestia installed and activated, proceed to the next step.

Step 3: Create a new page

This step is nothing out of the ordinary, just create a new blank page, call it About, and launch Elementor by clicking on the big blue button.

You don’t need to worry about how the page’s headline will be presented. Hestia handles that pretty well on its own.

At this point, you can start aligning the individual blocks that will make up the About page:

Step 4: Get the welcome message in place

Start normally by adding a new section, select your page structure (single column works great for the intro), and drag-and-drop a new Text Editor element.

This is your opportunity to tell your audience where they are at – who you are and what your business is.

Here’s what I put in for my imaginary beanie-sewing business:

Don’t judge my impromptu copywriting, it’s just an example. Though, the goal here is to keep this part short and clean. Nobody has time to read through a wall of text.

The Hestia theme was built to cooperate with the way Elementor handles typography, so you don’t have to worry about any piece of text looking off.

Step 5: Describe your offer or products

The next step is showing people what you have to offer (your products or services). For this part, add a new section and use a multi-column layout. I went with three columns, since it’s a popular choice for such designs.

The section settings to choose:

  • In Layout: Stretch Section – yes. (If stretching doesn’t seem to be working correctly, this is why.)
  • In Layout: Content Width – Boxed, 1000px.
  • In Advanced: Margin – 20px top and bottom. I like some more spacing here.

Now you can add the individual product or service elements to be showcased inside the columns. Image Boxes work great for this.

Just use three of them – each one in its own column – and populate them with whatever information you see fit.

Here’s what my section looks like:

  • The one setting I usually change here is the image size – setting it to the max 100 (via the Style tab).

Since this is your About page, and not necessarily a sales page, it’s a better idea to focus just on providing quick summaries of your products and then send people over to the actual store or individual sales pages. Elementor lets you do that via the Link To setting of each individual Image Box.

This product/offer section is also where you can tell people why your website is worth their attention and why they should stick around – tell them what’s in it for them.

Step 6: Introduce your team

  • Your About page is one of the few places where you can shamelessly plug your team, tell something about your story, or introduce some other form of personal touch.

To do that, first, we’re going to add a new single-column section.

Then, let’s stretch it out through Layout → Stretch Section → Yes. It’s also a good idea to limit the Content Width in some way. My setting is Boxed at 750px.

Next, add a background image. Go to the Style tab → Background → Background type → Classic → Add image. Preferably, this should be an actual picture of your team.

The settings I like to assign to this image are the following (of course, I encourage you to experiment with these for yourself):

  • Position: Center Center
  • Attachment: Fixed
  • Repeat: Default
  • Size: Cover

Next step, switch to the Background Overlay dropdown. Select the Classic style, pick a color that’s in tune with your brand identity, and set the Opacity to around 0.9.

Lastly, go into the Advanced tab and set the top and bottom levels of Padding to 90px (more or less).

Now’s the moment when you can be really creative and populate this whole block with whatever elements that tell your company’s story and introduce the team in some way.

Here’s my version:

The individual settings of each of the elements are pretty basic. You can easily recreate this effect just my changing the text colors to white, and adjusting the font sizes and margin/padding values accordingly. The one thing I did is changed the default headline font to Roboto Slab (in Style → Typography).

Step 7: Add links to your top blog content

The individual settings of each of the elements are pretty basic. You can easily recreate this effect just my changing the text colors to white, and adjusting the font sizes and margin/padding values accordingly. The one thing I did is changed the default headline font to Roboto Slab (in Style → Typography).

Now the cool part; add a new section directly below this one, but make it two columns. Also set the bottom padding value to 40px. We’re going to place an unusual element inside each of these columns – an Accordion.

What’s great about Elementor’s accordion is that as soon as you drag-and-drop it anywhere, it’ll come with some starter data. It’s actually much easier to adjust that starter data rather than erasing everything and starting from scratch.

We’re going to be adding one Accordion to each column, which gives us four individual accordion sections. The way I like to treat each section is as an individual content category. Here’s what I mean:

As you can see, the title of each individual section is a category name, and then the content is just a simple list. The default settings for those elements are already okay, so there’s no need to adjust anything except for adding your content.

Step 8: Promote your social media profiles

For this one, we’re going to reuse the “team section” from above. Simply start by duplicating it and dragging it down, right below the “top blog content” section.

Since we’re going to be using some more real estate here, so to speak, let’s set the Content Width parameter to Full Width.

Next, let’s drag and drop a new Columns element right below the divider, like so:

The number of columns featured here will depend on the number of social media profiles that you want to promote. For me, it’s three.

Drag and drop a new Icon Box element into the first column. Erase the description, leaving only the title. Set that title to the name of the social network that you want to promote and pick the icon accordingly:

Don’t forget to set the URL of your social profile in the Link to field.

In the Style tab, set the color of the icon to the social network’s native color.

Next, go to the Advanced tab and space out the padding values to give your icon some room. I like to go with these:

Next, go to the Advanced tab and space out the padding values to give your icon some room. I like to go with these:

Down below, go to the Background drop-down and set the background color to white. Further down, you can set the Border Radius to 5px.

Voilà, our first social media block is ready! Now all you need to do is duplicate it two times to handle your other social networks, change the links and the icons, and put them in the remaining columns.

The final effect:

We’re deliberately using the same background image for this block as we did for the team block. This introduces some visual familiarity and makes things fit together better.

What's next?

At this stage, our About page is done. If you want to, you can add one more section to house a newsletter signup form or any other call to action. It’s up to you.

Here’s another look at the whole thing:

Have you been following along? Does your About page look more or less the same?

Anyway, to make things easier, I invite you to download this template. It features the exact settings and elements that we used above. Feel free to modify and use it on your site. Don’t forget to let us know when you do!

About the Author

Karol K. (@carlosinho) is a blogger and writer, published author, and founder of NewInternetOrder.com

3 Responses

  1. There is nothing left that can’t be achieved with elementor. Elementor is no 1 page builder and its growing fast with huge community . I myself is big fan of elemntor created almost 12 client sites. Thanks karol for awesome post.

Leave a Reply