Last updated:
This is where the fun really begins! If you’ve launched the Design your own↗︎ feature as per one of the steps in the last lesson, then you should be on a screen that looks like this:
If you went through our Plan Your Homepage lesson, you can use the outline you created from that lesson to guide your choices in the steps below.
The Design your own feature allows you to put together the foundation of your homepage using pre-designed patterns. All you need to do is click each option in the left sidebar and find the pattern(s) you want to add for each section. You can try out different patterns, rearrange them, or remove them.
Note:
You won’t be editing any of the content in this step, you’re simply adding placeholders of patterns to get the overall layout of the page. A default Header and Footer pattern are included initially, but you can change them. You’ll also only be selecting your base, site-wide colors and fonts here, which you can further refine and customize in the Site Editor.
Let’s get building!
When you first enter the Design Your Own feature, you’ll see a set of patterns on the left-hand side. Next to it is a panel of individual patterns.
Click the Header label in the left-hand panel. Then click one of the choices that appear in the panel next to it. Notice how it then appears in our page preview.
Click the dots on the image below for more information.
This panel offers a selection of pre-designed patterns that you can choose from as your Header design. Click any pattern to replace the current Header and display it in the preview window to the right. Feel free to click through multiple patterns to see what they’ll look like in the preview.
Remember, you’re just choosing the “layout” right now. You’ll edit the information and can make changes to the layout once you leave this assembler feature and move into the Site Editor.
This is the preview window where you can see the patterns you’ve selected and change the screen size options with the icons above.
You can click this button to pick your styles for colors and fonts and then come back to the patterns section to see the styles applied to these patterns.
A list of categories you can pick patterns from.
You can click on each header pattern and it will replace the one in the preview, so you can try out every single pattern if you want to see what it looks like. You can click the screen size icons at the top to see how it displays on tablet and mobile as well.
If you created an outline for your homepage content, or even just have an idea of what pieces you want included in the header of your homepage, look for a pattern that most closely matches the information and a visual layout you like best.
If you can’t find a pattern with exactly the same pieces or layout that you want, don’t worry, in the next lesson you’ll learn how to add or remove pieces from this pattern.
It’s also okay to change your mind as you go through this process. So, if a pattern gives you an idea you hadn’t thought of, run with it!
Once you find the header pattern you want to start with, you’re ready to move on to the next sections which will make up the main content area of your homepage.
Below the header section, you’ll see a list of other available categories with different patterns to choose from. When you click on a category name, the second panel will change to display different patterns from that category as we’ve seen. Feel free to browse through the categories to start with to get an idea of what’s available.
Note:
In this area, when you click on each pattern, it’s going to keep adding them to your page, rather than swapping them out the way the Header section did. This is because you can include more than one pattern in the content area of your homepage, but you would only want one Header across your site.
Click the dots on the image below for more information.
Below are list of categories that you can browse through for different pattern ideas.
This panel will display the available patterns for whichever category you have selected to the left.
Clicking a pattern will add it to the preview section to the right.
Clicking more than one pattern will add to the preview, it won’t replace existing patterns the way the Header section does.
Notice how as you add content patterns it keeps adding each one your click rather than changing it out as happened with the headers.
Take a moment to think about what content you want to include in the main body of your homepage. Again, if you already created an outline for your homepage you can simply refer to that.
As an example, you might want to consider a setup like this:
- Welcome message: Use an Intro pattern
- Highlight your offerings: Select a pattern from Services (even if you’re not offering services)
- Latest posts: Choose a pattern from the Blog Posts category (these include dynamic blocks)
- Subscribe: Pick one of the Newsletter patterns
You’re welcome to choose whatever patterns you like best, from any category, in any order. The category names are just to give an idea about the types of patterns you’ll find in them.
Any pattern can be used and customized for any purpose. So if a pattern includes something that you don’t want but is otherwise perfect, select it anyway. You can add and remove pieces from any pattern in the Site Editor.
Also, don’t worry about any of the sample content that is included in any pattern, you’ll be editing that content later to add your own images and text.
If you change your mind about a pattern you clicked or if you want to move it above or below another pattern, hover over it to reveal the toolbar to move it up or down, shuffle it to try out different patterns, or remove the pattern completely.
Hovering over a placed pattern will provide options to move, shuffle, or delete that specific pattern.
The shuffle feature will change the pattern to a different one. This is a random process and may not shuffle through all available patterns.
You can delete a pattern by clicking on the trash can icon.
The toolbar which appears, where you can click to remove an item.
Once you’ve added the patterns you’d like to use for all of your main content sections, you can move on your Footer.
The Footer section works the same as the Header section. Click patterns to try them out in the preview, each pattern you click will replace the previous one. Again, this is because you would only want one footer section to display across your site.
Once you’ve found a footer pattern you like that most closely matches what you’re looking for, you’re done with the layout step of your homepage.
The Footer pattern sits at the bottom under all other patterns you’ve selected.
Click on different patterns to swap out this Footer pattern to see which one you like best.
Take a moment to admire your work, check it out in the different screen sizes with the icons at the top of the preview, and feel free to change patterns if you decide something isn’t vibing quite right. When you’re happy with the results, click on the Select styles button at the bottom of the first panel on the left.
Remember, this is just a layout framework. Every piece within this layout is fully customizable in the Site Editor. We’re just getting the components in place as a starting point.
The Styles section of the Design your own feature is optional. In this section you can play with different color and font pairings that have been pre-populated or you can keep the defaults. It is also possible to assign custom colors and fonts within the Site Editor later (some options will require a plan upgrade).
These provided color and font pairings are for your site-wide default styles and are a premium feature. Setting colors and fonts on a per block basis doesn’t require a plan upgrade. It’s the ability to set site-wide defaults with pre-populated pairings or custom color codes that is a premium feature. Our Customizing Styles lesson in the Create Your Site course offers additional details on working with styles.
If you’re starting with the Free or Starter (Personal) plan, selecting these color and font pairings will prompt you to upgrade when you’re ready to edit. However, you can test them out and if you like them you can upgrade when prompted, choose to upgrade later and continue, or set the styles back to the defaults.
You’ll have deep customization options once in the Site Editor. For example, you can manually control the color of every letter, blocks of text, buttons, backgrounds and more. If you have specific, custom colors that you want to use throughout your site that will be an option in the Site Editor too, either per block (free) or as site-wide defaults (premium).
If there’s a particular color palette offered that you love as is, go ahead and apply it now.
The Free style is the default color palette that can be used on any plan.
The Premium styles are the premium color palettes provided by our professional designers that offer color combinations that work well together.
You can click through every single color palette to see what your pattern selections will look like with a different coat of paint.
Once you move into the Site Editor you can also customize these colors as desired, including using your own specific color codes if you have specific brand colors you want to work with.
You can go back to the patterns to try different patterns with the selected colors.
The fonts provided here are professionally selected font pairings that work well together on a website and will be set as the defaults throughout your entire site.
Once in the Site Editor, you will also have the ability to assign specific fonts to certain blocks if desired. With a plugin-enable plan it is also possible to work with your own custom fonts. Otherwise, you’ll be selecting from a specific list of available fonts.
Again, these font pairings are for your site-wide settings. You can keep the Free default font option, and then adjust fonts on a per block basis as well if desired, or apply a premium pairing that appeals to you.
The Free font is the default font pairing that can be used on any plan.
The Premium fonts are the premium font pairings provided by our professional designers that work well together.
You can click through every single font pairing to see what your pattern selections will look like with different fonts.
Once you move into the Site Editor you can also customize these fonts as desired.
You can go back to the patterns to try different patterns with the selected fonts.
You can also switch back and forth between the Patterns and Styles sections to try out different patterns with different styles.
Once you’re happy with your color and font selections, click the button at the bottom of the first panel on the left to move on to adding additional pages to your site.
The Add more pages section is where you get to choose the additional pages you want for your site. This is a great option for getting started quickly with pages that are fully set up for you.
You can add any or all of the pages provided in the list by clicking on them in the left sidebar. You can preview each page you’ve added to see the full, professional layout of demo content by clicking on them in the main preview section of the screen. You can remove them by deselecting them in the left sidebar. You won’t be editing them or rearranging the patterns at this time, but you can fully edit them as desired once the site is created with the pages you’ve chosen.
You will notice though that the menu in your Header automatically updates with the new pages you add. This is yet another benefit of the Design your own feature. No need to manually create your menu later, it will be automatically created based on the pages you add, and again, is fully customizable.
Note:
If you’re working with an existing site that already has some pages, any pages you select here might result in a duplicate page with the same name, it won’t overwrite any of your existing pages.
When you have decided on the pages you want to add, click Save and continue. If you’ve selected any premium styles and are starting with the Free or Starter (Personal) plan, you’ll be provided with an option to upgrade to the Explorer (Premium) plan or decide later.
If you select Decide later you’ll see a confirmation page, your Premium styles will remain in place, and you’ll have the option to upgrade later.
If you select the Get Explorer plan button you’ll be taken to the checkout page to complete the purchase and you’ll be able to continue with the next steps after your purchase is complete.
You can also use the links in the top left corner to go back to the Styles and reset them to the defaults.
Here you get another chance to review the homepage design that you’ve created and see how it looks on different screen sizes.
At any point throughout this process, you can click the link in the top left corner to go back to a previous step.
Depending on which launch flow you used from the first lesson, this final screen will either prompt you to Activate your new theme, or to Start adding content. Either way, you’ll be taken into the Site Editor where you can then edit the content of your homepage design.
Once you’ve completed all the steps within the Assembler, you can click the final button in the bottom left corner and you’ll be taken into the Site Editor. That’s where you’ll start editing the content of the patterns and pages you’ve selected using the Design your own feature.
Note:
If you proceed with Premium styles and don’t have the Explorer (Premium) plan or higher, you will see the styles in the Site Editor but they won’t reflect on the live version of the site.
Whether you simply read through this lesson or walked through doing the steps, you can see now why it’s questionable whether this feature even needed a lesson. The Design your own feature is straightforward and intuitive as it guides you through the process of getting the initial pages and layouts in place for your site. But we hope that the lesson provided insight and confidence for your experience.
Back to top