Cómo agregar puntos de interrupción personalizados a Elementor

En este artículo, discutiremos cómo agregar puntos de interrupción personalizados al elemento. A lo largo de los años, esta ha sido una característica muy solicitada del equipo Elementer, aunque aún no la han integrado. ¿Por qué quieres puntos de interrupción personalizados? Como agencia que utiliza Elementor para crear sitios web para clientes, con frecuencia tenemos usos para puntos de interrupción personalizados. Por ejemplo, si alguien quiere mirar el sitio web en un teléfono móvil, en modo de paisaje, no hay capacidad incorporada para hacerlo. En su forma más simple, nos gustaría implementar un panorama móvil. Si hicieran eso, la pestaña Selector receptivo en el editor se vería así:

Fuente
En una forma más compleja, nos gustaría poder agregar fácilmente puntos de interrupción personalizados a píxeles específicos.
Solicitud de GitHub: ¿Dónde están sus puntos de interrupción personalizados? Abierto el 25 de mayo de 2020
Solicitud de GitHub: [solicitud característica] Puntos de interrupción personalizados abiertos el 19 de julio de 2017
En un momento, a principios de 2010, la mayoría de los dispositivos tenían el mismo tamaño de pantalla. Esto se refiere tanto a computadoras portátiles como a dispositivos móviles. Ahora, en 2020, hay muchas resoluciones de pantalla diferentes. Por ejemplo, una pantalla MacBook Retina de 13 pulgadas tiene una resolución de 2560 x 1600, mientras que una pantalla Dell XPS de 13 pulgadas tiene una resolución de 3,840 x 2,400. La misma clase, diferentes dimensiones.
Personalizar puntos de interrupción personalizados para que coincidan con los anchos de estas pantallas podría ser útil. Si sabe que la mayoría de sus visitantes provienen de las computadoras portátiles de Apple, la integración de esta función mejoraría la experiencia del usuario y eventualmente conduciría a más conversiones y una tasa de rechazo más baja. Otro ejemplo de por qué necesitaría un punto de interrupción personalizado es este. En tabletas más pequeñas, una apariencia de cuatro columnas se llena demasiado para ser utilizada. Sin embargo, en una tableta más grande, como un iPad Pro, una cuatro columnas se ve perfectamente en la pantalla y muestra la información de manera efectiva. Current debe hacer algunos compromisos. O puede ir con un aspecto de 2 columnas: funciona en una tableta más pequeña, pero se ve extremadamente distante en una tableta más grande, o puede ir con cuatro columnas, que se ve bien en una tableta grande, pero se vuelve súper estrecho una pequeña pequeña y pequeña. tableta. No hay forma de establecer un buen punto de interrupción para dejar que las columnas colapsen. TLDR; Todos realmente quieren puntos de interrupción personalizados y un modo de paisaje. Hay casos de uso legítimos para esto, pero Elementor no ha agregado esta función en los tres años desde que se recomendó. (Esto parece ser un problema que se repite con Elementor, no escucha los comentarios de los desarrolladores, pero este es un punto para otro día).
Debido a que no hay implementación en el constructor nativo de primaria, tendremos que encontrar algunos complementos de terceros que nos brinden la oportunidad de hacerlo.De nuestra investigación, hemos encontrado tres complementos principales que le permitirán agregar puntos de interrupción personalizados al elemento.Para averiguar qué es lo mejor para los consumidores, los tomamos a todos y le daremos una presentación y comparación completa.Las dos opciones para complementos de punto de interrupción personalizados La primera opción para agregar puntos de interrupción personalizados a un sitio web de Elementor es un complemento independiente desarrollado por CodeVision.Titulado “Puntos de interrupción personalizados para el elemento”, el complemento cuesta 20 euros o 22.5 USD.
La segunda opción es otro complemento independiente que está especialmente diseñado para agregar puntos de interrupción personalizados al elemento. Se llama “complemento de puntos de interrupción personalizados WEPIXEL para Elementor” y actualmente se encuentra en su versión Beta 1.0. Se ha mantenido en esta versión durante algún tiempo, por lo que puede ser un proyecto abandonado. Sin embargo, la compra de una licencia funciona y pudimos instalarla en nuestro sitio de prueba. Cuesta 35 euros para una licencia que se puede usar en un dominio (un poco caro para una versión beta de un complemento, en nuestra opinión). La tercera opción es un paquete de suplementos llamados complementos de PioTnet que contiene esta característica como uno de sus muchos módulos. Pafe ha salido por algún tiempo y somos fanáticos que tienes lo que tienen para ofrecer. Los mencionamos en nuestro artículo, comparando los complementos superiores para el elemento. Cuestan $ 40 por una licencia de sitio web o $ 60 por una licencia de sitio ilimitada. También ofrece una oferta de vida.
Si conoce otro complemento o una solución gratuita, deje un comentario a continuación. Ahora, sigamos adelante y recorramos cada uno de los complementos, desde la instalación, hasta el agregado de los puntos de interrupción personalizados para el elemento. Esperamos que esto le brinde una buena imagen general de lo que los complementos tienen para ofrecer, ayudándole a tomar una decisión informada. CodeVision Puntos de interrupción personalizados para Elementor El único propósito de este complemento es agregar puntos de interrupción personalizados a su instalación de elementor. Este complemento se vende a través de la paleta, lo que significa que el proceso de compra es extremadamente fácil. Se mantiene activamente y está bastante bien diseñado. Una vez que lo haya instalado en su sitio web, puede acceder a la configuración personalizada de complementos haciendo clic en la entrada desde el menú Administración. Desde esta pantalla, puede importar la exportación y agregar nuevos puntos de interrupción según sea necesario. El complemento CodeVision viene con 18 puntos de interrupción preinstalados y puede agregar todo lo que necesite. También puede activarlos y desactivarlos, lo que significa que no tiene que eliminar la interrupción, pero puede eliminarla de la interfaz del editor elemental.
Después de establecer sus puntos de interrupción personalizados, puede explorar el editor elemental y usarlos. (He deshabilitado todos los puntos de ruptura pero ocho para este ejemplo).

Cuando cambia entre puntos de interrupción, puede elegir entre paisaje y retrato. Aquí hay algunas comparaciones entre los puntos de descanso.

Este punto de interrupción es para iPhone 11/XR en modo paisajista.

Este complemento se mantiene activamente y hace su trabajo muy bien. La interfaz de back-end es fácil de entender y usar y puede cambiar rápidamente entre puntos de interrupción personalizados en el editor elemental. Plugin para puntos de interrupción de Wepixel personalizados El mejor momento para describir este complemento es “un pequeño boceto”. La página de destino no está muy bien diseñada (el formulario de asistencia se puede encontrar en la parte inferior de la página de destino y es simplemente una forma de elemento genérico), y la compra de una clave de licencia es ligeramente impactante. Sin embargo, siguiendo las instrucciones en su sitio web funcionó y logramos obtener una clave de licencia y un complemento funcional. Acceda a la configuración para el complemento de interrupción personalizado navegando en un enlace de menú de administración. Desde la página Configuración para puntos de interrupción personalizados, puede agregar y eliminar el tamaño de la pantalla, según sea necesario. También puede importar y exportar estos puntos de interrupción para usarlos en otro sitio web.
Después de configurar sus puntos de interrupción, puede navegar por el editor Elementor y hacer clic en la pestaña Modo de respuesta. Verá que aparecen los nuevos puntos de interrupción personalizados.

Funciona al igual que los puntos de interrupción predeterminados, todo lo que tiene que hacer es hacer clic en el punto de interrupción individual y la pantalla se ajustará en consecuencia.


Por ejemplo, aquí hay una comparación entre BreakPont 3, que es un punto de interrupción personalizado en el elemento con un ancho máximo de 1024 píxeles y la interrupción móvil genérica (vista previa para 360 píxeles).

Tenga en cuenta que puede agregar fácilmente nuevos puntos de interrupción según sea necesario. A partir de nuestras pruebas, este complemento parece funcionar bien y hace exactamente lo que la mayoría de la gente necesita. Puede especificar fácilmente puntos de interrupción personalizados para el elemento utilizando este complemento. A pesar del proceso incompleto de compra efectiva del complemento, una vez que lo tiene en el sitio, funciona bien. Los suplementos de PioTnet para el elemento son un complemento de complemento general para Elementor y Elementor Pro y contiene la funcionalidad de los puntos de interrupción personalizados en su paquete Basic Pro. Hay muchas extensiones y suplementos que vienen con este complemento, del que hablamos en otro artículo. Lo principal que nos preocupa en este artículo es la adición de puntos de interrupción personalizados, que este complemento le permite hacer. Después de comprar la versión Pro e instalarla en su sitio web, puede acceder a la funcionalidad personalizada del punto de interrupción en el activador de la función de back -end. Los puntos de interrupción personalizados de la consulta de medios en este complemento funcionan ligeramente diferentes de los otros dos. En lugar de acceder a las entradas personalizadas en el menú Modo receptivo, acceda a ellas en la configuración real para el elemento individual. Por ejemplo, si desea establecer un punto de interrupción para una columna individual, haga clic en la derecha, navegue por la pestaña PAFE y luego active la consulta de medios personalizada. Puedes agregar todo lo que quieras.

Tiene acceso a una gran cantidad de configuraciones, como la configuración del ancho del elemento, el borde, el relleno y la tipografía.Puede acceder a estos puntos de interrupción para columnas y elementos tipográficos.Lea más sobre esto aquí: https://pafe.piotnet.com/docs/custom-media-query-beakpoints Este complemento implementa puntos de interrupción de medios personalizados ligeramente diferentes de los otros dos.Mientras que los otros dos le brindan una dimensión de pantalla general en la que puede editar todo, esta herramienta atribuye el estilo de elementos individuales.Esto está mucho más cerca de lo que debe hacer manualmente a través de CSS si no usó ninguno de los complementos.En comparación con los otros dos, esta puede ser una buena opción para usted si está buscando algo que hacer exactamente, pero podría complicar las cosas.¿Cuál es la mejor opción para ti?
Por supuesto, esta es una decisión que usted debe tomarse de acuerdo con su presupuesto y necesidades. Sin embargo, nuestra recomendación serían los primeros puntos de interrupción personalizados de CodeVision. El único propósito del complemento es agregar puntos de interrupción de CSS tanto en el paisaje como el retrato en el editor elemental y lo hace muy bien. Viene con 18 preajuste y puede agregar todo lo que necesita. El equipo detrás del complemento tiene su sede en Alemania, tiene asistencia rápida y funciona muy bien. No vemos ningún uso del uso para el segundo complemento, porque hace lo mismo que CodeVision hace con 15 euros (sin mencionar el hecho de que todavía está en la versión beta y tiene una compra bastante no oficial). Piotnet podría terminar dándole más valor si está buscando suplementos adicionales. CodeVision Plugin cuesta $ 20 y agrega solo la funcionalidad personalizada del punto de interrupción al elemento. Por otro lado, Piotnet agrega esta funcionalidad junto con docenas de otros suplementos y adiciones para el trabajo del editor por $ 40. Si está buscando el valor de corte, PioTnet gana en esta categoría. Sin embargo, recuerde que la implementación de PioTnet de estas características es ligeramente diferente de las otras dos. También creemos que está un poco discapacitado cuando se trata de lo que realmente quiere el mercado (que probablemente esté más cerca del complemento CodeVision). Personalmente, utilicé este paquete de suplementos en algunos de los sitios web de nuestros clientes y nos impresionó la calidad del producto, la asistencia rápida y el gran volumen de suplementos que se incluyen en el complemento.