Elementor

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. Desplácese sobre el título de la página de muestra y haga clic en el linkConcepto de Dominio¿Qué es un Enlace?En Internet, un link, además conocido como enlace o hipervínculo, es cualquier texto o imagen que se encuentra en una página web y en la que el usuario puede pulsar o clicar para ser dirigido a otro contenido distinto. Es el principal medio de “desplazamiento” en la red, puesto que se encuentra presente en prácticamente cualquier portal que visites a día de hoy, inclusive en plus Papelera para eliminar la página de muestra que viene con la instalación predeterminada de WordPressWordPress es el software de blogs líder en el mundo, y es concretamente fácil de utilizar y adaptable. Con WordPress, es factible crear con éxito sitios web con la ayuda de funciones ya predefinidas, sin mucho esfuerzo, y para proporcionar contenido como texto, imagen y vídeo. No se requiere conocimiento de HTML. WordPress además facilita la gestión y el mantenimiento de contenidos extensos. Al mismo tiempo de su fácil manejo, plus.
  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 widgetsConcepto de Widgets¿Qué son los Widgets?Los Widgets son una serie de pequeños programas que se usan para añadir funciones, simplificar o automatizar aquellas acciones que se lleven a cabo a menudo dentro de una web. Son herramientas adicionales, añadidos que se elaboran con la finalidad de hacer más fácil las labores de mantenimiento o inclusive de generación de contenidos dentro de cualquier sitio de Internet y que no han hecho plus
  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 dashboardConcepto de Dashboard¿Qué es un Dashboard?Un Dashboard, término inglés que se traduce normalmente como panel de instrumentos o salpicadero, es una gráfica que enseña los indicadores fundamentales implicados al momento de obtener una serie de objetivos determinados en un negocio. Su uso está orientado a ayudar al momento de realizar decisiones con las que mejorar la estrategia empresarial, poniendo de manifiesto datos útiles.Su elaboración es un tema que requiere de plus.

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 contentsEl contenido puede ser muy difícil de definir con precisión. Es una definición que se refiere a las declaraciones contenidas en un documento o publicación de cualquier tipo y puede incluir las tecnologías de la información y la comunicación. Esto cubre todos los tipos de medios como imágenes y texto. A parte de esto, en el campo de la optimización de motores de búsqueda, los términos duplicar contenido, contenido único, plus 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”(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. Escriba la UrlEl URL (Localizador Uniforme de Recursos), es una dirección definida que apunta a la posición de un archivo en un servidor y lo recupera. Las URL se introducen en un navegador web para ingresar a documentos en la web o se incrustan como hipervínculos dentro de un documento. Se puede usar un Permalink para que una URL esté disponible de forma permanente. Componentes de una URL • prefijo de protocolo plus de una página que no existe en su sitio en su browserUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los plus 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.