Create a complete website using Elementor kits and Theme Builder

The Goal: Create a full website which uses an Elementor Digital Agency Website Kit and the Hello Theme

---

The website will have the following page structure:

• Home 
• About Us
• Services
• Social Media
• Clients
• Archive with Single Posts
• Contact Us
• Header and Footer
• 404 page

---

STEP ONE: Choose A Theme

1. Go to Appearance > Themes
2. Click Add New
3. Search for Hello Elementor
4. Click Install
5. Click Activate

Note: If you have an Elementor hosted website, the Hello Theme will already be installed.

---

STEP TWO: Create Pages

1. Go to Pages > All Pages
2. Hover over the Sample Page title 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 the Edit with Elementor button
6. Click the Page Settings cog in the lower left corner of the Widgets Panel
7. Change the Page Layout to “Elementor Full Width”. Notice that the header is incomplete. You will work on this in a later step.
8. Click the Add Template folder icon to open the Template Library.
9. From the Template Library’s search box, search for “Digital Agency Home”.
10. Click Insert to load the template into the page.
11. Click the Publish button.
12. Click “Have a Look” to view the published page.

Repeat these steps for each new page, being sure to add About, Services, Social Media, Clients, and Contact Us pages. 

Tip: Create new pages by pressing CMD-E on a Mac or CTRL-E on Windows to open Finder, then type “Add” and choose “New Page” from the search results. This way you can continue to create new pages right from Elementor’s Editor, without having to return to the dashboard.

Note: Notice that you haven’t yet created the News Page yet. This is because it isn’t a static page like the others. It is an Archive Page with Dynamic Content, and you’ll create 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 homepage displays:” to “A static page”, and then select the Home page you created in the steps above from the Homepage dropdown list.
2. Click the Save Changes button.
3. Go to Pages > All Pages and verify that the Home page you created now says “Front Page” next to it.

---

STEP FOUR: Insert A Header Using Elementor’s Theme Builder

1. Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select “Theme Builder”
2. Click the Add New button
3. Select “Header” from the Template Type dropdown
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 header and click the Insert link.

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

---

STEP FIVE: Create The Menu

1. Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select “Menus” to quickly navigate to the WordPress menus section.
2. Under Menu Structure, type a name for your menu, such as “Main Menu”
3. Click the Create Menu button
4. Under 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 desired by dragging them up or down. 
6. Nest any items as child pages under parent pages by dragging the child slightly to the right, and just under a parent page. Do this for Social Media, by dragging it just under Services, and slightly to the right.
7. Click the Save Menu button.
8. Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select “Theme Builder” to edit your header with Elementor
9. Click Publish button.
10. Click 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 Using Elementor’s Theme Builder

1. Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select “Theme Builder”
2. Click the Add New button
3. Select “Footer” from the Template Type dropdown
4. Give your template a name, such as Site Footer
5. When the library opens the footer templates, search for “Digital Agency”
6. Hover over the Digital Agency footer and click the Insert link.
7. Notice that although you’ll see the header in the editor, only the footer will actually be editable here.
8. Click the Publish button.
9. Click 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 the Finder and search for and select “Theme Builder”
2. Click the Add New button
3. Select “Archive” from the Template Type dropdown
4. Give your template a name, such as News Archive
5. When the library opens the archive templates, search for “Digital Agency”
6. Hover over the Digital Agency archive template and click the Insert link.
7. Click the Publish button
8. Click the Add Condition button
9. Choose Include > All Archives as the condition and click the Save & Close button

Note: Since this is a new site, we only have the default “Hello World” post. You’ll need to create new posts, in a category called “News” (for this example – use your own categories as needed), and set them to use this template. We’ll do that next.

---

STEP EIGHT: Create New Posts In A News Category

1. Go to Posts > All Posts
2. Hover over the Hello World title and click the Trash link to delete 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 an excerpt if you’d like.
6. Under Category, click Add New Category, and give it a name, such as News
7. Click the Publish button
8. Repeat steps 3 through 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 called your category). Click the category that appears in the search results to view the Category Page. Verify that your new posts are displayed nicely on the News Archive page.
10. Click on the title of any post from the News Archive page.
11. Notice that the styling is not ideal. This is because you need to create a Single Post Template, which you’ll do next.

---

STEP NINE: Create Single Post Template

1. Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select “Theme Builder”
2. Click the Add New button
3. Select “Single” from the Template Type dropdown
4. Select “Post” from the Post Type dropdown
5. Give your template a name, such as Single Posts
6. When the library opens the single post templates, search for “Digital Agency”
7. Hover over the Digital Agency single post template and click the Insert link.
8. Click the Publish button
9. Click the Add Condition button
10. Choose Include > in Category > News (or whatever the name of your category is) as the condition and click the Save & Close button
11. Click Have a Look to see the post using the Single Post Template design.

---

STEP TEN: Add News Archive Page To The Menu

1. Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for “Menus” to go back to your Menu to edit it.
2. Under “Add Menu Items > Categories”, place a checkmark next to the News category (or whichever category you created), and click Add to Menu
3. Drag the new menu item to wherever you want.
4. Click Save Menu

---

STEP ELEVEN: Create 404 Page

1. Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select “Theme Builder”
2. Click the Add New button
3. Select “Single” from the Template Type dropdown
4. Select “404 Page” from the Post Type dropdown
5. Give your template a name, such as 404
6. When the library opens the 404 templates, search for “Digital Agency”
7. Hover over the Digital Agency 404 template and click the Insert link
8. Click the Publish button
9. Click 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 doesn’t exist on your site into your browser to see the new 404 page in action.

---

STEP TWELVE: Edit Content To Suit Your Needs

That’s it! You’ve created an entirely new website using Elementor’s Digital Agency theme kit. Now that you have a complete website structure, you are ready to edit the content on the pages to include all your own information.