Pavia Fernandez 69 • San Sebastian PR 1.787.528.0151

Configuraciones personalizadas y ajustes para GeneratePress y Elementor

Configuraciones personalizadas y ajustes para GeneratePress y Elementor

DAVE FOY– Ajustes a GeneratePress y Elementor para crear una Plantilla de Inicio de un Portal

Laboratorio San Sebastian
On Stage
Anunciate Ahora 360
Funeraria Rios Caldas
Moto Theme
Tomassini Dental Laboratory
La Casa del Bordado
Comercio Local
Colon Pratts 360

Navegando por la Web encontré este Tutorial de Dave Foy. Honestamente lamento no haberlo encontrado en los momentos en que comencé a usar GeneratePress y Elementor. Me hubiese economizado inmensas horas de tensión y trabajo. Nunca he pretendido echarme encima autorías que no me correspondan y mi única participación en este Tutorial ha sido traducirlo para beneficio de los que no hablan Inglés. Para ver el Tutorial en Inglés pídele a Dave te envíe el enlace al Original.

Nos dice Dave:

Como sabrás, utilizo exclusivamente el tema GeneratePress y el creador de páginas Elementor en todos mis proyectos. GeneratePress y Elementor funcionan muybien juntos, y están listos para usarse desde su instalación pues la curva del aprendizaje es bien corta.

A pesar de ello, he desarrollado algunos ajustes y personalizaciones, para que todo funcione de manera óptima. Automatizan muchos problemas de diseño, por lo que no tendrás que preocuparte por ellos. Estos ajustes adicionales son sumamente fáciles de configurar. Y a decir verdad… incluso si usas otro tema, creo que estos consejos aún te serán muy útiles.

NOTA: Estas instrucciones parten de la premisa de que estás utilizando GeneratePress Premium -si aún no has adquirido la versión Premium te pido la compres por medio del enlace que Dave provee. No te costará un centavo adicional, pero estarás ayudando a Dave para continuar su extraordianria labor.

Los 3 problemas que mi configuración personalizada corrigen

Hay 3 razones por las que hago estas configuraciones:

Consistencia del diseño: Primero necesitas lograr la consistencia del diseño. Hay que asegurarse de que los diseños creados por GP -el tema- o Elementor -el creador de la páginas- estén siempre alineados entre sí y siempre tengan los mismos espacios entre las columnas.

Espacio de respiración consistente en el móvil: La segunda razón es asegurarse de que siempre haya un espacio agradable de relleno en los bordes de la pantalla en el móvil. Que sea exactamente el mismo relleno, ya sea que esa parte particular del diseño de página esté hecha por GeneratePress o Elementor.

Reparar los problemas de diseño causados ​​por la forma en que Elementor crea la separación entre las columnas: La tercera y última razón, es una solución a un pequeño problema causado por la manera en que Elementor crea el espaciado alrededor de las columnas. Si dejas las cosas como predeterminadas, terminarás con diseños donde los elementos no se alinean correctamente unos con otros .

¿Dónde harás estos cambios?

Realizará los ajustes de configuración en 3 lugares diferentes:

  1. Panel de ajustes de Elementor (Elementor> Configuración)
  2. El personalizador (Apariencia> Personalizador).
  3. Copiar y pegar un poco de código CSS adicional (Apariencia> Personalizador> CSS adicional).

Tomémoslos uno a la vez …

Configuraciones de Elementor

Has clic en Elementor en el menú de WordPress, y luego has clic en Configuración.

1: marque / ambos / cuadros para Deshabilitar los colores globales y deshabilitar las fuentes globales.

Ajustes Generales de Elementor

¿Por qué hacer esto?

Bueno, pues estableceremos nuestros estilos básicos para el sitio en el tema, dentro del Personalizador. Estos estilos generalmente están relacionados con la personalización de tu Sitio Web: fuentes, tamaños de fuente, colores, y cosas así. Si dejamos estas dos casillas sin marcar, Elementor también cargará sus propias fuentes y colores. Es una doble carga de códigos que en nada ayuda a la velocidad de tu Web.

Configuraciones de estilo global de Elementor

Hay 3 grandes problemas si lo dejamos predeterminado:

  1. Tu sitio tiene un montón de código que no necesita y no nos gustan los sitios lentos.
  2. Tienes que configurar todos los ajustes de tipografía y color en 2 lugares diferentes, duplicando tu esfuerzo y no nos gusta perder el tiempo.
  3. Es mucho más difícil saber de dónde provienen las reglas de diseño. No sabes si una configuración de fuente o color en particular proviene de Elementor o de GeneratePress.

Si tus estilos principales están todos en el tema, es decir, en el Personalizador, solo tienes un lugar donde buscar.

Eso no significa que no puedas anular estas configuraciones globales de forma individual dentro de Elementor. Lejos de ello. Pero te volverás loco haciendo ajustes de estilo personalizados en elementos individuales. Esta configuración te asegura que tus valores predeterminados básicos para tu Sitio Web, están en 1 lugar. Es la forma correcta de hacerlo.

Establece el ancho de tu contenido.

Has clic en la Pestaña de Estilo y ajusta el ancho de contenido a tu necesidad. Esto le dice a Elementor qué ancho deseas que sea el contenido creado por Elementor. Está en 1140 píxeles de forma predeterminada, pero puedes configurarlo como prefieras. Yo lo dejaré en la Configuración Predeterminada de 1140px.

Establecer el ancho del Contenido de Elementor

Debes tomar nota de la configuración, porque necesitamos asegurarnos de que GeneratePress use exactamente la misma configuración, a menos que desees diseños inestables o imperfectos. No te olvides de ‘guardar cambios’ en la parte inferior.

Vayamos ahora al Personalizador

Puedes acceder al Personalizador de WordPress de una de las 2 formas siguientes:

Puede hacer clic en / Personalizar / desde el menú de administración en la parte superior de cualquier página en tu sitio.

O bien, en el menú de WordPress, puedes ir a Apariencia / y luego Personalizar/.

Personalizador de GeneratePress
Aquí es donde haces todos los cambios de estilo de tu tema. Recuerda, estos son todos los «estilos globales» que tu sitio usará por predeterminado, a menos que los anules en partes específicas de tus diseños. Una característica del Personalizador es que cualquier cambio que realices se muestra automáticamente en vivo en esta ventana. Y puedes hacer clic para visitar páginas específicas también, con el Personalizador aún activo. No te preocupes por los cambios que hagas. Hasta que hagas clic «Publicar» tus cambios no irán en vivo. Si haces cambios pero luego decides no guardarlos, simplemente has clic en la «X» en la parte superior izquierda del Personalizador para salir sin guardar.

Nuestro trabajo aquí será en «Diseño de Pantalla», entonces has clic aquí y luego en «Contenedor. Dentro del contenedor, primero asegúrate de que la configuración del Ancho del contenedor sea igual al que estableciste en la configuración «Ancho del contenido» de Elementor.

En «Disposición del contenido» puedes a dejarlo como «Un Contenedor». «Contenedores separados» ponen las columnas y los widgets en cajas separadas. aunque esto es solo un problema en las páginas creadas por GeneratePress.

Personalmente, creo que los contenedores separados son más difíciles de personalizar de manera consistente. En una ocasión usé «Contenedores Separados» y no pude mantener la separación de 20px, entre las columna, como puedo hacerlo con la configuración de «Un Contenedor».

Sin embargo, es totalmente correcto establecer «Contenedores Separados» si funciona para tu diseño particular. Ninguna de mis otras configuraciones o códigos personalizados dependen en haber establecido «Un Contenedor».

En «Espacio de separación» lo ajustaremos a 20px – recuerda que dije que las columnas de Elementor tienen un espacio de 20px entre ellos?

«Relleno del contenido» es el espacio creado alrededor del contenido de la página. Ahora, esta configuración no se aplica si, la página dada, tiene el ajuste de contenido de ancho completo marcado. Pero en las páginas donde no tienen esa especificación, estos ajustes entran en juego

El relleno superior e inferior es realmente de tu preferencia. El derecho y el relleno izquierdo es 20px. Este es el mismo espacio de relleno que estableceremos en el encabezado, y también el mismo espacio que estableceremos en los Elementos de Elementor también. Y es el mismo espacio que tenemos entre columnas, por lo que todo se alinea muy bien.

Y el «Relleno del contenido móvil» es -lo has adivinado- 20px también, aunque puedes configurar el relleno del dispositivo móvil relleno como superior, derecho, inferior e izquierdo también utilizando las medidas de tu preferencia, mas te acondejaría que lo dejes así. Es una medida única para todos, pero hace el trabajo para nuestros propósitos aquí.

Ahora toca la flecha «atrás» arriba a la izquierda para salir de Diseño del Contenedor y seleccionemos ahora Cabecera.

Vamos a hacer cambios similares aquí. Estos afectan el área del encabezado: tu logo y el sistema de navegación, creado por GeneratePress.

La mayor parte de estos ajustes dependen totalmente de tu diseño. Pero la cantidad de espacio del «Relleno del Encabezado» localizado en la parte inferior sí debes ajustarla conforme a todo lo hecho anteriormente. Asegúrate de configurar el relleno derecho e izquierdo a 20px. Me imagino que no tengo que explicarte por qué de nuevo.

Ahora vuelve a la parte superior y en el área de la Cabecera has clic en la flecha para volver atrás al Diseño de Pantalla y ve a «Barras Laterales».

Personalmente, no agrego ningún espacio de relleno a los widgets de la barra lateral. Si tu diseño lo necesita, digamos que todos tus widgets tengan un bonito color de fondo en ellos y necesitas un poco de espacio de relleno para darle espacio al texto para que respire, entonces, por supuesto, configura el espacio de relleno que necesitas aquí.

Ahora volvamos al Diseño de Pantalla y allí marcaremos la configuración de Pie de Página.

Ve hasta el fondo y asegúrate de que el relleno derecho e izquierdo esté también 20px.

Esto asegura que todo se alinee bien, independientemente de si fue creado por el tema o el creador de páginas, y también te asegura que vas a tener un buen espacio de relleno consistente en pantallas más pequeñas, como tabletas y móviles.

Por lo general no uso el Pie de Página de GeneratePress. Lo desactivo configurando los Widgets de este a cero. Creo mis pies de página con Elementor, los guardo en la biblioteca de Elementor, y luego los hago aparecer en la parte inferior de cada página con un código colocado en los ganchos «Hooks» de GP.

Esto me da opciones de Diseño que no tendría en GP ni sería capaz de crearlos usando las opciones de GP. Todo esto sin gran cantidad de códigos personalizados arrancarme y rascarme de cabeza.

Este es el mejor momento para presionar «Publicar» El Botón aparece en la parte superior. Esto hará que los cambios sean guardados y se actualice nuestro diseño. Ahora los cambios están en vivo.

Ya que hemos personalizado GeneratePress y Elementor lo que nos resta para terminar es añadir unos códigos CSS personalizados. No te asustes. Realmente no es algo difícil. Simplemente selecciona y copia al portapapeles todos los códigos que aparecen luego del encabezado «Códigos Personalizados a pegar en «CSS Adicional» y pégalos. Asegúrate de copiar todo y de guardar los cambios.

Códigos Personalizados a pegar en «CSS Adicional

/* Custom CSS by Dave Foy – https://www.designbuildweb.co – hello@designbuildweb.co */

/* Use the same method of sizing elements as Elementor does */
body * {box-sizing: border-box;}

/* Fix for horizontal wiggle on iPhone with GeneratePress – thanks Lyle Chamney from http://snifflevalve.com/ */
html, body {max-width: 100% !important; overflow-x: hidden !important; }

/* Elementor – set some default left and right padding on mobile – same as in GeneratePress */
.elementor-top-section.elementor-section-boxed > .elementor-container {padding: 0 20px;}

/* 1. Don’t set padding if an Elementor library item is embdedded within another section via shortcode */
/* 2. Don’t set padding if an Elementor library item is embdedded within a standard non-full width page */
.elementor-top-section .elementor-top-section.elementor-section-boxed > .elementor-container,
body:not(.full-width-content) .entry-content .elementor-top-section.elementor-section-boxed > .elementor-container {padding: 0;}

/* 3. Don’t set padding if the section has a class of ‘nopad’ */
.elementor-top-section.elementor-section-boxed.nopad > .elementor-container {padding: 0;}

/* Make Elementor elements expand to fit the full available width. This is due to how Elementor puts padding all the way around columns */
.elementor-section-boxed .elementor-column-gap-default .elementor-row {width: calc(100% + 20px); margin-left: -10px; margin-right: -10px; }
.elementor-section-boxed .elementor-column-gap-narrow .elementor-row {width: calc(100% + 10px); margin-left: -5px; margin-right: -5px;}
.elementor-section-boxed .elementor-column-gap-extended .elementor-row {width: calc(100% + 30px); margin-left: -15px; margin-right: -15px; }
.elementor-section-boxed .elementor-column-gap-wide .elementor-row {width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; }
.elementor-section-boxed .elementor-column-gap-wider .elementor-row {width: calc(100% + 60px); margin-left: -30px; margin-right: -30px;}

Hemos terminado.

Qué hace este código. Puedes darte unas palmaditas en la espalda, alejarte de la computadora y celebrar…

El código se compone realmente de 3 secciones, aunque está pegado como
una sola sección.

1. Establecer el método mediante el cual el navegador calcula el tamaño de nuestra caja en la pantalla de nuestro monitor

Lo primero es establecer el método de dimensionamiento o de medir que utiliza el navegador al calcular el tamaño de nuestra caja. ¿Qué significa esto? Bueno, solo está relacionado con la forma en que los navegadores web calculan el ancho de las cosas, teniendo en cuenta el espacio de relleno y los bordes. Realmente no necesitas saberlo, lo que te interesa es el resultado que tendrás.

Lo que este código hace es establecer el método mediante el cual el navegador calcula el tamaño de nuestra caja en la pantalla de nuestro monitor. La razón principal para hacerlo es porque este es el método que usa Elementor. Asi que al establecerlo con este código estás obligando al tema, en este caso GeneratePress a usar el mismo método.

2. Agregar el mismo espacio de relleno al margen derecho e izquierdo a 20 píxeles a las Secciones de Elementor.

La segunda sección del código es la que logra esto. ¿Recuerdas cuando hablamos del Personalizador dijimos que GeneratePress establecía un espacio de relleno de 20px a la izquierda y a la derecha, que da ese aire de respiro en pantallas pequeñas? Bueno, este código hace que las secciones en Elementor tengan el mismo espacio de relleno, automáticamente, sin tener que hacer nada más. Este es el que establece el relleno izquierdo y derecho.

El código que le sigue en esta sección está ahí para «No» establecer espacio de relleno alguno en un par de situaciones:

  1. La primera es una situación en la que tenemos una sección anidada dentro de otra sección. Queremos para la sección llámada «padre» el espacio de relleno a los lados, porque tocará los bordes de la ventana del navegador. Pero no queremos que ese espacio de relleno también se aplique a la sección dentro de la Sección Padre, porque entonces tendremos espacio de relleno doble -efectivamente 20px + 20px- que se ve anormal, o mejor dicho no es acepatble.
  2. La otra excepción aquí es cuando usas Elementor en una Página generada por GeneratePress; -es decir, una donde no has marcado el ancho completo en la configuración de la página. En esas páginas, el espacio de relleno izquierdo y derecho de GP está preestablecido y no quieres a Elementor agregando aún más relleno. Sólo quieres ese espacio de relleno cuando estás usando una plantilla de ancho completo en blanco.
  3. Y el último código aquí es específico. Tuve una situación recientemente en un sitio donde solo «en una» sección específica en una página, el espacio de relleno automático parecía extraño y no cuadraba con el diseño. De hecho, necesitaba la sección al ras con los bordes de la pantalla. Para que esto funcione, hay que ir a la pestaña de Configuración de Disposición de la sección en Elementor, y seleccionar en «Espacio entre columnas» Sin Espacio. Eso elimina ese espacio de relleno automático, y lo tienes didponible solo para aquellos casos en que podrías necesitarlo.

3. Hack para arreglar cómo Elementor crea espacios entre columnas

La tercera y última sección de este código CSS es un pequeño truco para trabajar
alrededor de la forma en que Elementor crea huecos entre columnas. yo mencione
esto antes y te di una pequeña demostración antes, así que no voy a repasarlo
de nuevo aquí. Así que ahora puedes decir que eres un asistente de códificación.

Puedes repetir todo este trabajo cada vez que inicias un proyecto con Elementor y GeneratePress, pero si quieres evitar todo esto  puedes crear un subdominio en Sitio e instalar WordPress. Una vez instalado lo limpias, es decir borras todo los Plugins, Publicaciones y Paginas. Instalas el Tema GeneratePress o el que quieras usar -recomendamos GeneratePress. Entonces subes los Plugins que usas normalmente para desarrollar tus sitios, pero no debes olvidar estos tres: All In One WP Migration, ElementorPro y GeneratePress Pro. Haces todo lo que dice este tutorial y entonces utilizando All In One WP Migration exportas el Sitio.

Cuando tengas que hacer un nuevo proyecto, instalas WordPress, instalas All In One WP Migration e importas el sitio que previamente importaste y ya está listo para comenzar a trabajar.

O mejor aún puedes solicitar a Dave que te envíe Su «Starter Kit» que incluye todos los cambios discutidos en este Tutorial mas los Plugins que él utuliza y recomienda. Para solicitarlo simplemente Oprime Aquí

Deja un comentario