Cómo convertir WordPress en un constructor visual

Jan 26, 2026

Cómo

[dieciséis] (Crédito de la imagen: Elementor / Joseph Ford)

Los constructores visuales han existido durante mucho tiempo para WordPress, pero siempre han causado división con su uso. La mayoría tenía inconvenientes significativos en términos de velocidad de página y el código que generan, y con más frecuencia que no los bloques de arrastrar y soltar en la pantalla de edición no fueron una representación realista del resultado final. Por otro lado, a veces solo desea poder diseñar y prototipo rápidamente sin tener que escribir código.

Usando el elemento de plugin de PageBuilder con la configuración derecha, WordPress se puede convertir en una visual minimalista Creador de sitios web , casi independiente del tema, que ejerce una variedad de configuraciones, lo que le permite crear diseños complejos con facilidad.

Usando el veinte diecinueve predeterminado Tema de WordPress ¡Puede construir un lienzo listo para usar que se puede usar para prototipo o construir la producción. Sitios web de WordPress . Con este lienzo, haremos una página simple con dos secciones y un formulario de contacto.

Haremos que la página web sea fácil de usar y usará dos complementos, abordaremos la principal preocupación con el uso de un constructor visual y minimizaremos el tiempo de carga mínimo de la página. Alternativamente, vea nuestro redondeo de gran Tutoriales de WordPress Para perfeccionar sus habilidades aún más.

Usa el icono en la parte superior derecha de cada imagen para ampliarla

Los mejores servicios de alojamiento de WordPress en 2019

01. Instale una copia de WordPress

Para desactivar las cosas, instale una copia de WordPress en el sistema que está utilizando. Estamos utilizando un programa llamado Laragon que ofrece una opción de instalación rápida para crear una instancia en mi máquina.

02. Retire las piezas que no necesita

Give yourself a clutter-free page to work with

Dirígete a los complementos, y elimina todo lo que viene con WordPress. En el momento de la escritura, agilizará nuestros esfuerzos para instalar el complemento 'Classic Editor' para deshabilitar el nuevo Editor de Gutenburg . Para reducir el desorden, también deberíamos ir a la apariencia y GT; Los widgets y eliminan todos los widgets.

03. Elige un tema con un encabezado y pie de página.

La única parte del tema que usaremos es el encabezado y el pie de página, todo lo demás será despojado. Estaremos usando el Theque de veinte diecinueve Tema, y le mostraremos algunas modificaciones rápidas para que se vea afilada. Cuando se usa el elementor, menos el tema hace mejor.

04. Instale el elementor y cree una página

You'll find Elementor in the WordPress plugins library

Utilice la búsqueda del complemento de WordPress para encontrar Elemento e instalarlo. Una vez instalado y activado, cree una nueva página. Nombra la nueva página 'Home' y guárdela como un borrador para que exista en la base de datos. Haga clic en 'Editar en Elementor.' Esto cargará el elementor visual constructor.

05. Ancho completo la página

Mirando la página, está limitada a la distribución en caja de nuestro tema. Para deshabilitar esto, haga clic en el cog en la parte inferior izquierda del editor de elemento y cambie 'Diseño de página' a 'Elementor Full Wideth'. Si está haciendo un sitio web sin muchas páginas, puede considerar la opción 'Lienzo del elementor', que elimina el encabezado y el pie de página también.

06. Añadir algo de contenido

Ahora que tenemos una página en blanco, deberíamos darnos algo con lo que trabajar. Haga clic en el icono de la cuadrícula Elementor en la parte superior derecha del editor para ver todos los elementos disponibles. Se agrega un bloque de encabezado y un bloque de texto arrastrándolos a la mitad de la página. Estos dos elementos nos ayudarán a diseñar nuestra tipografía.

07. Retire las líneas de encabezado

Puede notar cuando se usa el veinte diecinueve tema que una línea se representa sobre todos los encabezados. Vamos a eliminar eso con la herramienta Personalizar de WordPress. Si bien estamos aquí, también agregaré un logotipo en la configuración de identidad del sitio y algunos elementos del menú.

 H1: ANTES, H2: ANTES DE {
Pantalla: Ninguno;
}

08. Fijar el ancho del contenido.

Ensure the content lines up with the header

Nuestra sección de contenido no se alinea todo con el encabezado. Esto se debe a que veinte diecinueve utiliza un margen calculado para configurar el ancho del encabezado y el pie de página. Podemos replicar esto en nuestras secciones de elementor por coherencia con algunos CSS.

También debemos aumentar el ancho de contenido en la página de configuración del elemento principal.

 Pantalla @media solo y (Min-Anchth: 768px) {
.Elementor-Top-Section.Elementor Sección-
caja y gt; .Elementor-contenedor {
Margen: 0 Calc (10% + 60px);
}
}

09. Hacer una sección de apertura.

Drag in the elements you want to include

Comenzaremos con la sección superior de la página, que contendrá una pequeña cantidad de texto y una imagen. Elimine nuestra sección desde antes y reemplácela con una nueva sección de dos columnas haciendo clic en Red Plus. Arrastre en un encabezado, un editor de texto y un botón a la columna izquierda. A la derecha arrastraremos una imagen.

10. Añadir un fondo

Seleccione la sección ya sea flotando sobre ella y haciendo clic en la pestaña Azul, o usando el navegador en la parte inferior derecha de los botones Elementor. Verá tres pestañas - diseño, estilo y avanzado.

Usando la pestaña Diseño, proporcione nuestra sección una altura de 80VH. Seleccione el estilo para encontrar las opciones, y use la opción de fondo para establecer un fondo de # 0073AA.

11. Estilo el texto.

You can change the font for your whole document in one go

Para cambiar la fuente para todo nuestro documento, podemos hacer clic en 'Fuentes predeterminadas' en el menú de hamburguesa en la parte superior de la barra de elemento. También puede hacer clic en sus elementos de texto individuales y usar la pestaña Estilo para cambiar de color y otras opciones.

12. Usa un efecto de superposición de fondo.

Una gran adición es la capacidad de agregar rápidamente las superposiciones de fondo de la pestaña Estilo de la sección. Seleccione nuestra sección y vaya a la pestaña Fondo. Dale a nuestro fondo una imagen para darle una textura, luego vaya a 'Superposición de fondo', el menú desplegable a continuación, y seleccione una superposición de fondo de gradiente.

13. Crea una llamada a la acción.

La segunda sección de nuestra página será una sección de llamadas a la acción. Insertaremos el Formulario de contacto 7, pero cualquier cosa que pueda generar un código corto funcionará. Haga una nueva sección con dos columnas, o haga clic con el botón derecho en nuestra última sección y duplíquela.

Instale su complemento de formulario de contacto y genere el código corto para su formulario. En la columna derecha, arrastre en un widget de código corto y pegue el código corto en la caja.

14. Móvil amable

Don't forget to tweak your design for mobile

Para acceder a las opciones móviles para nuestra página, deberá encender las 'opciones sensibles' en la parte inferior del panel Elementor. Al seleccionar el modo 'Mobile', podemos ver que nuestras secciones necesitarán un poco de relleno.

Uso de la opción móvil, que puede verificar asegurándose de que haya un ícono azul al lado de cada configuración, nuestras opciones no afectarán la vista principal de escritorio. Sin embargo, cualquier cambio de diseño realizado en este modo afectará la vista de escritorio.

15. Optimizar imágenes.

Para minimizar las preocupaciones de la velocidad de carga de la página, deberíamos ejecutar una compresión de imagen. Esto se puede hacer a través de un complemento o a través de su servidor web. Por ahora, usemos un complemento popular, EWWW Image Optimiser, para establecer una calidad y un ancho máximo para nuestras imágenes, y luego ejecutar una optimización.

16. Páginas de caché para impulsar el rendimiento.

Make your site lightning-fast with help from a cache plugin

Finalmente, instalaremos un complemento de caché para maximizar los tiempos de carga para nuestra página. Hay muchos complementos de caché por ahí, pero actualmente, Habilitador de caché Es un perfil bajo y funciona bien con esta configuración.

Con el caché habilitado, el sitio web se carga rápidamente. También tiene un constructor visual completamente funcional en el fondo. Es el lienzo en blanco perfecto para ti para diseñar.

Generate CSS – the conference for web designers: 26 September, Rich Mix, Shoreditch, London

Únase a nosotros el 26 de septiembre por Generar CSS , una conferencia a medida para los diseñadores web presentados por Creative Bloq, Net y Web Designer . Ahorre £ 50 con un boleto de avión temprano cuando se reserva antes del 15 de agosto de 2019.

Este artículo fue publicado originalmente en Creative Web Design Magazine Diseñador web . Comprar emito 287 o suscribir .

Leer más:

40 tutoriales brillantes de WordPress
Usa WordPress como un CMS sin cabeza
¿Qué hay de nuevo en WordPress 5.0?

Cómo convertir WordPress en un constructor visual

01. Instale una copia de WordPress

02. Retire las piezas que no necesita

03. Elige un tema con un encabezado y pie de página.

04. Instale el elementor y cree una página

05. Ancho completo la página

06. Añadir algo de contenido

07. Retire las líneas de encabezado

08. Fijar el ancho del contenido.

09. Hacer una sección de apertura.

10. Añadir un fondo

11. Estilo el texto.

12. Usa un efecto de superposición de fondo.

13. Crea una llamada a la acción.

14. Móvil amable

15. Optimizar imágenes.

16. Páginas de caché para impulsar el rendimiento.

Cómo - Artículos más populares

Cómo crear una página cómica

Cómo comprimir las imágenes: la guía del diseñador web

Cómo convertir el día en la noche en Photoshop

Cómo usar fuentes web

Master la ciencia de la optimización de la tasa de conversión

Ilumina su trabajo 3D con luces de cúpula

Cómo crear esmaltes con acuarela

Cómo pintar bestias de fantasía

Categorías