¿Qué hace un buen paquete de diseño Divi?

Nuestros paquetes de diseño GRATIS semanales han sido una gran parte de nuestra iniciativa de diseño Divi y hasta ahora han sido un gran éxito. Los paquetes de diseño Divi se están convirtiendo en un activo extremadamente valioso para nuestra comunidad Divi, ¡lo cual es increíble! Nuestro objetivo final para esta iniciativa es convertirte (la Nación Divi) en la comunidad más poderosa de la web.

Además de brindarle paquetes de diseño gratuitos de nuestro equipo de diseño, queremos ayudarlo a comprender qué hace que un paquete de diseño Divi sea bueno y brindarle aún más el conocimiento para crear diseños increíbles para nuestra comunidad también. También es útil conocer el funcionamiento interno de un buen paquete de diseño como consumidor para que sepa qué buscar y cómo aprovechar al máximo el paquete de diseño.

En esta publicación, espero arrojar algo de luz sobre lo que hace que un paquete de diseño de Divi sea bueno al ofrecer algunas pautas de mejores prácticas para crear paquetes de diseño y también algunos consejos para ayudarlo a llevar sus paquetes de diseño a otro nivel.

Entonces, ¿qué hace que un paquete de diseño Divi sea bueno?

Comenzaremos con la necesidad más obvia que cumplen estos diseños: el diseño.

Resuelve problemas reales de diseño para nichos específicos

Un gran diseño es extremadamente difícil de hacer y puede tomar mucho tiempo. Entonces, si usted es propietario de un negocio sin experiencia en diseño, está buscando un diseño que haga la mayor parte (si no todo) del diseño por usted. Más específicamente, buscan un diseño que funcione para sus usuarios. Ya sea una galería de fotos para un artista, una página de destino para un dentista o un blog para un sitio afiliado, el paquete de diseño debe diseñarse para un consumidor específico. El mayor problema que tiene una persona sin sitio web no es que no tenga un sitio web (cualquiera puede tirar unas cuantas páginas en la web) sino que no tiene un sitio web efectivo. Un paquete de diseño diseñado para un nicho específico resuelve ese problema.

Además, asegúrese de que el diseño general de los diseños sea sobresaliente. Los colores deben funcionar muy bien juntos. Las imágenes deben ser significativas y hermosas. El espaciado debe ser consistente en todo momento. La elección de fuentes también es enorme. Puedo seguir pero me voy a desviar porque, en mi opinión, siempre es mejor dejar el diseño a los profesionales. Pero, si eres dedicado y tienes un presupuesto ajustado, considera estos artículos recientes de nuestro blog para orientarte en la dirección correcta.

3 áreas importantes de diseño en las que centrarse para cada creación de sitio web

3 principios efectivos de diseño web para personas que no son diseñadores

3 formas de aprender a tener un mejor ojo para el diseño

Ahora que hemos establecido que un gran diseño es quizás el aspecto más importante de los paquetes de diseño, hablemos de lo que debe incluirse en un buen paquete de diseño.

Incluye páginas generales que todo sitio web necesita

Cuando decimos diseño «paquete», queremos decir que se incluye más de un diseño de página. Idealmente, esto incluiría todas las páginas que un sitio web necesitaría para ponerse en marcha de inmediato. Los siguientes diseños de página deben incluirse en todos los paquetes de diseño:

  • Hogar
  • Acerca de
  • Contacto
  • Blog
  • Aterrizaje

Creo que es seguro decir que esas 5 páginas están incluidas en la mayoría de los sitios web. Pero sería una tontería suponer que estas son las únicas páginas que necesitan todos los sitios web.

Agrega páginas específicas según los nichos de diseño

Dependiendo del tipo de sitio al que se dirija con su paquete de diseño, es posible que deba agregar una página o dos que sean necesarias para ese nicho de sitio específico.

Aquí están algunos ejemplos:

  • Una página de producto para un diseño de comercio electrónico
  • Una página de galería para un diseño de artista
  • Una página de menú para un diseño de restaurante

Considere hacer las siguientes preguntas cuando decida si el diseño necesita o no páginas específicas de nicho:

1. ¿Se puede crear fácilmente la página usando los 5 diseños de página estándar? Si es así, es posible que desee continuar y dejar que el usuario construya. No tiene que incluir todas las páginas posibles en un paquete de diseño. Si está bien diseñado, un buen paquete de diseño inspirará fácilmente a los usuarios a mezclar y combinar partes de los diseños existentes para crear cualquier página adicional que puedan necesitar fácilmente.

2. ¿La página es obviamente necesaria? Utilice el sentido común y un poco de investigación sobre lo que una empresa necesita para ponerse en marcha. Si una página se destaca como una necesidad obvia para la mayoría de los sitios web en el área, continúe y agréguela al paquete de diseño.

Un buen paquete de diseño es compatible con Divi

Haz que tu diseño funcione con Divi, no en su contra. Divi es una poderosa herramienta para crear todo tipo de sitios web, por lo que su diseño debe maximizar lo que Divi ya hace bien.

Aquí hay algunos consejos a tener en cuenta al hacer que su Layout Divi sea amigable:

  1. No agregue CSS en línea para diseñar texto en un módulo (si es posible)

    Puede haber habido una mayor necesidad de hacer esto en el pasado, pero no ahora. La configuración de la pestaña de diseño puede orientar y diseñar cualquier texto del cuerpo, texto del encabezado (h1, h2, h3, etc.) y cualquier enlace dentro del cuadro de contenido. Agregar CSS en línea al texto a través de html solo confundirá el problema.

    Una excepción sería agregar varios colores a un bloque de texto o encabezado. En ese caso, usted puede estar inclinado a hacer algo como esto:

    01
    <h2>This text is black and <span style="color: #a00000;">This text is red</span></h2>

    Trate de evitar hacer cosas como esta. Confundirá al usuario, o peor aún, le presentará una personalización que no tiene idea de cómo replicar. En su lugar, piense en alguna otra forma dentro de la configuración del módulo para diferenciar su contenido. Hay mucho espacio para ser creativo con esas opciones.

  2. Evite agregar código personalizado (CSS personalizado, PHP o Javascript) si es posible.

    Evite la tentación de agregar CSS y Javascript/PHP personalizados inflados para diferenciar su diseño de los demás. Recuerde, habrá una amplia gama de personas que querrán usar su diseño. No deje a los novatos en el polvo. Asegúrese de que sus diseños se puedan personalizar fácilmente utilizando la configuración de diseño integrada de Visual Builder en lugar de tratar de impresionar demasiado a sus usuarios con estilos y funcionalidades que no podrán controlar o personalizar por sí mismos. Los usuarios de Divi esperan tener control sobre la construcción de su sitio sin tener que saber código.

  3. Evite usar código personalizado como javascript en las Opciones de tema.

    Si debe incluir un código personalizado, debe incluirlo dentro de un módulo de código como parte de la página de diseño si es posible. Esto hace que sea más fácil ubicar el código aislado en una página y es más fácil de manejar por parte del usuario.

  4. No agregue CSS personalizado en el personalizador de temas o en la configuración de la página

    Sí, puede exportar el personalizador de temas y la configuración de la página, pero cualquier CSS personalizado agregado a esas áreas no se exportará junto con él.

    Si debe agregar CSS personalizado (y no debe hacerlo el 99 % de las veces), estas son sus opciones:

    Opción 1: agréguelo a su CSS personalizado en sus Opciones de tema , en Configuración general y luego exporte sus opciones de tema e incluya ese archivo en su paquete de diseño. Sin embargo, esto es peligroso porque es posible que su usuario no desee anular sus opciones de tema y, si lo hace por accidente, no estará contento.

    Opción 2: agregue el CSS dentro de un módulo de código en la página que desea diseñar. Esta es una mejor opción que la anterior, pero no es la ideal, ya que el usuario tendrá dificultades para personalizar el código o comprender su influencia.

    Opción 3 (recomendada): agréguelo a los bloques de CSS personalizados en la pestaña Avanzado de su configuración dentro de cada sección, fila y módulo. Esta es la mejor opción para agregar CSS si es necesario.

Prepara el escenario para otros complementos

A pesar de todas las maravillosas y poderosas herramientas que Divi puede ofrecer a un sitio web, hay ocasiones en las que se necesita un complemento de terceros. Es por eso que Divi está diseñado para garantizar que la mayoría de esos excelentes complementos de WordPress sean compatibles con Divi . Por lo tanto, debe preparar los paquetes de diseño para que se integren bien con los complementos necesarios para completar el sitio que se está utilizando para diseñar.

Aquí hay dos formas en que puede preparar su diseño para la integración de complementos:

  1. Prediseñe el módulo de la tienda siempre que corresponda

    Si está creando un sitio de comercio electrónico con WooCommerce, es obvio que los usuarios necesitarán una tienda o página de producto que funcione, por lo que tiene sentido seguir adelante y crear esa página utilizando el módulo de tienda de Divi. El módulo de la tienda no estará visible hasta que se instale WooCommerce y se agreguen productos, pero al menos ya ha hecho el trabajo de diseño para el usuario.

    Así es como se ve el módulo de la tienda en el diseño de nuestra tienda de moda antes de agregar los productos de woocommerce.

    Pero debido a que nos tomamos el tiempo para diseñar el módulo de la tienda de antemano, así es como se ve tan pronto como se agregan los productos.

  2. Incluir códigos cortos de complementos para futuras integraciones

    Puede haber momentos en los que necesite ayuda de un complemento de terceros o un shortode para agregar algo extremadamente útil que la mayoría de la gente querrá o necesitará. En lugar de dejar que el usuario haga el trabajo de integrar el complemento con Divi, ¿por qué no seguir adelante y simplificar el proceso agregando el módulo, código abreviado o fragmento que se activará cada vez que el usuario cargue el complemento?

    Por ejemplo, supongamos que está creando un paquete de diseño de comercio electrónico. Al anticipar las páginas de WooCommerce que se necesitarán para manejar el proceso de pago y la información de la cuenta, puede preparar su diseño en consecuencia agregando los códigos cortos de WooCommerce (utilizados para generar el contenido para las páginas de WooCommerce) a su paquete de diseño de páginas de WooCommerce. Claro, los diseños de página con códigos abreviados no estarán completamente operativos antes de que se integre el complemento, pero al menos ha preparado el escenario para que el usuario desarrolle.

    Aquí hay un ejemplo de una página creada para una página específica de woocommerce.

    Todo el contenido que ve (aparte del encabezado) se genera con un código abreviado. Pero Divi puede diseñar ciertos elementos del texto generado por el shortcode usando la configuración del módulo. Continúe y personalice el contenido de ese shortcode de antemano para que cuando el usuario instale woocommerce, el shortcode estilice automáticamente el contenido generado.

    Y WooCommerce no es el único complemento que utiliza códigos abreviados para mostrar contenido. Busque esas oportunidades para enmarcar ese shortcode con un gran diseño que coincida con el resto del paquete de diseño.

Utiliza imágenes optimizadas en todo

Tener excelentes imágenes en su diseño es imprescindible. Pero cualquier imagen, por hermosa que sea, no vale la pena tenerla si tarda una eternidad en cargarse. Un buen diseño requiere que uno se tome el tiempo para optimizar las imágenes para el paquete de diseño Divi.

Esta optimización consiste en…

  1. Formato de archivo. Suele ser una elección entre el formato jpg (mejor para fotografías) y png (mejor para iconos y botones y otros elementos gráficos que necesitan un fondo transparente)
  2. Dimensiones de la imagen. Recomiendo mantener una proporción de 16:9 o 4:3 para todas las imágenes. Luego determine el ancho máximo de la columna en la que se ubicará y establezca sus dimensiones en consecuencia.
  3. Tamaño del archivo. Esto implica el uso de un editor de fotos (Photoshop o Gimp ) o un software en línea como Tinypng para reducir o eliminar la hinchazón innecesaria de la imagen.

Contiene imágenes de alta resolución como parte del paquete.

Es importante que optimices las fotos que ya están publicadas en el diseño. Sin embargo, también desea darle al usuario la capacidad de personalizar esas mismas fotos como quiera para usarlas en el futuro. Esto proporciona un valor excelente y diferencia a su paquete de diseño de los demás. Permitirles usar esas imágenes sin restricciones en otros sitios web (incluso sitios de comercio electrónico) también es una gran idea. Esto significa que pueden usar las fotos sin tener que preocuparse por pagar derechos de licencia o atribuir al fotógrafo.

Siéntase libre de agregar estas imágenes en una carpeta separada junto a sus diseños en el paquete.

Se exporta correctamente para importaciones convenientes

Cada paquete de diseño debe contener archivos exportados correctamente en una sola carpeta para facilitar el acceso.


El proceso para exportar correctamente los diseños para futuras importaciones de usuarios contiene los siguientes pasos:

  1. Guarde cada página de diseño en la Biblioteca Divi como un nuevo diseño.
  2. Exporte cada diseño individualmente desde la Biblioteca Divi para producir un archivo json separado para cada página de diseño.

  3. Exporte todos los diseños colectivamente desde la biblioteca Divi para crear un solo archivo que contenga todos los diseños.

  4. Cree una nueva carpeta y agregue sus archivos json de página de diseño individuales y su archivo json único que contiene todas las páginas de diseño a la carpeta.


  5. Comprima la carpeta en un archivo zip para que el usuario pueda descargarlo fácilmente desde su sitio web.

El proceso para importar correctamente los diseños a un nuevo sitio web contiene los siguientes pasos:

  1. Descomprima el archivo zip del paquete de diseño y abra la carpeta.
  2. Vaya a la Biblioteca Divi y haga clic en el botón importar/exportar.
  3. Elija Importar
  4. Busque el único archivo json que contiene todos los diseños y haga clic en importar.

Para obtener más detalles sobre cómo manejar mejor las importaciones y exportaciones de paquetes de diseño, lea estos consejos para crear, exportar y compartir sus propios elementos de la biblioteca Divi .

Ha sido probado exhaustivamente

No pases por alto este. Un buen paquete de diseño Divi debe probarse antes de compartirlo (o venderlo) a otros. Aquí hay una lista de verificación útil que debe considerar antes de ofrecer su diseño al mundo (para las mejores prácticas, intente realizar estas pruebas en una instalación nueva de WordPress y Divi):

Pruebas generales

  • Asegúrate de haber usado imágenes optimizadas para los diseños.
  • Es posible que desee ejecutar pruebas de rendimiento en cada una de las páginas para ver si hay algún problema (como imágenes grandes que ralentizan el tiempo de carga de la página).
  • Compruebe si hay errores de ortografía evidentes. Es cierto que el usuario deberá actualizar el contenido una vez que use los diseños, pero un error de ortografía en el encabezado de una página podría ser desagradable.

Compruebe el contenido del archivo de descarga

  • Asegúrese de que todos sus archivos de diseño estén en la carpeta del paquete de diseño.
  • Asegúrese de haber incluido un archivo de diseño «todos» que importe todos los diseños a la vez.
  • Incluya una carpeta separada para sus imágenes de alta resolución.

Pruebe el proceso de portabilidad

  • Importe cada uno de los diseños de su paquete en una biblioteca de temas Divi separada (en una instalación de wordpress diferente).
  • Cree una nueva página para cada uno de los diseños y, utilizando el constructor divi, agregue el diseño correspondiente a cada una de las páginas.
  • Revise las páginas para asegurarse de que los diseños se vean como el diseño original y que no haya nada roto. (Si algo está roto, primero iría y exportaría el archivo original nuevamente y lo importaría nuevamente para asegurarme de que tiene la versión correcta del diseño).
  • Si su diseño depende de un complemento, instálelo y verifique que el diseño se represente correctamente.
  • Elimine los diseños que acaba de agregar a la biblioteca e importe el archivo de «todos» los diseños a la biblioteca.
  • Luego pruebe esos diseños en cada una de las páginas que ya creó para asegurarse de que se vean bien.

Lleve sus diseños al siguiente nivel

Aunque los paquetes de diseño no son técnicamente temas, puede agregar valor a los paquetes de diseño haciéndolos más fáciles de usar con el tema Divi. Los usuarios apreciarán el esfuerzo y sus paquetes de diseño se elevarán a otro nivel de genialidad. Aquí hay sólo unas pocas ideas.

Incluya secciones, filas y módulos prediseñados como elementos de biblioteca adicionales para que al usuario le resulte más fácil crear páginas adicionales con esos elementos.

Una buena manera de separar su paquete de diseño del resto es pensar qué secciones, filas o módulos necesitará un usuario para crear otras páginas personalizadas y luego incluirlas en el paquete de diseño. Algunos de estos elementos incluirían un Módulo de encabezado de ancho completo, un módulo de texto para el contenido, una versión oscura y otra clara de un botón, o una llamada a la acción. Si se toma el tiempo de incluir estos elementos más pequeños (en lugar de solo los diseños de página), permitirá a sus usuarios crear cosas mucho más rápido.

Incluya una paleta de colores con códigos de colores que se pueden usar para actualizar la paleta de colores predeterminada en las opciones del tema

Otra forma de agregar valor adicional a sus paquetes de diseño es brindarles a los usuarios una paleta de colores para usar cuando realicen ajustes en el nuevo sitio. Puede ser un documento de texto simple con los códigos de color en la carpeta del paquete de diseño, o incluso puede diseñar una página de diseño de marca que tenga todos los elementos de diseño utilizados para una fácil referencia y duplicación.

Diseñe su diseño teniendo en cuenta el color de acento predeterminado de Divi.

Todavía hay espacio para fusionar mejor el tema Divi y los paquetes de diseño. Al tener en cuenta qué elementos se pueden cambiar ajustando el color de énfasis global, puede dejar espacio para esos cambios a medida que crea el diseño. De esa manera, las personas tendrán la opción de ajustar el color de acento para cambiar el diseño en todo el sitio en lugar de cambiar el diseño de esos elementos página por página.

Estas son solo tres ideas que me vienen a la mente, pero estoy seguro de que hay muchas maneras de agregar calidad a los paquetes de diseño más allá de la competencia.

Para concluir

Espero que tengas una mejor idea de lo que hace que un Divi Layout Pack sea bueno (o incluso excelente). En todo caso, ¡espero que estés inspirado para crear algo increíble! Espero ver su nuevo paquete de diseño pronto.

Hasta entonces, siéntase libre de comunicarse en los comentarios.

¡Salud!