Comprensión de la configuración del diseño de la página en Elementor

Al diseñar con Elementor, la configuración de diseño de página juega un papel vital en el diseño de su sitio web.

Estas configuraciones le permiten controlar la estructura, el estilo e incluso la base de diseño predeterminada de sus páginas.
Es posible que esté creando un blog, una página de destino o un diseño personalizado; En todos los casos, comprender estas opciones lo ayudará a diseñar con confianza.

En esta guía, recorreremos la configuración específica de la página de Elementor y la configuración global de diseño, responderemos preguntas comunes sobre la edición de diseño y le ayudaremos a decidir el mejor enfoque al crear páginas.

Comprensión de la configuración del diseño de la página en Elementor

¿Cómo editar el diseño de la página en Elementor?

Para editar un diseño de página en Elementor, inicie sesión en su tablero de WordPress y vaya a las páginas. Seleccione la página que desea personalizar y hacer clic en Editar con Elementor.

Una vez que esté dentro de Elementor, busque el icono de engranaje pequeño en el centro. Al hacer clic en esto, abre el panel de configuración de la página, donde encontrará opciones para ajustar la configuración general, de estilo y avanzada para esa página específica.

• Configuración general Administre títulos, imágenes destacadas, comentarios y diseño de página.
• Configuración de estilo Control de fondo, espaciado y alineación.
• La configuración avanzada le permite agregar CSS y animaciones personalizadas.

Configuración general

La pestaña General es donde configura lo esencial para su página. Cada opción aquí afecta cómo se muestra su página y cómo interactúa con su tema o entorno de WordPress.

1. Título: Describa el título de la página para describir el propósito de su contenido. Un título bien elegido mejora la legibilidad para los visitantes y contribuye al SEO.
2. Estado: elija si su página es un borrador (no visible para los visitantes), publicado (en vivo en su sitio) o privado (solo visible para los usuarios registrados con los permisos correctos).
3. Extracto: escriba un resumen del contenido de la página. Esto es útil para los fragmentos de los motores de búsqueda y para mostrar vistas previas en las páginas de archivo o de listado.
4. Imagen destacada: Establezca una imagen destacada para representar la página visualmente. Es útil al compartir enlaces en las redes sociales o al mostrar publicaciones en cuadrículas y widgets de blogs.
5. Pedido: use números para organizar la secuencia de sus páginas en menús o listas de páginas. Las páginas con números más bajos aparecen primero, lo que lo ayudan a controlar el orden de la pantalla.
6. Permitir comentarios: decida si los visitantes pueden dejar comentarios en la página. Esto generalmente está habilitado para publicaciones de blog, pero a menudo se deshabilita para páginas de destino o contenido estático.
7. Ocultar Título: Alterne esta opción si desea eliminar el título de página predeterminado y comenzar con un lienzo limpio. Esto es
8. Diseño de la página: Elementor le ofrece varias opciones de diseño de página para controlar cómo aparece su contenido. Cada opción tiene un propósito diferente, dependiendo del tipo de página que desee crear.
   • Valor predeterminado: este diseño sigue la plantilla de página predeterminada establecida en el panel Elementor >> Menú de hamburguesas >> Configuración del sitio . Mantiene la estructura de diseño definida por su tema. Ideal para páginas o blogs regulares donde desea consistencia en su sitio.
   • Canvas Elementor: proporciona una página completamente en blanco sin encabezado, pie de página o barra lateral. Esta opción es perfecta para diseños sin distracciones, como páginas de destino, próximas páginas o páginas de ventas.
   • Ancho completo de Elementor: mantiene el encabezado y el pie de página de su tema, pero elimina la barra lateral, lo que permite que el contenido principal se estire a través del ancho completo de la pantalla. Una buena opción al diseñar diseños inmersivos, secciones de héroes o controles deslizantes de ancho completo.
   • Tema: usa la plantilla de página predeterminada de su tema activo. Si su tema viene con múltiples variaciones de plantilla (como "sin barra lateral" o "solo contenido"), también pueden aparecer aquí.
   • Página sin título: elimina el título de la página mientras mantiene intacta el resto de la estructura del tema. Esta opción es útil cuando desea un diseño limpio sin el título predeterminado que se muestra en la parte superior.

Configuración de estilo

La pestaña de estilo se centra en la apariencia visual de su página. Aquí, puede definir el fondo y el espacio que enmarca su contenido.

1. Tipo de fondo: elija un color sólido, fondo de gradiente o imagen para establecer el estado de ánimo para su página. Un fondo bien seleccionado crea un impacto visual y refuerza su marca.
2. Espaciado: ajuste los márgenes y el relleno para controlar cuánto espacio aparece dentro y alrededor de su contenido. Los márgenes empujan elementos separados, mientras que el relleno crea espacio para respirar dentro de un recipiente.

También puede establecer la alineación de texto, la configuración de diseño receptiva y los ajustes de espaciado para garantizar que su página se vea bien en escritorios, tabletas y móviles.

Configuración avanzada

Para obtener más flexibilidad, Elementor incluye una pestaña avanzada con opciones que van más allá de lo básico.

1. CSS personalizado: agregue su propio código CSS para peinar elementos específicos. El código aquí se aplica solo a la página actual, lo que le brinda la libertad de hacer personalizaciones únicas sin afectar el resto de su sitio.
2. Desplácese Snap y efectos de movimiento: agregue animaciones o efectos de desplazamiento para un atractivo visual adicional.

La pestaña Avanzada es donde los diseñadores y desarrolladores realmente pueden personalizar la apariencia de una página.

Configuración de diseño global

Mientras que la configuración de la página controlan las páginas individuales, la configuración de diseño global le permite definir los valores predeterminados para todo su sitio. Para acceder a la configuración global, abra cualquier página en Elementor, haga clic en el icono de configuración del sitio en la parte superior izquierda y seleccione Diseño.

Desde aquí, puedes ajustar:

1. Ancho de contenido: Defina el ancho máximo de su contenido. La configuración estándar es 1140px, que funciona bien para la mayoría de las pantallas de escritorio.
2. RELADO DEL CONTAYOR: Establezca el espacio interno predeterminado para contenedores. Puede aplicar el mismo acolchado en todos los lados o personalizar la parte superior, inferior, izquierda y derecha individualmente.
3. GAPS: controle el espacio entre columnas y filas dentro de contenedores. Esto ayuda a mantener una alineación limpia y un espacio constante.
4. Selector de título de la página: si su tema usa un selector único para los títulos de página, especifique aquí. Esto permite que Elementor oculte o estille correctamente los títulos de la página.
5. Sección estirada Ajuste para: Defina qué elemento de etiqueta HTML debe usar al estirar las secciones a ancho completo. La etiqueta más común es el cuerpo, pero algunos temas pueden usar un envoltorio diferente.
6. Diseño de página predeterminado: elija un valor predeterminado global como Elementor Canvas o El Elementor Full Width, en lugar de confiar en la configuración de su tema para cada nueva página.

Una vez que haya configurado sus preferencias, haga clic en Guardar cambios para aplicarlos en su sitio.

¿Cuál es el ancho de diseño predeterminado en Elementor?

El ancho de diseño predeterminado de Elementor es de 1140 píxeles. Este ancho se usa ampliamente porque proporciona una experiencia de lectura cómoda en las pantallas de escritorio y al mismo tiempo se adapta bien a tabletas y dispositivos más pequeños.

Puede cambiar esta configuración en la configuración del sitio >> Diseño si su diseño requiere un diseño más estrecho o más amplio.

¿Cuál es la forma óptima de crear una página con Elementor?

La forma óptima depende de su objetivo:

• Si está creando una página o blog de contenido regular, quédese con el diseño predeterminado para que su encabezado, pie de página y barra lateral permanezcan intactos.
• Para páginas de destino o embudos de ventas, use el lienzo Elementor para un diseño sin distracciones.
• Si desea diseños amplios e inmersivos pero aún necesita elementos de navegación y pie de página, vaya con el ancho completo de Elementor.

Una buena práctica es establecer primero sus valores predeterminados globales, por lo que todas las páginas nuevas comienzan con su estructura preferida. Luego, ajuste las páginas individuales con el panel de configuración de la página cuando sea necesario.

¡Envolviendo!

La configuración de diseño de la página en Elementor le brinda control sobre las páginas individuales y su sitio en su conjunto.

Al aprender a usar la configuración general, de estilo, avanzada y global de diseño , puede crear diseños que parecen profesionales, son fáciles de administrar y coincidir con los objetivos de su sitio web.

Si está construyendo una página de destino única, la configuración específica de la página será suficiente.

Pero si está trabajando en un sitio web más grande, la configuración de valores predeterminados globales ahorrará tiempo y garantizará la consistencia del diseño en todas las páginas.

Con estas opciones de configuración, Elementor le brinda la flexibilidad de diseñar su sitio web exactamente de la manera que lo imagina.