⚡️Bienvenidas a la píldora 3 de la guía#CreaTuWebEmprendedora donde hablaremos de: ✅Diseño web ✅ Webs desarrolladas a medida vs creadas con un CMS  ✅Tipografías ✅ Tamaño y peso de imágenes ✅Pop ups web

 

La guía de la mujer emprendedora

Recíbela GRATIS en tu email

Free

LA GUÍA DEFINITIVA DE LA MUJER EMPRENDEDORA

Todo lo que debes saber si estás pensando en emprender

#CreaTuWebEmprendedora

01. ¿Por qué es tan importante tener una web?

02. Naming, dominios y hosting ¿Cómo elegirlos?

03. Qué debes tener en cuenta para diseñar tu web

 

Cuando te decides a crear una página web o bien contratas un servicio de diseño web, siempre tendrás dos opciones:

1.Desarrollo propio a medida creando la web a código

2.Usando un CMS de código abierto como WordPress

 

Si te estás preguntando cuál es mejor, debo decirte que esa respuesta depende del proyecto y las necesidades. Cada opción tiene sus ventajas e inconvenientes. Podríamos decir que sería algo similar a compra un terreno y hacerte tu casa a medida, o comprar una estructura ya hecha y reformarla a tu gusto y medida.

La guía de la mujer emprendedora

Recíbela GRATIS en tu email

Free

LA GUÍA DEFINITIVA DE LA MUJER EMPRENDEDORA

Todo lo que debes saber si estás pensando en emprender

 

Webs a medida vs webs hechas en CMS como WordPress

Como dijimos anteriormente, dependerá del proyecto, las necesidades que este requiera y el presupuesto la decisión de usar una modalidad u otra. No obstante, te cuento cuáles son las ventajas e inconvenientes de cada uno. Así como mi recomendación si te decides a usar un CMS para el diseño de tu web.

 

✅ Ventajas del desarrollo web a medida

  • Son más livianas y cargan mejor ya que no contiene código de más, sino únicamente el necesario.
  • Su diseño es exclusivo y único, no hay otra igual
  • En cuanto al SEO, tienen una mejor velocidad de carga
  • Son escalables
  • Son más seguras ante ataques y vulnerabilidades
  • Permiten un mayor control y personalización
  • Su rendimiento es más eficiente ya que nunca se consumirá recursos que no sean necesarios

 

❌ Inconvenientes del desarrollo web a medida

  • El coste es más elevado
  • La curva de aprendizaje es más lenta
  • Necesitarás la contratación de un profesional para ejecutar cambios en este tipo de webs
  • El tiempo de desarrollo es mayor

 

🙌🏻 Ventajas del desarrollo web con WordPress

CMS de código abierto hay muchos: Joomla, Drupal, WordPress. En este caso voy a hablaros del que yo uso, recomiendo y trabajo, WordPress.

WordPress es el CMS de código abierto más usado y popular en el mercado, con una gran comunidad detrás. Es fácil de usar y tiene una interfaz muy intuitiva, por lo que también se ha convertido en uno de los administradores de contenido más usado para la gestión de webs y blogs. Pese a que tú no sepas desarrollar una web en WordPress, la gestión y los cambios del día adía como subir una nueva entrada en el blog, cambiar un texto, o una imagen, es algo muy sencillo que podrás hacer sin necesidad de pagar a otra persona para que lo haga por ti.

 

De ahí esa facilidad en la administración web por parte del cliente. El código que ya viene creado en WordPress es muy limpio, por lo que no afecta a los motores de búsqueda. Además tienes un sin fin de posibilidades para añadirle funcionalidades extra, entre ellas el SEO ( H1, H2, metas, alt de imágenes, enlaces…) En cuanto a la personalización del diseño, siempre tiene la opción de usar una plantilla predefinida que ya viene hecha, en la que únicamente habrá que cambiar: colores, logotipo, tipografías, texto e imágenes. O podrás crear la tuya a medida, sin necesidad de usar código o saber programar usando constructores visuales, como Divi o Elementor. Por lo que tu diseño será 100% personalizable.

 

Otro aspecto a tener en cuenta de WordPress es que en sus inicios fue creado como una plataforma de bloggin, por lo que ya incluye el módulo de blog donde podrás subir tus propios artículos de blog. Debido a la gran comunidad y profesionales que hay detrás de WordPress, tienes infinidad de plugins (digamos que son como las aplicaciones que descargas en tu Smartphone para añadirle funcionalidades). Con estos plugins o complementos podrás añadirle personalización y funciones extra.

Si tu negocio crece y necesitas escalar tu web no deberás preocuparte, ya que WordPress es muy escalable y podrás añadir nuevas secciones, páginas y cambiar el diseño siempre que lo necesites. Además de todo esto, una web hecha en WordPress te permite configurar diferentes accesos y roles, asignando niveles de acceso a diferentes usuarios (editor, administrador, contenido restringido).

 

El uso de maquetadores visuales para el diseño web

Quizás te estés preguntando qué es eso de usar un maquetador visual. Así que antes de seguir vamos a aclarar este aspecto.

 

¿Qué es y para qué sirve un maquetador visual?

Un maquetador visual o un page builder ( nombre con el que se les conoce en inglés) es un constructor de páginas  webs que te ayuda a diseñar una web sin necesidad de usar código. Estos constructores visuales han surgido debido a la gran cantidad de personas que usan WordPress para crear sus webs, por a su facilidad de uso y todas  las demás ventajas de las que hablamos.

Muchas de estas personas no son programadores, ni desarrolladores, y necesitaban poder crear sus sitios webs en WordPress. Los maquetadores te permiten crear tu diseño web en modo drag and drop, arrastrando y soltando elementos. Pudiendo ver cómo va quedando mientras lo vas haciendo.

Esto es perfecto para personas que nos saben lenguajes de programación ( HTML, CSS). Por otro lado, muchas de estas personas para ahorrarse la contratación de un profesional, o intentar crear ellos mismos sus sitios webs, recurrían a plataformas de compra de plantillas predefinidas como es Themeforest. ¿Pero, cuál es el inconveniente del uso de este tipo de plantillas prestablecidad?

Este tipo de themes o plantillas vienen por defecto con multitud de módulos y efectos para que su diseño sea más atractivo. Pero todo este código de más que llevan, hace que las webs sean mucho más pesadas y repercuta en la velocidad de carga y el SEO. Es un diseño ya hecho donde te incluyen todo. Y cuando digo todo es TODO. Lo vaya a usar o no, lo necesites o no. Por eso, no recomiendo comprar este tipo de plantillas. Además de tener un diseño y una web que tiene 5.000 personas más con el mismo diseño que el tuyo, le va a pesar muy mucho luego el culo.

 

Con el maquetado visual matas dos pájaros de un tiro:

  1. Puedes personalizar y hacer único tu diseño sin necesidad de comprar o usar plantillas
  2. No sobrecargas la web

Podríamos decir que un maquetador visual es un plugin que se añade a tu WordPress para permitirte trabajar con el diseño de tu web.

**Importante** Eso sí, no todo iba a ser de color de rosa. Debes saber que algunos maquetadores visuales como por ejemplo: Visual Composer, Thrive Content Builder y Divi, trabajan con Shortcodes.

Un shortcode es un  pequeños fragmentos de código que permitir que se ejecute código dentro de publicaciones, páginas y widgets de WordPress sin tener que escribir ningún código directamente.  Pudiendo incrustar archivos, o crear objetos, que normalmente requerirían mucho código en una sola línea.

Estos shortcodes son los encargados de hacer llamadas al código para que tú vayas viendo toda esa parte bonita del diseño. El problema es que cada uno de estos maquetadores visuales usa sus propios shortcodes, por lo que únicamente este maquetador puede interpretarlos.

Si cambias de maquetador visual se dejarán de interpretar esos shortcodes, ya que únicamente tu maquetador visual será el capaz de interpretarlos. Por eso debes saber que si haces esto, toda esa parte visual que has creado hecho pasará a ser que una rasta de códigos. De ahí la importancia elegir un buen maquetador y tener todo esto en cuenta previamente.

 

Los mejores maquetadores visuales para diseñar tu web en WordPress

 

Elementor

Para mi Elementor es el mejor maquetador visual junto con Divi Builder ( no confundir con el theme Divi). ¿Quieres saber por qué considero que es el mejor?

  • Elementor tiene una versión gratuita y otra de pago. Pero ya el simple hecho de contra con una versión free, es todo un plus.
  • Es muy muy sencillo de usar
  • Su usabilidad es muy buena
  • Incluye la edición mediante drag drop arrastrando y soltando elementos
  • Tiene diseños predefinidos de plantillas y más de 90 módulos de contenido (botones, carruseles, contadores, barras de progreso, testimonios)
  • Incluye widgest premiums y otras funciones que son importantes para cualquier diseñador web
  • Inclye widgest para Woocomerce
  • Funciona con todos los temas de WordPress
  • No requiere ninguna habilidad de HTML, CSS o PHP
  • Tiene vista responsive de tablet y Smartphone
  • Permite rediseñar los módulos con CSS personalizado

 

 

Elementor precio

Precios de Elementor

  • Constructor visual drag and drop de arrastrar y soltar elementos
  • Su curva de aprendizaje es media
  • Puede usarse con cualquier theme, independientemente de ser usado con el theme Divi.
  • Cuenta con módulos y biblioteca propia de plantillas
  • Es muy flexible y personalizable
  • Permite rediseñar los módulos con CSS personalizado
  • Puedes diseñar y guardar tus propios diseños y exportarlos a otras webs
  • Permite un control total de diseño
  • Tiene vista responsive para diseño en móvil, pc y tablet
  • Deja trabajar directamente en el front end
  • Cuenta con una gran comunidad
  • Es compatible con Woocomerce
  • Si compras el theme Divi ( no lo recomiendo por su peso y repercusión en velocidad de carga) te incluye ya el plugin de Divi Builder.
  • Puedes usar independientemente el plugin divi builder  con cualquier theme de WordPress, sin necesidad de comprar o usar la propia plantilla de Divi.
  • Puedes adquirir el plugin de manera individual o tenerlo incluido junto con otros plugins al comprar la licencia de Divi o la plantilla Extra Theme.
  • Incluye un módulo de shortcodes
  • Tiene una gran comunidad detrás de desarrolladores y usuarios

 

 

precios Divi

 

¿Cual es la principal diferencia entre Divi y Elementor?

 

Lo primero el precio, Divi es más barato pero también tiene una curva de aprendizaje mayor. Elementor es más caro pero más fácil de usar.

Divi tiene chat en línea y correo electrónico como soporte VS Elementor tiene únicamente correo electrónico para contactar.

Divi no ofrece una versión gratuita, aunque tiene la posibilidad de devolución del dinero en 30 días. Por el contrario, Elementor tiene versión gratuita.

No podemos decir que uno se mejor que el otro, ya que eso sería como decidir entre Pepsi y Cola Cola. A unos les gusta más uno y a otros otro. Lo mejor es probar ambos, ver con cuál trabajas mejor y quedarte con ese.

 

 

 

Brizy Builder

 

 

 

  • Este constructor visual a modo arrastrar y soltar elementos que
  • Es simple, sencillo  y fácil de usar.
  • Cuenta con una opción gratuita y un paquete premium, aunque su versión pro no es GPL.
  • Puedes comprar en un único pago este constructor para tenerlo de por vida.
  • Incluye  características innovadoras que otros constructores visuales no tienen.
  • Cuenta con plantillas predefinidas con diseños bonitos y limpios y tiene un plan de por vida.
  • Viene con bloques pre diseñados donde únicamente habrá que añadir estilo
  • Permite la edición en línea directamente en la página
  • Facilita la vista móvil
  • Incluye 400 iconos para añadir a los diseños webs
  • Permite ser usado con Astra, OceanWP, Hestia y GeneratePress
  • Es compatible con Woocomerce
  • Se puede descargar de forma gratuita del repositorio oficial de complementos

Como desventajas podríamos decir que al ser relativamente nuevo (año 2019), no tiene tantas características ni cuenta con una fuerte comunidad detrás como puede tener Divi o Elementor.

 

Recomendaciones en el uso de tipografías web

tipografías

 

Teniendo en cuenta que más del 95% del la información de una web es texto, debemos atender a unas pautas y consejos sobre el uso de las tipografías. Las tipografías que seleccionemos para nuestra web  pasarán a ser parte de la identidad y branding de marca, además de otorgar la legibilidad correcta en la lectura de la información por parte del lector. ¡Las malas tipografías apagan a los usuarios! No uses más de 3 fuentes tipográficas. Lo mejor es que tengas una fuente para los títulos y subtítulos y otra para el texto. La tercera puedes dejarla para resaltar palabras sobre el texto y jugar así con el diseño.   Lo mismo que hablamos no usar más de tres tipos diferentes de fuentes, no debemos hacer un popurrí de tamaños de fuente. Deja predefinido un tamaño para los H1, H2, H3. Y otro para el texto. Pese a poder tener hasta tres diferentes tipos de fuentes, debes asegurarte de que las que elijas se complementen bien, para así dar armonia al diseño.

 

🚦Colores a evitar

Evita usar fuentes en color verde o rojo para que las personas daltónicas ( el 8% de los hombres lo padecen) no tengan problemas en tu web.

 

✌🏻Por qué deberias usar fuentes de Google

Lo mejor es que uses fuentes standar como son las fuentes gratuitas del servicio de Google Fonts, donde podrás elegir la que más te guste entre una amplia selección ( más de 600 fuentes).  Solo así te aseguras de que van a verse en todos los navegadores.

Si hay alguna web que veas con alguna fuente que llame tu atención,, con la extensión del navegador Font Ninja ( disponible en las aplicaciones gratuitas de Google Chrome), podrás saber qué tipo de fuente es y descargarla. Algunas de las mejores fuentes de Google son:

  • Open Sans
  • Montserrat
  • Source Sans Pro
  • Roboto
  • Habibi
  • Amethysta

Webs de tipografías gratis

Tipografías de pago

 

Tamaño y uso de imágenes

Cuando diseñamos una web tenemos que tener muy claro que cada una de las imágenes que subamos a nuestro WordPress tienen que estar bien optimizadas. Si nos descargamos una image  en alta calidad y la subimos tal cual sin tener esto en cuenta.

Una vez finalicemos nuestra web veremos que tarda demasiado en cargar. Y esto es algo que va a repercutir en el SEO y en que los visitantes accedan. Al ver que tarda demasiado en cargar se irán.

Por eso quiero que tengas en cuenta los aspectos más importantes a la hora de subir imágenes a su web.

 

Imagenes libres de derechos

Lo más importante es no tener problema so multas por uso de imágenes de otros que cuentan con derechos. Por eso no e recomiendo usar le buscador de imágenes de Google, o descargar imágenes de Pinterest. Nuestro proyecto web es algo importante, así que hagamos las cosas bien.

Lo que te recomiendo es descargar siempre imágenes libres de derechos o bien las que poseen una Licencia de Creative Commons que te habilite a ello.

Para descargar estas imágenes puedes usar bancos de imágenes gratuitos o comprar las imágenes en .

A continuación te dejo mis bancos de imágenes gratuitos y libres de derecho que yo misa uso para mis proyectos:

  1. Unsplash
  2. Pixabay
  3. Pexels
  4. Stocksnap.io
  5. Magdeline
  6. Picography.co
  7. Stockvault 

Formatos de imagen

Existen muchos formatos de imágenes, pero recordemos que el uso que vamos a darle es para web y algunos formatos como WebP, JPEG XR no son soportado por todos los navegadores.

Para subir imagenes a tu web asegúrate de que el formato sea JPG o PNG ( imágenes con fondo transparente).

  • JPG

Los principales beneficios de este formato son que muestra  millones de colores y es el formato que deberán usar aquellas imágenes complejas, que incluyen muchos colores y que necesitan altos niveles de compresión.

**Usa solo el formato JPG para fotografías grandes**


Aunque las imágenes guardadas en este formato se mantienen bien cuando se comprimen, también son susceptibles de perder  calidad después de optimizar las imágenes. Lo bueno es que JPEG te permite tener varios niveles de compresión. 

  • PNG

Los formatos de imagen en PNG tienen la ventaja de admitir la transparencia en la imagen, además de que al igual que los JPEG también permiten  la muestra de millones de colores en sus imágenes. 

**En general puedes guardar todas tus imágenes web en png ( logo, botones, iconos…)

Si exportas en PNG podrás guardar en PNG- 8 comprimiendo la imagen en un máximo de 256 colores, o en PNG-24 alcanzando los 16 millones de colores.

  • Gif

El formato Gif es un formato sin pérdidas que se usa para mostrar animaciones. Si usas imágenes estáticas nunca debes usar el formato GIF.

Además, NO es muy recomendable subir GIF a tu web, en todo caso, lo mejor es que is necesitas animar una imagen o texto lo hagas mediante  código CSS. Por otro lado, los formatos GIFs  admiten 256 colores y la transparencia.

 

Tamaño de imagen

Los píxeles o pulgadas a los que debes guardar una imagen siempre dependerán del propio diseño de la web y del tamaño de la pantalla.

Si tienes un espacio de 300 px para poner una imagen, no debes subir una imagen de 900 px. Y por el contrario, si vas a usar tu imagen en el slider o cabecera de tu web y debe ocupar todo el ancho, por ejemplo 1.980 px, no podrás subir una  imagen de 2.800 px.

Debes tener en cuenta que lo más importante para una foto se vea bien en web es que tenga las dimensiones en píxeles suficientes.

¿Qué puedes hacer para conocer el tamaño al que necesitas pasar tu imagen? Usar una sencilla herramienta que puedes añadir a tu navegador como es Page Ruler. 

Page Ruler es una extensión gratuita y sencilla, donde solamente tendrás que arrastrar y soltar encima del espacio de la web que quieres medir.

 

Calidad de compresión

Además de usar un tamaño de imagen acorde al que necesitamos, otro aspecto a tener en cuenta es la compresión que tendrá la imagen. Puede tener una compresión alta, media, o baja.

Siguiendo el punto anterior, la forma de proceder una vez tenemos nuestra imagen en el tamaño adecuado sería ir a Photoshop y exportar la imagen a formato web heredado y guardarla bien en PNG o JPEG.

Si no tienes o no sabes usar Photoshop tienes otros programas gratuitos como:

⚡️Photophea

⚡️Gimp

o usar compresores online gratuitos de imágenes como son

⚡️Optimizilla

⚡️IloveImg Compresor

 

Nombre, título y ALT en imágenes web

Cuando vayas a guardar una imagen recuerda que debes atender a ciertos aspectos SEO, como es el título con el que vas a nombrarla y el ALT de la imagen.

Lo primero de todo será nombrar la imagen correctamente. No uses cosas como dfjhdsjkfhdsjkf.jpg  Pon siempre una descripción sencilla o aquello que represente la imagen sin usar tildes ni la letra ñ.

Ejemplo: fotografia-retrato-logrono.jpg 

Cuando la subas a WordPress recuerda añadirle la etiqueta ALT( texto alternativo de la imagen) se trata del texto que se muestra en la web en caso de que el navegador no sea capaz de visualizar la imagen.

Para nombrar correctamente el ALT de la imagen deberás especificar la palabra clave de la imagen.

Ejemplo: Fotografía de bodas en Logroño

Por otro lado, nunca está de más que le añadas también el título de la imagen, que representa el texto que se muestra si pones el cursor encima de esta. En este caso deberás poner una descripción de la imagen.

Ejemplo: foto de recién casados en Logroño

 

Plugins de optimización de imágenes

A continuación te dejo algunos plugins que pueden ayudarte a comprimir y optimizar las imágenes de tu WordPress

⚡️ShortPixel

⚡️Ewww image Optimizer

⚡️Optimizador.io

⚡️Lazy Load

⚡️Imsanity

 

Los pop ups webs: Qué son y para que sirven

Un pop up web no deja de ser una ventana emergente que aparece al usuario cuando está x tiempo en tu web. Puede aparecer en la home, solo en las entradas del blog, a modo banner entre el texto del artículo del blog, en la barra lateral del blog, u ocupar toda la pantalla una vez accedes a un url de la web de destino. Es un formato muy usado en el marketing que tiene como objetivo resaltar un producto, servicio, o información para captar el email de visitante.

No obstante, para que sean efectivos hay que hacerlos de forma que no sea intrusiva ni moleste al usuario. Por eso, vamos a ver cuáles son las mejores herramientas para que puedas crear de una forma sencilla tu pop- up web y puedas personalizarlo a tu gusto.

ejemplo de pop ups

Herramientas recomendadas para crear tus pop ups webs

 

Thrive leads es un plugin que se integra en WordPress y permite crear pop ups, editándose a tu gusto y ubicarlos en diferentes secciones y páginas. Los beneficios que tiene Thrive leads es que su editor es sencillo, incluye pruebas A/B y una sección de métricas que permite ver cómo están funcionando y cuántos suscriptores has captado.  Cuenta con plantillas predefinidas ya creadas.

Dentro de sus pop ups podrás usar:

1.Thrive Boxes. Una caja que incluye el pop up y aparece como ventana emergente encima del contenido.

2. Ribbon. Cajetilla en rectángulo que va de un lado al otro de la pantalla y se ubica en la parte superior de la pantalla, permaneciendo visible a medida que el visita hace scroll en la página.

3. In Line. Formularios que se insertan automáticamente en la parte inferior de las publicaciones del blog o entre los párrafos.

4. Slide In. Cajetilla de formulario que aparece en la esquina inferior de la página cuando el usuario hace scroll.

5.Opt-in Widget. Formulario que permanece visible en la barra lateral del blog

6.Scrren filler Overlay. Formulario que aparece a pantalla completa cuando el usuario está navegando en la web.

7.Content lock. Este formulario incluye contenido restringido el cual solo se envía si el usuario se registra y deja su email.

8.Scroll Mat. Cajetilla de relleno de pantalla que aparece desde la parte superior de la página y empuja el contenido hacia abajo.

9.Multiple Choice foms. Este tipo de formulario pide la involucración del lector ofreciéndole la opción de sí o no dentro de la cajetilla del formulario. En cuanto al precio, te dejo aquí las diferentes modalidades.

 

 

precio thrive leads

 

Convert pro es otro creador de pop ups que cuenta con un sencillo editor de arrastrar y soltar. Igual que Thrive leads cuenta con una biblioteca de plantillas predefinidas y pruebas A/B. Además podremos hacer pruebas de variables,  creando diferentes versiones de formularios y probarlas juntas. Convert Pro es el que uso actualmente en muchomaslibre.com y la verdad es que estoy muy contenta.

Con Convert Pro te permitirá crear diferentes tipos de pop ups:

1.Slide: La cajetilla parece en un lateral de la web

2.Before/After: Se incluye o bien al inicio o final de un artículo del blog

3.Info bar: Se muestra en formato de barra formativa en la barra superior de la web

4.In content: Mediante un short code, podemos añadir la cajetilla en cualquier parte de nuestra web.

5.Widget Box: Se añaden en el apartado que nosotros hayamos habilitado para widgets en nuestra web.

6.Pop Up: La cajetilla salta tras el tiempo que nosotros previamente hayamos marcado

 

Su precio es de 399$ un único pago para siempre o 99€/ año.

 

Aunque sumoMe es una multi herramienta con 10 aplicaciones dentro de un solo plugin (redes sociales, analítica web,  captación de emails, etc). Ahora  solo vamos a centrarnos en captación de emails. Lo mejor de este plugin es que es gratuito y sencillo. Al igual que con los otros dos plugins premiums de los que hablamos, con SumoMe tenemos la opción de crear 4 tipos de pop ups:

1.List Builder: Podrás crear una cajetilla o ventana emergente en cualquier página de tu web.

2.Scroll Box: Se creará una cajetilla de pop up en el lateral inferior de tu web.

3.Smart Bar: Se creará una barra de suscripción en formato horizontal.

4.Leads: Esta parte solo se incluye en la parte premium del plugin. Con esta modalidad puedes ofrecer pdfs o documentos descargables a los suscriptores.

 

precios plugin sumo

 

 

 

 

 


Si te ha gustado, deja tu valoración

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 5,00 de 5)
Cargando…

Pin It on Pinterest

This Area is Widget-Ready

You can place here any widget you want!

You can also display any layout saved in Divi Library.

Let’s try with contact form: