Elementor regularmente ofrece temas que te ayudan crear un sitio web completo de estos. Todos los meses lanzamos nuevos temas que se basan en un nicho específico, pero lo suficientemente flexibles como para que finalmente pueda personalizarlos para satisfacer sus propias necesidades.
Combinado con Elementor Pro, estos temas lo ayudan a comenzar rápidamente con cada parte de su sitio web, que incluye:
la pedades estáticas, como la página de inicio,
- el encabezado
- el pie de página
- página 404
- la sección Archivo
- el blog
- Popups y otros
En este tutorial, le mostraremos Cómo crear un sitio web completar usando el generador de páginas visual Elementor.
Pero antes, si nunca has instalado WordPress, descubre ¿Cómo instalar un blog de WordPress pasos 7 et ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog
Luego de vuelta a por qué estamos aquí.
Cómo construir un sitio web completo con temas de Elementor
En este tutorial, aprenderá cómo usar un tema como base para todas las partes importantes de su sitio web, luego juntará todo para crear un sitio web coherente.
Más precisamente, el tema Agencia digital.
Su sitio web tendrá varias páginas básicas, como páginas:
- HOME
- Compañia
- Servicios
- Clientes
- Blog
- Contacto
Y también ofrece secciones dedicadas también a contenido dinámico. Por ejemplo, los archivos de publicaciones de su blog y las plantillas de publicaciones coinciden automáticamente con sus páginas independientes. También puede cambiar su encabezado, pie de página y paginas 404.
Esta es, Cómo crear un sitio web con un tema de Elementor:
1. Instale y active el tema Elementor Hello
Debido a que usará Elementor y una plantilla de tema para construir su sitio web completo, no necesita buscar otros elementos.
En su lugar, solo necesitará un sitio web ligero y optimizado para el rendimiento, que proporciona el tema Elementor Hello.
Para comenzar, ve a Apariencia → Temas → Agregar y buscar " Hola elementor". Luego instale y active el tema.
2. Configure las páginas estáticas básicas de su sitio web
Luego ve al menú Páginas → Agregar para crear las páginas básicas de su sitio web.
Primero, cree una página llamada " HOME "Y haga clic en el botón Editar con Elementor para iniciar Elementor.
Cliquez sur Ajustes para abrir el configuración de la página y cambiar su diseño para que sea igual a Elementor de ancho completo.
Luego, abra la biblioteca de plantillas de Elementor y busque "Agencia digital" en Páginas :
Debería ver una lista de plantillas de página de este tema. Insertar plantilla Inicio de la lista de modelos.
Ahora debería ver una página de inicio completa. El encabezado parece un poco aburrido por ahora, pero no se preocupe, lo arreglaremos pronto..
A continuación, agregue otra página para usar en su " Compañia".
Como antes, cree una página y cambie el Diseño a Elementor de ancho completo. Luego abra la biblioteca de plantillas e inserte la plantilla Nosotros del tema Agencia Digital.
Ahora simplemente repita el mismo proceso para crear todas las demás páginas, incluidas: Servicios, Clientes y Contacto.
No se preocupe por la página del Blog todavía. Esta página no es estática como las demás. Por esta razón, lo creará allí a través de un método diferente (que cubriremos más adelante en este tutorial).
Para terminar de configurar sus páginas estáticas, debe indicarle a su instalación de WordPress que use una página de inicio estática. Para hacer esto…
- ir a Configuración → Reproducción
- Choisir Una página estática (elija a continuación) en la configuración de la página de inicio
- Seleccione la página que integra la plantilla de la página de inicio del tema.
3. Cree las otras partes de su sitio web
Ahora está listo para construir las otras partes de su sitio web usando Elementor. Elementor te permite ir más allá de la creación de páginas estáticas (como hiciste anteriormente).
Con Elementor, también puede diseñar secciones como: en-cabeza; el pie de página, etc ...
Y gracias al tema Elementor, podrás importar plantillas para todas las secciones que ya están en las páginas estáticas que creaste en el paso anterior.
Para acceder al constructor visual de Elementor, vaya a Plantillas→ Generador de temas. Deberá instalar Elementor Pro para poder acceder a él.
Ahora es el momento de crear tus secciones
Principio de la mente
Para comenzar, vaya a la pestaña Encabezamiento de la interfaz del constructor visual, luego haga clic en Añadir nuevo. En la siguiente pantalla, verá una selección de plantillas en la biblioteca de Elementor. Tal como lo hizo con las páginas estáticas, busque "Agencia digital", luego inserte:
Ahora debería ver una vista previa visual de su encabezado, así como un menú de navegación de la plantilla que insertó.
Si quieres cambiarlo
- ir a Apariencia → Menús en tu panel de WordPress
- Crear un nuevo menú
Una vez que haya creado un menú, puede agregar las páginas que creó en el paso 2 a su menú de navegación.
Lea también: 10 herramientas de automatización para el marketing de pequeñas empresas
Cuando haya terminado de agregar elementos de menú, guarde su menú y regrese a su plantilla de encabezado en la interfaz de Elementor.
Después, publicar su encabezado y use las condiciones de visualización para mostrar su plantilla de encabezado en todo su sitio web. Si lo desea, también puede utilizar las condiciones de visualización para crear diferentes encabezados para diferentes tipos de contenido:
Entonces presione Guardar cerrar
Pie de página
Ahora es el momento de crear el pie de página de su sitio web:
- Regrese a la interfaz visual del generador de páginas
- Click en la pestaña Pie de página
- Haga clic en el botón para Agregar nuevo pie de página
- En la ventana emergente, asigne un nombre a su pie de página y haga clic en Crear plantilla
Ahora debería ver una lista de plantillas de pie de página como lo hizo con su encabezado. Busque "Agencia digital" e inserte la plantilla de pie de página.
Una vez que haya insertado la plantilla de pie de página, debería ver una vista previa de su pie de página:
Después, publicar su plantilla de pie de página y utilice los términos de visualización para mostrarla en todo su sitio web.
página Blog
A diferencia de las páginas estáticas que creó en el paso 2, la página del blog de su sitio web es una " Archivo ". Básicamente, esto significa que muestra dinámicamente el contenido más reciente de su sitio web.
Si un usuario hace clic en un elemento específico en la página del blog, será llevado a una página que muestra el contenido de ese elemento. Esto se llama la página "única". Su diseño único garantiza que todo su contenido se verá igual: lo único que cambia es el contenido real (como el título de la publicación, el cuerpo, la imagen destacada, etc.).
Descubrir Cómo agregar tabla de contenido en WordPress con Elementor
Para crear páginas de archivo y plantillas de página únicas, debe usar el constructor visual Elementor, no zonas página ou artículo WordPress predeterminado.
Para empezar…
- Abra la interfaz del generador de temas
- Ir a la pestaña Archivo
- Haga clic en Agregar nuevo
- Dale un nombre y haz clic en Crear plantilla
Al igual que con su encabezado y pie de página, verá una lista de plantillas de página de archivo. Busque la plantilla "Agencia digital" e insértela.
Ahora debería ver el diseño básico de su página de artículos.
Cabe señalar que si solo ve un artículo es normal, porque WordPress solo viene con un ejemplo predeterminado que es “¡Hola mundo! ".
Por ahora, todo lo que necesitas hacer es publicar su página de archivo y configúrela para que se muestre en todos los archivos.
Lea nuestra guía en Cómo migrar manualmente un sitio web de WordPress
Luego puede ir al menú de publicaciones en su tablero y crear nuevas publicaciones de blog. Asigne cada artículo a una categoría llamada “Noticias.
Ahora, cuando vaya a la página de su Blog, debería ver automáticamente todas estas nuevas publicaciones:
Creación de la página de plantilla de publicación de blog
En este punto, la página de tu blog tiene un aspecto bastante fácil de usar. Pero si hace clic en una publicación de blog específica, el diseño no coincidirá con el resto de su sitio web.
Para resolver este problema, debe crear una plantilla "única" con Elementor:
- Generador visual abierto de Elementor
- Ir a la pestaña Individual Publicación
- Cliquez sur Añadir nuevo
En la ventana emergente Nueva plantilla :
- Darle un nombre
- seleccionar Publicación en la lista desplegable Seleccionar tipo de publicación. Esto le dice a Elementor que desea usar esta plantilla para las publicaciones de su blog (a diferencia de las páginas o algún otro tipo de publicación personalizada que pueda usar)
Una vez más, verá la biblioteca de plantillas de Elementor. Busque la plantilla de artículo única de la plantilla "Agencia digital" e insértela.
Lee tambien Modo de mantenimiento en WordPress: explicación y configuración
Si lo desea, puede utilizar los muchos widgets de datos de publicación dinámica para controlar la apariencia de su página.
Por ejemplo, si modifica el widget Información del correo, podrás controlar los elementos de metadatos que aparecen, como en la publicación ...
- autor
- Fecha de publicación
- comentarios
- Etc.
Una vez que esté satisfecho con el modelo de su artículo, haga clic en Cuestión. Luego, puede usar las opciones de visualización para que esta plantilla única solo se aplique a las publicaciones en la categoría "Más allá de las noticias":
- Seleccione de la categoría
- Elige la categoria Noticias
Entonces presione Guardar cerrar.
Ahora todas las publicaciones de tu blog deben tener un diseño que coincida con el resto de tu sitio web.
Para terminar las cosas, ve a Apariencia → Menús y agregue su página de blog a su menú de navegación. Para ello, puede añadir un enlace a la categoría "Noticias" en la sección Categorías.
página 404
Finalmente, debe crear la página 404 de su sitio web. La página 404 de su sitio web es lo que los visitantes verán si siguen un enlace roto o intentan visitar una página que no existe.
Descubre también nuestro 5 plugins de WordPress para gestionar mejor los errores 404
Para crear su página 404, use el generador visual de Elementor para agregar otra plantilla única.
- Generador visual abierto de Elementor
- Ir a la pestaña 404 error
- Cliquez sur Añadir nuevo
- Insertar plantilla de agencia digital de la página 404
A continuación, publique su plantilla para completar su sitio web.
¡Obtenga Elementor Pro ahora!
Conclusión
Listo ! Eso es todo por esta guía que te muestra paso a paso. Cómo crear un sitio web completo con Elementor. Si usted tiene comentarios o sugerencias, no dude en hacérnoslo saber en la sección reservada.
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
