Tabla de contenidos
La versión gratuita de Elementor le brinda más puntos de interrupción de los que admiten la mayoría de los tutoriales: siete vistas de dispositivos en total, cada una con un ancho de píxel editable, todas activadas desde la Configuración del sitio. No se necesita licencia Pro. Donde el sistema nativo se detiene es en esas siete ranuras fijas. Si su diseño necesita una octava vista, o un ancho de dispositivo al que las ranuras nombradas no se asignan, ese espacio es lo que es gratis Extensión de puntos de interrupción personalizados de los mangos Master Addons. Cubre la mitad del estilo del trabajo responsivo, mientras que una extensión como Condiciones de visualización decide qué secciones aparecen en qué dispositivo.
Abajo: qué incluye realmente Elementor free (más de tres vistas, independientemente de lo que afirmen las publicaciones anteriores), cómo activar los puntos de interrupción nativos adicionales y cómo agregar puntos de interrupción verdaderamente personalizados en la parte superior. Esa última parte es gratuita hasta 3 puntos de interrupción, ilimitados con Master Addons Pro.
Qué puntos de interrupción te ofrece realmente Elementor gratis
Primero, el mito de que no morirá: los puntos de interrupción adicionales en Elementor no están bloqueados detrás de Elementor Pro. Muchos artículos todavía dicen que lo son. Desde Elementor 3.4 enviada la función Puntos de interrupción personalizados adicionales, la versión gratuita admite hasta siete vistas de dispositivo:
- Retrato móvil: hasta 767px por defecto (siempre activo)
- Paisaje móvil: hasta 880px
- Retrato de tableta: hasta 1024px (siempre activo)
- Paisaje de tabletas: hasta 1200px
- Portátil: hasta 1366px
- Escritorio: la vista base desde la que se bifurca todo lo demás
- Pantalla ancha: 2400px y más (el punto de interrupción de un ancho mínimo en el conjunto)
Cada uno de esos valores de píxeles es editable. Abra la configuración del sitio, cambie el límite de Tablet Portrait de 1024px a 900px, guárdelo y listo. Elementor's documentación para desarrolladores explica la lógica de ancho máximo a continuación si desea la mecánica.
Entonces, ¿qué no puede hacer la versión gratuita? Dos cosas. No puedes agregar un octavo punto de interrupción y no puedes salir de las ranuras nombradas: las seis vistas adicionales tienen roles fijos y, una vez que están todas en uso, el sistema nativo está lleno. Ese límite es la razón por la que existe un complemento de puntos de interrupción dedicado.
Cómo activar los puntos de interrupción adicionales de Elementor (gratis, sin complemento)
Antes de instalar algo, enciende lo que Elementor ya te ofrece. Tarda aproximadamente un minuto:
- Abra cualquier página con Elementor y haga clic en el menú de hamburguesas en la esquina superior izquierda del panel, luego elija Configuración del sitio.
- Ir a Diseño → Puntos de interrupción.
- Haga clic en el Puntos de interrupción activos campo y agrega las vistas que desees: Paisaje móvil, Paisaje de tabletas, Laptop, Pantalla ancha.
- Ajuste el valor de píxel debajo de cada punto de interrupción si el valor predeterminado no coincide con su diseño.
- Golpear Guardar cambios. Elementor regenera su CSS y las nuevas vistas aparecen en modo responsivo.
Si siete vistas cubren tu proyecto, detente aquí. No has gastado nada ni instalado nada. Sigue leyendo si necesitas más vistas que esa, o un punto de interrupción que las tragamonedas nombradas no puedan expresar.
Cómo agregar puntos de interrupción personalizados más allá de los siete de Elementor
La ruta libre que pasa por el techo de Elementor es Puntos de interrupción personalizados para Elementor, un complemento creado por el equipo de Master Addons. Se ejecuta solo junto a Elementor, no se requiere ningún otro complemento. También se empareja con Complementos maestros si ya lo ejecuta, administrará los puntos de interrupción desde el mismo panel que sus widgets. La versión gratuita suma hasta 3 puntos de interrupción personalizados con control exacto de píxeles sobre el ancho de cada dispositivo; Master Addons Pro elimina la tapa por completo.
Paso 1: instale el complemento
En su panel de WordPress, vaya a Complementos → Agregar nuevo y busque “Puntos de interrupción personalizados para Elementor”. Instálelo y actívelo. Si ya utiliza complementos maestros, también puede activarlo desde la pestaña Extensión en el panel de complementos maestros; Ambas rutas terminan en la misma página de configuración.
Paso 2: abra la página Puntos de interrupción
Aparece un nuevo elemento de puntos de interrupción en el menú de su panel. Haz clic en él. La página enumera sus puntos de interrupción actualmente activos con sus rangos, coincidiendo con lo que haya configurado en la Configuración del sitio de Elementor, y le brinda la opción de agregar un nuevo dispositivo en la parte superior.
Paso 3: agregue un punto de interrupción con un ancho máximo
Nombra el dispositivo e ingresa su ancho máximo en píxeles. Para apuntar a teléfonos pequeños, escriba 600 y guárdelo. El complemento ajusta el ancho mínimo del dispositivo vecino para usted, de modo que los rangos nunca se superpongan: su nueva vista de Small Mobile cubre pantallas de hasta 600 px, y la siguiente vista comienza en 601 px. En la versión gratuita puedes sumar hasta 3 de estos puntos de interrupción personalizados; Complementos maestros Pro los usuarios obtienen puntos de interrupción ilimitados más importación/exportación.
Paso 4: diseñe la nueva vista en Elementor
Edite cualquier página con Elementor y haga clic en el icono del modo responsivo en la parte inferior del panel. Su vista personalizada ahora se encuentra en la barra de dispositivos junto a los valores predeterminados. Selectalo, elige un elemento y establece valores como tamaño de fuente, relleno o recuento de columnas que se aplican solo dentro de ese rango de píxeles. Haga clic en Actualizar y luego cambie el tamaño de su navegador para ver cómo se activan los estilos. Para obtener un recorrido más profundo del estilo por dispositivo, consulte nuestra guía diseño responsivo con puntos de interrupción Elementor.
Gratis vs Pro: cuántos puntos de interrupción te ofrece cada opción
Aquí está la comparación, incluido lo que Elementor le brinda antes de que cualquier complemento entre en escena:
| Opción | Costo | Lo que obtienes | Límite |
|---|---|---|---|
| Elementor libre (nativo) | Gratis | 7 vistas de dispositivos con nombre, cada una con un ancho de píxel editable | Juego fijo de 7, sin tragamonedas nuevas |
| Puntos de interrupción personalizados para Elementor (gratis) | Gratis | Puntos de interrupción personalizados con sus propios nombres y anchos exactos | 3 puntos de interrupción personalizados |
| Complementos maestros Pro | Pagado | Todo lo anterior, además de importar y exportar | Ilimitado |
Para la mayoría de los sitios, las siete vistas de Elementor más 3 niveles personalizados cubren cada espacio real: una vista de teléfono pequeño, un ancho de tableta impar, una pantalla de quiosco. Las agencias que hacen malabarismos con las listas de dispositivos cliente son las que alcanzan el límite libre, y eso es quién Pro es para. Si compara todo el complemento con alternativas mientras lo hace, nuestro Comparación de complementos maestros y complementos definitivos cubre el emparejamiento de características más amplio.
Cuando un punto de interrupción personalizado realmente corrige un diseño
Vale la pena agregar un punto de interrupción personalizado cuando un diseño rompe el espacio entre dos vistas existentes. El caso clásico es una cuadrícula de 3 columnas. Se ve justo en el escritorio por encima de 1025px. Elementor lo reduce a 2 columnas en la vista de tableta de 1024px. En una tableta grande sostenida en un paisaje, esa misma vista de 1024px deja una amplia columna vacía y desperdicia espacio.
Agregue un punto de interrupción, digamos, 992px, configure la cuadrícula nuevamente en 3 columnas allí y el diseño se ajuste al dispositivo en lugar de adivinar. El mismo movimiento funciona para una vista de teléfono pequeño donde aumenta los tamaños de fuente y el relleno de botones que parecen estrechos por debajo de 400px, un rango que incluso la vista de Retrato móvil de Elementor trata como un solo depósito.
Los puntos de interrupción también combinan bien con la visualización condicional. Si una sección sólo tiene sentido en pantallas más grandes, un punto de interrupción personalizado controla su estilo Condiciones de visualización controla si aparece. Los dos resuelven mitades diferentes del mismo problema de respuesta.
¿los puntos de interrupción personalizados ralentizan su sitio?
Un puñado de puntos de interrupción no ralentizarán su sitio de ninguna manera que un visitante note. Cada uno agrega una consulta de medios CSS estándar y los estilos que configuró se cargan exactamente como los estilos responsivos integrados de Elementor. El CSS agregado es pequeño junto al peso de una página típica.
El editor es una historia diferente. Cada punto de interrupción adicional significa que un Elementor de panel responsivo más tiene que renderizarse, por lo que apilar 10 o más puede hacer que la pantalla de edición parezca más pesada. Agregue solo las vistas que realmente diseñará. Cinco o seis en total, incluidos los valores predeterminados, son suficientes para casi todos los proyectos. Si la velocidad es su preocupación más amplia, nuestra guía sobre cómo acelerar los sitios web de Elementor cubre las correcciones que realmente aparecen en los tiempos de carga.
Cuándo no agregar un punto de interrupción personalizado
Los puntos de interrupción personalizados no son una solución para cada error que responde, y alcanzar uno primero suele ser una llamada incorrecta. Si un solo elemento se comporta mal en un tamaño de pantalla, aparece una regla específica Css personalizado suele ser más limpio que un nivel de dispositivo completamente nuevo que luego necesita estilo en todas partes.
Dos casos más para omitirlo. Si activar una de las vistas nativas inactivas de Elementor, o aplicar un valor de píxel predeterminado en la Configuración del sitio, soluciona el problema, hazlo; no cuesta nada y mantiene el editor ligero. Y si el problema realmente es qué contenido se muestra en qué dispositivo en lugar de cómo está diseñado, eso es un trabajo para las condiciones de visualización, no otro punto de interrupción.
Custom Breakpoints se encuentra junto al resto del kit de herramientas Master Addons, desde las extensiones gratuitas hasta Creador de temas, todo construido para cerrar los espacios que Elementor deja abiertos.
Preguntas frecuentes
¿elementor free tiene puntos de interrupción personalizados?
Sí, más de lo que la mayoría de la gente piensa. Elementor gratis incluye siete vistas de dispositivos: retrato móvil, paisaje móvil, retrato de tableta, paisaje de tableta, computadora portátil, escritorio y pantalla ancha. Activas los adicionales en Configuración del sitio → Diseño → Puntos de interrupción y puedes editar cada valor de píxel. Lo que Elementor gratuito no puede hacer es agregar puntos de interrupción más allá de esas siete ranuras con nombre; para eso necesitas el complemento gratuito Custom Breakpoints for Elementor.
¿cómo agrego un punto de interrupción personalizado en Elementor?
Para las vistas integradas, abra Configuración del sitio → Diseño → Puntos de interrupción, agregue las vistas que desee al campo Puntos de interrupción activos y ajuste sus anchos. Para puntos de interrupción más allá de los siete de Elementor, instale el complemento gratuito Puntos de interrupción personalizados para Elementor, abra su página de puntos de interrupción e ingrese un nombre de dispositivo y un ancho máximo en píxeles, por ejemplo, 600 para teléfonos pequeños. Luego, la nueva vista aparece en el modo responsivo de Elementor lista para diseñar.
¿cuántos puntos de interrupción puedes tener en Elementor?
Elementor free y Pro completan siete vistas de dispositivos nativos. El complemento Custom Breakpoints for Elementor agrega hasta 3 puntos de interrupción verdaderamente personalizados además de eso de forma gratuita, y Master Addons Pro elimina la tapa para puntos de interrupción ilimitados.
¿los puntos de interrupción personalizados requieren Elementor Pro?
No, en ambos aspectos. Los puntos de interrupción adicionales de Elementor (Mobile Landscape, Tablet Landscape, Laptop, Widescreen) se envían en la versión gratuita, y el complemento Custom Breakpoints for Elementor también es gratuito. No hay ninguna licencia de Elementor Pro en ninguna parte; Sólo los puntos de interrupción personalizados ilimitados requieren Master Addons Pro.
¿el complemento Custom Breakpoints necesita complementos maestros para funcionar?
No. Funciona como un complemento independiente con solo Elementor instalado. También se integra con Master Addons si ejecuta ambos, por lo que administra puntos de interrupción desde el mismo panel que sus widgets y extensiones, y Master Addons Pro es lo que desbloquea puntos de interrupción ilimitados.
¿los puntos de interrupción personalizados ralentizan mi sitio web?
No. Cada punto de interrupción solo agrega una consulta de medios CSS liviana y los estilos se cargan como los estilos responsivos integrados de Elementor. Apilar muchos puntos de interrupción puede hacer que el editor se sienta más pesado, así que agregue solo las vistas que realmente diseñará.
Lectura relacionada
