¿Son los temas adaptables de WordPress para empresas la elección correcta?

temas de wordpress adaptables para empresas

Desde hace unos años, cuando Google anunció que la compatibilidad con dispositivos móviles es un factor de clasificación, el diseño web móvil o receptivo ya no es una ocurrencia tardía para los sitios web de pequeñas y medianas empresas.

Los dispositivos móviles representan hoy una proporción significativa del tráfico web (53% en 2019).

Las empresas que ofrecen una mala experiencia a los usuarios de dispositivos móviles corren el riesgo de perder clientes e ingresos. Hay varias formas de proporcionar una buena experiencia móvil, pero diseño web adaptable es la mejor opción para las pymes que utilizan WordPress.

Este tipo de diseño es less costoso, ofrece una experiencia unificada y una marca coherente en todos los dispositivos, y es mejor para el SEO: el diseño móvil primero es la estrategia de optimización móvil preferida de Google. (Incluso sus rastreadores miran un sitio desde un dispositivo móvil).

1. ¿Qué es el diseño adaptable y cómo afecta a los temas empresariales de WordPress?

Si aún no está familiarizado con el concepto, aquí hay una explicación en pocas palabras: es un diseño que usa consultas de medios CSS y un diseño de cuadrícula proporcional para alterar la forma en que aparecen las páginas según el tamaño del dispositivo.

Por ejemplo, los elementos que abarcan una página horizontalmente en un navegador de escritorio se apilarán verticalmente en un navegador de teléfono inteligente. Las imágenes y el tipo se redimensionan para reflejar el tamaño de la pantalla del dispositivo.

En el corazón del diseño receptivo se encuentran las consultas de medios CSS.

Las hojas de estilo CSS se utilizan para controlar el aspecto de una página web: los colores que utiliza, el diseño de la página, su tipografía, etc. Las consultas de medios permiten que un diseñador aplique selectivamente reglas CSS solo cuando se cumple una determinada condición. (es decir, si el tamaño de una pantalla parece la de un móvil, aplique diseños que sean apropiados para teléfonos móviles, pero si es más grande, aplique diseños para pantallas más grandes ...)

Con suerte, puede ver lo útil que es eso para crear diferentes diseños para diferentes diseños de pantalla. Las consultas de medios permiten a un desarrollador decir, por ejemplo, si la ventana del navegador web tiene un ancho particular, se debe aplicar un conjunto específico de reglas.

Una consulta de medios típica se ve así:

.my contenedor {
anchura: 800px;
}
@media (ancho máximo: 600px) {
.my_container {
anchura: 500px;
}
}

En el ejemplo anterior, el ancho predeterminado de la clase .my_container se establece en 800px.

Obviamente, no queremos que sea tan ancho en un dispositivo más estrecho, por lo que usamos una consulta de medios.

La consulta de medios aquí especifica una condición: si el ancho horizontal del navegador es 600px o less, el ancho de .my_container debe ser de 500 px. Si se activa porque la condición es verdadera, las reglas de la consulta de medios tienen prioridad sobre la regla "predeterminada".

El diseño receptivo para temas comerciales aprovecha estas características de CSS para alterar la presentación de las páginas web según el tamaño de la pantalla del dispositivo, el tamaño de la ventana del navegador, la orientación del dispositivo y muchos otros factores.

2. Marcos de diseño receptivo

Unless ya está familiarizado con CSS, e incluso si lo está, es posible que no le guste la idea de escribir consultas de medios para todos los aspectos de su tema empresarial de WordPress receptivo, que es donde entran en juego los marcos de diseño.

Un marco de diseño receptivo se encarga de gran parte de la complejidad de crear un sitio que se adapte a pantallas de diferentes tamaños.

El marco de diseño más popular es Bootstrap - con versiones a partir de la v3.0 que son completamente móviles primero. Bootstrap incluye una gran cantidad de características que no nos conciernen aquí, pero la clave para la implementación de la capacidad de respuesta de Bootstrap es su cuadrícula.

Lecturas recomendadas: Cómo convertir un tema PSD a WordPress usando Bootstrap en 5 pasos: un tutorial y Elementor vs Divi: cuál es el que más vale la pena el dinero?

En lugar de pedirle que escriba sus propias consultas de medios, Bootstrap implementa un sistema que divide una página HTML en una cuadrícula de filas y columnas. En lugar de escribir consultas de medios, los usuarios adjuntan clases al HTML de su tema de WordPress para dividir la página de acuerdo con la cuadrícula.

Para tomar un ejemplo trivial, piense en una página web de dos columnas.

En pantallas grandes, queremos que las columnas se muestren una al lado de la otra. En pantallas pequeñas, queremos que se apilen una encima de la otra.

diseño empresarial receptivo en dos columnas

 

Nuestro HTML se vería así:

  Esta es la columna uno
</div>

Esta es la columna dos
</div>
</div>

Con Bootstrap Grid CSS incluido en la página, este HTML crearía el diseño que estamos buscando.

Cuando la página se carga en una ventana más pequeña que la especificada para las consultas de medios integradas de Bootstrap para columnas medianas, se apilarán una encima de la otra en lugar de abarcar la página.

Puede ver ejemplos más complejos de cómo funciona esto en el Documentación de Bootstrap.

Bootstrap no es el único marco que proporciona una cuadrícula de este tipo; de hecho, hay docenas, que van desde marcos de diseño web integrales como Bootstrap y Base, a marcos de cuadrícula livianos como Simple Grid que no contienen nada más que la cuadrícula.

Un enfoque alternativo se ha vuelto cada vez más popular en los últimos años, uno que contiene todos los cambios de marcado en CSS (o SASS) archivos, en lugar de ensuciar las páginas HTML con marcas no semánticas.

SASS sistemas de cuadrícula de diseño receptivo como Susy y Bourbon puro aprovechar el poder de SASS para crear marcos que mantengan el código de diseño de la página donde se supone que debe estar, en los archivos CSS, lo que permite un HTML más limpio.

Qué desarrolladores eligen es una cuestión de gusto y experiencia, pero nosotros personalmente preferimos SASS-basados ​​en sistemas de cuadrícula que me permiten escribir páginas web semánticas que no están llenas de nombres de clases no semánticos y anidación excesiva de div.

3. Marcos temáticos de diseño receptivo

Los marcos como Bootstrap y Foundation son excelentes para los diseñadores web, pero no ayudan mucho a los desarrolladores de WordPress que buscan una ventaja al crear nuevas plantillas.

Afortunadamente, hay muchos marcos temáticos de WordPress receptivos que brindan una base prediseñada.

1. Génesis

genesis framework para temas empresariales de wordpress

Genesis es un framework temático muy popular de StudioPress (que hemos revisado completamente aquí). Aunque está dirigido más a desarrolladores experimentados de WordPress que a principiantes, no es demasiado difícil familiarizarse con él si tiene un poco de conocimiento de PHP y CSS.

Genesis es un diseño principal a partir del cual es posible crear cualquier número de temas secundarios. Si prefiere comprar un tema infantil estándar y personalizarlo, StudioPress ofrece muchos temas secundarios diferentes adecuados para todo tipo de sitios.

Además de este tema, a menudo presentamos temas de WordPress altamente calificados para que pueda tomar una buena decisión si comprar o no.

2. El constructor de Themify

tema de negocios simple de themify

Si no es un genio de PHP y CSS, es posible que desee considerar un complemento de creación de plantillas como Themify.

En lugar de hacer que se arremangue y se sumerja en el código, Themify Builder ofrece una interfaz intuitiva de arrastrar y soltar para crear temas de WordPress totalmente receptivos. Con Themify puedes elegir entre una variedad de temas prediseñados o diseñar el tuyo propio desde cero.

Themify abstrae todos los detalles de implementación que subyacen al diseño web para diferentes tamaños de pantalla, lo que facilita la puesta en marcha de su sitio web rápidamente.

3. Componentes

generador de temas de componentes

Components fue una gran solución para crear temas de WordPress adaptables y adaptables de Automattic, la empresa detrás de WordPress.com.

Para usar Componentes, simplemente elija un diseño de la lista (blog clásico, sitio de negocios, portafolio, entre otros) y el sitio de Componentes escupirá un SASS-Plantilla basada en diseños móviles primero y menús de escritorio y móviles.

Lamentablemente, se ha descontinuado Components.

4. divi

Divi, que también mencionaremos a continuación como uno de los mejores temas de WordPress para usar en los negocios, comenzó como un tema.

Eventualmente, evolucionó para convertirse en un tema, un generador de páginas de arrastrar y soltar y ahora con sus últimos lanzamientos, también un generador de temas completo. En este punto, Divi es un marco temático completo de WordPress que se puede usar para crear cualquier tipo de tema que necesite, con su amplia gama de herramientas.

4. Temas adaptables de WordPress para empresas

Si prefiere simplemente comprar algo listo para su negocio, tiene miles para elegir, algunos mejores que otros. La capacidad de respuesta se considera una característica "imprescindible" en el mercado de temas de WordPress, y casi todos los desarrolladores afirmarán que su producto responde. Sin embargo, esta función puede ser complicada e incluso los desarrolladores experimentados pueden tener problemas con su implementación adecuada.

Antes de continuar, es posible que desee consultar nuestro resumen completo de Temas de WordPress para sitios empresariales y corporativos.

Dicho esto, si elige uno de estos diseños populares, todos los cuales se pueden personalizar para satisfacer las necesidades de sus negocios, no se equivocará mucho.

divi

divi elegant themes

Divi es un tema de WordPress receptivo muy popular para empresas (o cualquier otra cosa en realidad), un creador de páginas (Divi Builder) y también un creador de temas.

El producto proviene de Elegant Themes - una empresa establecida que ha creado muchos de mis productos favoritos de WordPress. Divi es un tema "con pilas incluidas"; viene con todas las funciones que pueda desear.

Entre los aspectos más destacados se encuentran los Divi builder, que permite a los usuarios crear diseños sin codificación, dieciocho diseños prefabricados para elegir e implementados de manera inteligente sensibilidad eso significa que su sitio se verá genial ya sea que lo vea en una PC de escritorio con un monitor enorme o en un teléfono inteligente con pantalla pequeña.

Prueba Divi ahora y obtén un 10% de descuento hasta Septiembre 2021

Recomendar lectura: si está dispuesto a usar Divi echa un vistazo CollectiveRay's Revisión Divi completa.

Avada

Tema empresarial de Avada WordPress

Avada es otro artículo muy popular.

Avada es una característica rica en funciones como Divi, y se adapta perfectamente a la construcción de sitios comerciales que pueden adaptarse a varios tamaños de pantalla. Al igual que Divi, Avada permite a los usuarios sin habilidades de codificación crear sitios únicos.

El constructor de páginas visuales Avada (Fusion) es un placer de usar, y el producto contiene una gran cantidad de detalles que lo convierten en una excelente opción para los usuarios. less propietario de un sitio de WordPress técnicamente inclinado.

Lectura Recomendada: Una vez más, para los temas principales, hemos creado un excelente revisión del tema de WordPress de Avada para que pueda comprender completamente cómo puede ayudarlo.

Echa un vistazo a Avada ahora

X

tema de respuesta empresarial x wp

X es otro tema de WordPress receptivo para empresas que tiene como objetivo facilitar la puesta en marcha con un diseño hermoso y único que se ve genial en cualquier dispositivo.

Una de las características destacadas de X es su sistema de extensión.

En lugar de implementar funciones dentro del núcleo de la plantilla, X proporciona numerosas extensiones de funciones, incluida una cuadrícula, integración de TypeKit, un control deslizante y complementos de galería. Dividir la funcionalidad en extensiones permite a los usuarios elegir las capacidades que necesitan y evitar cargar su sitio con código superfluo que podría generar problemas de rendimiento y seguridad.

Echa un vistazo a la demostración de X ahora

Otras plantillas para empresas en Themeforest

Si los temas que hemos analizado aquí no le interesan, no se preocupe, hay cientos de Temas adaptables de WordPress (para todo tipo de negocios, organizaciones y en todo tipo de nichos específicos) para elegir en Themeforest.

Al elegir un producto de la selección disponible en Themeforest, asegúrese de prestar mucha atención a las calificaciones de los usuarios, ya que lo ayudarán a separar el trigo de la paja. También debe tener en cuenta qué tan recientemente se actualizó el elemento.

Si no se ha actualizado durante varios meses, debería considerar buscar en otro lugar; Los temas desactualizados pueden causar problemas de compatibilidad y seguridad.

5. ¿Por qué la capacidad de respuesta es la mejor opción para el sitio de su empresa?

La capacidad de respuesta no es la única forma de gestionar el tráfico web móvil.

Las alternativas incluyen sitios móviles dedicados y aplicaciones nativas y PWA (un híbrido entre sitios móviles y aplicaciones). El problema con cada enfoque es que requieren más trabajo que un sitio receptivo.

Si su empresa elige una aplicación móvil o PWA, entonces debe invertir en su diseño, desarrollo, mantenimiento y promoción. El dinero y el tiempo se dividen entre un sitio web y una aplicación, o varias aplicaciones para adaptarse a las plataformas móviles populares.

Sin embargo, este diseño permite a las pymes mantener una base de código y dedicar recursos a crear el mejor sitio web posible. Hay circunstancias en las que las aplicaciones nativas son la mejor opción, pero para la mayoría de las pymes, la capacidad de respuesta es un mejor uso de los recursos.

Imagine que un cliente potencial busca un servicio que ofrece su empresa mientras usa su iPhone. Encuentra lo que quiere y lo marca como favorito para más tarde.

Esa noche abre el marcador en su computadora de escritorio y el sitio se ve terrible porque marcó la versión móvil. Este escenario no es tan malo como si el sitio no tuviera una versión móvil y se viera obligada a lidiar con la versión de escritorio sin modificar en su teléfono; a nadie le gusta pellizcar y desplazarse para encontrar lo que quiere, pero este diseño lo haría. permitir que el mismo sitio web y los mismos enlaces funcionen según lo previsto en ambos dispositivos.

Tener un sitio que responda al dispositivo del usuario también permite a las empresas proporcionar una marca coherente en todos los puntos de contacto.

El sitio tendrá el mismo aspecto, aunque adaptado, y proporcionará la misma navegación, la misma apariencia y la misma experiencia. Las pequeñas empresas con presupuestos limitados a menudo no tienen los recursos para mantener una calidad constante en múltiples versiones de sitios y aplicaciones.

La capacidad de respuesta significa que no tienen que hacerlo.

Así como no se debe ofrecer a los usuarios una experiencia fragmentada, es mejor para el tráfico de búsqueda si existe una ubicación canónica en línea para una empresa. Según Google, las ventajas del diseño receptivo incluyen:

  • Mantener su contenido de escritorio y móvil en una sola URL, que es más fácil para sus usuarios interactuar, compartir y vincular y para que los algoritmos de Google asignen las propiedades de indexación a su contenido.

  • Google puede descubrir su contenido de manera más eficiente, ya que no necesitaríamos rastrear una página con los diferentes agentes de usuario de Googlebot para recuperar e indexar todo el contenido.

Google puede saber si los usuarios tienen una buena experiencia en su sitio. Si no ofrece un sitio optimizado para dispositivos móviles, las tasas de rebote para los usuarios de dispositivos móviles se dispararán. La mayoría de ellos volverán al motor de búsqueda. Google sabe cuándo un usuario regresa inmediatamente a las SERP después de hacer clic en un resultado y usa las tasas de rebote como una señal de clasificación.

Finalmente, para los usuarios de WordPress, la capacidad de respuesta es el método más fácil y menos costoso de brindar una buena experiencia a los usuarios de dispositivos móviles. Muchos de los mejores temas premium están diseñados para responder y el costo de adaptar un tema existente para la capacidad de respuesta puede ser significativamente less que el costo de desarrollar una aplicación nativa.

Dadas estas ventajas, para los propietarios de pequeñas y medianas empresas que usan temas de WordPress, el diseño receptivo es, con mucho, la mejor manera de avanzar en un mundo donde el uso de la web móvil solo va a crecer.


Sobre el autor
David Attard
Autor: David AttardPagina Web: https://www.linkedin.com/in/dattard/
David ha estado trabajando en o alrededor de la industria digital / en línea durante los últimos 18 años. Tiene una vasta experiencia en las industrias de software y diseño web utilizando WordPress, Joomla y los nichos que los rodean. Como consultor digital, su enfoque es ayudar a las empresas a obtener una ventaja competitiva utilizando una combinación de su sitio web y plataformas digitales disponibles en la actualidad.

Una cosa más... ¿Sabías que las personas que comparten cosas útiles como esta publicación también se ven IMPRESIONANTES? ;-)
Por favor deja un eficiente Comente con sus pensamientos, luego comparta esto en su (s) grupo (s) de Facebook que lo encontrarán útil y cosechemos los beneficios juntos. ¡Gracias por compartir y ser amable!

Divulgación: Esta página puede contener enlaces a sitios externos para productos que amamos y recomendamos de todo corazón. Si compra productos que le sugerimos, es posible que ganemos una tarifa de referencia. Tales tarifas no influyen en nuestras recomendaciones y no aceptamos pagos por reseñas positivas.

Autor (es) destacado en:  Logotipo de la revista Inc   Logotipo de Sitepoint   Logotipo de CSS Tricks    logotipo de webdesignerdepot   Logotipo de WPMU DEV   y muchos más ...