Cómo construir un sitio web receptivo con Beaver Builder (y por qué debería)

Probablemente sepa que la mayoría del tráfico web proviene de dispositivos móviles en lugar de computadoras personales, lo que conduce a nuevas prácticas en el desarrollo y el diseño de sitios web. Además, Google impone estándares móviles con su prueba de compatibilidad con dispositivos móviles. La falla de esta prueba puede tener un efecto en los resultados de búsqueda. Si desea que los sitios que cree compitan de manera efectiva, deben ser completamente receptivos. “Responsivo” significa que un sitio web debe verse bien y funcionar sin problemas y pasar los estándares de uso en pantallas más pequeñas y navegadores móviles. Los sitios diseñados y probados solo en computadoras de escritorio rara vez ofrecen una buena experiencia de usuario en dispositivos donde el espacio inmobiliario es limitado.
En esta publicación, discutiremos algunas de las mejores prácticas en diseño receptivo y luego le mostraremos cómo simplificar el proceso con Beaver Builder. Además de las capacidades de respuesta incorporadas del complemento y el tema Beaver Builder, la forma receptiva del complemento le permite cambiar su apariencia al ver las páginas en dispositivos grandes, medianos y pequeños. ¡Pongámonos a trabajar!

Los elementos clave del diseño receptivo no tienen un enfoque universal para garantizar que un sitio web se vea bien en pantallas pequeñas, pero aquí hay algunos elementos clave a los que debe prestar atención al construir un sitio web receptivo:
El tamaño del dispositivo. No es factible tener una versión diferente de su sitio para cada tamaño de pantalla y resolución imaginable, por lo que el diseño tiende a depender de los anchos de la pantalla: grandes (escritorio), mediano (tableta) y pequeño (teléfono). Aspecto. Beaver Builder mueve automáticamente las filas de columnas en la pantalla grande a columnas apiladas verticalmente a medida que disminuye el tamaño de la pantalla. Puede cambiar el orden de apilamiento y puede cambiar otros aspectos de la apariencia para moverse mejor de la orientación horizontal a la orientación de pantalla más pequeña.
Espaciado. Es importante usar mucho espacio en blanco en cada tamaño de pantalla, pero en un dispositivo móvil es esencial asegurarse de que los usuarios tengan espacio para interactuar con diferentes partes de su sitio.
Visibilidad. Dado el poco espacio que trabaja en dispositivos móviles, a veces puede mejorar la experiencia del usuario en dispositivos móviles ocultando algunos de los elementos que aparecen en la versión de pantalla grande. Por supuesto, desea mantener la información más importante, pero el sitio completo podría tener elementos como imágenes que no agregan ningún valor a la versión de pantalla pequeña.
El diseño receptivo requeriría mucha codificación sin herramientas que ajusten automáticamente la apariencia y el espacio. Las capacidades de respuesta construida de Beaver Builder cumplen con la prueba de compatibilidad con los dispositivos móviles de Google, por lo que todo lo que tiene que hacer es cambiar su configuración para mejorar la experiencia del usuario a cada tamaño de pantalla.
Elegir las herramientas adecuadas para crear un sitio web receptivo, ya hemos hablado sobre la coincidencia natural de Beaver Builder con un diseño receptivo y su capacidad para cambiar sus diseños de manera efectiva. El complemento Beaver Builder tiene muchas otras cosas útiles. También es importante elegir un tema receptivo para su sitio de WordPress para controlar la capacidad de respuesta del encabezado, el sótano y la barra lateral y uno que sea compatible con el complemento Beaver Builder. Hay muchos temas de WordPress disponibles, pero, por supuesto, somos parciales en nuestro propio tema de Beaver Builder, porque está limpio, es una carga rápida y está completamente integrada con el Beaver Builder. Si no hay un tema que ofrezca el grado de receptividad y personalización , También ofrecemos Beaver Themer, una forma de construir modelos receptivos en partes de la página que normalmente están controlados por el tema. Cómo crear un sitio web receptivo con Beaver Builder en 6 pasos aquí Vea lo fácil que es diseñar sitios web de WordPress amigables con los dispositivos móviles de Beaver Builder. Paso 1: Instale el complemento y elija una plantilla de primer aspecto, levante una copia del complemento Beaver Builder. Cualquier versión premium hará el trabajo, pero los planes profesionales y de agencia vienen con el tema de Beaver Builder. Independientemente del tema que use, instale y active el complemento Beaver Builder en su sitio.
Cuando comienza a editar una nueva página en Beaver Builder, opcionalmente puede seleccionar una plantilla de aspecto predefinido, como la que se muestra en la siguiente captura de pantalla:

Beaver Builder viene con más de 30 plantillas de apariencia para elegir. Encontrará páginas de destino, modelos específicos de la industria (como sitios de moda y agencias) y ciertos tipos de páginas de contenido, incluida una página de “suscripción” y una página “pronto”. Todas estas plantillas están diseñadas desde cero para responder completamente a dispositivos móviles. Si considera su propio diseño de página, comience a extraer las filas y el módulo en el área de apariencia. Respuesta de la página que ingresa al modo de edición receptiva de Beaver Builder. Para acceder a esto en cualquier página, seleccione el menú Herramientas y elija edición receptiva o use solo el pedido rápido del teclado “R”:
Una vez que ingrese al modo de edición receptiva, puede ver cómo se ve su página en pantallas más pequeñas:

Use los iconos en la parte superior de la página para cambiar entre tableta (ancho medio) y móvil (ancho pequeño):
A medida que edita la página, muévase de un ancho de pantalla a otro para ver el resultado de su aspecto. Este sistema le permite enfocar sus esfuerzos en la versión de su sitio que la mayoría de los visitantes verán también garantiza que los usuarios tengan una experiencia de visualización sin problemas en otros dispositivos. Paso 3: Personalice la configuración de respuesta global si desea más control sobre cómo Beaver Builder ajusta la configuración de receptividad, abra la herramienta de menú y haga clic en Configuración global para cambiar la capacidad de respuesta de las opciones: una opción es deshabilitar el comportamiento receptivo en su sitio en la mayoría de los casos. , la capacidad de respuesta debe activarse. También es una buena idea dejar el espacio automático activado. El espacio automático ajusta automáticamente los bordes y el relleno entre los elementos en las pantallas más pequeñas para evitar el contenido demasiado lleno o demasiado distante. Con el espacio automático discapacitado, probablemente necesite hacer muchos más cambios manuales. Además, puede establecer puntos de interrupción personalizados aquí. Si el punto de interrupción del dispositivo promedio se establece en 900 PX, por ejemplo, pantallas más amplias de las que muestran la versión de pantalla grande de sus páginas. Muestra la versión promedio de sus páginas.

Paso 4: Cambie el tamaño de las fuentes Dependiendo del tipo de dispositivo además de la configuración global que afecte el comportamiento receptivo de todo el sitio, hay muchas formas en que puede ajustar la configuración específica para la apariencia receptiva en una determinada página o publicar.Por ejemplo, puede especificar diferentes tamaños de fuente para cada tipo de dispositivo.Para ver esto en la acción, abra un elemento de edición que incluye texto y haga clic en la pestaña Estilo: en la sección de impresión, extienda la categoría de fuente para cambiar el tamaño de fuente predeterminado.Ahora haga clic en el icono del dispositivo junto a la tipografía y irá al editor de ancho medio (tableta):

Ahora puede establecer un tamaño diferente para la fuente, que solo se aplicará para dimensiones de pantalla media.Haga clic en el icono nuevamente y puede hacer lo mismo en el editor de ancho pequeño (móvil):

Puede cambiar la otra configuración de fuentes aquí, como la altura de la línea y la alineación, y sus cambios solo aparecen en el tipo de dispositivo que indica. Además de usar estos íconos de edición receptivos en sus modelos habituales, puede hacer todos estos cambios en el diseño receptivo, para que pueda ver los cambios directamente. Paso 5: Cambiar el comportamiento de apilamiento de las columnas de Beaver Builder le permite crear formas complejas de columnas, y a medida que el ancho de la pantalla se vuelve más pequeño, Beaver Builder mueve columnas horizontales a columnas verticales en un orden de apilamiento predefinido. Es una buena idea verificar y, a veces, personalizar el comportamiento de apilamiento de las columnas individuales para garantizar que el flujo de contenido todavía esté funcionando en una orientación vertical. Veamos un ejemplo de la sección de la página de dos columnas: de forma predeterminada, en la versión móvil de esta página, la imagen del libro se mueve para posicionarse por encima del texto en pantallas más pequeñas:


Para cambiar el orden de apilamiento, seleccione uno de los módulos en la columna y haga clic en la columna Edición> Configuración de la columna. Luego haga clic en la pestaña Avanzada y busque la opción de orden de apilamiento:
Puede pasar del valor predeterminado a invertido a cambiar la forma en que se ordena la columna. En nuestro ejemplo, el párrafo ahora aparece por encima de la imagen:

Incluso puede evitar completamente el apilamiento de columnas estableciendo columnas específicas para cada tamaño del dispositivo en la pestaña de estilo, utilizando el icono receptivo cerca de la configuración o el diseño receptivo, como se describe en los pasos anteriores.Paso 6: Ocultar los elementos individuales en el dispositivo específicos del dispositivo con tanta cuidado a medida que diseñe cada versión de su está oculto.Aquí hay un ejemplo de cómo ocultar ciertos elementos en dispositivos medianos y/o pequeños.Abra cualquier elemento para la edición, haga clic en la pestaña Avanzada y busque la sección de visibilidad: Extienda el menú de punto de interrupción y elija el tamaño del dispositivo en el que este elemento será visible.Si elige solo dispositivos grandes y medianos, el artículo está oculto en dispositivos pequeños:

También puede usar esta función para crear elementos que solo aparecerán en un cierto tamaño del dispositivo, como un botón de urgencia personalizado, que solo es visible en los dispositivos móviles. Después de estos pasos, le brinda un control casi total sobre cómo se ve y opera su sitio en pantallas de diferentes tamaños. ¡Todo lo que queda es comenzar a diseñar! Si tiene dificultades mientras construye su sitio receptivo, encontrará muchas instrucciones detalladas en la base de conocimiento de Beaver Builder. Conclusión Hoy en día, los sitios web receptivos son un requisito, no una opción. Lo más probable es que muchos visitantes vean su sitio en un teléfono u otro dispositivo móvil. Si desea que su experiencia sea tan buena como un escritorio de navegador, tiene algo que hacer. Como hemos demostrado, la construcción de una WordPress totalmente receptiva no tiene que ser un desafío. Con las herramientas adecuadas, como Beaver Builder y el tema del marco asociado, puede hacer que su sitio sea amigable para seis pasos: instale el complemento y elija una plantilla.

Diseñe sus páginas utilizando la edición receptiva.

Personalizar la configuración de respuesta global.

Cambie el tamaño de las fuentes de acuerdo con el tipo de dispositivo.

Configurar el comportamiento de apilamiento de columnas.

Ocultar los elementos individuales en cierto tamaño del dispositivo.

¿Tiene alguna pregunta sobre cómo diseñar efectivamente su sitio web receptivo? ¡Pregunte en la sección de comentarios a continuación!