Build a complete website with Elementor kits and theme builder

The goal: Cree un sitio Web completo que utilice un kit de plantillas de agencia digital Elementor y el tema Hello

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. Desplácese sobre el título de la página de muestra y haga clic en el link Papelera para eliminar la página de muestra que viene con la instalación predeterminada de WordPress.
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 Panel de widgets
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: Cree nuevas páginas presionando CMD-E en una Mac o CTRL-E en Windows para abrir el Finder, luego escriba «Agregar» y seleccione «Nueva página» en los resultados de la búsqueda. De esta manera, puede continuar creando nuevas páginas directamente desde el Editor de Elementor, sin tener que regresar al dashboard.

Note: Observe que aún no ha creado la página de noticias. Esto se debe a que no es una página estática como las demás. Es una página de archivo con contents dinámico y pronto creará esta página.

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”(Para este ejemplo, use sus propias categorías según be necesario) y configúrelas para usar esta plantilla. Haremos eso a continuación.

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. Escriba la Url de una página que no existe en su sitio en su browser para ver la nueva página 404 en acción.

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.