En caso de que te lo hayas perdido, recientemente lanzamos una nueva iniciativa de diseño en la que ofrecemos paquetes de diseño Divi profesionales y gratuitos todas las semanas . Son completamente funcionales y están listos para usar directamente desde el archivo .zip, y eso es increíble.
Pero también queremos asegurarnos de que conozca las formas de agregar a los diseños para que su sitio web sea aún mejor para sus usuarios y visitantes. Por ejemplo, Bloom es un complemento de correo electrónico fantásticamente personalizable que viene con su membresía de Elegant Themes , y puede (y debe) diseñarlo para que coincida con los paquetes de diseño.
Hoy regresaré a nuestro primer obsequio, el paquete de diseño del sitio web de viajes , para mostrarle cómo hacer que Bloom lleve a sus visitantes a un mundo completamente nuevo.
Y si no está utilizando uno de nuestros paquetes de diseño, también está bien. Voy a desglosar el proceso de cómo y por qué hice el estilo de esta manera, y también puede aplicar los principios al diseño de su sitio. Básicamente, tomaremos elementos y activos que ya funcionan y los reutilizaremos ligeramente para nuestra nueva suscripción.
De acuerdo, usar el complemento y el estilo es mucho más fácil que hacer un viaje de mil millas. Así que probablemente fue una mala metáfora. Lo que sea. ¿Entiendes, verdad?
Instalar Bloom
Lo primero que debes hacer es instalar Bloom . Dirígete al Área de miembros de ET para descargar e instalar Bloom. También puede seguir la documentación allí para configurar todo para su proveedor de correo electrónico (Mailchimp, Aweber , Emma, etc.).
Es muy fácil (¡lo hicimos, así que por supuesto que lo es!), y estará listo para que sus visitantes salten por el mundo en muy poco tiempo.
Visualice el resultado final
Cuando empiezas, deberías tener una idea real de cómo quieres que se vea el resultado final de Bloom. Sugiero ir a su sitio y encontrar el elemento más icónico que tenga o simplemente su elemento favorito .
Usando el blog de viajes como ejemplo, quiero diseñar la suscripción de Bloom para que coincida con esta sección específicamente:
No hay rima o razón por la que elegí esta parte sobre cualquier otra cosa (porque el equipo de diseño hizo un trabajo increíble en todo el diseño), aparte de que me gusta más. Me recuerda a la aventura y la emoción, y eso es lo que quiero transmitir a las personas para que se registren en la lista de correo electrónico.
Pasos para dar estilo a tu Bloom Opción de correo electrónico
Cuando realiza una nueva suscripción de Bloom por primera vez, debe elegir qué tipo de suscripción desea mostrar. Bloom le ofrece muchas opciones, pero no queremos ser demasiado molestos al respecto (es decir, no hay ventanas emergentes), ya que este paquete de diseño tiene que ver con el estilo y la sustancia.
Así que vamos a usar el modo de espera anterior, debajo de la publicación . No ahuyentará a los visitantes, y tienen tasas de conversión decentes que se convierten en clientes y relaciones duraderas.
La página siguiente es simplemente nombrar y elegir su proveedor de correo electrónico y su lista, por lo que no tiene nada que ver con el diseño real (y, por cierto, siempre se puede cambiar más adelante). Así que complete eso y pase a la siguiente sección y elija una plantilla.
Decidí optar por una plantilla bastante simple, una con los campos a la derecha. Nuevamente, algo simple que funcione para combinar con el estilo del sitio.
Después de eso, necesitarás encontrar una imagen. Si está utilizando el paquete de diseño de viaje , cuando importe los archivos .json a su biblioteca Divi, todas las imágenes se importarán a su biblioteca multimedia. Decidí usar travel-binoculars.jpg porque compartía elementos con la sección en la que me inspiré. También creo que travel-coffee.jpg sería una buena elección.
Una cosa para asegurarse es que elija Imagen a la izquierda del texto para el menú desplegable Orientación de la imagen . Cambiará el tamaño de las cosas para que se ajusten y sea mucho más bonito con nuestro diseño.
Estilos, colores y fuentes
Las superposiciones para el paquete de viaje usan #1d2633 como su color, que es lo que hace que las imágenes tengan esa sombra oscura y transparente sobre ellas. Aunque Bloom actualmente no permite el efecto de transparencia como fondo, todavía quiero usar ese color para la opción de Bloom.
Para las fuentes, el diseño del sitio web de viajes utiliza Oswald para los encabezados y Roboto para el texto. Podemos hacer lo mismo aquí para mantener la continuidad. Lo mismo para las esquinas cuadradas , y creo que el uso de un borde completo con un solo rectángulo interior blanco (la cuarta opción con el color establecido en #ffffff ) hace que la habilitación se destaque lo suficiente como para que se note pero no se descuide. lugar.
El único otro cambio que creo que se debe hacer con respecto al color es el botón en sí: use # ed4441 para que coincida con los botones que ya se incluyen en el paquete de diseño Divi gratuito .
Un ajuste más floreciente
Lo único que deberá hacer es realizar algunos ajustes menores en su CSS para que coincida con los tamaños y pesos de las fuentes con el paquete de diseño. Simplemente copie y pegue esto en el cuadro CSS personalizado en la página de diseño de Bloom:
|
01
02
03
04
05
06
07
08
09
10
11
|
/* This snippet will target any paragraph text in the primary area of Bloom and style it without touching any other text on the page or in the plugin */.et_bloom .et_bloom_form_header p { font-size:20px;} /*This snippet will target only the h2 text within the Bloom opt-in form and size it at half of the normal H2 in the layout pack */.et_bloom .et_bloom_form_header h2 { font-size:40px!important;} |
Y sí, no me gusta usar !important más que a ti, pero en este caso es una necesidad debido a cómo se agrega Bloom a la página.
Ahora tiene una suscripción de correo electrónico deliciosamente elegante en la parte inferior de todas y cada una de sus publicaciones que se parece un poco a esto.
¡Bloom puede hacerlo!
Con suerte, al revisar el paquete de diseño de viaje en esta publicación, ha visto cómo puede tomar algunos elementos en su propio sitio y diseñar sus opciones de correo electrónico de Bloom para que coincidan con el diseño de su sitio. Como puede ver, usar las mismas fuentes, colores e incluso imágenes de formas nuevas puede crear algo refrescante y vibrante sin mucho trabajo.
¡Así que elija su elemento favorito de su sitio (o tome uno de nuestros paquetes de diseño gratuitos ) y haga que Bloom funcione para usted!
Imagen destacada del artículo por Sammby / shutterstock.com