Si eres una persona creativa que te gusta el diseño web y te gustaría vivir como freelance trabajando desde casa debes saber una serie de cosas antes de empezar o corres el riesgo de cometer errores muy habituales que acaben haciendo que no consigas clientes y que abandones tu sueño.
En mi Curso de diseño web online para principiantes explico paso a paso las mejores estrategias, sistemas, métodos de trabajo, presupuestos, cómo poner buenos precios, como multiplicar ventas, etc. pero hoy quiero ayudarte dándote los consejos que me hubiera gustado escuchar cuándo empezaba.
Mi nombre es Gonzalo de la Campa, he diseñado más de 200 páginas web en WordPress, tengo más de 4.000 suscriptores, más de 100.000 visualizaciones en YouTube… y afortunadamente hoy vivo haciendo lo que me gusta, trabajando desde casa menos de 6 horas al día y felizmente casado y con 2 preciosos hijos de 4 y 7 años de los que puedo disfrutar sin estar agobiado por no tener ingresos o no tener tiempo.
En este post te voy a contar los consejos principales que debes saber antes de empezar, así quizá pueda ayudarte como me habría gustado que me ayudaran a mi cuándo me quedé en el paro con un hijo de 6 meses y empecé formarme como freelance de diseño web.
#CONSEJO 1: Formación, formación y formación.
Cuánto más preparado estés…:
Menos tardarás en conseguir clientes
Mejores webs diseñarás y más te recomendarán
Serás más rápido diseñando y tendrás un negocio más escalable
Podrás ganar mucho más dinero en menos tiempo
Menos tendrás que invertir en captar clientes porque ellos irán a ti
Mejor posicionado estarás en Google
Mejor valorado estarás en tu sector y te verán como un referente
etc.
Todo esto es imposible conseguirlo “a lo cutre”, es decir, viendo vídeos gratuitos y desordenados en YouTube como un pollo sin cabeza.
No solo debes formarte en saber diseñar y hacer diseños de páginas webs de calidad que ayuden a generar ingresos a tus clientes sino que es vital aprender cómo conseguir clientes, cómo ofrecer presupuestos para que quieran trabajar contigo, qué fases de diseño debes realizar para evitar diseños interminables en los que pierdas tiempo y dinero, etc.
#CONSEJO 2: Diseña una página web perfecta
Si tienes un restaurante, eres abogado o psicólogo te podrías permitir tener una web “como todo el mundo”, pero siento decirte que si te vas a dedicar al diseño web como freelance debes tener una web perfecta.
¿Cómo es una web perfecta?
Debe estar hecha con las mejores herramientas: WordPress, Divi…
Debe seducir a tu cliente en menos de 5 segundos
Debe cargar rápido (en menos de 2 o 3 segundos)
Debe tener un diseño atractivo
Debe tener un copy convincente dónde el cliente sepa cómo vas a solucionar su problema
Debe generar confianza y autoridad para que los clientes quieran contratarte a ti y no a otro
Debe tener llamadas a la acción para que sea fácil contactarte.
etc.
Si no sabes diseñar mi consejo es que aprendas a diseñar con las herramientas que mejores diseños web te permitan hacer en el menos tiempo posible para poder tener un negocio sano y escalable.
Yo aposté hace muchos años por WordPress y por el Tema Divi y no puedo estar más contento de la decisión que tomé ya que me pemite diseñar webs de entre 700 y 1000 euros en un solo día. Imagina lo que se podrías ganar al mes si haces webs de 1.000 euros en uno o dos días.
Y eso es posible gracias a WordPress y Divi. Aquí tienes información sobre el Tema Divi de Elegant Themes por si quieres profundizar en este tema.
#CONSEJO 3: Vas a necesitar soporte, no lo olvides.
Cuando empieces a diseñar webs con WordPress y consigas tus primeros clientes te vas a encontrar con un montón de problemas, incidencias, baches que te harán perder muchísimo tiempo y pueden hacer que desesperes.
Lo sé de buena tinta, yo mismo he llegado a llorar, literalmente, con algunos clientes cuándo empezaba porque no sabía cómo hacer cosas que me pedían o resolver problemas cuándo una web se caía o por alguna incompatibilidad desaparecía todo o salía un error que no tenía ni p… idea de resolver.
Esto te va a pasar.
Si piensas que va a ser todo de color de rosa te equivocas. Un deportista sabe que en su carrera se va a lesionar varias veces, un cocinero que se le van a quemar platos y un abogado que va a perder juicios, pues un diseñador web debe saber que va a tener problemas y que va a necesitar ayuda para resolverlos.
Por eso yo en mi curso para diseñadores web profesionales quiero dar esa ayuda a todos mis alumnos para que no lo pasen tan mal como yo lo pasé en algunas ocasiones.
#CONSEJO 4: Define tus servicios como un PRO
Esto es vital.
De hecho en mi cuso de Diseño Web Profesional Online dedico un módulo entero a esto.
Si no defines bien tus servicios corres un alto riesgo.
Estas son las cosas que pueden pasarte si empiezas a ofrecer servicios de diseño web sin tener una buena estrategia:
Ofrecerás servicios que no dominas y bajará tu calidad
Pensarás que para conseguir clientes debes bajar precios y atraerás a clientes malos
Perderás clientes
No te verán como un auténtico especialista
Perderás mucho tiempo
Necesitarás contratar a terceros perdiendo margen
No sabrás diferenciar un buen cliente de uno malo
etc.
Por eso es vital que sepas:
Si es mejor ser especialista y generalista y por qué
Es vital que sepas que servicios debes ofrecer y cuáles no,
Es vital que sepas cómo debes poner los precios, si deben ser públicos o no
Cómo hacer para que te contraten páginas web a precios altos y atraer a los clientes que valoren tu trabajo
Cómo ofrecer servicios que se vendan solos
Buenas estrategias para trabajar con colaboradores y tener ingresos extra
etc.
#CONSEJO 5: Usa estrategias para disparar tus ventas
Este es otro de los módulos de mi Curso para diseñadores web profesionales dónde dedico muchas lecciones a explicar estrategias que yo llevo usando años y que me funcionan a las mil maravillas.
Afortunadamente, estas estrategias que aprendí cuándo empezaba me han ayudado a no necesitar miles de visitas y miles de solicitudes de presupuesto para conseguir clientes.
Es decir, cuánto mayor sea tu tasa de conversión, menos tiempo tendrás que gastar en salir a buscar clientes porque la mayoría de los clientes que contacten contigo querrán que seas tú quién les diseñe la web.
Si un cliente siente que el valor de lo que le ofreces es muy superior al precio que le pides (aunque el precio sea alto) querrá trabajar contigo, esto te lo garantizo.
Por ello es fundamental que sepas:
Preparar un presupuesto de diseño web perfecto
Aprender a generar ingresos recurrentes con cada nuevo cliente que tengas.
Estrategias para convertir las solicitudes en clientes (esto es clave)
Los guiones que debes usar para multiplicar tus conversiones y tus clientes.
#CONSEJO 5: Antes de diseñar una web haz todo esto
Un mal diseñador web empieza de cero cada vez que le contratan una web y pierde muchísimo tiempo haciendo cosas que podría tener resueltas optimizando el trabajo.
Todo ese tiempo que pierden los malos diseñadores web les impiden aumentar los clientes porque no tienen tiempo y se ven desbordados.
Si tu quieres ser un diseñador web con un negocio sano que te deje tiempo para tu vida, tu ocio, tus amigos y tu famila… debes aprender a tener muchas tareas repetitivas muy bien optimizadas.
Esta es otra de las cosas fundamentales que explico a mis alumnos en mi Curso de diseño web online, del que aprovecho para recordarte que puedes ver por dentro.
Lo que debes saber antes de ponerte a diseñar:
Debes saber como poner límites a tus clientes. Como no aprendas esto estás perdido. No todo vale. Los presupuestos hay que cumplirlos.
Debes usar un buen hosting y dominar este tema. Al principio parece difícil pero aprendiendo 5 cosas lo tendrás todo más claro.
Debes saber cómo diseñar una web cuándo... el cliente ya tiene web y cuándo no tiene web. La forma de trabajar es distinta y debes saber cuál es la mejor forma de diseñar en cada caso.
etc.
#CONSEJO 6: Diseña con una Web Maestra
Esto es un tema clave que te puede ahorrar decenas de horas al mes, cientos de horas al año, miles de horas en tu vida laboral como diseñador web.
Esta es una forma de trabajar muy PRO que muy pocos diseñadores web profesionales utilizan y que te puede hacer posicionarte rápidamente pro encima de tu competencia.
A este tema le dedico también varias lecciones en mi Curso de Diseño Web porque saber preparar una buena web maestra con todas las configuraciones más importantes (de seguridad, velocidad de carga, ajustes, etc.)
Es importante que sepas:
Cómo y por qué debes preparar una Web Maestra
Que veas cómo es una web maestra por dentro (en mi curso de diseño web profesional enseño la mía a mis alumnos)
Cómo migrar una Web Maestra en menos de 5 minutos
Listado de ajustes que debes hacer en tu Web Maestra
etc.
#CONSEJO 7: Usa el mejor método de trabajo para diseñar webs llave en mano
Cuándo vamos a diseñar una página web llave en mano pueden surgir infinidad de problemas y situaciones a resolver.
Esa es la mala noticia. La buena es que el 85% de las veces los problemas que te vas a encontrar son los mismos.
Un buen método de trabajo es vital para hacer buenos diseños web.
El método importa.
Esto también lo explico en mi Curso de diseño web para diseñadores profesionales freelance.
De hecho he asistido a ponencias dónde diseñadores que parecían cracks contaban sus métodos de trabajo y sinceramente y con todos mis respetos, eran una auténtica cagada.
He llegado a salir de Congresos de Diseño Web pensando… como los asistentes apliquen estos métodos van directos al pozo.
Por eso a mis alumnos, no solo les explico un método que funciona sino que les entrego herramientas y plantillas que yo llevo años usando para que puedan usarlas con sus clientes.
Si tu cliente no conoces las fases de su proyecto, si tu no le explicas los procedimientos, te aseguro que puedes ir directo al infierno y si has elegido esta profesión es para ser feliz y disfrutar del diseño web y de tu creatividad trabando desde casa.
Debes saber cosas vitales como:
Las 4 mejores fases para diseñar una web
La toma de datos que te ahorrará horas de trabajo
Cómo cobrar, cuando publicar…
etc.
Conclusión
Fórmate para aprender las mejores estartegias para ser un buen diseñador web freelance o perderás muchisimo tiempo haciendo trabajos de mala calidad y perderás clientes y dinero.
Nunca estés solo o te comerás muchos marrones, es importante que te lances con ayuda, soporte o alguien de confianza cerca que te saque problemas cuándo los tengas. Creeme, los tendrás.
Si quieres que yo te ayude, la mejor manera de que yo esté a tu lado es apuntándote a mi Curso de Diseño Web Profesional, ya que no solo aprenderás de golpe todo lo que yo he aprendido en años sino que podrás descargar mis documentos, etc. y me tendrás de soporte al otro lado del mail para ayudarte.
Si tienes cualquier duda escríbeme el los comentarios y te ayudo de mil amores. Un abrazo!
¿Los shortcodes o códigos cortos son buenos o malos?
Los códigos cortos o shortcodes son como los impuestos que pagamos, parecen malos pero gracias a ellos tenemos sanidad, educación, carreteras, etc.
Esto es lo mismo, gracias a estos shortcodes puedes tener funcionalidades brutales en tu WordPress que te permiten realizar cantidad de cosas de forma sencilla.
¿Cómo afectan los códigos cortos al posicionamiento, velocidad…?
Es importante que sepas que los códigos cortos o shortcodesson invisibles para Google con lo que ni te perjudican ni te benefician a nivel de SEO porque Google lo que ve es el html que genere ese shortcode.
Aunque mucha gente crea que los temas o plugins que usan códigos cortos son perjudiciales o penalizan el posicionamiento, esto es un mito, un error.
Yo mismo tengo webs con cientos de palabras clave en 1º página y posiciono a mis clientes en menos de 1 mes usando siempre el tema Divi, que es una maravilla para posicionar en Google.
Es una pena que haya gente que se decante por otros temas de WordPress solo por los códigos cortos que es algo que, como veremos, podemos resolver en 1 minuto si algún día dejamos de usar el tema Divi, o cualquier tema o plugin.
Es decir, usa el tema que te guste más ya sea Divi, Avada, Generate Press, Astra o el que te de la gana, pero no por los códigos cortos.
Elegir un tema o plugin porque use o no códigos cortos sería como comprar un coche porque te gusta el color de la tapicería.
¿Cómo eliminar shortcodes de Divi, Avada, Contact Form o cualquier tema o plugin?
Hay muchas maneras de eliminar estos códigos cortos, igual que hay muchas maneras de barrer una casa (escoba, aspiradora…) pero hoy te enseñaré la más sencilla de todas.
Si lo que quieres borrar son los códigos cortos de Divi porque vas a cambiar de tema debes saber antes que si en el nuevo tema instalas el plugin Divi Builder no necesitas borrar los códigos cortos y conservarás todos tus diseños en el nuevo tema que uses. En este tutorial de Divi tienes más información.
Instala el plugin Shortcode Cleaner
Si te vale con ocultar los códigos cortos pero quieres conservarlos en la base de datos de WordPress porque algún día puedes querer volver a utilizar esas funcionalidades que te han aportado, entonces te vale con la versión gratuita del plugin Shortcode Cleaner.
Si quieres borrar los códigos cortos también de la base de datos de WordPress, entonces tienes que comprar la versión pro del plugin. Pero no te preocupes que no llega ni a 20 euros. Es decir te va a ahorrar mucho trabajo por muy poco coste.
Mira aquí todo lo que t permitesste plugin y todas las diferencias entre la versión gratuita y la pro:
Shortcode Cleaner te permite
Ahorrar tiempo quitando del contenido los códigos cortos rotos.
Cambiar entre temas y complementos sin preocuparte.
Limpiar tu contenido automáticamente sin un clic, solo actívalo.
Limpia el contenido de administración del editor de fondo.
Limpia el contenido en una base de datos.
Limpia los códigos cortos rotos que quedan del generador de páginas (Visual Composer, Divi … etc.).
Muessra el estado de códigos cortos rotos en la barra de administración.
Obliga a los códigos cortos activos a romperse [inactivos].
Limpia un número ilimitado de publicaciones, páginas [en lugar de solo 100 en la versión lite].
Agregua nuevos filtros de contenido del sitio frontend personalizados.
Utiliza los filtros de contenido de administración WP de backend predeterminados.
Agregua nuevos filtros de contenido de administración de back-end personalizados.
Más opciones de control para desarrolladores.
Actualizaciones de por vida y soporte con compras únicas.
Elimina los shortcodes en 1 minuto
RECUERDA HACER SIEMPRE COPIA DE SEGURIDAD ANTES DE BORRAR NADA. No vaya a ser qe pierdas cosas que no quieres perder.
Si te vale con e plugin gratuito y con ocultar los códigos cortos (recuerda que no afectan al seo) entonces instala Shortccode Cleaner Lite y a correr. ¿Dije en un minuto? en 1 segundo ya los has eliminado jeje Además no hace falta que configures nada, con activarlo te vale.
Si quieres borrarlos definitivamente, simplementee compra el plugin Shortcode Cleaner y ve a SETINGS > GENERAL y activa enable cleaner on the backend o sigue esos sencillos pasos del vídeo dónde lo verás muy claro:
No me lo digas… no te carga la página del editor, no te deja guardar una página que estás editando o algo por el estilo ¿no?
Tranquil@, es muy fácil de resolver. 😉
Recuerda siempre antes de hacer nada de lo que te pongo por aquí hacer una copia de seguridad. Estos siempre es lo primero para toquetear tranquilo.
Problemas más habituales (con fácil solución)
Divi te muestra un pop up que te dice algo así:
No se ha podido guardar: Descarga copia de Seguridad o Volver a intentar
Limite de tiempo de Divi Builder
No se puede cargar el diseñador
etc.
¿Te suenan popups como estos?
Te lo explico todo en este vídeo
Si eres de los que te da pereza leer tienes este vídeo dónde te lo explico y si eres de los que prefiere leer a ver vídeos lo tienes todo super detallado en este post.
El 90% de las incidencias tienen la misma solución: Tu Hosting.
Normalmente los hostings capan muchas cosas (tiempos de ejecución, limites de subida de ficheros, etc.) y Divi necesita ciertos recursos mínimos para funcionar correctamente.
Todos los Programas punteros necesitan unos requisitos mínimos. Por ejemplo si instalas la última versión de Photoshop… en un ordenador antiguo verás que no funciona, lo mismo pasa aquí.
¿Cómo saber qué requisitos mínimos debo ampliar?
Divi lo pone muy sencillo. Ya en las últimas versiones incorpora una pestaña llamada SUPPORT CENTER.
Entra en Support Center y mira qué recomendaciones te da y cuántas tienes en rojo. Esas son las que debes arreglar.
Pulsa en SHOW FULL REPORT para ver el reporte completo, si quieres, y ver qué requisitos cumple tu hosting y cuáles no.
Como puedes ver el primer valor es lo que tienes actualmente en tu hosting y el segundo valor que ves después de We recommend… es el que deberías tener para que todo te funcione correctamente.
¿Cómo ampliar los valores en el hosting para cumplir los requisitos mínimos?
Depende el hosting que tengas contratado tendrás 2 maneras de hacerlo:
Pedir a tu proveedor de hosting que amplíe estos valores
Hacerlo tu mismo (si tu hosting lo permite)
Cómo pedir a tu proveedor de hosting que te lo amplíe:
Esto siempre es lo ideal, así te quitas de líos, sobre todo si no dominas el tema y estas cosas técnicas te asustan un poco.
Haz esto y soluciona tu problema sin complicaciones:
Ve a la pestaña de Divi > Support Center > Copia los valores en rojo > Abre un ticket en tu proveedor de Hosting > Pega esos valores escribiéndoles algo así en el ticket:
Hola, necesitaría que me aumentéis los valores que os indico más abajo a los valores recomendados que podéis ver en cada uno de ellos justo después de WE RECOMMEND…
…y pegas ahí esos valores que has copiado. Te voy a poner un ejemplo PERO TU DEBES COPIAR LOS TUYOS, NO ESTOS DE AQUÍ ABAJO:
IMPORTANTE: Si al subir la versión de PHP a la última ves que te da algún problema pide que te la suban a la penúltima o antepenúltima…
PHP Version
7 – We recommend 7.2 or higher for the best experience. Learn more.
post_max_size
16M – We recommend 64M for the best experience. Learn more.
max_execution_time
90 – We recommend 180 for the best experience. Learn more.
upload_max_filesize
16M – We recommend 64M for the best experience. Learn more.
max_input_time
90 – We recommend 180 for the best experience. Learn more.
max_input_vars
1000 – We recommend 3000 for the best experience. Learn more.
Cómo ampliar los valores mínimos tú mismo:
Antes de que lo intentes hacer tú te diré que hay hosting que no lo permiten y debes pedirselo a ellos.
Si ves que al ir a cambiarlo donde yo te indico, tu hosting no te lo permite, entonces es que debes pedirselo a ellos.
En caso de que ellos tampoco te lo aumenten, entonces es que el hosting que tienes contratado es un poco pobre y quizá es el momento de mejorarlo.
IMPORTANTE: Si al subir la versión de PHP a la última ves que te da algún problema súbela a la penúltima o antepenúltima…
Tanto si usas CPanel como si usas Plesk u otro panel de administración (esto son los paneles de administración habituales que usan los hosting) debes localizar un icono que ponga:
EN PLESK: Una vez dentro de Plesk pulsa en el icono de Configuración de PHP > Ponte encima de cada uno de los valores y escribe el valor recomendado. A veces si lo haces mediante el desplegable no te deja aumentar tanto así que mejor borra el número actual y escribe el recomendado. Ejemplo: Cambia 16M por 64M (Podrás aumentar todos salvo max_input_vars que deberás escribir esto max_input_vars = 3000; en la caja de abajo del todo donde pone Directivas de configuración adicional)
EN CPANEL: Una vez dentro de tu CPanel pulsa en: Selecciona versión de PHP > y arriba a la derecha pulsa en Switch To PHP Options > Ahí verás cada uno de los valores y ve entrando en cada uno de los que te recomienda Divi y cambiando el valor al valor recomendado.
EN OTRO PANEL: Hay hosting como Arsys, Ionos (antiguo 1&1) y algunos otros que desarrollan su propio panel, ahí tendrás que preguntarles a ellos que dónde puedes aumentar estos valores o pedirles que te lo suban ellos.
Una vez ampliados los valores debe quedar algo así
En este ejemplo está la antepenultima versión de PHP (para la fecha en la que escribo este post) porque las 2 últimas daban algún problema. Y tampoco he activado que muestre errores, pero teniendo ok todo lo demás Divi va como un tiro:
Si has aumentado los valores en tu hosting y no se soluciona, prueba esto…
Aunque, como he dicho arriba el 90% de estas incidencias de no poder guardar las páginas de Divi o no poder cargar o recargar el diseñador o el Divi Builder se solucionan ampliando los valores en tu hosting, hay veces que puedes seguir con el problema.
En ese caso vamos a hacer 2 cosas:
Entra como ventana de INCÓGNITO o borra la Caché de tu navegador
Esto debes hacerlo porque quizá aumentando los valores del hosting ya lo hayas solucionado.
Si, como lo oyes, pero lo que puede pasar es que tu navegador te sigue mostrando una página cacheada (esto es una página que guarda en la memoria para cargar más rápido) y al entrar como INCOGNITO o borrar la caché ya accedes a tu web reconociendo este aumento de valores.
Normalmente se entra como ventana de Incógnito pulsando en los 3 puntitos de arriba a la derecha de tu navegador (en Chrome) y abriendo una nueva ventana de incógnito o en esos 3 puntitos en Herramientas > Borrar datos de navegación.
Desactiva los plugins
Esta es otra de las buenas practicas para ver si tus problemas los está creando alguno de los plugins que tienes instalados.
Divi es una joya también en esto.
Con cualquier otro tema tendrías que ir a la pestaña de Plugins de WordPress e ir desactivando uno a uno e ir mirando si se soluciona tu problema. Es la manera de detectar cuál es el causante.
Pero con Divi te puedes ahorrar inicialmente ese paso para saber si alguno de tus plugins es el causante.
Ve de nuevo a Divi > Support Centre y activa SAFE MODE (lo tienes un poco más abajo haciendo scroll).
Ahora ve a ver si se ha arreglado el problema o persiste.
Si se ha arreglado es que el problema no está en Divi, está en algún plugin que está siendo el causante de la incompatibilidad. Entonces vuelve a desactivar SAFE MODE y ve a la pestaña de Plugins y desactiva 1 a 1 y ve mirando si se arregla. Cuándo desactives el primero mira si se arregla y si no se ha arreglado vuelve a activarlo y prueba con el siguiente, así sucesivamente,
Si no se ha arreglado es que no es ni tu hosting, ni los plugins… entonces si tienes tu licencia de Divi contacta con el soporte de Elegant Themes activando el Acceso Remoto (Remote Access) en Divi > Support Centre o contacta con tu proveedor de hosting o tu webmaster a ver si te pueden ayudar porque puede ser otra cosa.
Cuéntame en los comentarios si has hecho esto que te indico y te ha ayudado o no. Podré ir actualizando este post con otro tipo de incidencias (mientras sean habituales)
Si quieres aprender más sobre Divi ve a mi Curso de Divi o a mi Curso de WordPress Gratis si lo que quieres es dominar WordPress o a cualquiera de mis otros cursos que tienes en la pestaña de CURSOS del Menú de mi web.
Con las nuevas opciones de tamaño arrastrables de Divi, literalmente puedes controlar el ancho, el ancho máximo, la altura mínima, la altura máxima y la altura máxima de cada elemento dentro del propio constructor. Esto te da la libertad para editar para cualquier dispositivo (responsive) de forma sencilla.
Todo esto suena bien, pero ¿cómo se traduce esto en una web? Eso es exactamente de lo que vamos a hablar en este post. Comenzaremos explicando primero la diferencia entre todas las propiedades de altura y anchura disponibles dentro de la configuración de Divi y luego las usaremos en diferentes escenarios para hacer que nuestros diseños de página se comporten exactamente de la manera que queremos.
¡Vamos a ello!
Entendiendo la diferencia entre las distintas propiedades
Antes de utilizar el ancho y el ancho máximo en nuestros procesos de diseño diarios, es importante entender lo que hacen. Esto es lo que la explicación teórica es:
Ancho: el ancho real de un elemento de diseño. Si esto es 100%, es tan ancho como el contenedor lo permite. El ancho generalmente se expresa usando %. Cuanto menor sea el porcentaje para el ancho, más estrecho será el elemento de diseño.
Ancho máximo: el ancho máximo tiene poder sobre el ancho. Si el ancho de un módulo se establece en 100%, se adherirá a ese valor siempre y cuando se mantenga por debajo del valor de ancho máximo. Una vez que se alcanza el valor de ancho máximo, no lo excederá.
Pero, ¿cómo se traduce eso en diseño responsive? Para ayudar a explicar la diferencia, vamos a crear una comparación visual habilitando el Visual Builder en una página completamente nueva. Agregaremos una sección con una fila de una columna. Luego, insertamos un módulo de texto con algo de contenido, un color de fondo y un relleno personalizado.
Cambiando el ancho
Cuando cambia el ancho del módulo de texto al 80%, verá que el módulo de texto se reduce de tamaño. También se muestra la posibilidad de alinear el módulo como desee.
Cambiando el ancho máximo
Cuando cambia el ancho máximo, el valor asignado solo comenzará a aplicarse desde el momento en que el ancho real exceda el valor del ancho máximo. Vamos a demostrar que realmente rápido:
No excedido
Excedido
Además del ancho y el ancho máximo, también podrás encontrar la altura mínima, la altura y la altura máxima en la configuración de tamaño de cada elemento. Esto es lo que teóricamente puedes entender de estos términos:
Altura mínima: la altura mínima que desea asignar a un elemento. Si este valor es mayor que la entrada de altura, la entrada de altura mínima dominará.
Altura: esto define la altura real que desea asignar al elemento.
Altura máxima: este valor se convierte en la nueva altura una vez que la altura supera el valor asignado a la altura.
Cambiando la altura mínima
Si cambias la altura mínima de un elemento, ese valor se convierte en la norma. Al probarlo, verás automáticamente la altura del cambio del módulo de texto en tiempo real.
Cambiando la altura
Si estás combinando una altura mínima y una altura, deberás asegurarte de que la altura sea mayor que la altura mínima. Si no, la altura será ignorada. En los dos GIF a continuación, podrás ver la diferencia en tiempo real.
No supera
Supera
Cambiando la altura máxima
La altura máxima se hace cargo si supera la altura mínima, pero es más pequeña que la altura. Si, por ejemplo, asignara un valor más alto a la altura mínima que a la altura máxima, la altura mínima dominaría.
Cambiar el ancho máximo para las filas
Una de las mejores prácticas en diseño web es decidir sobre un ancho máximo particular para todo su sitio web. Esto ayuda a que todo se vea receptivo en diferentes tamaños de pantalla. También ayuda a los diseñadores a crear wireframes precisos.
Cambiando el ancho máximo global
Puede o no saber que puede establecer un cierto ancho máximo predeterminado para su contenido en el Personalizador de temas yendo a la Configuración general y continuando a la Configuración de diseño. Mantener el ancho máximo persistente ayuda a potenciar la capacidad de respuesta.
Cambia el ancho máximo para una fila en particular
Con la nueva actualización de tamaño arrastrable, también tienes la oportunidad de definir individualmente un ancho máximo para filas. Esto es ideal para las excepciones donde tiene más sentido ir con un ancho máximo más alto.
Dando módulos a la misma altura
Otra técnica que debes tener en cuenta se centra en dar la misma altura a elementos similares. Esto es estéticamente agradable a la vista y ayuda a los visitantes a buscar contenido fácilmente. Hay dos formas comunes de abordar esto:
Usando el igualador de columnas
El primer método es uno que ha estado con Divi durante mucho tiempo. Si deseas crear la misma altura para cada una de las columnas de su fila, puedes habilitar el Igualador de columnas en la configuración de tamaño de su fila. Si estás utilizando colores de fondo de columna, notarás rápidamente la diferencia.
Asignar altura a cada módulo
Otra forma de abordarlo es asignando una altura predefinida a los módulos que estás agregando.
Alinear contenido dentro de un módulo
Una vez que hayas asignado una altura a todos los módulos, también puedes jugar con la alineación del contenido. Para hacerlo, puedes usar un relleno personalizado para determinar manualmente el espacio en blanco en un módulo, o usar unas pocas líneas de código CSS para alinear automáticamente el contenido.
display: flex;
flex-wrap: wrap;
align-content: center;
Eligiendo la altura o anchura del elemento de diseño y el desbordamiento de giro en desplazamiento
Otra cosa interesante que puede hacer con las nuevas opciones de tamaño arrastrables es convertir el desbordamiento en desplazamiento. Esto te ayudará fácilmente a ahorrar espacio en tus páginas y agregará interacción adicional. Hay dos pasos para esto; configura una altura para tu elemento y cambia el desbordamiento en la configuración de visibilidad. Comienza por cambiar la altura de tu módulo o elemento.
Luego, ve a la configuración de visibilidad de tu elemento y cambia el desbordamiento vertical en desplazamiento.
Creación de una sección de pantalla completa en todos los tamaños de pantalla
¡A la siguiente y última sugerencia! ¿Quieres crear una sección de pantalla completa? Abre la sección en tu página, ve a la configuración de tamaño y cambia la altura. Es importante que uses la unidad de ventana de altura para esto para asegurarte de que todo sigue respondiendo en todos los tamaños de pantalla.
Altura: 100vh
¿Deseas alinear centralmente el contenido en tu sección de pantalla completa? Agregua también las siguientes líneas de código CSS personalizadas al elemento principal de tu sección:
display: flex;
flex-wrap: wrap;
align-content: center;
Conclusiones
En esta publicación, he revisado las nuevas opciones de ancho y altura que vienen con la actualización de tamaño arrastrable de Divi. Te he mostrado cómo funcionan y cómo puedes usarlos para crear un diseño de página responsive para cualquier tipo de sitio web que estés creando. Si tienes alguna pregunta o sugerencia, ¡deja un comentario en la sección de comentarios!
Si quieres aprender más sobre Divi y conseguir más regalos de Divi, apúntate a mi Curso de Divi y te ayudaré de primera mano.
Montar una Academia Online es mucho más fácil de lo que piensas.
Si estás queriendo vender o crear cursos online y estás dudando si usar plataformas externas como Udemy, Hotmart, etc. o tener la Academia integrada en tu propia web, este articulo puede ayudarte a decidir.
Nadie que tiene una web en WordPress se plantea tener el blog en una plataforma externa ¿no? Pues con las academias online es lo mismo.
Si yo hubiese usado plataformas para crear cursos online hoy habría perdido más de 10.000 euros en comisiones.
Llevo desde 2015 vendiendo cursos online y ya cuento con más de 1.000 alumnos entre mi web de www.cursowp-online.com y la de www.emprendit.online (donde ayudo a emprender en Internet con mi sistema DIT: Do it together)
En mi curso de Crear Academias online automatizadas explico a mis alumnos esto que te voy a contar hoy y muchas cosas más, para que puedas hacerlo de forma sencilla siguiendo mis vídeos donde te lo explico todo paso a paso y con mi ayuda al otro lado del mail.
Para ayudarte te he preparado este vídeo, porque la mayoría de las personas que acaban decidiéndose por tener su escuela online fuera de su web es porque piensan que es muy complicado tenerlo dentro de su página web en WordPress.
Hoy acabaremos con ese mito y tú mismo verás como puedes montar tu academia online en WordPress en solo 20 minutos.
Pasos para montar tu academia online
1. Instala el plugin Sensei (para Academias online)
Solo instalando este plugin tendrás la mitad del trabajo hecho. Ya tendrás toda una plataforma compeltísima para crear cursos, módulos, lecciones, cuestionarios o exámenes, etc.
Puedes usar muchos plugins o incluso montar tu escuela online a mano picando código, pero si eres de los que no te quieres complicar la vida y además tener el que para mi es, posiblemente, el mejor plugin para crear academias online, entonces no te lo pienses mucho, apuesta por SENSEI.
Sensei está desarrollado por Automatic, de Matt Mullenweg, creador de WordPress y de WooCommerce. Con lo que será casi imposible que este plugin presente incompatibilidad alguna o problemas con WordPress.
2. Configura Sensei
Estas configuraciones que explico con detalle en el vídeo de más arriba no te llevarán más de 5 minutos.
Solo con este primer check ya estás protegiendo tus cursos para que solo se pueda acceder desde un área privada para que solo quienes lo compren puedan verlo.
3. Instala WooCommerce
Con WooCommerce tendrás la otra mitad de tu academia. Con esta joya de WordPress podrás configurar tus pasarelas de pago en pocos minutos. Mi consejo es que permitas el pago con tarjeta con Stripe y adicionalmente (si quieres) también PayPal.
Usar WooCommerce te permitirá hacer miles de cosas a futuro que hoy ni siquiera te imaginas:
Vincularlo de forma sencilla a Mailchimp u otra herramienta de newsletters y así tener segmentados a tus alumnos para enviarles información de forma sencilla.
Permitir pagos a plazos en cuestión de segundos, instalando el plugin WooCommerce Suscriptions. Lo explico en mi curso y puedes descargarlo gratis en él.
Montar un Membership Site simplemente instalando el plugin WooCommerce Membership tal y como explico en mi curso, dónde también podrás descargarlo.
Ver informes de ventas super detallados sin tener que hacer nada. En WooCommerce > Informes podrás ver tus ventas de cursos, filtrar por periodos y por lo que quieras para tomar decisiones.
Crear cupones de forma sencillísima para estimular las ventas de cursos haciendo campañas, webinars o lo que quieras.
Integrarlo con sistemas de afiliados.
etc.
4. Configura WooCommerce
Esto te resultará sencillísimo. Tal como puedes ver en el vídeo de más arriba que te he preparado, WooCommerce tiene un asistente donde solo tendrás que rellenar algunos datos y seleccionar otros e ir dando a siguiente.
Lo único que puede tener un poquito más de miga es poner los impuestos y darte de alta en Stripe y/o Paypal pero es algo que siguiendo los pasos correctos te puede llevar 10 minutos como mucho.
Para vincular Stripe con tu web solo tendrás que copiar 2 claves y pegarlas en tu web, un copia pega vamos. Y con PayPal, una vez te des de alta solo tendrás que poner el email en WooCommerce y listo. Está todo puesto a huevo para que sea lo más sencillo posible.
Ya tienes montada tu academia en WordPress
Una vez hayas hecho eso ya tendrás montada tu academia. Esa es la parte más sencilla. Ahora empezará lo más complicado, y lo que tendrás que hacer sí o sí tanto si hubieses elegido una plataforma de cursos externa como si lo tienes todo en WordPress, que se resume en:
Validar tu curso. Puedes prevenderlo antes de crearlo, hacer tests. Esta es la mejor opción para no liarte a grabar vídeos como un mono y correr el riesgo de que luego no te los compre ni Perry.
Grabar el curso y prepararlo. Esta suele ser la parte más laboriosa. Grabar los vídeos, saber con qué programas hacerlo, saber comunicar para que tus alumnos disfruten y les ayudes a solucionar su problema, prepararles documentación, descargables, hojas de trabajo… alojar tus vídeos de manera correcta para que solo puedan acceder tus alumnos, etc.
Publicar el curso en tu web. Crear una página de venta del curso con un buen copy para que se venda solo, tener una página de caja bien optimizada para no perder ventas en el proceso de compra, tener buenas llamadas a la acción, demostrar autoridad, etc.
Promocionarlo para venderlo de forma automatizada. Crear un embudo de ventas para tener un sistema 24×7 que lleve potenciales alumnos a tu web. Montar un sistema de Afiliados para que otros vendan tus cursos por ti a cambio de una comisión. Trabajar un buen Inbound Marketing y SEO…
Todo esto que te cuento no lo digo como algo teórico, lo digo porque es algo que vivo cada día, algo con lo que disfruto y algo que desde hace ya varios años me genera ingresos en piloto automático permitiendome dormir tranquilo.
Desde que decidí emprender cuándo me quedé en el paro con mi hijo con 6 meses y al poco mi mujer se quedó en el paro, esto de crear cursos online es, sin duda lo que mejor he hecho.
Hoy mi hijo ya tiene 6 años y mi hija 3 y no te imaginas la tranquilidad familiar que supone saber que además de ayudar a miles de alumnos tenemos unos ingresos recurrentes que nos permiten vivir tranquilos.
Si quieres que te ayude más todavía, será un honor para mi tenerte entre mis alumnos.
Un fortísimo abrazo y si tienes alguna duda escríbeme en los comentarios del post.
