Configuración y configuración de puntos de interrupción de Elementor personalizados mediante complementos maestros #
El libre Puntos de interrupción personalizados para Elementor el complemento de Master Addons (3 puntos de interrupción personalizados gratuitos, ilimitados con Master Addons Pro) te permite crear diseños de sitios web totalmente responsivos optimizado para tamaños de pantalla más allá de las vistas de dispositivos integradas de Elementor. Esto garantiza una experiencia de usuario consistente y de alta calidad en cualquier dispositivo.
Usando puntos de interrupción Elementor personalizados, puedes:
- Agregue tantos puntos de interrupción personalizados (anchos de pantalla) como sea necesario (ilimitado con Master Addons Pro).
- Defina diseños, tamaños de fuente, espacios y alineación específicos para dispositivos como dispositivos móviles pequeños, tabletas grandes o tamaños de pantalla personalizados.
- Anule el comportamiento de respuesta predeterminado de Elementor en anchos de píxeles precisos.
¿qué son los puntos de interrupción de Elementor personalizados? #
Los puntos de interrupción personalizados de Elementor son anchos de pantalla adicionales definidos por el usuario que permiten que su diseño se adapte a tamaños que las vistas integradas de Elementor no cubren. Elementor tiene hasta siete vistas de dispositivo (Retrato móvil, Paisaje móvil, Retrato de tableta, Paisaje de tableta, Computadora portátil, Escritorio y Pantalla ancha). Un punto de interrupción personalizado agrega otro en el ancho máximo exacto que elija, por ejemplo, una vista móvil pequeña de 600 px. Master Addons agrega hasta 3 puntos de interrupción personalizados en el plan gratuito y puntos de interrupción ilimitados con Pro, lo que le brinda un control preciso sobre el diseño responsivo sin tocar el código.
Entonces, veamos cómo configurar y configurar esta función.
Configuración de puntos de interrupción de Elementor personalizados #
Respuesta rápida: instale la extensión Puntos de interrupción personalizados desde Complementos maestros > Extensión, abre lo nuevo Puntos de interrupción página en el menú Agregar complementos maestros, luego ingrese a Ancho máximo en píxeles para cada tamaño de dispositivo al que desee apuntar (por ejemplo, 600px para dispositivos móviles pequeños).
Siga estos pasos para instalar y definir sus puntos de interrupción personalizados.
Paso 1: Instale y active la extensión #
- Navegar al Complementos maestros menú en su panel de WordPress.
- Ir al Extensión pestaña.
- Encuentra el “Puntos de interrupción personalizados” opción y haga clic en el botón de descarga para instalarlo y activarlo en su sitio web.
Paso 2: acceda a la configuración de los puntos de interrupción #
- En el panel de WordPress, coloque el cursor sobre Complementos maestros menú.
- Un nuevo elemento del menú titulado “Puntos de ruptura” aparecerá. Haga clic en él. Esto lo redirigirá a la página de entrada de punto de interrupción personalizada.
Paso 3: agregue puntos de interrupción personalizados #
En la página de entrada de Puntos de interrupción, verá sus puntos de interrupción Elementor activos y sus rangos de píxeles.
Para agregar un nuevo punto de interrupción personalizado, use el campo de entrada para configurar solo Ancho máximo (en píxeles).
Por ejemplo, para apuntar a pequeños dispositivos móviles, ingrese 600px como el ancho máximo.
Después de guardar, el sistema ajustará automáticamente el ancho mínimo para el siguiente punto de interrupción predeterminado. En el ejemplo anterior, el punto de interrupción “Móvil pequeño” se aplicará a todas las pantallas menor o igual a 600px, mientras que el punto de interrupción predeterminado “Móvil” comenzará en 601px y finalice en el ancho mínimo del punto de interrupción de la tableta.
Puede agregar o eliminar puntos de interrupción según sea necesario desde esta página.
Uso de puntos de interrupción Elementor personalizados #
Una vez configurados en la configuración de complementos maestros, los puntos de interrupción personalizados estarán disponibles directamente en el editor de páginas de Elementor.
Paso 1: abra el modo responsivo en Elementor #
Vaya a cualquier página y haga clic “Editar con Elementor” Haga clic en el Modo responsivo ícono (generalmente un ícono de monitor y teléfono) en la parte inferior izquierda del panel.
Paso 2: seleccione un punto de interrupción personalizado #
La barra superior mostrará todos los puntos de interrupción disponibles, incluidos los personalizados que creó (por ejemplo, “Móvil pequeño”).
Haz clic en tu Punto de interrupción personalizado para cambiar la vista del editor a ese tamaño de pantalla específico.
Paso 3: aplique estilos personalizados #
Seleccione cualquier elemento (por ejemplo, un widget de encabezado).
Ve al elemento Estilo pestaña.
Haga clic en el Icono responsivo (monitor de escritorio) junto a cualquier configuración de estilo, como Tipografía > Tamaño o Contenido > Alineación.
Defina un valor específico para ese punto de interrupción (por ejemplo, establezca el tamaño de fuente en 20px). Este valor solo se aplicará cuando el ancho del navegador esté dentro del rango definido para ese punto de interrupción personalizado.
Paso 4: guardar y obtener una vista previa #
Una vez que haya definido sus estilos responsivos para todos los puntos de interrupción necesarios, haga clic Actualizar para guardar la página.
Obtenga una vista previa de la página en vivo y cambie el tamaño de la ventana de su navegador para ver que sus puntos de interrupción personalizados activan los estilos únicos que definió.
Preguntas frecuentes #
¿cuántos puntos de interrupción personalizados puedo agregar en Elementor?
Master Addons agrega hasta 3 puntos de interrupción personalizados en el plan gratuito y puntos de interrupción ilimitados Complementos maestros Pro. Cada punto de interrupción tiene un tamaño de pantalla de ancho máximo adicional superpuesto a las vistas de dispositivos integradas de Elementor diseños totalmente responsivos.
¿cómo agrego un punto de interrupción personalizado en Elementor?
Instale la extensión Puntos de interrupción personalizados desde la pestaña Extensión de complementos maestros, abra la nueva página Puntos de interrupción en el menú Complementos maestros e ingrese un ancho máximo en píxeles, por ejemplo 600px para dispositivos móviles pequeños. Después de guardar, el nuevo punto de interrupción aparece en el modo responsivo de Elementor listo para diseñar.
¿los puntos de interrupción personalizados requieren Elementor Pro?
No. Los puntos de interrupción personalizados son a Complemento de complementos maestros, no una función de Elementor Pro. El complemento gratuito Custom Breakpoints le ofrece hasta 3 puntos de interrupción personalizados y solo el límite superior requiere Master Addons Pro.
¿necesito establecer un ancho mínimo para cada punto de interrupción?
No. Sólo ingresas el ancho máximo. Master Addons ajusta automáticamente el ancho mínimo del siguiente punto de interrupción para que los rangos nunca se superpongan ^ Por ejemplo, un punto de interrupción móvil pequeño de 600px hace que la vista móvil predeterminada comience en 601px.
¿los puntos de interrupción personalizados ralentizan mi sitio web?
No. Los puntos de interrupción solo agregan consultas de medios CSS estándar, que son livianas, y los estilos que configuró se cargan exactamente como los estilos responsivos integrados de Elementor. Siguiendo general Mejores prácticas de velocidad de Elementor mantiene la página rápida independientemente de cuántos puntos de interrupción utilice.
Para obtener una comparación con los puntos de interrupción integrados de Elementor y una demostración en vivo, consulte Página de complemento de puntos de interrupción personalizados.
