Cómo crear un sitio web de sitio web con Elementor

La página principal es el elemento más importante de un sitio web. Es lo primero que sus visitantes ven al visitar su sitio web. Todo lo que está en la página inicial de su sitio. Afecta la percepción de los visitantes sobre su negocio con Elementor, puede crear la página inicial de su sitio sin tener que lidiar con el código CSS o HTML. Como probablemente sepa, Elementor tiene un editor visual que le permite crear una página web al frente. Todo es querido y cae, no necesita escribir una sola línea de código. Nuevo en el elemento? Despreocupado. En esta publicación, le mostraremos cómo crear un sitio web en un sitio web con el complemento de generación de páginas más popular. Crearemos una página de inicio del sitio web como la próxima.

Ver demostración en vivo
Puede usar la versión gratuita de Elementor para crear una página de inicio del sitio web como se indica anteriormente. Sin embargo, no está mal si desea actualizar a la versión Elementor en Pro, porque la versión Pro Element tiene varias funciones. Con Elementor Pro, podrá crear un encabezado personalizado, un sótano personalizado, una página personalizada de 404, una plantilla de publicación personalizada, una ventana emergente, etc. Lea aquí para descubrir las diferencias entre Elementor Free y Elementor Pro.
Descarga Elementor Pro
Se necesitan 4 secciones para crear una página de inicio como se indicó anteriormente.
Sección 1: Para colocar el nombre de la empresa y el eslogan.
Sección 2: Para colocar la descripción del servicio.
Sección 3: Para colocar la descripción del equipo.
Sección 4: Para colocar el carrusel del logotipo del cliente y la sección de cierre (la oración “¿Necesita más detalles?”).
Vamos a empezar. Primero, inicie sesión en el panel de WordPress y cree una nueva página (páginas-> Agregar nuevo) y edítelo con Elementor haciendo clic en el botón Editar. Se lo llevará al editor de primaria después de hacer clic en el botón. Para facilitar su página de inicio más adelante, le sugerimos que le dé el título de la página, como “Página de inicio”, “Página principal” o algo similar.

Antes de comenzar a trabajar con el Editor Elemental, configure el aspecto de la página haciendo clic en el icono de la rueda en la parte inferior del panel izquierdo. Establezca la página Busque en la opción Apariencia de la página. En este ejemplo, establecemos el aspecto de la página en el ancho de elemento de elemento. Esta opción eliminará la barra lateral de su tema (si corresponde) y solo mantendrá el sótano y el encabezado.
Sección 1

Haga clic en el botón Plus para agregar una nueva sección. Seleccione la opción de estructura de columna única.
Vaya al panel izquierdo. En la sección de aspecto en la pestaña Aspecto, establezca el ancho del contenido en un ancho completo. Establezca también la altura para adaptarse a la pantalla

Acceda a la pestaña de estilo y establezca el fondo en la sección de fondo. Usaremos una imagen como fondo de la sección superior. Para un mejor resultado, puede preparar una imagen grande con un tamaño de 1200 px o más ancho. Puede hacer clic en el selector de imágenes para seleccionar una imagen.

También en la sección de fondo, configure el tamaño de la imagen en la portada.

Ahora vaya a la sección de superposición de fondo y establezca la superposición de fondo. En este ejemplo, utilizamos superposición de gradiente (naranja y negro). Establezca la opacidad de la superposición de fondo en la opción de opacidad.

Después de haber terminado de configurar el fondo, agregue el widget de título al área de lona.

Vaya al panel izquierdo para cambiar el texto predeterminado. Puede cambiar el texto en el campo de título. También establezca la alineación en la opción de alineación (en la parte inferior). Para cambiar el color de la fuente, el estilo de fuente y el tamaño de la fuente, puede acceder a la pestaña de estilo. Haga clic en el selector de color en la opción Color de texto para cambiar el color de la fuente y haga clic en el icono del lápiz en la opción de impresión para cambiar el estilo y el tamaño de la fuente.

Agregue otro widget de título para el eslogan de la compañía. Puede repetir los pasos anteriores para personalizar el nuevo título de widget.

Sección 2

Agregue una nueva sección haciendo clic en el botón Plus. Seleccione la opción de estructura de columna única.
Agregue el widget de la sección interior. Desde este paso, tendrá dos columnas en la Sección 2.
Agregue el widget de la imagen a la columna izquierda y seleccione la imagen que desea usar (asegúrese de haber preparado la imagen).
Vaya a la pestaña Estilo para establecer el tamaño de la imagen. Puede establecer el tamaño ajustando el valor de ancho y el valor máximo de ancho en la sección de la imagen.

Agregue el widget de título a la columna derecha. Personalice el título accediendo a la pestaña de estilo desde el panel izquierdo, como lo hizo en la Sección 1 anterior.

Agregue el editor de texto del widget a la columna derecha. Colóquelo bajo el widget del título. Reemplace el texto predeterminado con su propio texto. También puede acceder a la pestaña Estilo para personalizar el texto.

Después de haber terminado con el widget del editor de texto, agregue el botón a la columna derecha. Colóquelo debajo del editor de texto.

Vaya al panel izquierdo para personalizar el botón. Puede agregar un enlace a otra página en el campo de enlace. Para cambiar el tamaño del botón, puede seleccionar desde el menú desplegable desde la opción de tamaño. Para cambiar el color del botón y el rayo del borde, puede ir a la pestaña de estilo. Establezca el color de texto del botón haciendo clic en el selector de color en el color de texto y el color de fondo en la opción de fondo. Para establecer el rayo de borde, puede acceder a la gama.

Agregue el widget del espaciador sobre la sección interior para proporcionar espacio adicional entre la Sección 1 y la Sección 2.

Establezca el valor del espacio en el panel izquierdo.

Agregue otro espaciador de widget debajo de la sección interna.

Seccion 3

Agregue una nueva sección haciendo clic en el botón Plus. Seleccione la opción de estructura de columna única.

Agregue el widget de la sección interior. Desde este paso tendrá dos columnas dentro de la Sección 3

Agregue el widget de título a la columna izquierda. Reemplace el texto predeterminado con su propio texto. Acceda a la pestaña Estilo desde el panel izquierdo para personalizar el título.
Agregue el editor de texto del widget a la columna izquierda y colóquelo debajo del widget de título. Reemplace el texto predeterminado y personalice el texto en la pestaña STIL en el panel izquierdo.
Copie el widget del botón en la segunda sección e insértelo en el panel izquierdo en la Sección 3 (debajo del editor de texto). Esto puede ahorrarle tiempo en lugar de crear el nuevo botón desde cero.

Active el widget del botón que acaba de copiar (haciendo clic en su controlador) y cambiando el enlace.

Agregue el widget de la imagen a la columna derecha y seleccione la imagen que desea usar (asegúrese de haber preparado la imagen). Accera la pestaña Panel de estilo para establecer el tamaño de la imagen.

Active la columna izquierda de la sección interior haciendo clic en su controlador y accediendo a la pestaña avanzada desde el panel izquierdo. Cambie el borde izquierdo a aproximadamente 40 para deslizarlo ligeramente hacia la derecha.

Habilite la sección (Sección 3) haciendo clic en su manejador y acceda a la pestaña Estilo. Cambie el fondo como desee. Elegimos un fondo azul suave suave en este ejemplo.

Agregue el widget del espaciador en la parte superior y debajo del widget de la sección interior. Cambie el valor de espacio a aproximadamente 40.

Sección 4

Agregue una nueva sección haciendo clic en el botón Plus. Seleccione la opción de estructura de columna única.

Agregue el widget de título. Reemplace el texto predeterminado y establezca la alineación a la derecha. Acceda a la pestaña Estilo desde el panel izquierdo para personalizar el título.

Agregue el carrusel de la imagen y colóquelo debajo del widget del título.

Vaya al panel izquierdo y seleccione las imágenes. En este caso, las imágenes son los logotipos de la empresa de sus clientes.
Vaya al panel izquierdo para personalizar el carrusel. Puede establecer la cantidad de imágenes por diapositivas en las diapositivas para mostrar, el tamaño de la imagen en la opción Tamaño de imagen y el estilo de navegación en la opción de navegación. Puedes jugar con tu panel izquierdo para personalizar el carrusel.
Agregue la sección interior y colóquela debajo del widget del carrusel de imágenes. Establezca la relación de la columna en aproximadamente 70%: 30%.

Agregue el título del widget a la columna izquierda de la sección interna que acaba de agregar anteriormente. Reemplace el texto predeterminado y vaya a la pestaña Estilo para personalizar el título. Agregue el editor de texto en la columna izquierda de la sección interior. Colóquelo bajo el widget del título. Reemplace el texto predeterminado y acceda a la pestaña Estilo para personalizar el texto.

Copie el widget del botón en la sección 3 (o sección 2) e insértelo en la columna derecha de la sección interna.

Active el widget del botón que acaba de copiar haciendo clic en su controlador y vaya al panel izquierdo. Reemplace el enlace en el campo de enlace en la pestaña Contenido.

Cambie a la pestaña avanzada y configure el borde superior en aproximadamente 60.

Agregue el espaciador de widget y colóquelo sobre el widget de la sección interna. Establezca el valor de espacio en aproximadamente 40.

¡Terminado!

Ahora puede publicar su página haciendo clic en el botón de publicación en la parte inferior del panel izquierdo. Antes de publicar su página, puede verla primero haciendo clic en el icono de los ojos. Puede obtener una vista previa de su página en el escritorio, la tableta y el teléfono inteligente haciendo clic en el icono del dispositivo.

Cómo usar la página de inicio en WordPress Después de publicar su página, el siguiente paso que necesita es usar en su sitio web de WordPress. Para configurar la página de inicio que acaba de crear como una página de inicio del sitio de WordPress, regrese al tablero de WordPress haciendo clic en el icono de tres líneas en la esquina superior del editor de elementor y haga clic en Salir a Tableau.

En el tablero de WordPress, vaya a Configuración -> Leer.

En la opción, visite su página de inicio, configure en una página estática (seleccione a continuación) y seleccione la página de inicio que acaba de crear en el menú desplegable en la opción de página de inicio.