Diseño web responsive con WordPress. Principios básicos

Introducción

La tecnología ha avanzado a pasos agigantados, lo que no es una novedad. Esto nos ha permitido que podamos acceder a Internet a través de diferentes plataformas como un ordenador, tableta o móvil.

Cada una de estas pantallas tiene un formato diferente, por lo que las páginas webs deben adaptarse a cada una de ellas.

La pregunta es ¿cómo conseguir esto? Diseñando una página web responsive.

Pero ¿qué es una página web responsive y cómo crearla? Esto es lo que hoy queremos darte a conocer desde Galerna Estudio – Empresa especializada en el desarrollo de sitios web en Gijón .

Te enseñaremos cómo hacerlo desde cero sin que tengas que tener demasiado conocimientos.

El resultado permitirá que los usuarios de tu web disfruten de una mejor experiencia y que puedan ver tu sitio cómodamente desde su dispositivo preferido.

¿Qué es una página web responsive y por qué es tan importante?

Una página web responsive es una técnica dentro del diseño web que le permite a tu sitio adaptarse a los diferentes tamaños de las pantallas de los dispositivos.

Es posible que te hayas encontrado con alguna web que no se adaptaba a tu móvil. ¿Las consecuencias? Dificultad para navegar por las páginas, y fuentes y texto que no se adaptan a la pantalla. Una primera impresión negativa que, seguro, te hizo buscar otra opción.

Con un diseño web responsive, esto no ocurre. Todo el contenido, incluidas las imágenes, se reorganiza y ajusta para que los usuarios puedan leer tus textos y explorar tu página web cómodamente, como lo haría desde un ordenador. ¡Así de fácil!

No todas las plantillas de una página web son responsive. De hecho, si no conocías este concepto, tal vez tu web no tiene esta característica que, en la actualidad, resulta fundamental.

Si no tienes una página web responsive no estás optimizando la experiencia de los usuarios.

Por lo tanto, es natural que tu tráfico no aumente, que lleves estancado demasiado tiempo y que todos tus esfuerzos por introducir ofertas y descuentos suculentos no estén dando resultado.

Nadie se queda mucho tiempo en tu página web y, ahora, ya sabes por qué.

Ahora que ya sabes todo esto, ¿cuáles son los primeros pasos que deberías dar para ponerle solución a esto?

Cómo diseñar o rediseñar una web responsive: Paso a paso

En primer lugar, es fundamental entender el tamaño, la resolución, las posibles orientaciones y el aspect ratio de las pantallas en las que nuestros documentos serán visualizados, considerando el perfil del usuario objetivo.

Mucha de esta información se puede obtener de herramientas de análisis como Google Analytics, que instalemos en nuestros sitios web.

4 aspectos a tener en cuenta de tu página web responsive

A continuación, te presentamos 3 puntos que consideramos esenciales para que puedas tomar conciencia de lo importante que es diseñar una página web responsive.

También te explicamos aquellos aspectos que te permitirán cambiar de mentalidad y, a partir de ahora, tener el diseño web responsive en tu lista de tareas más importante.

Revisa los usuarios de desktop en Analitycs

Google Analitycs debe convertirse en una herramienta de referencia para ti.

Con ella podrás tener una visión mucho más preciso del tráfico que tiene tu página web y utilizar las palabras clave que te ayudarán con el posicionamiento.

Sin embargo, esto no tendrá ningún resultado positivo si no has pensado en crear una página web responsive. Para esto, Analitycs te puede ayudar.

• Abre Analitycs.
• Accede a «user explorer», el nuevo informe que te ofrece esta herramienta.
• Podrás ver el ID de cada cliente y, lo más importante, la duración media que pasa en tu página web.
• Elige entre ver todos los usuarios o «agregar segmento» si quieres que se te muestren unos resultados específicos.

Analitycs te permitirá obtener datos no solo de cuánto tiempo pasan los usuarios en tu web, sino desde dónde se conectan (ordenador, móvil, tablet).

Te aseguramos que los resultados te harán más consciente de la necesidad de crear una web responsive de cero y es que ¡muchos utilizarán el móvil!

Con todo, Analitycs te ofrecerá otra información a mayores sobre cada usuario.

El porcentaje de rebote, ingreso, transacciones y porcentaje de conversiones del objetivo. Elementos clave para que puedas llevar un control de tu web y mejorarla.

Google mobile-first- Diseño responsive y SEO

Mobile-first ha sido uno de los cambios más interesantes que ha hecho Google. Pero ¿a qué hace referencia este término que podríamos traducir como «el móvil primero»?

Pues a cómo el buscador indexa las páginas de tu web. Así, mobile-first te ofrecerá un ranking en el que tendrá como referencia la versión de tu web para los dispositivos móviles.

• Instala la actualización.
  A menos que tu web sea de nueva creación, tendrás que instalar la actualización de Google para disfrutar del mobile-first.
  Recibirás un mensaje a través de la Search Console y, a partir de ese momento, todo cambiará.
• Página responsive.
  Si ya tienes una página web responsive, no tendrás problema, pero si no es así mobile-first te lo hará saber.
  A nivel posicionamiento empezarás a perder mucho, ya que Google te estará penalizando. Y es que ¡los móviles primero!

¿Ocurre algo si tu web no tiene versión para móvil, es decir, no es responsive? Sí, mobile-first rastreará la versión desktop de tu web.

Cuando accedas a Analitycs para comprobar tu tráfico, conversiones y audiencia, el problema será que los resultados no serán alentadores.

Aunque tras analizar qué usuarios utilizan desktop en Analitycs estos tengan un porcentaje mayor que los que utilizan móvil, el nuevo algoritmo de Google (mobile-first) te obliga a crear una web responsive para que no seas penalizado. No querrás que tu posicionamiento se venga abajo, ¿verdad?

Además de todo esto, mobile-first te permitirá trabajar el SEO de tu web. ¿Cómo lo consigue? Si diseñas tu página web responsive la velocidad de carga será mayor, disminuirá el porcentaje de rebote y el contenido es mucho más legible.

Esto, Google lo premia. Por lo tanto, conseguirás mejorar el posicionamiento de tu web.

Experiencia de usuario

Las motivaciones que nos llevan a aconsejarte que optes por crear una página web responsive desde cero están todas centradas en la experiencia de usuario.

Pues seguro que estamos en lo cierto cuando creemos que lo que quieres es que las personas que accedan a tu web se queden más tiempo en ella.

Esto aumentará las posibilidades de que se suscriban a tu newsletter, te sigan por las redes sociales o se conviertan en clientes.

• Diseña una web responsive que permita una lectura cómoda de tu sitio en diferentes pantallas.
• Crea una página atractiva con animaciones y botones que logren una experiencia más divertida.
• Utiliza los vídeos e imágenes para aportar dinamismo a tu web.
• Crea menús y pestañas sencillas que les permitan a tus usuarios encontrar lo que buscan.

¿Sabes que Google Think Insights afirma que si un usuario tiene una experiencia positiva en tu sitio web las posibilidades de que se convierta en un nuevo cliente para ti son de un 67%?

Un porcentaje muy interesante y que no debes perder de vista.

Diferencias entre diseño responsive y diseño adaptativo

En el mundo actual del diseño web, hay dos enfoques principales para adaptar los sitios a diferentes pantallas: el diseño responsive y el diseño adaptativo.

Aunque ambos buscan ofrecer una experiencia óptima al usuario en varios dispositivos, tienen diferencias fundamentales:

Filosofía:

• Diseño responsive.
  Se basa en un diseño único que se ajusta automáticamente a las dimensiones de cualquier pantalla, desde smartphones hasta monitores de escritorio.
  Un mismo código HTML y CSS se adapta a distintos tamaños de pantalla.
• Diseño adaptativo.
  Utiliza múltiples diseños predefinidos para distintos rangos de tamaño de pantalla.
  El sitio web detecta el dispositivo del usuario y muestra el diseño más adecuado para esa pantalla específica.

Implementación técnica:

• Diseño responsive.
  Usa consultas de medios CSS para identificar el tamaño de pantalla del usuario y aplicar las reglas de estilo correspondientes.
  Esto permite ajustes fluidos y dinámicos en la presentación del contenido.
• Diseño adaptativo.
  Implica crear diseños HTML y CSS separados para cada rango de tamaño de pantalla.
  El servidor web determina el dispositivo del usuario y entrega el diseño HTML y CSS correspondiente.

Ventajas del diseño responsive

• Mayor flexibilidad y adaptabilidad: Se ajusta a cualquier tamaño de pantalla, presente o futuro.
• Código más simple y fácil de mantener: Un solo conjunto de código HTML y CSS para todas las pantallas.
• Mejor rendimiento SEO: Google favorece los sitios web responsivos.

Desventajas del diseño responsive

• Potencial mayor complejidad de diseño: Adaptar un diseño único a todas las pantallas puede ser un reto.
• Posibles problemas de rendimiento: En algunos casos, la carga de todos los elementos del diseño en pantallas pequeñas puede afectar el rendimiento.

Ventajas del diseño adaptativo

• Mayor control sobre la apariencia en cada rango de tamaño: Permite un diseño más personalizado para cada dispositivo.
• Potencialmente mejor rendimiento en pantallas pequeñas: Solo se cargan los elementos necesarios para cada tamaño de pantalla.

Desventajas del diseño adaptativo

• Código más complejo y difícil de mantener: Múltiples conjuntos de código HTML y CSS para diferentes tamaños.
• Menor flexibilidad para futuras pantallas: Los diseños predefinidos no se adaptan automáticamente a nuevos tamaños.
• Potenciales problemas de SEO: Google puede penalizar sitios web con diseños adaptativos mal implementados.

¿Cuál elegir?

La decisión entre diseño responsive y diseño adaptativo depende de varios factores, como:

• Complejidad del sitio web: Para sitios web simples, el responsive puede ser suficiente. Para sitios web complejos, el adaptativo puede ofrecer más control.
• Presupuesto: El responsive suele ser más rentable a largo plazo, ya que requiere menos mantenimiento.
• Objetivos de diseño: Si se busca una estética fluida en todas las pantallas, el responsive es ideal. Si se requiere un control preciso en cada rango de tamaño, el adaptativo puede ser mejor.

Conclusiones

• Diseño responsive: Ideal para una experiencia adaptable y flexible en todas las pantallas, con un código más simple y optimizado para SEO.
• Diseño adaptativo: Ofrece mayor control sobre la apariencia en cada rango de tamaño, pero requiere un código más complejo y puede tener menor flexibilidad para futuras pantallas.

Beneficios de un diseño web responsive

Invertir en diseño web responsive es estratégico y ofrece beneficios tangibles que impulsan el éxito en el mundo digital.

En el mundo digital actual, con una variedad creciente de dispositivos, el diseño web responsive se vuelve crucial para el éxito.

Aquí tienes algunos de sus principales beneficios:

Experiencia de usuario consistente en todos los dispositivos:

• Tu sitio se verá y funcionará bien en smartphones, tablets y computadoras.
• Ofrece una experiencia fluida y agradable sin importar el dispositivo.

Mejora el posicionamiento en buscadores:

• Google prefiere sitios responsivos por su experiencia de usuario.
• Aumenta la visibilidad y el tráfico orgánico en los resultados de búsqueda.

Ahorra tiempo y dinero en desarrollo y mantenimiento:

• Un diseño único reduce costos y simplifica el proceso de mantenimiento.

Adaptabilidad futura:

• Se ajusta automáticamente a nuevos dispositivos sin necesidad de rediseños.

Proyecta una imagen profesional y moderna:

• Refleja compromiso con la experiencia del usuario, generando confianza.

Amplía el alcance y la interacción:

• Alcanza a una audiencia más amplia y fomenta la interacción con tu sitio.

Facilita la navegación:

• La navegación es sencilla e intuitiva en todos los dispositivos.

Mejora el marketing digital:

• Permite adaptar estrategias de marketing a diferentes dispositivos.

Tecnologías WordPress para diseño web responsive

Diseñar o rediseñar una web responsive es un proceso que debe llevarse a cabo de una determinada manera si quieres obtener resultados positivos.

En este caso, descubrirás cómo conseguir esto con Elementor o con Visual Composer. De esta forma, podrás escoger cuál de estas 2 opciones te resulta más interesante.

Elementor

Elementor es uno de los maquetadores visuales de WordPress mejor valorados por los usuarios.

Por esta razón, lo hemos puesto como una de las primeras opciones que deberías tener en cuenta.

¿Lo mejor? Elementor es un plugin, por lo que tan solo tendrás que instalarlo para empezar a aprovechar todas sus funcionalidades.

Para hacer esto, tienes que dirigirte a «herramientas» y, después, hacer clic en «plugins». En el buscador solo tendrás que teclear «elementor».

Descubrirás que te aparecen algunas opciones, pero tú debes elegir aquella que pone «elementor page builder». Instálalo y ya estarás preparado para empezar a crear tu web responsive.

¡Importante! Puede que te encuentres con la situación de que no puedes instalar el plugin Elementor. Si esto te ocurre es porque no tienes el plan Business.

Este es un requisito que tiene WordPress para que puedas hacer uso de todas las ventajas que te brindan plugins como este.

Ahora sí, ¡vamos a ponernos manos a la obra!

Creación del menú adaptable

Crear un menú adaptable debe de ser lo primero que tienes que hacer con Elementor.

Un menú que no se adapte a las diferentes pantallas (ordenadores, tabletas, móviles) será perjudicial para tu sitio web si quieres que este sea responsive. Asimismo, es conveniente que lo hagas dinámico y divertido.

Sin embargo, antes de crear tu menú adaptable con Elementor tienes que crearlo. Para eso, debes ir a «diseño» y, después, a «personalizar».

Una vez ahí ya podrás acceder a «menús» para que puedas añadir o eliminar ítems como mejor te parezca. ¿Ya lo tienes? No te olvides de publicarlo. Ahora que ya está, continuamos.

Ahora que ya has llegado a este punto podrás utilizar el widget del menú de navegación que colocarás en el lugar deseado para poder editar el menú desde Elementor.

Este tiene múltiples funciones para que puedas conseguir el menú adaptable para tu web responsive. Te permitirá colocar los menús como quieras, agregar animaciones flotantes muy elegantes, ajustar la tipografía y mucho más.

• Diseño y animaciones.
  En la barra lateral izquierda verás en «diseño» opciones de personalización del menú. ¿Qué elegirás? ¿Un menú desplegable, vertical u horizontal?
  Elige, además, animaciones donde el texto cambie de color al pasar el cursor por encima o se subrayen los elementos. Esto lo podrás editar en «puntero».
• Colores y espaciado.
  En la pestaña «estilo» podrás elegir el tipo de tipografía, así como su tamaño que podrás configurar de forma diferente dependiendo del dispositivo.
  Con respecto al color, podrás definir el color de los elementos del menú. También puedes personalizar el espaciado. El ancho del puntero, el espaciado entre letras, la altura de línea, etc.
• Menos es más.
  Cuando crees tu menú debes tener en cuenta esta regla y es que no conviene que tu menú sea demasiado extenso.
  Esto en las pantallas más pequeñas como las del móvil creará no solo confusión, sino rechazo. Recuerda que quienes acceden a tu web quieren encontrarse con algo sencillo.
  Así que, elimina aquellos menús que no te hacen falta y crea desplegables siempre y cuando lo creas conveniente.

Además de todo esto, con el widget del menú de navegación tendrás varias opciones para configurar tu menú adaptable para los móviles.

Fíjate en la pestaña de «diseño» en la que ya has estado. Podrás conseguir que la web se adapte a las dimensiones de la pantalla o que el menú aparezca a un lado o en el centro con el tamaño correcto.

En todo momento, podrás acceder a una vista previa para asegurarte que antes de confirmar los cambios estos se ven bien.

También, podrás desplegar el menú en un select, lo que te permitirá que cuando la pantalla en la que se navegue por tu web sea pequeña (un móvil) el menú esté oculto y solo haya una pestaña muy cómoda en la que se puede hacer clic en el elemento del menú al que se desee acceder.

Creación de la cabecera : Header

¿Como hacer una cabecera atractiva y responsive? Para esto necesitas el plugin «Header Footer Elementor» que te servirá, también, para el próximo apartado.

Una vez lo tengas instalado tienes que dirigirte a «apariencia» y hacer clic en «header footer builder». Ahí le darás a «agregar nuevo» y tendrás que seleccionar «header» que es «cabecera».

Como te vas a dar cuenta, tienes muchas opciones a tu disposición y es que Elemento te permite seleccionar diferentes estilos de plantillas para la cabecera, añadir el logo de tu marca, un menú para que tus seguidores puedan navegar…

Pero, ¿qué es lo que deberías tener en cuenta para que esta cabecera funcione bien en tu página web?

• No te olvides del logotipo.
  Es una señal distintiva de tu negocio y aquello en lo que primero se fijarán quienes accedan a tu web. Puedes ponerlo en el medio, a la izquierda o la derecha.
  Todo dependerá del diseño que hayas elegido. Lo importante es que destaque.
  Así que cuidado con elegir alguna imagen o escribir un texto demasiado extenso que le reste protagonismo.
• Recuerda el menú adaptable.
  ¿Te acuerdas cuando hablamos del menú adaptable? Es esencial que los usuarios puedan navegar sin problemas por él y que este se adapte a cualquier tipo de pantalla.
  Optar por un menú doble suele ser una opción excelente.
• ¿Te falta el buscador?
  Cuántas veces has entrado en una web y has querido buscar algo en específico pero no lo has podido encontrar. Pues bien, para eso está el buscador.
  Selecciónalo entre las opciones para crear la cabecera que te da Elementor y sitúalo en un lugar estratégico.
  Puede ser arriba del todo a la izquierda del logotipo o el algún otro lugar que quede bien.
• Pon las redes sociales.
  En la cabecera o header de tu página web responsive también deben estar presentes las redes sociales.
  ¿Tienes Facebook? ¿Quizás Twitter o Instagram? Ponlas fácilmente con Elementor para que tus usuarios puedan seguirte en ellas.

Además de todo esto, si tu marca está destinada para que sea de interés para otros países, no te olvides de incluir en la cabecera un selector de idioma.

Para esto tendrás que instalar el plugin Language Switcher for Elementor.

Después, cuando estés en el editor de Elementor creando tu cabecera podrás utilizar este selector de idioma y configurarlo.

Resulta más atractivo visualmente si en cada idioma aparece la bandera del país.

Creación de pie de página : Footer

El pie de página es una de las partes de las páginas webs que solemos pasar por alto.

Para que no se te olvide, aquí le dedicamos un apartado para que puedas crear tu web responsive con Elementor y que esta quede perfecta. Para ello, ¿cómo puedes crear un footer atractivo?

Bien, para conseguir ya deberías haber instalado el plugin de Elementor «Header Footer Elementor».

Lo podrás hacer, como ya sabes, en el apartado de plugins de tu página web. Una vez lo tengas activado, ya vas a poder diseñar sin problemas el pie de página de tu sitio web.

¿Quieres saber cómo?

• Dirígete a «apariencia» donde tendrás que hacer clic en «header footer builder».
• Ahora crea un nuevo elemento y ponle un nombre, por ejemplo, «footer».
• Indica que lo que quieres es crear un footer, no elijas la opción de header.
• Selecciona la ubicación donde quieres que aparezca el pie de página. Por ejemplo, en todas las páginas, solo la principal, entre otras opciones.

Ya tienes la base creada para empezar a trabajar el footer con Elementor. Ahora, debes dirigirte a Elementor desde donde podrás hacer toda la creación de diseño sin problemas.

Los elementos te aparecerán a la izquierda y solo tendrás que arrastrarlos para situarlos donde desees.

Fácil, ¿verdad? Añade imágenes, texto y demás. ¡Recuerda la vista previa antes de darle a publicar!

Diseño por bloques

El diseño por bloques ha sido una de las mejoras que más agradecerás. Gracias a esta actualización, diseñar una página nunca te habrá resultado tan fácil.

Las opciones de personalización de una plantilla y de creación de contenido llamativo y original ¡son fantásticas! Pero, veamos esto con mayor profundidad.

La principal ventaja del diseño por bloques es que tienes plantillas prediseñadas. En el momento en el que quieras crear una página nueva tendrás la opción de elegir entre algunos themes prediseñados. Por ejemplo, si es una página de blog, portfolio, página de servicios, etc.

Todo esto te aparecerá a la izquierda. Para acceder a estas opciones tienes que acceder a la biblioteca de Elementos y seleccionar «bloques».

¿Qué beneficios tiene esto? Las páginas son atractivas visualmente y tú solo tendrás que modificar las imágenes y el texto. Esto te permite crear y diseñar páginas de una forma muy sencilla.

Así te será más fácil crear tu web responsive desde cero porque ¡no perderás tanto tiempo!

Cuando estés dentro de una página creada de esta forma, podrás añadir más bloques de texto, de tablas o de imágenes tan solo arrastrando los elementos que necesitas de la izquierda a la derecha.

En muchos bloques aparecerá el signo + para que agregues imágenes o vídeos. Con esto, podrás cambiar la posición de cada bloque sin problemas o eliminarlos. ¡Todo muy intuitivo!

Te aconsejamos que no abuses de todas las características que te ofrece el diseño por bloques.

Existen muchas opciones y querer utilizarlas todas puede tener un efecto contraproducente. Por esta razón, recuerda la regla que siempre te recomendamos sobre «menos es más».

Apuesta por lo sencillo y la claridad y tendrás una excelente página web responsive.

Themes para Elementor

Si tu página web carga lento, quizás esto tiene que ver con el theme. Elegirlo mal puede hacer que tu página web pierda su posicionamiento y que el tráfico sea mucho menor.

Por esta razón, queremos aconsejarte cuáles son los themes con los que puedes empezar a crear tu página web responsive desde cero. Aquí te dejamos algunas opciones:

• Generate Press.
  Es uno de los themes más socorridos porque es SEO friendly, muy ligero.
  Como no podría ser de otra manera responsive y te permite modificar el menú que hayas creado de una forma muy sencilla y sin problemas.
• Hello Elementor.
  Si buscas un diseño minimalista, sin duda, este es tu theme.
  Es muy ligero y sin CSS, por lo que es ideal si vas a hacer una web responsive desde cero.
  La velocidad de tu sitio web mejorará con crecer.

Estas son dos elecciones que puedes hacer para tu theme, aunque existen algunas más. Sin embargo, para empezar creemos que estas opciones son suficientes.

Te garantizamos que tendrás no solo un diseño elegante y visualmente atractivo, sino responsive y que no afectará a la velocidad de carga de tu sitio web.

Visual Composer

Ahora que ya conoces algunas formas de empezar a diseñar tu página web responsive con Elementor, vamos con Visual Composer.

Este también es un plugin de WordPress que, en el momento en el que salió, supuso toda una revolución. Pero esto no es todo. Además de conseguir que tu web sea responsive, el resultado será espectacular. Tus usuarios estarán encantados.

Para instalarlo, de nuevo, accede a la sección de «plugins» de WordPress.

Lo podrás encontrar fácilmente si tecleas en el buscador «visual composer website builder». ¿Ya lo tienes? Fantástico. Pues es el momento de que empieces a trabajar con él.

Pero, antes, queremos que conozcas un poco más de este plugin y es que funciona con cualquier theme de WordPress, no se requieren habilidades de codificación y tiene unas opciones de diseño infinitas. Además, es un aliado para crear una web responsive de cero. ¡Vamos a ello!

Menú adaptable

En Visual Composer te vas a encontrar con varios elementos con respecto al menú.

Pero, al igual que hicimos con Elementor, debes tener el menú creado previamente antes de utilizar Visual Composer. Ya sabes cómo hacerlo. ¿Lo tienes? Entonces, continuamos.

Ahora, debes ir a Visual Composer y seleccionar «headers». Tendrás que crear un nuevo header introduciendo un nombre, por ejemplo, «custom header».

Después de esto, descubrirás un montón de opciones. Para facilitarte las cosas, teclea en el buscador «menu».

Aparecerán 4 opciones: basic menu, sandwich menu, sidebar menu y two menu header.

• Selecciona el menú que quieras probar.
  En la parte izquierda te aparecerán diferentes opciones. La primera es que deberás seleccionar tu menú, el que creaste antes de trabajar con Visual Composer.
• Accederás a varias opciones de diseño.
  El estilo del menú, si quieres que los elementos aparezcan centrados o justificados (derecha-izquierda).
• Podrás seleccionar el color que quieres que tenga tu menú, sin olvidarnos del tamaño.

Como te darás cuenta, Visual Composer es muy intuitivo y te brinda todo lo que necesitas para que puedas crear tu menú de una forma sencilla.

En pocos pasos, ya podrás publicar tu menú y editarlo cuando lo creas necesario. ¿Continuamos?

Header

En Visual Composer también podrás crear cabeceras que sean llamativas y que le ayuden a tu página web a destacar.

Para eso, tienes que acceder, simplemente, a Visual Composer y seleccionar la opción «header». Tendrás que crear uno nuevo y ponerle un nombre para empezar a trabajar con él.

Para que sea atractiva ten en cuenta los siguientes aspectos:

• Elige una imagen de cabecera que te represente.
  Además del nombre y el logotipo, la imagen es lo más importante.
  De hecho, funcionan muy bien las imágenes personalizadas, es decir, en las que aparezcas tú o alguna parte de tu empresa.
• Añade efectos atractivos.
  Puedes elegir el parallax que le proporcionará a tu cabecera una sensación de profundidad.
  También, puedes hacer que la imagen sea dinámica y en ella aparezcan información interesante para los usuarios.
• El menú debe estar claro.
  El menú es indispensable que esté en la cabecera y debe ser claro y visible.
  De esta forma, los usuarios no tendrán que buscarlo ni intuir qué deben hacer para que les aparezca.
  Pues, esto puede hacer que se vayan de tu web.
• Aprovecha y pon una call to action.
  Ya que la cabecera es la parte más visible de tu página web, ¿por qué no aprovechas y pones una llamada a la acción?
  Así, llamarás la atención de los usuarios que entren en tu página y les invitarás a que se queden.

Estos tips te pueden ayudar a crear una web responsive con una cabecera atractiva gracias a visual composer.

Como puedes ver, tan solo debes tener estos aspectos en cuenta y aprovechar todas las opciones que visual composer te ofrece ¡que no son pocas!

Footer

¿Recuerdas la importancia del footer? Pues bien, en Visual Composer también lo puedes diseñar a tu gusto para crear tu web responsive desde cero.

Pero, ¿dónde está la opción del footer? ¿Qué tan diferente es a Elementor? Aquí tienes las respuestas:

• Accede a Visual Composer y selecciona la opción que pone «footers».
• Crea un nuevo footer y ponle un nombre.
• Arrastra los elementos que quieras que aparezcan en tu footer. Aparecerán en la parte izquierda.
• Haz clic en Visual Composer Hub para seleccionar si quieres un footer básico, que cubra todo el ancho de tu página web, etc.

Un aspecto importante es que podrás seleccionar, también, si quieres que el footer esté visible en todas las páginas de tu web o solo algunas con el fin de mejorar la experiencia de usuario.

Para acceder a esta opción tendrás que hacer clic en «Visual Composer» y seleccionar entre las pestañas de arriba «headers and footers».

Te aparecerán 3 opciones: utilizar un tema predeterminado, aplicar el footer en todo tu sitio web o crear uno diferente para cada página. ¡Tú decides!

Diseño por bloques

Vamos a por el diseño por bloques. En Visual Composer es muy intuitivo. Cuando te encuentres escribiendo una página o una entrada, te aparecerá en la parte superior.

Aunque, debes configurar esto previamente. Veamos cómo hacerlo.

En cuando Visual Composer esté activado solo tendrás que ir a «ajustes», seleccionar «maquetador visual» y configurar las diferentes opciones.

Por ejemplo, que aparezca en páginas, entradas o en las dos. Ahora, puedes ir a crear una entrada nueva o página. Aparecerá un «backend editor» y «frontend editor».

• Backend editor: te aparecerá la opción de añadir un nuevo elemento, un bloque de texto o una plantilla predeterminada. ¿Qué te resultará más fácil?
• Frontend editor: esto te permitirá editar la landing page de tu web. De esta manera, podrás realizar modificaciones y ver cómo funcionan en tiempo real.

En ambos casos, tendrás acceso a un sinfín de funcionalidades. Filas, bloques de texto, mensajes en cajas, imágenes, galerías de imágenes, sidebars con widgets, reproductor de vídeo, encabezados con Google Fonts.

No sabrás qué elegir entre tantas opciones. Pero, sin duda, lo mejor es lo fácil que resulta trabajar con Visual Composer. ¡Sentirás que no tienes límites!

Como has podido ver, es muy sencillo trabajar tanto con Elementor como con Visual Composer.

Estos 2 plugins de WordPress te lo ponen muy fácil para que puedas diseñar tu web responsive con una calidad excepcional.

¿Qué te recomendamos? Que pruebes ambos. Así, sabrás qué plugin te gusta más y con cuál te sientes más cómodo.

Themes para Visual Composer

¿Qué sería de tu web responsive si no eligieses los themes adecuados?

No todos se adaptan con facilidad a todas las pantallas, por eso, debes escogerlos muy bien.

Si no sabes cuáles son aquellos con los que puedes trabajar en el momento de crear tu sitio web, aquí te dejamos algunas de las mejores opciones de visual composer.

¡Haz que tu página web destaque!

• XTheme.
  Es uno de los mejores themes para muchas personas y no nos extraña. Es muy versátil, sencillo y minimalista.
  Además, es compatible con Woocommerce, por lo que si tienes una tienda online ¡no dudes en elegirlo!
• The7.
  Flexible, multiusos y te ofrece hasta 800 opciones para que puedas crear tu página web responsive desde cero tal y como la habías imaginado.
  Sus posibilidades son infinitas.
• Thegem.
  Este es otro theme multiusos que te ofrece hasta 100 plantillas diferentes.
  Además, te ofrece tutoriales para que puedas modificar y trabajar con tu plantilla hasta que logres el efecto deseado.
  Si usas WPML podrás traducir este theme a otros idiomas como francés, alemán o ruso.
• Soledad.
  Este es otro theme que tiene unos diseños increíbles.
  Tiene una gran opción de plantillas para que elijas la que mejor se adapte a ti. ¿Lo mejor? Es compatible con Woocommerce e, incluso, tiene plantillas para la tienda online.

Ahora que ya sabes cómo crear una web responsive desde cero y algunos aspectos concretos para que el resultado sea el mejor, ¿a qué esperas para ponerte manos a la obra?

Tener una web responsive es fundamental para que tu sitio pueda crecer exponencialmente.

Puntos de ruptura : Dimensiones, tamaños, dispositivos

Las dimensiones del dispositivo, también conocidas como resolución, se miden en píxeles por pulgada.

En dispositivos con mayor resolución en pantallas más pequeñas, cada píxel contiene más píxeles, lo que ha llevado al surgimiento de pantallas Retina y dispositivos con mayores dimensiones.

Sin embargo, las dimensiones reales del dispositivo están determinadas por la densidad de píxeles reales, conocida como «tamaño de ventana gráfica» o «ancho del dispositivo».

Los estilos CSS de los sitios web responsivos se ajustan según los tamaños de ventana gráfica de los dispositivos.

A continuación, se presenta una lista comparativa detallada del tamaño de ventana gráfica para dispositivos, las dimensiones de los teléfonos, los tamaños de pantalla y la resolución de los dispositivos

iPhone

• Pequeño: 320 x 480 px (ejemplos: iPhone 3, 4, 5)
• Mediano: 360 x 640 px (ejemplos: iPhone 6, 7, 8)
• Grande: 411 x 823 px (ejemplos: iPhone X, XS, 11)
• Plus: 412 x 896 px (ejemplos: iPhone 6 Plus, 7 Plus, 8 Plus)
• Max: 414 x 896 px (ejemplos: iPhone XS Max, 11 Pro Max)

Android

• Pequeño: 320 x 480 px (modelos de gama baja)
• Mediano: 360 x 568 px (ejemplos: Moto G, Samsung Galaxy J5)
• Grande: 480 x 800 px (ejemplos: Moto X, Samsung Galaxy A5)
• Full HD: 1080 x 1920 px (ejemplos: OnePlus 3, Samsung Galaxy S8)

Tabletas

• Pequeña: 768 x 1024 px (ejemplos: iPad Mini)
• Mediana: 800 x 1280 px (ejemplos: Samsung Galaxy Tab A, Lenovo Yoga Tab 3)
• Grande: 1536 x 2048 px (ejemplos: iPad Pro, Samsung Galaxy Tab S6)

Dispositivos de escritorio

• Monitores Full HD: 1920 x 1080 px (resolución más común)
• Monitores 2K: 2560 x 1440 px
• Monitores 4K: 3840 x 2160 px
• Monitores Retina: Varían según el tamaño y modelo (ejemplos: iMac, MacBook Pro)

Consideraciones adicionales:

• Orientación.
  Las resoluciones se presentan en formato ancho x alto (por ejemplo, 1920 x 1080 px). La orientación (horizontal o vertical) puede variar según el dispositivo.
• Densidad de píxeles.
  La densidad de píxeles (ppi) indica cuántos píxeles se muestran por pulgada. Un mayor ppi implica mayor nitidez en la imagen.
• Evolución constante.
  Nuevas resoluciones y tamaños de pantalla emergen constantemente. Es importante mantenerse actualizado para ofrecer experiencias óptimas en dispositivos emergentes.

FUENTES

• SEO1clic
• Vont
• Market Motive
• Elementor
• Visual Composer
• DotCominfoway
• Verveuk
• Digital guider