Create a Complete Website Using Elementor Kits and Theme BuilderThe Goal: Create a full website which uses an Elementor Digital Agency Template Kit and the Hello Theme
The website will have the following page structure:
Home About UsServicesSocial MediaClientsArchive with Single PostsContact UsHeader and Footer404 page
STEP ONE: Choose A Theme
Go to Appearance > ThemesClick Add NewSearch for Hello ElementorClick InstallClick Activate
STEP TWO: Create Pages
Go to Pages > All PagesHover over the Sample Page title and click the Trash link to delete the Sample Page that comes with the default WordPress installationClick Add NewGive the new page a name – in this case, 「Home」Click the Edit with Elementor buttonClick the Page Settings cog in the lower left corner of the Widgets PanelChange the Page Layout to 「Elementor Full Width」. Notice that the header is incomplete. You will work on this in a later step.Click the Add Template folder icon to open the Template Library.From the Template Library』s search box, search for 「Digital Agency Home」.Click Insert to load the template into the page.Click the Publish button.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
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.Click the Save Changes button.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
Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select 「Theme Builder」Click the Add New buttonSelect 「Header」 from the Template Type dropdownGive your template a name, such as Site HeaderWhen the library opens the header templates, search for 「Digital Agency」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
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.Under Menu Structure, type a name for your menu, such as 「Main Menu」Click the Create Menu buttonUnder Add Menu Items > Pages, place checkmarks next to each of the pages you created, and click the Add to Menu button.Reorder them as desired by dragging them up or down. 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.Click the Save Menu button.Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select 「Theme Builder」 to edit your header with ElementorClick Publish button.Click the Add Condition buttonChoose Include > Entire Site as the condition and click the Save & Close button.Notice that the menu is now displayed in the Header.
STEP SIX: Insert A Footer Using Elementor』s Theme Builder
Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select 「Theme Builder」Click the Add New buttonSelect 「Footer」 from the Template Type dropdownGive your template a name, such as Site FooterWhen the library opens the footer templates, search for 「Digital Agency」Hover over the Digital Agency footer and click the Insert link.Notice that although you』ll see the header in the editor, only the footer will actually be editable here.Click the Publish button.Click the Add Condition buttonChoose Include > Entire Site as the condition and click the Save & Close button
STEP SEVEN: Create The News Archive Page Template
Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select 「Theme Builder」Click the Add New buttonSelect 「Archive」 from the Template Type dropdownGive your template a name, such as News ArchiveWhen the library opens the archive templates, search for 「Digital Agency」Hover over the Digital Agency archive template and click the Insert link.Click the Publish buttonClick the Add Condition buttonChoose 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
Go to Posts > All PostsHover over the Hello World title and click the Trash link to delete the Hello World post that comes with the default WordPress installationClick Add NewGive it a name and create your post as you normally would.Add a Featured Image and an excerpt if you』d like.Under Category, click Add New Category, and give it a name, such as NewsClick the Publish buttonRepeat steps 3 through 7 for each post you need to add to the News category.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.Click on the title of any post from the News Archive page.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
Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select 「Theme Builder」Click the Add New buttonSelect 「Single」 from the Template Type dropdownSelect 「Post」 from the Post Type dropdownGive your template a name, such as Single PostsWhen the library opens the single post templates, search for 「Digital Agency」Hover over the Digital Agency single post template and click the Insert link.Click the Publish buttonClick the Add Condition buttonChoose Include > in Category > News (or whatever the name of your category is) as the condition and click the Save & Close buttonClick Have a Look to see the post using the Single Post Template design.
STEP TEN: Add News Archive Page To The Menu
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.Under 「Add Menu Items > Categories」, place a checkmark next to the News category (or whichever category you created), and click Add to MenuDrag the new menu item to wherever you want.Click Save Menu
STEP ELEVEN: Create 404 Page
Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select 「Theme Builder」Click the Add New buttonSelect 「Single」 from the Template Type dropdownSelect 「404 Page」 from the Post Type dropdownGive your template a name, such as 404When the library opens the 404 templates, search for 「Digital Agency」Hover over the Digital Agency 404 template and click the Insert linkClick the Publish buttonClick the Add Condition buttonChoose Include > 404 Page as the condition and click the Save & Close buttonType 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.
