La web, el activo esencial V: La página de ventas

---

El objetivo último de una web de negocios es vender. Vender nuestro producto o servicio.

Con un proceso de engachement (enganchamiento), a través del contenido de nuestro blog, iremos preparando a nuestra audiencia para llevarlos a tomar la decisión de compra.

Pero tanto para nuestros suscriptores y visitantes recurrentes como para las nuevas visitas es esencial conocer a detalle nuestra oferta de servicio o producto.

Quienes vayan a comprar nuestro producto, necesitan no sólo confiar en nosotros sino también estar seguros de que ese producto colmará sus necesidades y expectativas.

En esta quinta entrega de la serie “La Web, el Activo Esencial” veremos la página de ventas.

¿Qué es una página de ventas?

Una página de ventas es una página en tu sitio web que presenta los beneficios y características de tu producto o servicio, con el fin de persuadir a tus visitantes para adquirirlo. Clic para tuitear

Aunque en el mundo de habla hispana se suele llamar “landing page” tanto a una página de conversión de suscriptores como a una página de ventas, en realidad son dos cosas distintas y con distintos fines.

La meta de una página de ventas es convertir visitantes o suscriptores en clientes, a diferencia de la landing page, que busca convertir visitantes en suscriptores.

La página de ventas es una unidad muy importante dentro de la web. Tanto es así, que su diseño puede diferir de la del resto de la web. Porque una página de ventas, para ser exitosa, debe cumplir con una serie de características y su diseño debe estar supeditado a este fin.

¿Qué debe presentar una página de ventas?

Desde el punto de vista de su estructura, una página de ventas deberá incluir ciertas secciones esenciales, que irán marcando un camino con el cual se llevará al visitante desde su actual situación de dilema hasta el punto de tomar acción para resolverlo.

Se trata, de este modo, de empatizar con los dolores del visitante, mostrarles que lo que tú ofreces va a ayudarlo a resolverlos y, finalmente, mostrarle el camino para tomar la acción final de adquirir tu producto servicio.

Vamos a ver cada una de esas secciones por separado. El orden presentado es una propuesta. Puede variar según tu estrategia.

Reconociendo su dolor

Antes de decir a tu audiencia que le vas a resolver su problema, debes primero empatizar con ella.

Todos queremos ser escuchados. Queremos compartir nuestras penas para que sean más llevaderas.

Cuando encuentras a alguien que empatiza contigo a través del reconocimiento de tus penas o dolores, puedes estar seguro de que se creará un fuerte vínculo.

Por eso es necesario, ante todo, reconocer los puntos de dolor (obstáculos o problemas de tus clientes).

Una vez hecho esto, sólo entonces te colocaras como quien puede aliviar o resolver esos dolores.

La sección de dolores de una página de ventas enumera los desafíos, dolores, dilemas, obstáculos, que están evitando que la persona alcance sus objetivos (de negocios o personales). Evidentemente, los dolores que vas a enumerar son los que tu producto es capaz de resolver.

• ¿Creas contenido de calidad, pero tu blog no es visitado por nadie?
• ¿Promocionas tu servicio y aun así sigues sin recibir los ansiados clientes?
• ¿Ves cómo cada día al bañarte el suelo de la ducha se llena de cabellos que no se van a reponer?
• ¿Tus deudas te agobian y no sabes cómo salir de ellas?

Siendo gráfico en la descripción de los dolores de tu audiencia podrás empatizar más con ella.

¿Qué hará por mí?

Una vez reconocidos los dolores de tu audiencia, entonces presentarás los beneficios de tu producto o servicio a tu audiencia. Esos beneficios serán precisamente resolver los problemas reconocidos antes.

Ahora bien, más que enumeración de características, al presentar los beneficios de tu producto o servicio debes apelar a las emociones que desencadenan el hecho de mostrar cómo mejorará la vida de quien lo adquiera.

Es un hecho psicológico que la gente toma decisiones más llevada por las emociones que por la lógica.

De este modo, en vez de describir áridas  características de un producto:

• Diseño páginas webs “responsives”
• Con alta velocidad de carga
• En ambiente Génesis “premium”
• Blog desde las que puede llevar a cabo estrategias de marketing de contenidos
• Posibilidad de e-mail marketing y nurturing de leads.

Es mucho mejor:

• Diseñamos webs que conectarán con tu cliente ideal, a través de contenidos que mejorarán sus vidas y negocios, llevando a un crecimiento de tu audiencia y ventas.

Apelar a las emociones es clave para que nuestra audiencia se vea transportada a vivir en un mundo mejorado gracias a nuestro producto o servicio.

¿Cómo lo harás?

En esta sección explicarás como vas a lograr cumplir esas expectativas que has afirmado en la sección anterior.

Porque puedes ofrecer muchas cosas, pero para darle credibilidad a lo que dices, deberás ser claro en cuanto al método, estrategia, componentes, ingredientes, etc., del que se valdrá tu producto o servicio para llevar a cabo ese prometido mejoramiento de la vida o negocios de tus clientes.

Aquí se explica cómo tu servicio funciona. Y si puedes presentar datos, estadísticas, porcentajes de resultados, métricas, mucho mejor.

Aquí es el lugar donde puedes enumerar las características de tu producto o servicio, pero siempre diciendo como ellas pueden mejorar la vida y negocios de las personas.

Si dices, por ejemplo, que diseñas webs responsivas, deberás decir que se adaptan al tamaño de cualquier dispositivo y, en un mundo con el 75% de ingresos a internet desde dispositivos móviles, verás un aumento en las visitas a tu sitio.

Agrega testimonios

Los testimonios son una poderosa prueba del valor de tu producto o servicio.

Como consumidores, estamos mucho más dispuestos a adquirir un producto que ya ha sido probado y recomendado por otros.

Si tu producto ya ha sido probado antes, pídeles autorización a esos clientes para publicar su foto y links a sus redes sociales. Esto le dará veracidad al testimonio.

Los testimonios harán aparecer tu producto como altamente confiable a los ojos de tu audiencia.

Algunas personas te darán bienintencionados testimonios como “No lo he probado, pero se ve muy prometedor”. No son los testimonios que necesitas.

Tú necesitas testimonios de gente que cuente cómo tu producto les ha cambiado, para mejor, sus mundos.

Es buena idea guiar a la persona en su testimonio pidiéndole una comparación de su vida o negocio antes y después de usar tu servicio o producto.

¿Debo incluir precios?

No es algo obligatorio, todo depende de tu estrategia.

Sin embargo, ten en cuenta que una persona estará más dispuesta a comprar cuanta más información tenga.

Ya hemos hablado de los beneficios de paquetizar tus productos. Si ofreces tus servicios como “paquetes”, lo usual es que publiques los precios.

Si ofreces varios paquetes de servicios, destaca el que sea el mejor valor para tu cliente.

Alienta a tomar acción ya

Una vez que tu página de ventas ha enganchado con tu visitante y has puesto tu producto o servicio en su mente como el que va a resolver sus dolores, es crucial que le indiques el próximo paso a seguir.

Eso se cristaliza a través del llamado CTA (call-to-action) que suele ser un botón, pero puede ser un calendario para agendar citas, por ejemplo.

El CTA está diseñado de tal modo que destaque sobre el resto del diseño de la página de ventas, y es este CTA el que llevará a la persona a adquirir tu producto.

Es buena idea que el texto del botón sea un verbo o frase positiva como “Quiero mejorar mis ventas” o “Quiero ser próspero” o “Deseo más cabello”.

Puedes utilizar también el “principio de escasez”. Se trata de que hagas ver a tu audiencia que lo que estás ofreciendo es en cantidades limitadas o por tiempo limitado.

Algunos colocan hasta un reloj de cuenta regresiva. Nosotros no recomendamos esto para hacerle creer a la gente que después de esa fecha ya no podrán beneficiarse, a menos que realmente exista una fecha tope. Siempre sé honesto respecto a tu oferta.

Ejemplo de Página de Ventas

Stop Fighting Food es una masterclass para regular desórdenes alimenticios no patológicos.

Aquí podemos ver todas las secciones descritas arriba:

• Empatiza con el dolor de la audiencia
• Afirma que puede resolver el problema
• Muestra claramente cómo lo va a resolver
• Muestra testimonios en video, eso es muy poderoso
• Un enorme CTA, en forma de banner de color rojo.

Los elementos de diseño están pensados para llevar al visitante hacia la página de compra. Una vez allí, se le muestran más razones por las cuales debe adquirir la masterclass, como la identidad y credenciales de quienes dictan la masterclass.

Otros puntos a resaltar que nos gustan especialmente:

• Los audaces titulares y descripciones, que hablan directamente a la audiencia en su propio lenguaje, haciendo el contenido más ajustado al target.
• El esquema de color con acentos en rojo que dirige la atención hacia la información clave.
• Los puntos para sumarizar los temores (dolores) del lector y empatizar con sus luchas.
• La propuesta de la página de venta propone una única y simple solución a todos esos dolores.

Corolario

La página de ventas de una parte de la web altamente especializada y debe ser, al igual que la landing page, cuidadosamente pensada tomando en cuenta el carácter de la oferta, la marca de la empresa quien está ofreciendo el producto y la audiencia a quien se destina.

Evidentemente, las opciones de diseño deben estar configuradas para alcanzar el fin de vender. Pero si no apelamos a las emociones y nos centramos en lo racional y no dejamos bien claro cómo nuestra oferta puede beneficiar al nuestra audiencia, estaremos reduciendo las oportunidades de negocios.

---

En este artículo vamos a ver qué es un blog y de qué manera el crear contenido a través de él es una ventaja que puede llevar tu proyecto económico online a otro nivel.

La importancia y relevancia del blog es tal, que las “páginas nicho” son una demostración de que tan sólo el blog puede ser una fuente generadora de ingresos por sí misma.

De igual manera, el blog puede ser “el aliado” imprescindible para nuestra empresa y el verdadero punto focal de las capacidades generadoras de ingresos de nuestra web.

Sabemos de emprendedores en varias industrias que nunca han pagado publicidad y llevan unos negocios exitosos gracias al contenido que generan por sus blogs.

Vamos a ver cómo esto es posible.

Qué es un Blog y sitio web ¿Alguna diferencia?

Es frecuente que los términos “página web” o “web” y “blog” se usen de manera intercambiable. En realidad, son términos que denotan cosas diferentes.

Una “página web” o “web” o “website” es un documento de hipertexto (que posee vínculos o links) que muestra su contenido (texto, imágenes, videos) a través de un navegador (como Chrome) y que está alojado en un sector de un servidor al que se accede escribiendo un URL, típicamente un “dominio”.

Un blog es eso mismo, pero la diferencia fundamental es que mientras una web suele ser un sitio estático, es decir, que su contenido permanece más o menos igual a través de lapsos más o menos largos, un blog es un sitio web dinámico, donde constantemente se está actualizando el contenido a través de la producción de nuevos artículos o “posts”.

La webs informativas, donde se habla de la empresa, de quiénes están detrás, de los servicios y cómo contactarlas suelen ser webs estáticas. Pero si a esa web estática agregas un blog, lo conviertes en una web dinámica, con contenido en constante renovación.

Y es en un blog donde se produce la magia de una web.

¿Qué ventajas genera un blog para mi empresa?

Un blog es la base de una estrategia de marketing de contenidos.

Con marketing de contenidos queremos decir todas las acciones tácticas y estratégicas que empleamos para atraer visitantes y, entre ellos, potenciales clientes a nuestro sitio.

Existe la falsa asunción de que un blog sólo beneficia a las industrias de marketing, porque eso es lo que más vemos cuando leemos un blog.

En realidad, todas las industrias se beneficiarán de un blog.

Nua Bikes, fabricante catalán de bicicletas de diseño, tienen un potente blog en el que comparten conocimiento acerca del mundo de las bicicletas. Así como casos de estudio de sus propios clientes.

Esta estrategia a través del blog ha resultado para Nua Bikes en un crecimiento de su cartera de clientes, a pesar de que sus productos no son económicos.

Con un blog bien pensado, estructurado y, sobre todo, que llene las expectativas de información de tus clientes ideales, podrás lograr dos cosas fundamentales para tu empresa, sin importar el tamaño de ésta:

• Colocarte cada vez más alto en los resultados de los motores de búsqueda principales
• Construir autoridad en tu particular sector

Mejor posición en resultados de búsqueda

Si mantienes una estrategia de producción de contenidos frecuente, coherente y que vaya dirigida a resolver problemas y dudas de tu audiencia, obtendrás más visitas, recibirás más links entrantes (de otros blog y webs te referenciarán a ti) y tus artículos serán más compartidos.

Todas estas acciones serán medidas por los motores de búsqueda como Google y te calificarán como página web relevante para quienes busquen el contenido que tú ofreces. Mientras mejor seas calificado, más arriba en los resultados de búsqueda aparecerás.

Y está comprobado que el 70% de los usuarios no pasan de la primera página de los resultados.

Por otra parte, mientras más produzcas contenido dinámico (artículos o posts) también más chances tendrás de aparecer más arriba en los resultados.

Cada vez que tu sitio sea “escaneado” por los motores de búsqueda verán nuevo contenido y aparecerás ante ellos como una web “viva”. Es importante para los motores de búsqueda rendir resultados relevantes y actualizados a sus usuarios. Por eso es que las webs estáticas suelen ocupar los últimos lugares de los resultados.

Autoridad

No importa que tan restringido o especializado sea el sector en el que te muevas. Siempre habrá diferentes aspectos, perspectivas, enfoques y áreas para cubrir en profundidad.

Cuantos más aspectos cubras, más estarás demostrando tu conocimiento en tu particular sector. Esto es, estarás demostrando autoridad.

Serás percibido como una persona que sabe de lo que está hablando y estarás de primero en la mente de tus potenciales clientes a la hora de que ellos tomen la decisión de comprar.

Cuando en una web estática escribes “Somos un grupo de profesionales que sabemos lo que hacemos”… Bueno, es muy probable que tus visitantes piensen “Eso tienes que probarlo”.

Pero si con frecuencia a través de un blog escribes o produces videos, podcasts o cualquier otro medio con el cual demuestras realmente tu conocimiento de la industria en la que te mueves, estarás enviando el mensaje correcto. No tendrás que decir “Yo sé”. Lo estarás demostrando.

El caso de River Pools

River Pools es una empresa de construcción de piscinas (albercas, piletas) de EEUU. Durante la depresión económica de 2008 en los EEUU, millones de personas perdieron sus empleos. La economía se contrajo a niveles sin precedentes desde 1929 y las empresas supervivientes y los consumidores tuvieron que hacer drásticos recortes en sus presupuestos. Obviamente, lo primero en recortar: lujos.

Marcus Sheridan tenía una empresa de instalación de piscinas. Con decenas de miles de personas perdiendo sus hogares, no había mucho ánimo en la industria de hacer piscinas para patios traseros.

Lo que hizo Sheridan fue escribir y escribir y escribir en su blog todo lo relacionado a las piscinas. Todo, hasta lo más mínimo. Sobre lo que nadie escribía sobre las piscinas y su mundo.

Luego de algunos meses –y todavía en plena depresión- Sheridan comenzó a ver una subida en sus ventas.

Al preguntarle a sus nuevos clientes cómo lo habían encontrado, casi todos le decían que habían leído un artículo de su blog que le había despejado las dudas y con el cual Sheridan les pareció la persona adecuada para hacerles su piscina, cuando se decidieran.

Escribiendo artículos en su blog sobre todo lo relacionado al mundo de las piscinas para backyards, Sheridan no sólo consiguió que su web estuviera entre las primeros resultados de búsqueda a nivel mundial, sino que se encontró en una situación de ser considerado líder y referencia en su sector en plena Crisis de 2008. El blog de River Pools llegó a ser una referencia mundial en cuanto a información sobre piscinas domésticas.

River Pools fue de aquella minoría de empresa que no sólo sobrevivió, sino que realmente creció y se posicionó como líder en su sector durante la crisis de 2008. Situación que aún mantiene.

Y todo gracias a su blog.

Crear un artículo o post

Esperamos que en tu mente ya no haya dudas acerca de la importancia de desarrollar un blog en tu web. Ahora veamos cómo hacerlo desde tu instalación WordPress.

Con WordPress, no debes preocuparte con la instalación del blog. De hecho, en un principio, este gestor de contenidos estaba fuertemente orientado a blogs.

El blog ya viene incorporado nativamente con WordPress. Sólo debemos crear el artículo o post y salvarlo.

 Sencillamente accede desde el dashboard y desde la barra lateral izquierda, haz click en “Entradas” y luego “Añadir nueva”.

Más directamente, puedes entrar desde la barra superior en “+ Añadir” y luego “Entrada”.

Entonces aparece la plantilla para “entradas” o “post”. Agregas el título y comienzas a añadir contenido.

Para el contenido de tu artículo, tienes la gran variedad de opciones que te ofrece el editor de Gutenberg de WordPress. Escribimos un artículo dedicado muy completo sobre el Editor de Bloques de Gutenberg y otro sobre cómo puedes extender sus capacidades.

Otras consideraciones

Hay algunas cuestiones fundamentales que debes considera a la hora de crear contenido para tu blog.

Estudia tu audiencia

Lo principal es crear una estrategia. No produzcas por producir.

Cuando inicias un proyecto de negocios, una de las primeras cosas que debes determinar es a quién vas a dirigir tu oferta. Es decir, debes determinar tu cliente ideal.

A ese cliente ideal es al que vas a dirigir tu contenido. Por lo tanto, se hace necesario que estudies a ese cliente y hagas predicciones acerca de cuáles pueden ser sus necesidades de información y cómo puedes satisfacerlas a través de tu blog.

Si tienes éxito en satisfacer sus necesidades de información, puedes estar seguro que volverá a tu web cuando necesite información sobre el tópico. Te harás conocido y te tendrá confianza.

Y, a la hora de comprar,  todos preferimos a quienes conocemos y le tenemos confianza.

Temática

La temática o lo que vas a cubrir con tu contenido tiene que ser relevante y útil para tu audiencia target.

De nada sirve hablar de bicicletas si eres constructor de piscinas. O desviarse a temas políticos y económicos para asentar tu posición al respecto si estás corriendo una empresa de pastelería.

Si, por ejemplo, eres fotógrafo especializado en bebés, produce contenido de la mejor cámara para sacarle fotos a tu bebé, los mejores momentos del día, como tomas fotos del bebé dormido, etc.

Complementa también con “casos de estudio” en los que tus lectores se vean reflejados. Por ejemplo, publica sesiones de fotos que hayas tenido con tus clientes. Obviamente, siempre con el permiso de éstos.

Frecuencia

La frecuencia de producción de contenido va a depender de la profundidad de tu contenido, el carácter de tu audiencia y lo que quieras lograr.

Puedes producir sobre una base semanal, quincenal o mensual.

No produzcas demasiado contenido, porque recuerda que al publicitar demasiado contenido puedes confundir a tu audiencia.

Tampoco dejes pasar mucho tiempo sin producir, porque puede que tu audiencia piense que ya no estás activo y se aleje.

Medio

¿Debo producir mi contenido en forma de artículos, videos, podcasts u otro?

Esto también dependerá de tu audiencia. Y lo que ofrezcas.

Muchas audiencias prefieren  el contenido audiovisual (videos). Otras, el audio, para escuchar mientras conducen o hacen ejercicio. Otros prefieren leer tutoriales paso a paso.

Debes hacer pruebas con distintos medios y medir la respuesta de tu audiencia. Entonces escogerás los que mejores resultados te produzcan.

No olvides que también puedes crear contenido mixto. Por ejemplo, en Presencia Digital hemos producido artículos escritos y complementados con videos.

Publicidad

¿De qué sirve tener tu contenido excelente si tu audiencia no sabe que lo has hecho?

Puedes crear pequeñas campañas de intriga para crear expectativa hacia tu contenido.

Una vez publicado, haz la publicidad pertinente. Hay distintos medios de lograr que tu contenido tenga un mayor alcance:

• Publicítalo por tus redes sociales
• Publicítalo por tus canales de Email Marketing (listas de suscripción)
• Utiliza técnicas como el Guest Posting

Conclusiones

Como diseñadores web siempre aconsejamos a nuestros clientes que incluyan un blog en sus sitios web.

No hacerlo, es dejar a un lado la mayor parte de los beneficios que aporta una web de negocios. Una web estática puede ser una tarjeta de presentación muy bonita y fancy. Pero un web con blog puede ser el pilar central de tu proyecto económico online.

Hemos descubierto que una de las razones por la cuales muchos empresarios no ven la utilidad de una web más que como “una red social más” es porque no comprenden los inmensos beneficios que otorga al proyecto o empresa el contar con una web dinámica, desde la cual se centralicen los esfuerzos del marketing de contenidos que se realiza desde un blog.

Prácticamente, no existe sector de la economía o industria que no pueda obtener grandes beneficios para su desarrollo a través de una estrategia de contenidos estructurada y estratégica desde un blog.

7 Herramientas gráficas para Diseño Web

---

Cuando se trata de diseño web, así como para otras áreas del diseño, el creativo recurre a diversas herramientas que facilitan, magnifican, ahorran tiempo y esfuerzo, además que permiten que se puedan llevar a cabo diseños limitados sólo por la imaginación.

El extraordinario desarrollo de lenguajes de programación y Apps en línea ha hecho posible fantásticas herramientas de diseño que nos motivan a llevar nuestras habilidades de diseño más allá de los límites y nos abren nuevas posibilidades que hasta hace poco no considerábamos siquiera.

Es así que compartimos en este artículo 6 herramientas que nos han resultado muy útiles a la hora de realizar nuestros diseños de sitios web.

Estas herramientas tienen la plusvalía de motivar la exploración y la curiosidad en el diseño, empujando tus límites y llevándote a mejorar tus cualidades de diseño, aunque creas que no las posees. Clic para tuitear

Canva

Canva es la plataforma de diseño gráfico online de mayor crecimiento en los últimos años.

Ha venido a convertirse en el “Photoshop del hombre pobre”, aunque esta definición resulte engañosa.

Y digo «engañosa» porque puede parecer que Canva es un pobre sustituto o un «wanna be» de Photoshop. Nada más lejos de la verdad, ya que en realidad la audiencia de ambas herramientas es distinta.

El excelente Photoshop con décadas de desarrollo se ha convertido en una herramienta tan robusta y completa como compleja, cuya curva de aprendizaje es larga. No es una herramienta intuitiva. menos aún para quienes no sean diseñadores profesionales.

Con Canva, incluso en su versión libre, la meta y audiencia son los usuarios que necesitan diseñar pero realmente no son diseñadores. Canva tiene una cantidad de herramientas intuitivas que permiten realizar increíbles diseños incluso a aquellos sin conocimientos previos de diseño.

La versión pro extiende las posibilidades, dando acceso, entre otras cosas, a:

• Repositorios con millones de imágenes premium (Canva adquirió Pixabay)
• Removedor de fondos
• Carga y uso de una enorme variedad de fuentes tipográficas
• Más espacio de almacenamiento de tus diseños (100 Gb frente a 1 Gb de la versión libre)
• Posibilidad de cambiar tamaños de un diseño para adaptarlo a determinada red social o hacerlo de más resolución
• Permitir el desarrollo de tu “kit de marca”, con logo, paleta de colores y tipografía
• Y muchas otras cosas útiles.

Con una interfaz amigable, con Canva puedes hacer desde los diseños de las imágenes destacadas para tu blog, infografías, presentaciones, hasta mockups (maquetas) de diseños webs y gráficos, maquetación de libros, diseños para publicación en redes sociales y todo lo que necesites y que involucre diseño.

Nosotros la consideramos Canva una herramienta esencial para nuestros diseños gráficos para webs, así como maquetación y diseño en redes sociales.

EDIT.org

Otra excelente alternativa a Photoshop y que hemos descubierto hace poco es EDIT.org. Al igual que Canva, Edit está dirigido a emprendedores, freelancers y dueños de negocios que realmente no son diseñadores y no tienen el tiempo o las ganas para someterse a la curva de aprendizaje para serlo.

Con EDIT.org muy rápidamente puedes crear tarjetas de vistas, banners, flyiers, logotios, diseño gráfico para redes sociales, portadas para libros, curricula, infografías y un lartgo etcétera con su intuitiva interfaz.

Con la versión gratuita ya tienes a tu disposición robustas herramientas que te permitirán realizar diseños de cualquier cosa para tu empresa. Sin embargo, te recomendamos suscribirte a la versión Pro, actualmente por sólo 59 US$ al año y con la cual podrás obtener:

Con EDIT.org tendrás a tu disposición miles de plantillas que puedes editar y descargar en el fommato y calidad que desees, según tus necesidades. De igual manera, EDIT.org cuenta con una enorme biblioteca de imágenes gratuitas y premium de alta calidad.

CSS Box Shadow Generator

CSS Box Shadow Generator es una herramienta que permite generar desde una interfaz visual, elementos con apariencia tridimensional a través de la gestión de sombras que puedes insertar fácilmente en el diseño de tu web. Puedes controlar la extensión, difuminado, color de esta sombra.

Una vez que estés satisfecho con el resultado que ves en la interfaz, sencillamente copia el código CSS y pégalo en la sección de “CSS adicional” de tu WordPress, asignándole la «clase» del elemento correspondiente al que deseas aplicar la sombra.

Permite también crear también “gradientes”, que es una transición en degradé de un color a otro o de una variación a otra del mismo color. Con esta herramienta, puedes controlar la dirección, colores involucrados, linealidad o circunferencia del gradiente, etc.

Finalmente, con “Border-radius” puedes crear cuadros con aristas redondeadas y crear bordes con el color, diseño y ancho deseado.

Hay otras características interesantes como el generador de texturas, con el cual puedes dar a tu diseño una apariencia de “arenosa” o de ruido blanco.

Esta es una herramienta que usamos principalmente para generar sombras para efectos 3D, pero que debe ser explorada en toda sus posibilidades.

Generador Neumórfico

Siendo que el Neumorfismo es una tendencia en boga para el 2021, este Generador Neumórfico te permitirá hacer con facilidad increíbles diseños con una fantasmagórica sensación de tridimensionalidad que se produce con el uso sabio de las “dobles sombras” que permite el CSS3 y los colores de fondo.

El diseño neumórfico parte del principio de crear una ilusión en la que los elementos parecen surgir desde debajo del background.

Sencillamente, determina, el tamaño, radio (redondeado de aristas) y la distancia, intensidad y difuminado (blur) de las sombras y listo. También puedes determinar si deseas un efecto cóncavo, convexo o plano para el elemento que estás diseñando.

Una vez conforme con tu diseño, sólo tienes que copiar el código CSS y llevarlo a  “CSS adicional” de tu WordPress, indicándole la “clase” (elemento) que deseas afectar con esta característica.

Esta herramienta fue usada en el diseño de nuestra web Presencia Digital, cuya historia puedes leer aquí.

Haikei

Haikei es un generador de diseños SVG que nos permite crear elementos de diseños como fondos a través de la tecnología SVG: Scalable Vector Graphics o gráficos vectoriales escalables.

La gran ventaja de este formato es que es “dimensionable”, es decir, se adapta al tamaño de la pantalla donde se muestra sin perder calidad de imagen y pesa bastante menos que otros formatos de imagen (PNG, JPNG).

Este formato nos permite crear diseños abstractos y coloridos, pero cuyo código resulta especialmente difícil. Es aquí donde viene la utilidad de este generador de imágenes SVG de Haikei.

Desde su interfaz, escogemos el diseño general (barra lateral izquiera) y los ajustes que deseemos para refinarlo (barra lateral derecha).

Una vez satisfechos, descargamos el archivo en el botón inferior que dice “SVG”. Te lo descargará como un archivo .svg. Este tipo de archivo se abre con varios programas como Illustrator, CorelDraw, Inkscape o Google Drive, pero a nosotros lo que nos interesa es el código, por lo que yo lo abro con Visual Studio Code, un excelente editor de código gratuito.

 El código es una «cosa» que luce así:

<svg id="visual" viewBox="0 0 2500 150" width="2500" height="150" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 34L52.2 37C104.3 40 208.7 46 312.8 55C417 64 521 76 625.2 73.3C729.3 70.7 833.7 53.3 937.8 43C1042 32.7 1146 29.3 1250.2 38.8C1354.3 48.3 1458.7 70.7 1562.8 80.8C1667 91 1771 89 1875.2 80.7C1979.3 72.3 2083.7 57.7 2187.8 55.2C2292 52.7 2396 62.3 2448 67.2L2500 72L2500 0L2448 0C2396 0 2292 0 2187.8 0C2083.7 0 1979.3 0 1875.2 0C1771 0 1667 0 1562.8 0C1458.7 0 1354.3 0 1250.2 0C1146 0 1042 0 937.8 0C833.7 0 729.3 0 625.2 0C521 0 417 0 312.8 0C208.7 0 104.3 0 52.2 0L0 0Z" fill="#2defc6" stroke-linecap="round" stroke-linejoin="miter"></path></svg>

¿Entiendes ahora por qué es tan útil un generador de código para SVG?

Lo que haremos ahora es copiar este código y pegarlo en un bloque HTML en nuestro sitio web (si usas el editor Gutenberg). Si usas el editor clásico de WordPress, ve a la pestaña que dice «texto».

Y, al ver el resultado, vemos que ese código se traduce en:

Icons8

Aunque Icons8 tiene varias funciones, como eliminación de fondos en imágenes (no muy eficaz) y otras, esta herramienta la usamos exclusivamente para descargar íconos para nuestros diseños.

Icons8 tiene una biblioteca de 170.000 íconos y vectores gratuitos, clasificados en 33 “estilos”.

Ten cuidado a la hora de realizar una web de escoger para todo el sitio íconos del mismo “estilo”, para mantener la uniformidad.

Icons8 te permite escoger el tamaño de tu ícono o vector y su color y descargarlo como un archivo PNG de fondo transparente.

Eye Dropper

Eye Dropper es una extensión de código abierto para Google Chrome y Chromium que te permite determinar qué colores se están usando en una web, así como guardar un historial de color personal.

¿No te has preguntado qué color o colores está usando esa asombrosa web? Con Eye Dropper simplemente señala con el cursor el color, y descubrirás exactamente cuál es en varios códigos (hex, rgb, hsl).

Es una de las herramientas que más usamos en nuestro arsenal de diseño web.

Palabras finales

Estas son algunas de las herramientas online que más usamos a la hora de realizar nuestros diseños webs.

Todas ellas son gratuitas (aunque algunas extienden sus funcionalidades con versiones pro) y te ahorrarán horas de trabajo.

Además, impulsarán tu creatividad llevándola más allá de los límites que creías posible, especialmente si no eres diseñador profesional o si estás aprendiendo diseño por tu cuenta.

Cada una de estas herramientas presentan más posibilidades de las que hemos enumerado en este artículo. por eso te sugerimos que las explores y veas todo lo que pueden hacer por tus diseños y, en última instancia, por tu empresa.

Convierte tu inocente web WordPress en una Tienda Online

---

Si hablamos de una web de negocios, es indudable que su función primaria será generar ingresos.

Y, aunque no es la única opción para generar ingresos con una web, ¿Qué mejor manera de hacerlos que vendiendo productos o servicios?

Seas un artesano, coach de vida, yoga master o vendedor de repuestos para autos. No importa en qué industria te muevas, vas a querer ofrecer tus productos y servicios y gestionarlos de la manera más cómoda y fácil desde tu web.

Probablemente ya tengas una web. Si no, revisa este artículo para que aprendas cómo hacer una web con WordPress.

En este artículo te enseñaremos todo lo que necesitas saber para convertir tu inocente web construida bajo WordPress en una tienda online plenamente funcional. Clic para tuitear

Para ello, nos vamos a servir del plugin (complemento para WordPress) para comercio electrónico más popular del mundo: WooCommerce.

¿Qué es WooCommerce?

Se suele decir que la tercera parte de las webs en internet están hechas bajo la plataforma WordPress.

Del mismo modo, aproximadamente un tercio de las tiendas online en internet están hechas bajo WooCommerce.

WooCommerce es un plugin gratuito de comercio electrónico para WordPress, que es adecuado para todo tipo y tamaño de tienda online: desde pequeñas con uno o algunos productos hasta muy grandes con cientos o miles de artículos.

El plugin está disponible desde 2011 y tiene millones de descargas y activaciones.

Según un estudio de 2018, las ventas de comercio electrónico a través de plataformas WooCommerce superaron los 10 mil millones de dólares.

WooCommerce goza de gran popularidad porque el producto base, además de muchas extensiones y complementos, es gratuito y de código abierto.

WooCommerce tiene cientos de extensiones y más de 1,000 plugins que extienden su alcance.

Instalación del Plugin

Lo primero que hay que hacer es instalar el plugin de WooCommerce. Se hace exactamente como se hace con cualquier otro plugin gratuito.

Desde el repositorio de WordPress, irás a la sección “plugins” y luego “Añadir nuevo”.

Al hacer esto, accederás al repositorio de plugins de WordPress. Escribes en la barra de búsqueda “WooCommerce” y te saldrá como primera opción el plugin de WooCommerce. Dale click a “Instalar ahora”.

Dale un momento para instalarse. Luego dale click al botón “Activar”.  

El plugin ya está instalado y activado en tu web.

Paginas de WooCommerce por defecto

Cuando instales y activas el plugin de WooCommerce, éste creará varias páginas por defecto las cuales podrás ver desde el dashboard de WordPress: Páginas>Todas las páginas.

Dichas páginas son:

• Tienda: Es el nombre que se le da a la página de inicio de la tienda o storefront por defecto. Puedes crear la tuya propia y asignarla como storefront de tu tienda o dejar ésta y editarla. Sin edición, esta página sólo muestra un feed de tus diversos productos.

• Carrito: La página donde tus compradores podrán ver el(los) artículo(s) que hayas agregado para la compra, así como detalles como cantidad, precio, precio total, impuestos que procedan, aplicación de cupones de descuento y el botón que te llevará a la página de «Finalizar compra».

• Finalizar compra: Aquí tus clientes darán todos los detalles de facturación como su nombre, dirección, correo electrónico, producto(s) que están comprando, forma de pago. Si lo has configurado, al terminar de llenar esta página y darle click a «Realizar pedido», tus clientes quedan registrados como usuarios en tu tienda.

• Mi cuenta: esta es la página desde donde tus clientes podrán ver los detalles de su cuenta de usuario de tu tienda. podrán realizar acciones tales como  ver sus pedidos recientes, gestionar sus direcciones de envío y facturación y editar contraseña y otros detalles de su cuenta.

Todas estas páginas pueden ser editadas de la manera convencional para adaptarlas al diseño de tu web en general y tus valores de marca. También puedes crear las páginas que creas convenientes y necesarias.

Configurando WooCommerce

Luego de la instalación de WooCommerce, serás llevado al “wizard” o “configurador rápido”. Esto es opcional: al pie de la página verás “Skip setup store details/Saltar configuración de tienda”, que te saca del “wizard”.

Vamos a salir del “wizard” e iremos a la zona de configuración para familiarizarnos. Como dijimos, salimos del wizard (Skip/Salir al pie de página) y desde el dashboard:

WooCommerce > Ajustes (Settings)

Ajustes o Settings

Los ajustes generales son el primer paso que deberás realizar a la hora de configurar tu tienda online.

Dentro de la sección ajustes ir a la pestaña “General”.

En esta pestaña introducirás:

– Dirección de la tienda

– Localización de tus clientes, lugares a los que enviarás productos (si venderás productos físicos)

– Activar opción de tasa e impuestos sobre las ventas

– Activar opciones de cupones y descuentos (si deseas o no ofrecerlos)

– Moneda en la cual venderás (lo que se mostrará como símbolo monetario de la tienda)

– Separador de decimarles y miles (puntos o comas).

Si habilitas la opción “Activar tasas de impuestos y sus cálculos” aparecerá una nueva pestaña arriba que estaba previamente oculta: Impuesto.

Aquí, puedes informar a la plataforma si los precios que ingresas para tus productos incluirán impuestos o no. En el último caso, puedes hacer que WooCommerce calcule las tasas de impuestos por ti, según la dirección de tu tienda, la dirección de envío del cliente o la dirección de facturación del cliente.

También podrás configurar cómo se aplicarán los impuestos a los costos de envío e incluso determinar si se redondearán. También puedes personalizar la forma en que se muestran los precios y los impuestos en la parte frontal y durante el proceso de pago.

Productos

Tiene tres apartados o subpestañas:  General, Inventario y Productos descargables.

En Productos – General determinarás:

• Página de la tienda: la página de tu plantilla que servirá como “storefront” o fachada de tu tienda. Cuando se instala WooCommerce, lo hace con unas plantillas por defecto en la cual la página de tu tienda suele ser “Tienda” o “Shop”. Si vas a hacer tu propio diseño web, escoge la página (previamente creada en WordPress) que se usará.
• Comportamiento al añadir al carrito: aquí determinarás si al añadir un producto al carrito sigues en la página de producto o si al añadir al carrito te dirige al mismo (yo prefiero ésta última).
• Medidas: unidades métricas para medidas de tus productos. Se usa también para embalajes. Por defecto: kg y cm.
• Valoraciones: permite al cliente valorar un producto.
• Reseñas: permite que el cliente comente sobre tu producto y le asigne estrellas.

En Productos – Inventarios determinarás:

• Activar gestión de inventarios: dale al checklist si vas a trabajar con inventarios en productos físicos.
• Mantener inventarios pendientes de pago: minutos que se sustraerá del inventario productos no pagados. Une vez agotado el tiempo, vuelven al mismo.
• Activación de avisos de nivel de existencia y quién los recibirá
• Umbrales de poca existencia y agotado
• Mostrar nivel de existencia bajo a clientes

En Productos – Productos Descargable determinarás:

Si vendes productos digitales (ebooks, plantillas, apps…) debes configurar este apartado.

• El método en que se hará la descarga (por defecto, forzar descarga)
• Determina si el usuario debe estar registrado para descargar y/o si lo hace luego de haber pagado.

Envío

Tiene tres apartados: Zonas de envío, Opciones de envío y Clases de envío.

Aquí vas a configurar todo lo que tiene que ver con métodos de envío y zonas a las cuales puedes o no enviar tus productos. Cuando un cliente introduce su dirección, WooCommerce se encarga de asociarlo a una de las zonas creadas en este apartado y mostrarle las opciones que ofreces y aplicarle las tarifas correspondientes.

• Zona de envío:
  • Nombre de la zona: te permite añadir zonas de envío. Por ejemplo, si estas en USA: Estados Unidos Continental, Alaska, Hawaii y Puerto Rico. Si vendes internacionalmente, una zona puede ser un país específico.
  • Regiónes de la zona: Asignas específicas regiones dentro de la zona.
  • Metodo de envio: tienes opciones como costo fijo, envío gratis y recogida local.

• Opciones de envío:

En esta opción puedes:

• Activar una calculadora de envíos de la página de comprar y/u ocultar los gastos de envíos hasta que se introduzca una dirección.
  • Establecer el destino de envío del cliente por defecto: si es la dirección de envío facturación del cliente.
  • Activar un modo de depuración para limpiar el caché y que se muestren igualmente las zonas de envío sin importar la dirección introducida por el cliente. Esto en caso de que los costos calculados por WooCommerce sean más altos o más bajos de lo que esperas.

• Clases de envío:

Las clases de envío se pueden usar para agrupar productos de tipo similar y se pueden usar con algunos métodos de envío, como el envío de precio fijo, para proporcionar diferentes tarifas para diferentes clases de productos.

Por ejemplo, con las clases de envío y el envío de precio fijo, es posible crear diferentes precios fijos para diferentes tipos de productos, como artículos en lotes y artículos pequeños. Las clases de envío se utilizan para agrupar productos; no se utilizan directamente para ofrecer tarifas de envío a los clientes.

Métodos de Pago

La siguiente pestaña es la de “Pagos”. Aquí podrás decidir y  configurar los métodos de pago que ofrece Woocommerce nativamente: Paypal, Contrareembolso (efectivo), transferencias bancarias y cheques.

 Estas opciones puedes expandirlas usando las extensiones premium de pasarelas de pago de WooCommerce.

Cada uno de los métodos de pago tiene un botón de “Configurar”.  Simplemente selecciona el método de pago que te gustaría usar, actívalo y configúralo.

Al configurar, por ejemplo Paypal, deberás indicar tu correo de Paypal. También podrás activar el “entorno de pruebas” que te permitirá hacer pruebas del funcionamiento del método de pago Paypal con tu tienda.

Para transferencias bancarias, podrás indicar los datos de tu banco, el mensaje que quieres que aparezca al cliente en tu web al lado de esta opción de pago, etc.

Cuentas y Privacidad

Aquí podrás configurar todo lo necesario si deseas:

• Permitir o no que el cliente puede hacer pedidos sin tener que hacer log-in (ingresar su clave).
• Permitir al cliente la creación de una cuenta mientras hace el pago
• Permitir o no la eliminación de sus datos personales por parte del cliente
• Mensajes de visualización de “Políticas de Privacidad”
• Gestión de conservación de los datos personales

Esta pestaña es importante configurarla correctamente cuando haces uso de las distintas integraciones de WooCommerce con otros servicios como sitios de Membresías, Venta de Cursos, etc.

Correos electrónicos

Desde aquí podrás gestionar los correos electrónicos a los cuales Woocommerce deberá enviar los avisos de, por ejemplo “Nuevo pedido”, “Procesando tu pedido”, “Pedido completado”, etc.

Integración

Esta pestaña te permite integrar WooCommerce con la herramienta MaxMind, un servicio de geolocalización que te permitirá hacer cálculos automáticos de impuestos, envíos, etc, de acuerdo a la ubicación geolocalizada del cliente.

Si no usas ese servicio, puedes obviar esa pestaña.

Avanzado

En esta pestaña podrás indicarle a Woocommerce cuáles serán las páginas que se usarán como Carrito, Página de Pago, Página de Mi Cuenta y Términos y Condiciones.

Puedes dejar las tres primeras por defecto (las paginas creadas por WooCommerce al momento de su instalación). Para la de “Términos y Condiciones”, deberás tener o crear una página para tal fin e indicarla en la casilla correspondiente.

Las demás opciones no debes modificarlas y dejarlas como están, a menos que seas programador o conozcas de código e intentes cambiar la plantilla.

Añadir y gestionar nuevos productos en WooCommerce

Luego de instalar y configurar WooCommerce, es momento de agregar nuestros productos.

Creando el producto

Desde el dashboard de WordPress, ve hacia Productos > Añadir nuevos. Podrás añadir tu primer producto con el editor WordPress familiar:

Primero que nada, crea un título y una descripción para tu producto. Si no vas a usar una landing page para tu producto, puedes hacer de ésta la página de descripción del producto, con toda la información necesaria y completa sobre el producto.

Colocado el Título y la descripción, podemos agregar una imagen destacada del producto. A la derecha, en la sección de widget, buscar “Imagen del producto” y seleccionar de Bibñlioteca o subir desde disco duro.

Directamente debajo de “Imagen del Producto” hallarás “Galería del Producto”, aquí agregarás las diversas imágenes que desees de tu artículo. Igualmente desde la Biblioteca de Medios o subiéndolas desde el disco duro. Cuida que sean de buena calidad.

Algo así luciría en vivo la página de tu producto una vez que hayas agregado título, descripción y una foto destacada. Se agregas Galería de Imágenes se mostrarán como miniaturas debajo de la imagen principal.

Esta configuración puede variar de acuerdo al theme o plantilla que uses.

Con esto hecho, también querrás agregar detalles sobre tu nuevo producto. Veamos cómo.

Añadiendo detalles a tu producto

Si le das scroll down a la página de creación de producto, debajo del editor, te encontrarás con dos nuevos widgets que no se encuentran en posts o páginas normales de WordPress. El primero de ellos es la sección Datos del producto.

Aquí puedes añadir detalles de tu producto. En la parte superior, escoge si el producto es virtual o no (si escoges “virtual”, se removerá la pestaña de “Envío”) y si es descargable.  Puedes también ingresar el precio regular y un precio con descuento si se compra antes, durante o después de una fecha determinada.

Si vendes productos descargables, deberás cargar el archivo que será vendido. Puedes determinar el límite de descargas, así como el tiempo de expiración del enlace de descarga. Si los dejas en blanco, serán descargas y tiempo de descarga ilimitado.

Luego está la sección “Inventario”, en la cual puedes gestionar tu stock, ingresando la cantidad del producto, status del stock (en existencia/agotado) y si se puede reservar el producto (backorders).

También puedes determinar si son artículos vendidos individualmente (solo uno por orden) y aquí puedes también ingresar el SKU o número de inventario del producto, si tienes uno.

Hay otras pestañas útiles. La sección “Envío” te permitirá ingresar el peso, las dimensiones y la clase de envío del artículo.

En la pestaña “Productos relacionados”, puede agregar ventas dirigidas y ventas cruzadas, mientras que Atributos le permite describir las características del producto.

• Ventas dirigidas: productos más caros o de mejor calidad que el actual
• Vetas cruzadas: artículos relacionados con el artículo actual. Es el “Otros productos relacionados” que solemos ver en las tiendas.

Si vendes cursos que has hecho con un plugin de cursos como LearnDash, por ejemplo, aquí te aparecerá también la vinculación de este producto que estás creando con el curso que has creado con el plugin de cursos o LSM (Learning System Managemet).

Finalmente, en la pestaña “Avanzado”, puede ingresar notas de compra personalizadas, darle al producto una posición establecida en su menú y habilitar o deshabilitar las valoraciones.

Creando Atributos y Productos Variables

Hay otra sección “Atributos”, que te permite personalizar aún más la información de tus productos. Echemos un vistazo de cerca a dos de las opciones más útiles en la sección “Datos de producto”: Atributos y Productos variables.

Los atributos son descriptores clave de tu producto y brindan a los clientes potenciales información importante sobre él. Esto puede incluir el color del artículo, el material del que está hecho, su tamaño o tipo, etc. Si agregas estos detalles a un producto en la pestaña Atributos, aparecerán en la página del producto.

Independientemente del tipo de productos que venda, los atributos son útiles para comunicar características vitales de manera concisa. Sin embargo, ¿qué pasa si también vendes artículos que vienen en múltiples opciones? Para eso, puede seleccionar la opción Producto variable:

Esto dará acceso a una nueva pestaña de “Variaciones”, debajo de “Atributos”, donde se pueden crear múltiples versiones de tu producto usando los atributos que ya se asignaron.

Por ejemplo, supongamos que ofreces una camisa en rojo, verde y morado. Puede agregar una variación para cada color, luego dar a cada uno una descripción única, precio, etc.

Tus clientes podrán ver todas las variaciones disponibles en la página del producto. Algo así:

Personalizando la descripción corta de tu producto

Debajo del widget “Datos del producto” encontrarás una sección llamada “Descripción corta del producto”:

Aquí, puedes crear una descripción concisa que aparecerá debajo del título del producto. Puedes utilizar esta descripción para destacar los principales beneficios del artículo e incorporar una o más palabras clave para ayudar a los clientes a encontrarlo en las búsquedas.

Después de personalizar los datos y la descripción de tu producto, no olvide revisar también las otras opciones en la página del producto. Puede agregar etiquetas a su producto, colocarlo en una categoría e incluir una imagen destacada o incluso una galería de imágenes completa.

Así es como podría verse su producto final en la interfaz:

Una vez que tu producto esté listo, dale clic al botón azul de “Publicar”. Y repite el proceso con cada producto que necesites incluir.

Gestionando tus productos con WooCommerce

Gestionar tus productos con WooCommerce es fácil. La interfaz es igual a la que usas ordinariamente para gestionar tus posts y páginas de WordPress.

Por ejemplo, puede seleccionar “Todos los productos” para ver todos los artículos que figuran actualmente en tu tienda. Puedes agregar, editar y eliminar productos aquí según sea necesario:

Personaliza tu Tienda WooCommerce

Hemos, establecido algunas configuraciones básicas para nuestra tienda en línea. Sin embargo, hay muchas más opciones para conocer, que puedes encontrar en la nueva pestaña WooCommerce.

Aquí puede ver pedidos, cupones e informes, así como personalizar la configuración y agregar nuevas extensiones. Repasemos cada pantalla una por una.

Pedidos

La página de “Pedidos”  muestra una lista de compras recientes en tu tienda:

Si vendes productos digitales, no hay mucho que hacer aquí, aparte de ver lo que se ha comprado últimamente. Sin embargo, si vendes productos físicos, aquí es donde puedes controlar qué productos necesitas enviar y el estado de los pedidos.

Clientes

Aquí podrás ver los datos de quienes han comprado tus productos: identidad, contacto, producto comprado, monto gastado en tu tienda, etc.

Cupones

WooCommerce tiene varias opciones útiles para agregar nuevos cupones a tu tienda. En la pestaña “Cupones”, puedes seleccionar “Crea tu primer cupón” para acceder a la pantalla de edición:

Puede agregar un código de cupón y una descripción aquí. Luego, la pestaña “General” le permite editar su información básica: el tipo de cupón (porcentaje de descuento, descuento de carrito fijo o descuento de producto fijo), su valor, opciones de envío gratis y su fecha de vencimiento.

Bajo “Restricciones de uso” puedes establecer un mínimo de gasto hecho por los consumidores para optar por un cupón. Puedes chequear la caja “Uso individual” si no quieres que los clientes usen este cupón junto con otras ofertas.

Puede establecer si el cupón debe aplicarse sólo a determinados artículos en venta aquí, y también seleccionar los productos y las categorías de productos a los que se aplica el cupón. Por último, incluso puedes prohibir el uso de cupones en determinadas direcciones de correo electrónico.

La pestaña final, “Límites de uso”, te permite determinar cuántas veces se puede usar el cupón, tanto en general como por cliente. Luego, simplemente publica tu cupón para activarlo e informa a tus clientes sobre el código que necesitarán.

Informes

WooCommerce también ofrece una potente funcionalidad de seguimiento o tracking incorporada. En la pestaña “Informes”, puedes ver tablas y gráficos de tus ventas, pedidos y costos de envío en diferentes períodos de tiempo:

Cada gráfico puede limitarse a las ventas de un producto, categoría o cupón en particular. En la subpestaña Clientes, también puedes ver la adquisición de tus clientes durante los mismos períodos de tiempo.

Por último, pero no menos importante, podrás revisar tus productos con poco stock, agotados y la mayoría de los productos almacenados en la subpestaña Inventario. Todos estos datos se pueden exportar como una hoja CSV si es necesario.

Estado

Veamos brevemente la sección “Estado”:

Toda la información de tu back-end (técnica) la puedes encontrarla aquí, como las versiones de tu plataformas WooCommerce / PHP / MySQL / etc., límites de tamaño, registros y más.

En la subpestaña “Herramientas” en la misma página, puedes borrar las cachés de tu sitio web para múltiples variables, borrar datos antiguos e incluso revertir la configuración de tu tienda a sus valores predeterminados.

Extensiones

Uno de los caracteristicas que hacen de WordPress el Sistema de Gestión de Contenidos (CMS) más popular del planeta es la comunidad que lo respalda. Hay miles de temas y decenas de miles de complementos que puedes utilizar para personalizar tu sitio web.

Esto también se aplica a WooCommerce, aunque en menor escala. Puedes encontrar muchas herramientas para expandir tu tienda, agregar nuevas opciones y características y personalizar tu apariencia en la pestaña Extensiones:

Algunas de las extensiones notables de WooCommerce incluyen:

• Reservas de WooCommerce: lo que permite a los usuarios vender bloques de tiempo como citas.
• Membresías de WooCommerce: que permite al usuario restringir el acceso a ciertas partes de su sitio web de WordPress y vender el acceso a estas partes del sitio web.

… Y para terminar

Con lo discutido hasta aquí, podrás sin problemas comenzar a vender productos desde tu sitio web construido bajo el entorno de WordPress.

Sin embargo y pesar de lo amplio de este artículo, hay muchas opciones que WooComerce tiene para ofrecer y que hemos tenido que dejar por fuera. Por lo que te recomendamos que entres en las diversas opciones y las explores por ti mismo. Así como el amplio espectro de complementos que amplían aún más las posibilidades de esta potente plataforma.

Si tienes cualquier duda sobre tu instalación de WooCommerce, no dudes en hacerla llegar a través de los comentarios.

Editor Gutenberg de WordPress (+Video)

---

Este post es una actualización del artículo originalmente publicado en agosto de 2019.

En 2018 se cumplieron 550 años de la muerte de Johannes Gutenberg, de quien se ha tomado el nombre para el nuevo editor de WordPress.

Ese mismo año, WordPress lanzó en versión beta su nuevo editor: Gutenberg. En medio de críticas y protestas, los responsables de WordPress decían que esta nueva herramienta vendría a cambiar la forma de crear contenido en el famoso Gestor de Contenidos.

Un año después, la predicción se cumplió.

La aproximación ha sido radicalmente distinta: ahora se utilizan “bloques” individuales editables y trasladables para dar una mayor control en la creación y gestión de contenido enriquecido.

¿Qué son los page builders?

Los page builders o constructores de páginas son aplicaciones (plugins) que se añaden a una plantilla de WordPress y que permiten construir la estructura, maquetación y estilo de un sitio web.

Algunos de los más importantes son Elementor, Divi Builder y Beaver.

Con la llegada del sistema de bloques del nuevo editor, surge la pregunta de si ahora estamos ante una herramienta que podrá hacernos prescindir de la instalación de page builders. Clic para tuitear

Pero vamos por partes.

Una mirada inicial a Gutenberg

En diciembre de 2018 con el lanzamiento de la versión 5.0 de WordPress, Gutenberg se convirtió en el editor por defecto.

Cuando hablábamos de “contenido enriquecido” hablamos de contenido que va más allá del “texto plano”. Es decir, hablamos de medios (imágenes, videos, sonidos), texto enriquecido (texto con formatos), elementos de diseño…

Con una interfaz sencilla, limpia y fácil de trabajar (user friendly), Gutenberg parece estar superando las críticas iniciales.

Después de todo, luego de una década con el editor clásico, mucha gente se resistía –y se resiste aún-  al cambio.

El propósito de WordPress con su nuevo editor va mucho más allá de las funciones de un simple editor (muy al estilo de Microsoft Word con el anterior editor).

Ellos buscan que Gutenberg sea, eventualmente, una herramienta para construir totalmente un sitio web, incluyendo la maquetación o layout de páginas principales y landing pages.

¿Pero qué son los bloques?

Podemos concebir los bloques de Gutenberg como “unidades de contenido” con las que podemos editar, trasladar, cambiar más o menos a nuestra conveniencia el diseño de los posts o páginas de un sitio web.

Aunque esos traslados aún son limitados. Los bloques sólo se pueden mover hacia arriba y hacia abajo, no a los lados.

Sin embargo, esto nos permite realizar diseños muchos más complejos de lo que permitía el editor anterior.

Gutenberg permite escoger entre una variedad de bloques para añadir al diseño del post o página:

• Texto
• Títulos y subtítulos
• Videos
• Audio
• Citas
• Imágenes
• Fondos (imágenes y colores)
• Imágenes de portada
• Widgets
• Tablas
• Columnas. Excelentes para el diseño del layout. Incluso se pueden crear múltiples columnas cada una con un bloque diferente.
• Medios y textos (dos columnas, una con texto y otra con un medio como una imagen o video)
• Espaciador
• Separador
• Botones
• Y más…

Para quienes sepan código, podrán añadir sus bloques HTML personalizados y guardarlos para “reusarlos”.

Cada bloque es una entidad independiente, lo que permite personalizarlos al máximo e individualmente.

¿Gutenberg es un constructor de páginas como Elementor?

Aunque WordPress ha dicho que una de sus metas con Gutenberg es que el usuario, si lo desea, puede prescindor de page builders, en su forma actual, el nuevo editor no es aún un sustituto adecuado.

En su estado actual, Gutenberg tiene dos carencias que no le permiten clasificar como un page builder a pleno derecho: Clic para tuitear

• Carencia de flexibilidad en columnas. Si bien es cierto que se puede, vía código, transformar el bloque de columnas en columnas flexibles (que se adapten a la forma que queramos), no es el caso si no usas conocimiento HTML y CSS.

• Muy limitado en cuanto al ”drag and drop” (agarra y suelta) de los bloques. La funcionalidad más altamente valorada de losconstructores

Dicho esto, Gutenberg sí puede hacernos prescindir de constructores de páginas como Elementor (que pueden ralentizar la carga de un sitio web) o plantillas premium (que pueden ser caras) para la mayoría de los diseños más “standard”.

Como dato curioso, nuestro sitio web Presencia Digital ha sido realizado, en su estilo minimalista, prescindiendo del uso de constructores de páginas o funcionalidades incluidas en la plantilla. Sólo se usaron las posibilidades de Gutenberg (y algo de código).

Sin embargo, para construir más complejas landing pages, por ejemplo y si no sabes de código, vas a apreciar la mayor flexibilidad de page builders dedicados como Elementor o Divi Builder.

Resistencia al cambio

A pesar de las ventajas evidentes que presenta Gutenberg por encima del anterior editor, a la fecha de hoy, marzo de 2021, el plugin del editor clásico de WordPress se ha convertido en uno de los más descargados del repositorio.

Con más de 5 millones de instalaciones activas, el editor clásico ha demostrado que una enorme cantidad de personas sigue prefiriéndolo sobre Gutenberg.

Entre las quejas más frecuentes al nuevo editor está la usabilidad y en «complicar más las cosas» con respecto al editor clásico.

El problema radica, en nuestra opinión, que con la mayor cantidad de opciones d Gutenberg, los usuarios que sólo quieren un editor «para escribir», estilo Word, pueden sentir que la curva de aprendizaje para dominarlo le resta usabilidad.

Este tipo de quejas vienen principalmente de aquellos quienes tienen una plantilla instalada y que no se preocupan por el diseño o estructura. Es decir: compras la plantilla con sus diseño preestablecido, la instalas y activas y listo. Sólo necesitas publicar contenido.

Sin embargo, para quienes apuestan por construir sus propias webs, el editor de Gutenberg hace un magnífico trabajo en cuanto a la maquetación y gestión de cada sección de la web. Todo esto sin sobrecargar y ralentizar velocidad de carga con pesados «page builders«.

Gutenberg en vivo

Hemos querido aquí hacer una demostración de una sencilla maquetación usando el sistema de bloques de Gutenberg.

En este video de 22 minutos verás en vivo cómo maquetar una página de inicio o una landing page sencillas usando sólo las posibilidades de Gutenberg.

Luego de leer este post y ver el video, no dejes de leer nuestro artículo sobre los Bloques de Génesis para WordPress y cómo pueden ayudarte a construir tu web.