En este vídeo que tienes más abajo te explico una joyita que ha salido en las últimas versiones del plugin Sensei y que te puede ahorrar muchas horas de trabajo al año.
Cómo ya he dicho muchas veces en mi blog y mi Canal de YouTube Sensei es para mi el plugin más completo y potente de WordPress para crear Academias Online.
Y ahora más aún permitiendo asociar o vincular un curso a varios productos.
En el vídeo te explico porque esta actualización es tan cojo… 😉
Cada vez que salga una nueva actualización, ya sea de Divi como es en este caso, sea de WordPress o sea una actualización de cualquier plugin, mi consejo es que no te emociones y quieras actualizar el mismo día que la lanzan porque es muy habitual que al lanzarla la comunidad les reporte errores o incidencias y si esperas una o dos semanas y actualizas ya te garantizarás que han resuelto muchas de esas incidencias y te evitarás posibles conflictos o incompatibilidades.
Si quieres ser de los primeros y no aguantas la emoción de ver la nueva versión, en este caso de Divi 4.0 con su maravilloso Theme Builder mi consejo es que lo hagas siempre en alguna web de pruebas que tengas para trastear pero nunca en una web en producción o en páginas web que te den de comer.
Y en todos los casos haciendo siempre copia de seguridad por si acaso.
Vídeotutorial del Theme Builder en español
Te dejo un vídeo en abierto de mi Canal de YouTube al que me encantaría que te suscribas, para que conozcas el Theme Builder a fondo.
Si quieres además plantillas para el Theme Builder, Divi para descargar, etc., apúntate a mi Curso de Divi dónde aprenderás pasito a pasito esto y muchas más cosas conmigo de soporte para ayudarte.
Y aquí tienes también un videotutorial de Divi 4 y el Theme Builder en inglés si quieres:
Los Divilovers estamos emocionados
Una vez dicho esto… me toca venirme arriba!!!
El Theme Builder te va a permitir editar con Divi, de forma sencilla partes de la web que antes eran fijas y que no podían editarse de forma visual y sencilla, la única manera era tocando código.
Es decir, este tipo de mejoras te van a dar mucha más libertad para maquetar la cabecera de tu web, el pie de página, las páginas de producto si tienes una tienda online, páginas de categorías, etc. Esto abre un mundo de posibilidades maravilloso.
Puedes acceder al Divi Theme Builder en el backend dentro de tu panel de WordPress en la categoría Divi > Theme Builder.
Personaliza la cabecera, footer… con Divi Theme Builder
Podrás editar con Divi muchas plantillas o páginas de forma masiva. Es decir, que todas las páginas del blog tengan un diseño, que todos los productos de tu WooCommerce tengan un diseño, el que tu quieras…
Ya no hay que ir uno por uno, pero vamos a ver en qué páginas vamos a poder crear estos diseños para que se apliquen o bien en toda la página web o bien solo en unas partes:
En toda la web
De manera predeterminada, hay un elemento de plantilla único denominado DEFAULT WEBSITE TEMPLATE (Plantilla de sitio web predeterminada), que no se puede eliminar, pero se puede modificar.
Esta es la plantilla de tema estándar, y si no se edita:
Las tres áreas usarán los estilos Divi estándar. Es decir, si no añades una cabecera (header) o pie de página (footer) seguira aparecioendo la cabecera de siempre que tengas configurada en el Personalizador del Tema.
Si se editas el área de encabezado de la plantilla de sitio web predeterminada:
El encabezado del tema se reemplaza en toda la web con el contenido personalizado del Divi Theme Builder que hayas diseñado. Lo mismo ocurre con las áreas de cuerpo y pie de página.
Áreas globales
La plantilla predeterminada del sitio web consta de tres áreas: encabezado global, cuerpo global y pie de página global.
Para comenzar el proceso de crear una cabecera, footer…, haz clic en una de las áreas vacías respectivas.
Diseña una cabecera personalizada para toda tu web
Si quieres agregar una cabecera a medida con Divi, haz clic en el área “Agregar encabezado global” y luego selecciona la opción “Crear encabezado global”.
Al igual que cuando diseñas una página en Divi, elije cómo deseas comenzar a construir el diseño. Por ejemplo, puedes iniciar el diseño con un diseño prefabricado o un diseño de encabezado que haya diseñado previamente seleccionando la opción “Elegir un diseño prefabricado”. Sin embargo, si deseas crear el encabezado desde cero, selecciona “Construir desde cero”.
Una vez que hayas seleccionado crear el diseño desde cero, verás el Editor de diseño de Divi. Aquí es donde usarás Divi Builder para diseñar tu diseño de encabezado tal como diseñarías una página o publicación normal con Divi Builder.
Ten en cuenta que lo que veas en este editor de diseño de plantilla será lo que se muestre en el encabezado de su página.
Y si este es un encabezado global, se mostrará en todo su sitio de forma predeterminada, reemplazando el encabezado Divi estándar.
Una vez que hayas terminado de diseñar tu encabezado, asegurate de guardar el diseño antes de salir del editor de diseño de plantilla.
Ahora deberías ver un encabezado global verde que llena el espacio del encabezado global de la plantilla predeterminada del sitio web. El color verde es para recordarle que es global.
Tu web ahora tendrá un nuevo encabezado global que reemplaza el encabezado Divi estándar.
Diseña páginas masivamente
En la mayoría de los casos, no querrás diseñar un área de cuerpo global porque esto cambiaría el diseño de todas las páginas a la vez y serían iguales con lo que no tiene sentido. Esto solo es interesante en algunos casos dónde el contenido sea dinámico.
Ahora lo explico con más detalle…
Puede crear una nueva plantilla con un área de cuerpo de plantilla personalizada para todos las publicaciones de tu blog, eso si tendría sentido. Nunca en las páginas.
De esa manera, no tienes que preocuparte por el diseño de cada nueva publicación o cada nuevo post. Solo necesitas agregar nuevo contenido dinámico.
Por ejemplo, creas una parte superior donde aparezca el título con un formato, colores… y luego en cada post verás ese diseño de forma automática pero cada artículo con su propio contenido.
¿Cómo creamos un diseño para todos los post?
Crear un cuerpo global”: Body Global Body.
Luego lo diseñas como quieras.
Es importante:
Incluir el módulo de contenido de publicación (Post Content) siempre que diseñes el área del body o cuerpo de la plantilla que se aplicará en todos los post para que luego el contenido que se muestre en cada uno sea dinámico y no en todos el mismo.
El módulo Post Content muestra el contenido simulado para facilitarnos la ver como quedará el estilo de todas las publicaciones o artículos que creemos en el blog.
Si no estás utilizando Divi Builder en una página, el módulo de contenido de publicación mostrará el contenido dentro del editor WYSIWYG de una página o publicación en el back-end.
Aquí puedes ver un ejemplo de cómo aparecería ese contenido en el área Global Body de la plantilla.
Si decides usar Divi Builder para editar una página o publicación. El área disponible para el contenido de Divi Builder estará contenida dentro del área designada del módulo de contenido de publicación en el cuerpo de la plantilla.
Es por eso que en la mayoría de los casos no deberías tener un área de cuerpo global para tu web a menos que tengas una razón específica.
Es posible que la creación de un cuerpo global imponga limitaciones innecesarias a tu capacidad para diseñar el contenido de la página en Divi. Así que cuidado con crear Bodys o cuerpos como plantilla para que se aplique en toda la web.
Si decides utilizar un área de cuerpo global para la plantilla predeterminada de su sitio web, es recomendable que te asegures de que el módulo de contenido de su publicación abarque todo el ancho del diseño para que no te limite de ninguna manera al espaciar al diseñar páginas con Divi Builder .
Diseña un pie de página global
Divi Theme Builder nos permite reemplazar el pie de página estándar de Divi (y la barra de pie de página) con un nuevo pie de página personalizado que puedes diseñar completamente desde cero utilizando Divi Builder.
Para crear un pie de página global para nuestra web, simplemente haz clic en el área “Agregar pie de página global” y selecciona “Crear pie de página global”.
Luego usa tu creatividad con Divi Builder para diseñar el pie de página dentro del Editor de diseño de plantillas. No olvides guardar el diseño.
NOTA: También puedes agregar uno de los diseños prefabricados de Elegant Themes al editor de plantillas de pie de página para ahorrar tiempo y usar cantidad de pies de página que ya tienen diseñados. Puedes hacer esto haciendo clic en el icono Agregar desde la biblioteca más en el menú de configuración en la parte inferior del editor.
Una vez que tengas un encabezado global, (cuerpo) y pie de página…, una página de muestra se vería así.
Cuidado con esto: Cuerpo global no es necesario
Como dije anteriormente, el Cuerpo Global no es necesario. Puedes eliminar fácilmente el Cuerpo global haciendo clic en el icono de la papelera.
Sin el Cuerpo global, tienes control total sobre el diseño de tu web utilizando Divi Builder.
Plantillas personalizadas
La plantilla de sitio web predeterminada controla la plantilla predeterminada para todo el sitio.
Sin embargo, las plantillas personalizadas nos permiten anular la plantilla predeterminada y usasr la que nosotros diseñemos.
En otras palabras, las plantillas personalizadas nos permiten crear plantillas para páginas o publicaciones que no quieras que usen la plantilla predeterminada.
Agregar una nueva plantilla
Para crear una nueva plantilla, simplemente haz clic en el cuadro “Agregar nueva plantilla” con el ícono gris más.
Esto abrirá un popup que nos enseña todas las páginas en las que podemos diseñar nuestra plantilla a medida.
Diseñar páginas a medida con Divi que antes solo podían personalizarse tocando código
Usar vs. Excluir
Fijate que en la parte de arriba del popup puedes elegir entre qué páginas quieres que se aplique el diseño que vas a hacer o en qué páginas quieres que NO se aplique.
También podrías combinarlo, que se aplique en xxx páginas pero no en xxx.
Por ejemplo, puedes elegir usarlo en todos los post, pero también puedes excluir un post o artículo específico.
NOTA: Si una selección de inclusión entra en conflicto con una selección de exclusión, la selección de exclusión siempre anula la inclusión. Por ejemplo, si eliges “Incluir en la página de inicio” y “Excluir de la página de inicio”, esta plantilla se excluirá de la página de inicio.
Elije de cualquier plantilla de tema.
También verás que hay plantillas para cada página, publicación y / o archivo. Incluso puedes crear plantillas para las páginas y productos de WooCommerce si tienes instalado WooCommerce en tu web.
Cómo hacer para que los diseños se apliquen en todas las páginas o solo en algunas
Las plantillas se pueden asignar en un nivel macro y / o micro nivel. Por ejemplo, puedes asignar la plantilla a todas las páginas de tu web (nivel macro), o puedes elegir asignar la plantilla a una publicación específica (nivel micro). ¡O ambos! Incluso puedes seleccionar múltiples tareas, lo que nos da un control completo sobre dónde nos gustaría asignar la plantilla.
¿Qué pasa si seleccionamos cosas incongruentes que generan conflicto?
Si asignamos una plantilla a una página que ya está asignada a otra plantilla, la plantilla recién guardada tendrá prioridad y se eliminará la asignación anterior de la otra plantilla. Aparecerá un mensaje de advertencia que te notificará esto antes de guardar la plantilla.
Renombrar plantillas personalizadas
Una vez que se hayan seleccionado todas las tareas, verás un nuevo nombre de plantilla. Al pasar el cursor sobre el área del título de la tarjeta de plantilla, aparece una información sobre herramientas que muestra la lista de todo lo que la plantilla se utiliza o se excluye. Para cambiar el nombre de la plantilla, puedes hacer clic en el nombre de la plantilla para editar el título.
Advertencia de plantilla sin asignar
Si no seleccionas una plantilla, verás un texto de advertencia en lugar del nombre de la plantilla que dice “Sin asignar”.
Áreas de plantillas personalizadas para cualquier página
Al igual que la plantilla predeterminada (o plantilla Global que se aplica a TODAS las páginas), una plantilla personalizada (que se aplica a las páginas QUE TU DECIDAS) también tendrá las siguientes áreas: Encabezado, Cuerpo y Pie de página.
Si la plantilla predeterminada del sitio web tiene diseños de plantilla globales agregados a cualquiera de las tres áreas, esos diseños globales se agregarán automáticamente a la nueva plantilla. Así conservarás los diseños que hayas creado en las nuevas páginas que vayas a maquetar.
Cómo manejar elementos globales en nuevas plantillas
Puedes usar las opciones del área de Plantilla para eliminar el diseño y crear uno nuevo desde cero o deshabilitar global y ajustar el diseño para las necesidades específicas del diseño.
Por ejemplo, si tienes un encabezado global en la plantilla predeterminada del sitio web, tu nueva plantilla heredará ese encabezado global.
Puedes elegir hacer uno de los siguientes:
Puedes usar el encabezado global en tu nueva plantilla. Así por ejemplo si vas a crear una plantilla para los post o productos también tendrán la cabecera o footer que hayas diseñado.
Puedes desactivar Global para poder modificar el diseño de la plantilla personalizada y diseñar una cabecera o footer distintos en los post o productos que vayas a diseñar.
Puedes eliminar el encabezado global y crear el encabezado personalizado desde cero para la plantilla o agregar uno desde la biblioteca.
También puedes dejar el área de Encabezado personalizado vacía que heredará el encabezado del tema Divi estándar.
Agregar una plantilla desde la biblioteca
Para agregar un diseño al área de la plantilla desde la biblioteca, haz clic en el área de la plantilla y selecciona Agregar desde la biblioteca.
Aparecerá la ventana emergente agregar desde la biblioteca donde puedes elegir cualquier diseño de página prefabricado, guardado o existente.
Una vez que el diseño se ha agregado al área de la plantilla, puedes seleccionar el icono de la tuerca para editar el diseño utilizando Divi Builder en el Editor de diseño de plantilla.
Arrastrar y soltar plantillas “Áreas”
Las áreas de plantilla se pueden arrastrar y soltar a otras áreas de contenido de plantilla.
Esta es una manera rápida y fácil de duplicar y colocar un área de plantilla en una acción de arrastrar y soltar.
Es como duplicar en lugar de cortar y pegar.
Opciones de visibilidad del área de plantilla: Ocultar / Mostrar áreas de encabezado, cuerpo y pie de página.
Además de poder personalizar cada área de una plantilla, también puedes alternar la visibilidad de un área para mostrarla u ocultarla en el Front End haciendo clic en el icono “ojo” al lado de cada área.
Por ejemplo, podrías ocultar el Área de encabezado y el Área de pie de página de su página 404.
NOTA: Ocultar un área de plantilla no devuelve el área al valor predeterminado, sino que oculta completamente el área en la parte frontal.
Configuraciones de plantillas personalizadas
Menú de configuración de plantilla
Al pasar el cursor sobre una plantilla dentro del generador de temas, aparecerá un menú de configuración de plantilla en la parte superior izquierda del cuadro de plantilla.
Este menú es muy similar a los menús que ve al pasar el ratón sobre una sección, fila o módulo dentro del Divi Builder.
El menú incluye iconos para las siguientes funciones:
Configuración de plantilla: aquí es donde puedes administrar las asignaciones de plantilla
Duplicar plantilla: esto duplicará la plantilla para iniciar otra plantilla personalizada. Duplicar una plantilla desencadena exactamente lo mismo que hacer clic en la tarjeta Agregar nueva plantilla. La diferencia es que después de definir la configuración de la plantilla, la plantilla generada usa el mismo Área de encabezado, Área del cuerpo y Área de pie de página que la plantilla duplicada.
Eliminar plantilla: esto eliminará la plantilla por completo. Cualquier página, publicación o archivo al que se le haya asignado la plantilla eliminada volverá a la plantilla predeterminada del sitio web y / o al diseño estándar del tema Divi para esa página (si no se crea una plantilla predeterminada).
Exportar plantilla: puedes hacer clic en el icono de exportar plantilla para exportar un archivo .json de esa plantilla específica. Una vez que haga clic en el icono de plantilla de exportación, ingrese un nombre para el archivo de exportación y haga clic en el botón “Exportar plantilla de Divi Theme Builder”.
Más opciones de configuración: el icono de más configuraciones abre una lista conveniente de todas las configuraciones de plantillas disponibles, todo en un solo lugar.
Crear un encabezado personalizado (no global)
La creación de un encabezado personalizado implicará el mismo proceso que la creación de un encabezado global.
Dado que el encabezado es donde tendrás que incluir su menú principal para su sitio web, es importante comprender cómo usar el Módulo de menú al crear la cabecera
Construyendo un cuerpo personalizado
Construir un área de cuerpo personalizado para tu plantilla puede ser una excelente manera de agregar diseño y / o contenido al cuerpo de muchas páginas o publicaciones a la vez. Recuerda que esto es útil para post o productos pero no para páginas, normalmente.
Y si usas contenido dinámico , realmente puedes optimizar el diseño y la funcionalidad de las publicaciones de blog o productos de WooCommerce.
Crear un pie de página personalizado
La creación de un pie de página personalizado implica el mismo proceso que la creación de un pie de página global.
Es importante recordar que cualquier pie de página personalizado agregado a una plantilla anulará completamente el pie de página estándar de Divi, incluida la barra de pie de página inferior.
Guardar cambios con el generador de temas
Guardar y cancelar diseños de plantillas
Cuando termines de crear tu plantilla, es importante que guardes los cambios en la Configuración de la plantilla.
Para hacer esto, debes hacer clic en el botón Guardar en la parte inferior derecha de la página. Si deseas cancelar los cambios realizados en el diseño, simplemente haz clic en el icono X en la esquina superior derecha.
Nota: Si haces clic en el icono X durante un flujo de creación (sin guardar), el diseño de la plantilla no se creará ni guardará.
Guardar cambios de Theme Builder
Al igual que con las Opciones de tema Divi, debes guardar sus cambios en Theme Builder para que esos cambios surtan efecto.
Si actualizas la página o cierras la ventana, los cambios se cancelarán / perderán.
Uso de contenido dinámico dentro del generador de temas
El contenido dinámico (es decir, Título, Imagen destacada, Contenido de publicación, etc.) se puede incluir en los diseños de Plantilla global o personalizada. Esta es una herramienta poderosa que te permite optimizar el diseño y la funcionalidad del sitio web, especialmente para publicaciones de blog y / o productos de WooCommerce.
Creación de una plantilla para las entradas (post) del blog en toda la web
Las entradas de blog son un gran ejemplo de dónde se necesita una plantilla personalizada con contenido dinámico.
Esto nos permitirá diseñar una plantilla de entradas del blog que se aplicará a todas los artículos del blog en toda la web utilizando Divi Builder y contenido dinámico.
Una vez hecho esto, todo lo que necesitas hacer es actualizar el contenido de las entradas futuras. ¡El nuevo contenido de la publicación heredará el diseño de la plantilla personalizada!
Aquí puedes ver un ejemplo rápido de cómo hacer esto:
Primero, crea una nueva plantilla y asigna la plantilla a Todas las publicaciones . Luego agregua un cuerpo personalizado a la plantilla.
Con el Editor de diseño de plantilla, diseña todo el diseño con Divi Builder combinado con los módulos y opciones de contenido dinámico integrados de Divi.
Por ejemplo, puedes usar el Módulo de título de la publicación para mostrar el título de la publicación de forma dinámica.
O utiliza un módulo de texto que extraiga la fecha del artículo.
Lo más importante, debes incluir el módulo Publicar contenido al crear cualquier diseño de cuerpo personalizado para tu plantilla.
El módulo Publicar contenido incluye el área para el contenido de la página o publicación que se mostrará dentro del Área del cuerpo de la plantilla.
Aquí puedes ver una ilustración de un diseño completo para una plantilla de publicación de blog que usa contenido dinámico:
Una vez que se crea la plantilla, puedes crear fácilmente una nueva publicación de blog utilizando el editor de publicaciones predeterminado de WordPress y hacer que esa entrada herede el diseño de la plantilla de publicación de blog que se creó utilizando Divi Theme Builder.
También puedes usar Divi Builder en publicaciones de blog con esta plantilla personalizada.
Funcionará de la misma manera. Lo que construyas con Divi Builder para tu artículo se mostrará dentro del área designada por el Módulo de contenido de publicaciones en el diseño de la plantilla.
Crea una plantilla de producto (de WooCommerce) que se aplique a TODOS los productos automáticamente
El contenido dinámico no solo se aplica a las plantillas de los artículos o entradas del blog. También puede usar los módulos integrados de Divi WooCommerce (o Woo) para crear una plantilla de página de producto personalizada en toda la web.
Para hacer esto, simplemente crea una nueva plantilla y asigne la plantilla a “Todos los productos”. Luego agrega un cuerpo personalizado a la plantilla y haz clic para construir el diseño del cuerpo usando el editor de plantillas.
Luego usa Divi Builder y los Módulos Woo para diseñar la plantilla de la página del Producto.
Ahora, cada vez que crees un nuevo producto en el backend utilizando el editor de página estándar del producto, el producto heredará automáticamente el diseño de la plantilla de cuerpo asignada.
Opciones de portabilidad para plantillas de Theme Builder
Exportar e importar plantillas
Con las opciones de portabilidad del generador de temas, puedes exportar todas o algunas de las plantillas de tema en un archivo. Estos archivos de exportación incluirán todos los diseños de biblioteca asociados con cada plantilla y todos los datos de asignación de plantillas.
Para acceder a la opción de Portabilidad de Theme Builder, haz clic en el icono de portabilidad a la derecha de la barra morada en la parte superior de la interfaz de Theme Builder.
Aparecerá el popup de portabilidad con la pestaña de exportación abierta por defecto.
Asigna un nombre al archivo de exportación, actualice la opción de exportación (si es necesario) y haz clic para exportar el archivo.
Si dejas la opción de exportación para exportar todas las plantillas, todas las plantillas de tema se exportarán en el archivo.
Si anulas la selección de la opción “Exportar todas las plantillas”, verás una lista de opciones que incluye una plantilla específica que puede elegir incluir en el archivo de exportación.
Para importar un archivo json de plantilla de generador de temas a tu web, deberás seleccionar la pestaña de importación. Selecciona el archivo que deseas importar, actualiza las opciones de anulación (si es necesario) y haz clic para importar el archivo.
IMPORTANTE: la importación importa todo, incluso las plantillas asignadas a páginas y publicaciones que no existen en la instalación actual de WP.
Todos los conflictos se resuelven permitiendo que las plantillas importadas anulen las plantillas existentes en el sitio web.
Esto significa que la plantilla predeterminada se anula y todas las asignaciones de página o publicación de las plantillas importadas tienen prioridad.
Por ejemplo, si importas una plantilla asignada a la página 404, eliminará la página 404 de la plantilla actual asignada a la página 404.
Importar y exportar paquetes de creadores de temas completos
Las exportaciones de Theme Builder son lo que llamamos “Paquetes de Theme Builder”. Piensa en ellos como paquetes de diseño Divi, excepto por la estructura general de tu web en lugar de diseños de página individuales.
Los paquetes de Theme Builder eliminan la necesidad de temas hijo en muchos casos y nos permiten crear plantillas de tema preconstruidas que se pueden usar en cualquier sitio web.
Conclusión
Poder usar el Constructor de Divi en lugares donde ante no se podía como la cabecera, el footer, las páginas de producto de WooCommerce, etc. nos abre un mundo de posibilidades maravilloso.
Si quieres aprender Divi a fondo conmigo de soporte para ayudarte entra en mi Curso de Divi y podrás descargar Divi gratis para usarlo de por vida en todas las web que desees.
Y si quieres comprar tu propia licencia de Divi entra en este enlace y tendrás el mayor descuento que existe: Comprar Divi con el mayor descuento
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.
