Build a complete website with Elementor kits and theme builder

The goal: Build a complete website using Elementor digital agency template kit and Hello theme

The website will have the following page structure:

• Home
• About us
• Services
• Social networks
• Clientele
• Archive with individual posts
• Contact Us
• Header and footer
• 404 page

STEP ONE: Choose a topic

1. Go Appearance> Themes
2. Click Add new
3. Look for Hello Elementor
4. Click Install on pc
5. Click Activate

STEP TWO: Create Pages

1. Go Pages> All Pages
2. Hover over the title of the sample page and click the Trash link to delete the sample page that comes with the default WordPress installation.
3. Click Add new
4. Give the new page a name; in this case, «Home»
5. Click on the Edit with Elementor button
6. Click on the Page setup cog in the lower left corner of the Widget panel
7. Change the Page design to "Elementor Full Width". Notice that the header is incomplete. You will work on this in a later step.
8. Click on the Add template folder icon to open the Template Library.
9. In the template library search box, search for «Home Digital Agency”.
10. Click Insert to load the template on the page.
11. Click on the To post button.
12. Click on "Have a look”To view the published page.

Repeat these steps for each new page, making sure to add the About, Services, Social, Customers, and Contact Us pages.

Tip: Create new pages by pressing CMD-E on a Mac or CTRL-E on Windows to open the Finder, then type "Add" and select "New Page" from the search results. This way, you can continue creating new pages directly from the Elementor Editor, without having to return to the dashboard.

NoteNote that you have not yet created the news page. This is because it is not a static page like the others. It is an archive page with dynamic content and you will be creating this page soon.

STEP THREE: Tell WordPress which page to use as the home page

1. From the WordPress dashboard, go to Settings> Reading and change the option «Your home page is displayed:" to "A static page”, And then select the home page you created in the previous steps from the home page drop-down list.
2. Click on the Save Changes button.
3. Go Pages> All Pages and verify that the home page you created now says "Cover" next to it.

STEP FOUR: Insert a header using Elementor's theme generator

1. Press CMD-E (Mac) or CTRL-E (Windows) to open Finder and find and select "Theme Builder"
2. Click on the Add new button
3. Select «Header”From the Template Type drop-down menu
4. Give your template a name, such as Site header
5. When the library opens the header templates, search for «Digital agency«
6. Hover over the Digital Agency heading and click the Insert link.

Note: Since this is a new site, we have not yet created a menu. This is why you will see an empty menu widget in the header template you just inserted. We will create our WordPress menu next.

STEP FIVE: Create the menu

1. Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and find and select "Menus" to quickly navigate to the WordPress menu section.
2. Below Menu structure, enter a name for your menu, such as "Main Menu"
3. Click on the Create menu button
4. Below Add Menu Items> Pages, place checkmarks next to each of the pages you created, and click the Add to menu button.
5. Reorder them as you like by dragging them up or down.
6. Nest items as child pages below parent pages by dragging the child element slightly to the right and just below the parent page. Do this for social media, dragging it just below Services and slightly to the right.
7. Click on the Save Menu button.
8. Press CMD-E (Mac) or CTRL-E (Windows) to open Finder and find and select "Theme Builder" to edit your header with Elementor
9. Click To post button.
10. Click on the Add condition button
11. Choose Include> Entire Site as the condition and click the Save close button.
12. Notice that the menu is now displayed in the header.

STEP SIX: Insert a footer with the Elementor theme generator

1. Press CMD-E (Mac) or CTRL-E (Windows) to open Finder and find and select "Theme Builder"
2. Click on the Add new button
3. Select «Footer”From the Template Type drop-down menu
4. Give your template a name, such as Site footer
5. When the library opens the footer templates, look for «Digital agency«
6. Hover over the footer of the digital agency and click on the Insert link.
7. Note that although you will see the header in the editor, only the footer will be editable here.
8. Click on the To post button.
9. Click on the Add condition button
10. Choose Include> Entire Site as the condition and click the Save close button

STEP SEVEN: Create the News Archive Page Template

1. Press CMD-E (Mac) or CTRL-E (Windows) to open Finder and find and select "Theme Builder"
2. Click on the Add new button
3. Select «Archive”From the Template Type drop-down menu
4. Give your template a name, such as News Archive
5. When the library opens the file templates, search for «Digital agency«
6. Hover over the digital agency file template and click the Insert link.
7. Click on the To post button
8. Click on the Add condition button
9. Choose Include> All Files as the condition and click the Save close button

Note: Since this is a new site, we only have the default post "Hello world". You will need to create new posts, in a category called «News”(For this example, use your own categories as needed) and configure them to use this template. We will do that next.

STEP EIGHT: Create New Posts in a News Category

1. Go Publications> All publications
2. Hover over the Hello world title and click the Trash link to remove the Hello World post that comes with the default WordPress installation
3. Click Add new
4. Give it a name and create your post as you normally would.
5. Add a featured image and excerpt if you like.
6. Under Category, click Add new categoryand give it a name, like News
7. Click on the To post button
8. Repeat steps 3 to 7 for each post you need to add to the News category.
9. Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for "News" (or whatever you call your category). Click the category that appears in the search results to view the category page. Verify that your new posts are displaying correctly on the News Archive page.
10. Click the title of any post on the News Archive page.
11. Please note that the style is not ideal. This is because you need to create a Unique Post Template, which you will do next.

STEP NINE: Create a unique post template

1. Press CMD-E (Mac) or CTRL-E (Windows) to open Finder and find and select "Theme Builder"
2. Click on the Add new button
3. Select «Single”From the Template Type drop-down menu
4. Select «Send”From the Post Type drop-down menu
5. Give your template a name, such as Individual posts
6. When the library opens the single post templates, search for «Digital agencyY "
7. Hover over the Digital Agency unique post template and click on the Insert link.
8. Click on the To post button
9. Click on the Add condition button
10. Choose Include> in Category> News (or whatever your category name is) as a condition and click the Save close button
11. Click Have a look to view the post using the single post template layout.

STEP TEN: Add the news archive page to the menu

1. Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for "Menus" to return to your Menu for editing.
2. Below "Add Menu Items> Categories”, Place a check mark next to the News category (or the category you created) and click Add to menu
3. Drag the new menu item where you want.
4. Click Save Menu

STEP ELEVEN: Create 404 page

1. Press CMD-E (Mac) or CTRL-E (Windows) to open Finder and find and select "Theme Builder"
2. Click on the Add new button
3. Select «Single”From the Template Type drop-down menu
4. Select «404 Page”From the Post Type drop-down menu
5. Give your template a name, such as 404
6. When the library opens the 404 templates, look for «Digital agency«
7. Hover over the 404 Digital Agency template and click on the Insert link
8. Click on the To post button
9. Click on the Add condition button
10. Choose Include> 404 page as the condition and click the Save close button
11. Type the URL of a page that does not exist on your site in your browser to see the new 404 page in action.

STEP TWELVE: Edit the content to meet your needs

That's it! You have created a brand new website with Elementor's Digital Agency theme kit. Now that you have a complete website structure, you are ready to edit the content of the pages to include all of your own information.