Cómo crear un sitio web con Elementor (una guía completa)

Desde que se lanzó en 2016, Elementor se ha convertido en el generador de páginas de WordPress más popular. Con Elementor, no solo puedes crear páginas web increíbles. Puede usar Elementor para crear un sitio web completo. La versión PRO A Elementor viene con un generador de temas que le permite crear partes personalizadas de un tema de WordPress. Desde el encabezado, el sótano, la plantilla de publicación única, la página 404, la página de archivo, los resultados de búsqueda, etc. En esta publicación, le mostraremos cómo crear un sitio web completo usando Elementor Pro.
contenido
Una breve introducción de Elementor
Preparación
Dominio+alojamiento
Elementor Pro
empezando
Instalar WordPress
Instale el Pro
Cree las páginas estáticas básicas de su sitio web
Hogar
Sobre la página
Pagina de contacto
Página de clientes
La página de servicio
Crear las partes temáticas
ENCABEZAMIENTO
Sótano
404 página
Plantilla única posterior a la poste
La página de noticias
Surgir
conclusión
Una breve introducción sobre la primaria en caso de que no lo supiera. Elementor es una página que crea complemento para WordPress. Un generador de páginas le permite crear una hermosa página web sin tener que lidiar con HTML o CSS. Un generador de páginas, incluido Elementary, viene con un editor visual en el que todo es querido y caída. Elementor mismo se lanza como un complemento Freemium. La versión Pro (que cuesta $ 49 por año) viene con las siguientes características clave.
Creador de temas
Constructor emergente
WooCommerce Builder
Herramientas de marketing
Formulario
Widgets adicionales
Hemos creado un elemento de comparación entre Elementor Free y Elementor Pro para permitirle obtener más información sobre las ventajas que obtendrá con Elementor Pro.
Preparación En este ejemplo, demostraremos cómo crear un sitio web de agencia digital. El sitio web consistirá en 5 páginas principales de la siguiente manera: la página principal
Sobre la página
Pagina de contacto
Página de servicio
Página de clientes
También crearemos la página 404, encabezado, sótano, patrón de publicación única y una ventana emergente. El propio Elementer ofrece kits de plantilla. Un conjunto de plantillas es un conjunto de plantillas elementales con un concepto de diseño consistente. Un conjunto de plantillas está diseñado para sitios web en un nicho en particular. Usaremos el kit de agencia digital en este ejemplo.
Antes de comenzar a crear un sitio web con Elementor, ciertamente necesita un área y alojamiento. Esto es lo que necesita para prepararse para crear un sitio web con Elementor. Domain+Hosting a Dominio es una dirección a la que las personas pueden acceder a su sitio web (es decir, su web.com), mientras que el alojamiento (alojamiento web más preciso) es un lugar donde está instalado su sitio. Un dominio .com generalmente cuesta entre $ 8 y 13 por año. Para alojar, puede usar un plan dependiendo de sus necesidades. Aunque puede usar Shade Shared, realmente recomendamos usar un alojamiento administrado de WordPress, ya que está especialmente diseñado para administrar sitios web de WordPress. La infraestructura de un alojamiento administrado de WordPress está optimizado para WordPress, incluida la configuración del servidor. Con un alojamiento administrado de WordPress, no tiene que lidiar solo con la optimización y la seguridad del sitio, porque los trabajos son administrados por el proveedor de alojamiento asociado. Bluehost es uno de los proveedores de alojamiento web destacados que ofrecen alojamiento administrado de WordPress.
Obtenga el alojamiento de WordPress administrado en el BlueHostelement Pro, necesita usar la versión Pro Elementor para crear un encabezado personalizado, un sótano personalizado y otras partes temáticas que mencionamos anteriormente. Hay cinco planes ofrecidos por el elemento para la versión Pro. Puede visitar su sitio web oficial para obtener más información. Si desea crear un sitio web para su propio negocio, puede elegir el plan esencial que cuesta $ 49 por año.
Descarga Elementor Pro
Las nociones básicas instalan WordPress Una vez que todo esté listo, puede comenzar a crear su sitio web. Lo primero que debe hacer es instalar WordPress primero, porque es el componente básico del sitio web que crearemos. Los pasos detallados para instalar WordPress varían según el panel ofrecido por su proveedor de alojamiento.
Si está utilizando SiteGround, puede leer este elemento para averiguar cómo instalar WordPress. Si está utilizando un proveedor de uso de Cpanel, puede leer este artículo. Instale Elementor Pro puede obtener Elementor Pro en su sitio web oficial. Tendrá acceso al archivo ZIP Elemoror Pro después de completar la compra. Para instalar Elementor Pro en su sitio, inicie sesión en el tablero de WordPress usando el nombre de usuario y la contraseña. Vaya a complementos -> Agregar nuevo. Haga clic en el botón Agregar nuevo en la parte superior y seleccione el archivo Zip Elemoror Pro que ha descargado y haga clic en el botón Instalar para instalarlo en WordPress.
Habilite el complemento inmediatamente después de la instalación.
Después de activar el complemento Elementor Pro, se le dirigirá nuevamente al Administrador de complementos de WordPress y verá un botón de conexión y activación en la parte superior derecha. Haga clic en este botón para activar su Elementor Pro.NOT: Elementor Pro requiere Elementor gratuito. Puede descargar Elementor Free From WordPress’s Official Plugin Director. Cree las páginas estáticas básicas de su sitio web Una vez que Elementor Pro esté activo, puede comenzar a crear páginas estáticas para su sitio web. En nuestro caso, las páginas estáticas que creamos son: la página principal, la página sobre la página de contacto, la página del cliente y la página de servicios.

Página principal Crear una página (páginas -> Agregar nuevo) y edítelo con elemento. Déle a esta página un nombre como “Inicio”, “Página de inicio” o “Página principal”.

Establezca la página. Establezca la página.

Dado que queremos crear el sitio web en el kit de agencia de plantilla-agente, haga clic en el icono de carpeta en el área de lienzo para importar la página inicial del conjunto de plantillas de agencia digital.
En la pestaña de la página en la biblioteca de plantillas, escriba “Agencia digital” en el cuadro de búsqueda y seleccione la plantilla de página inicial. Haga clic en el botón Insertar para abrirlo en el editor de elementos.

Personalice el contenido reemplazando el contenido predeterminado con su propio contenido. Puede hacer clic en cada widget para editar, luego vaya al panel izquierdo para editar el contenido. Al hacer clic en un widget, lo convertirá en un modo de edición.

Después de haber terminado de adaptar el contenido, haga clic en el botón de publicación en el panel izquierdo para publicar la página. También puede obtener una vista previa primero haciendo clic en el icono de los ojos. Una vez que se publique la página inicial, vaya a Configuración -> Leer. Establezca la página de inicio que se mostrará en una página estática y seleccione la página de inicio que acaba de crear en el menú desplegable y haga clic en el botón Guardar modi. En la página crea una nueva página (páginas-> Agregar nuevo) y edítelo con Elemento. Puede darle a esta página un nombre como “Acerca de” o “Acerca de nosotros”. Haga clic en el icono de la rueda en el panel izquierdo y configure el aspecto de la página en el elemento de ancho completo.

Haga clic en el icono de carpeta en el área de lienzo. En la pestaña de la página, escriba “Agencia digital” en el cuadro de búsqueda. Seleccione la página Acerca de y haga clic en el botón Insertar para abrirlo en el editor Elementor.

Personalice el contenido como lo hizo en la página inicial y publique la página. Página de contacto Crear una nueva página y edítelo con Elementor. Puede darle a esta página un nombre como “Contacto” o “Contáctenos”. Establezca la página.

Haga clic en el icono de carpeta en el área de lona para abrir la biblioteca de plantillas. En la pestaña Páginas en la biblioteca de plantillas, escriba “Agencia digital” en el cuadro de búsqueda. Seleccione la página de contacto y haga clic en el botón Insertar para abrirlo en el editor Elementor.

Adaptar el contenido. Una vez que haya terminado, publique la página de la página del cliente que el cliente se utiliza para presentar a los clientes con los que su empresa ha trabajado. Cree una nueva página y edítelo con Elementor. Dale a esta página un nombre como “clientes” o “clientes felices”. Establezca la página. En la pestaña de la página, escriba “Agencia digital” en el cuadro de búsqueda. Seleccione la página del cliente y haga clic en el botón Insertar para abrirlo en el editor Elementor.

Adaptar el contenido. Después de haber terminado de publicar la página. La página de servicios de la página de servicios se utiliza para mostrar los servicios ofrecidos por su empresa. Cree una nueva página y edítelo con Elementor. Dé a esta página un nombre como “Servicios” o “Nuestros Servicios”. Establezca la página.

Haga clic en el icono de carpeta en el área de lona para abrir la biblioteca de plantillas. En la pestaña de la página, escriba “Agencia digital”. Seleccione la página Servicios y haga clic en el botón Insertar para abrirlo en el editor Elementor.

Adaptar el contenido. Después de haber terminado de publicar la página. Cree las partes temáticas si alguna vez lo ha notado, la mayoría de los temas de WordPress consisten en las siguientes partes:

ENCABEZAMIENTO

Sótano

404 página

Plantilla única posterior a la poste

Algunos temas pueden tener varias otras partes, dependiendo de la complejidad del tema. La función de creación de bases del elementor le permite crear las partes anteriores y las crearemos en el sitio web que creamos. Además, también crearemos una sola plantilla de publicación y una ventana emergente. Utilizaremos el encabezado para colocar el logotipo del sitio y el menú principal. Antes de comenzar a crear el encabezado, primero debe crear un menú. Para hacer esto, vaya a aspectos -> menú. Haga clic en el enlace Crear un nuevo menú para crear un nuevo menú. Dé un nuevo nombre de menú y haga clic en el botón Menú Ceare.
Agregue los elementos a su menú a los elementos Agregar menú. Puede agregar páginas, publicaciones, categorías o direcciones URL personalizadas a su menú para agregar elementos al menú, simplemente verifique los elementos que desea agregar y haga clic en el botón Agregar al menú. Agregue las páginas que creó anteriormente. Recuerde hacer clic en el botón Guardar menú para guardar el nuevo menú.
Una vez que haya creado el menú, vaya a plantillas -> Builder de temas. En la pantalla del constructor de temas, haga clic en el encabezado en el panel izquierdo y haga clic en el botón Agregar nuevo para crear un nuevo encabezado.
En la pestaña de los bloques en la ventana de la biblioteca de plantillas, escriba “agencia digital” en el cuadro de búsqueda para encontrar el encabezado de la plantilla de agencia digital. Haga clic en el botón Insertar para abrirlo en el editor de elementos.
Cambie el logotipo de sitio predeterminado a su propio sitio. Para hacer esto, haga clic en el widget de la imagen para convertirlo en un modo de edición. Cargue el logotipo haciendo clic en el selector de imágenes desde el panel izquierdo.
Luego reemplace el menú predeterminado con el menú que acaba de crear. Para hacer esto, haga clic en el menú Widget Nav para convertirlo en un modo de edición. Seleccione su menú en el menú desplegable en la sección Menú en el panel izquierdo. Si desea eliminar el número de teléfono en el encabezado, haga clic con el botón derecho y seleccione Eliminar.


Haga clic en el botón Publicar en la parte inferior del panel izquierdo para publicar su encabezado. Se le pedirá que establezca el estado de la pantalla. Simplemente haga clic en el botón Agregar condición para establecer el estado de la pantalla.

Por defecto, la plantilla de encabezado se aplicará a todo el sitio web. Si desea que la plantilla de encabezado se aplique a todo el sitio web, simplemente puede hacer clic en el botón Guardar y cerrar. Por el contrario, si desea que el encabezado se aplique a ciertas páginas o publicaciones, seleccione las páginas o publicaciones del menú Drop -down antes de hacer clic en el botón Guardar y cierra.

El sótano como encabezado, puede acceder a las plantillas -> Builder de temas para crear el sótano. Vaya a la pestaña Subsol en el panel izquierdo y haga clic en el botón Agregar nuevo para crear un nuevo sótano.

En la pestaña Bloque en la ventana de la biblioteca de plantillas, escriba “agencia digital” en el cuadro de búsqueda para encontrar el conjunto de sótanos de la agencia digital. Haga clic en el botón Insertar para abrirlo en el editor de elementos.

Si no encuentra la plantilla del sótano, desplácese hacia abajo con el mouse hacia abajo. El sótano del conjunto de plantillas de plantilla está compuesta por el logotipo del sitio, el formulario de suscripción de correo electrónico y las redes sociales. Reemplace el logotipo de sitio predeterminado como lo hizo en la plantilla de encabezado anterior. Luego edite la URL de las redes sociales. Para hacer esto, haga clic en la lista de íconos de widgets para convertirlo en un modo de edición. Ingrese la URL de cada plataforma social en el panel izquierdo. Haga clic en el widget de formulario para convertirlo en un modo de edición y personalizar la configuración. Elementor admite la integración con múltiples servicios de marketing de correo electrónico, incluidos MailChimp, Mailerlite y Gestonse. Puede leer esta publicación para obtener más información sobre cómo integrar el elemento con una herramienta de marketing por correo electrónico. Haga clic en el botón de publicación para publicar la plantilla del sótano y haga clic en la condición Agregar para establecer la condición de visualización. Al igual que el encabezado, la plantilla del sótano se aplicará implícitamente a todo el sitio. Para aplicar la plantilla del sótano a ciertas páginas o publicaciones, seleccione las páginas o publicaciones en el menú Drop -down y haga clic en el botón Guardar y publicar. 404 Página para crear la página 404, vaya a plantillas -> Builder de temas. En la pantalla del constructor de temas, vaya a la pestaña Error 404 desde el panel izquierdo y haga clic en el botón Agregar nuevo.

En la pestaña Bloque en la biblioteca de plantillas, escriba “Agencia digital” en el cuadro de búsqueda para encontrar la página 404 de la plantilla de agencia digital. Haga clic en el botón Insertar para abrirlo en el editor de elementos. Haga clic en el botón de publicación y configure el estado de la pantalla. Asegúrese de seleccionar la página 404 y haga clic en el botón Guardar y publicación.

Plantilla de publicación única Vaya a plantillas -> Temor Builder para crear la plantilla de publicación única. En la pantalla del constructor de temas, vaya a la publicación del panel izquierdo único y haga clic en el botón Agregar nuevo.

En la pestaña Bloque en la ventana de la biblioteca de plantillas, escriba “agencia digital” en el cuadro de búsqueda para encontrar la plantilla de publicación única de la agencia digital. Haga clic en el botón Insertar para abrir en el editor de elementos.

Haga clic en el botón de publicación y configure el estado de la pantalla. Por defecto, esta plantilla se aplicará a todo el sitio web. Esto también significa que cada vez que escriba una nueva publicación de blog, la nueva publicación de blog se publicará con esta plantilla de publicación única. Si, por una cierta razón, desea aplicar la plantilla de publicación única para una categoría en particular, simplemente seleccione la categoría en el menú desplegable antes de hacer clic en el botón S & Close. En la página de noticias, utilizaremos la página de noticias para mostrar las últimas publicaciones de blog en su sitio, puede usar cualquier nombre para esta página si lo desea. “Blog”, por ejemplo. Para crear esta página, vaya a plantillas -> Builder de temas. Acceda a la pestaña Archivo desde el panel izquierdo y haga clic en el botón Agregar nuevo.

En la pestaña Bloque, escriba “Agencia digital” en el cuadro de búsqueda para encontrar la página de archivo de la agencia digital. Haga clic en el botón Insertar para abrirlo en el editor de elementos. Haga clic en el botón de publicación y configure el estado de la pantalla. Puede controlar los tipos de archivos que aparecen en esta página configurando la condición de visualización. Por ejemplo, si desea mostrar solo el archivo de publicaciones, puede establecer la condición de visualización en el archivo de publicaciones. Y haga clic en el botón Guardar y cerrar. Pop-up Si observa, cada plantilla de página del conjunto de plantilla de plantilla tiene un icono de sobre en la esquina inferior izquierda. Este icono se usa para mostrar la ventana emergente del conjunto de plantillas. La ventana emergente está destinada a recopilar datos de sus clientes potenciales. Si no necesita esta ventana emergente, simplemente puede eliminar el icono de sobre en cada plantilla de página.

En cambio, si desea usar la ventana emergente, primero puede crear la ventana emergente. Para hacer esto, vaya a plantillas -> ventanas emergentes. Haga clic en el botón NUEVO ADD, proporcione un nombre de ventana emergente y haga clic en el botón Crear plantilla.

En la pestaña Pop -uUp Window, escriba “Agencia digital” en el cuadro de búsqueda para encontrar el conjunto de plantillas de plantilla Pop -Up. Haga clic en el botón Insertar para abrirlo en el editor de elementos.

Haga clic en el botón de publicación. En la ventana emergente que aparece, haga clic en el botón Siguiente para establecer el disparador.

Usaremos el disparador haciendo clic para mostrar la ventana emergente, así que active la opción ON Haga clic y haga clic en Guardar y cerrar.

La ventana emergente está lista para su uso. Luego edite una de las páginas que creó (la página de inicio, la página, la página de contacto, la página de servicio o la página del cliente) con Elementor y haga clic en el icono del sobre para convertirlo en un modo de edición. Haga clic en el icono de clave en la sección de enlaces y seleccione la ventana emergente que acaba de crear. Repita los pasos de otras páginas donde desea mostrar la ventana emergente. ¡Felicidades! Acabas de crear tu sitio web. La conclusión elemental es un excelente creador de páginas para crear un sitio web de WordPress. Aunque puede usarlo de forma gratuita, hay muchas otras ventajas que obtendrá utilizando la versión Pro. La versión PRO A Elementor viene con un generador de temas que le permite crear un tema gratuito de WordPress, un generador emergente para crear ventanas emergentes sin instalar un complemento adicional y muchas otras características. La versión Pro también le brinda acceso a varios widgets y plantillas. Escribí instrucciones más detalladas sobre cómo crear las partes personalizadas de un tema de WordPress. Puede visitar los siguientes artículos para obtener más información.

Cómo crear un encabezado personalizado en WordPress con Elementor

Cómo crear un sótano personalizado en WordPress con Elementor

Cómo crear una plantilla personalizada con estampado con Elementor

Cómo crear una página 404 personalizada en WordPress con Elementor

Si eres completamente nuevo en el elemento, puedes leer la guía de principiantes sobre el elemento que escribí.