Aquí en Elegant Themes, tenemos una cosa principal a nuestro favor: hacemos una gran cantidad de cosas increíbles. Probablemente esté familiarizado con Divi , pero ¿conoce nuestro complemento, Monarch? ¿No? ¿Tal vez? Esta bien. Los botones sociales de Monarch son una forma fantástica de aumentar el intercambio y la participación en su sitio, y cuando los combina con uno de nuestros asombrosos diseños gratuitos para Divi Builder, simplemente no puede equivocarse.
Voy a trabajar con el paquete de diseño de Coffee Shop deliciosamente elegante hoy para mostrarle cómo diseñar sus botones sociales de Monarch para que coincidan con el diseño de su sitio. No se preocupe si no está utilizando el paquete de diseño gratuito; los principios aún se aplican.
Pero si lo está usando (o uno de los otros), simplemente siga estos pasos para obtener las cosas tan bonitas como una imagen.
En primer lugar, debe instalar Monarch. Así que dirígete al área de miembros y descarga el complemento. Lo instalas igual que cualquier otra cosa, y cuando está activado, puedes encontrar la configuración en Herramientas -> Configuración de Monarch
Una vez que esté en funcionamiento, diríjase a la pestaña Ubicaciones para que pueda elegir dónde desea que aparezcan sus botones sociales de Monarch. En realidad, no importa cuáles elija porque la configuración funciona de la misma manera para cada uno de ellos (pero permanece separada para que la personalice en cada página en la que desee usarla).
Elecciones, Elecciones
La parte posterior del diseño de la cafetería es definitivamente un tema oscuro, terrenal y reconfortante que encarna exactamente cuán rico y agradable es su sitio web y su negocio. La paleta principal es un simple negro, blanco, marrón y naranja claro.
Sorprendentemente, los colores brillantes y llamativos de los botones estándar de las redes sociales chocan más de lo que queremos.
Sin embargo, gracias a Monarch, podemos arreglar eso. Voy a trabajar principalmente con los botones para compartir widgets de la barra lateral, pero recuerda: esto funcionará con todas estas ubicaciones de Monarch.
Bien formado, en forma y tonificado
Para el diseño de la cafetería, los bordes elegantes y las esquinas afiladas significan que estoy eligiendo la forma del ícono cuadrado y el tercer efecto de desplazamiento, porque esos son los que coinciden con la misma estética. Desea que sus botones sociales de Monarch se destaquen, pero no de tal manera que parezcan fuera de lugar. Ese es el punto de todo esto, después de todo.
Una vez que haya configurado esas opciones, es hora de trabajar en los colores. Esto se vuelve un poco más complicado de hacer bien. Una buena regla general para el diseño web es tener no más de cuatro colores base para su tema. Y aquí también nos hemos quedado con eso, como dije anteriormente, con las primarias negras, blancas, marrones y anaranjadas claras.
Al elegir el estilo de sus botones sociales Monarch, realmente puede hacer uso de esa paleta de cuatro colores para hacer que sus botones realmente llamen la atención de sus visitantes.
Si bien los valores predeterminados para Monarch usan los colores integrados de la red, si se desplaza hacia abajo más allá del estilo del ícono, accederá a Configuración de pantalla y Configuración de color .
Espaciarlo
En primer lugar, configure Agregar espaciado de iconos en activo (de lo contrario, sus botones se verán apretados). Luego, asegúrese de poner la Animación de introducción en Fade In para que coincida con las otras animaciones que se incluyen en el paquete de diseño. Si usa muchas diapositivas o algo más, siéntase libre de elegir otra opción. Este solo coincide con Coffee Shop .
Además, entramos y activamos Usar colores personalizados .
- Color de fondo: #c99872
- Color de fondo flotante: #ffffff
- Color del icono: #ffffff
- Color del icono de desplazamiento: #000000
Guarde sus cambios. ¡Tu sitio en vivo ahora se ve aún más impresionante! Hay opciones para los tipos de publicaciones en las que desea mostrar cada tipo de botones sociales de Monarch, por lo que si desea, por ejemplo, que la barra lateral solo se muestre en las páginas, mientras que desea un Fly In en las publicaciones del blog, también puede configurar eso. . Todo es preferencia personal.
Bonito, ¿eh?
Otras opciones de diseño
Como dije anteriormente, la tercera opción en Estilo de icono y la Forma de icono cuadrada son las mejores opciones para este paquete de diseño. Además, cada ubicación que tenemos para los botones sociales de Monarch te ofrece opciones ligeramente diferentes. Fuera de la Animación de introducción y el Espaciado de íconos , todo depende de cómo desea mostrarlos, no de cómo están diseñados.
Dicho esto, cuando usa varias instancias de los botones, no es una mala idea mezclar el esquema de color para obtener el máximo efecto. Personalmente, me gusta invertir mis colores en diferentes lugares.
Volteé exactamente los mismos códigos hexadecimales que usé anteriormente. ¡Ahora, tenemos un nuevo fly-in práctico y elegante que se ve completamente diferente de la barra lateral! Simplemente use exactamente la misma premisa en todas las demás ubicaciones, y definitivamente podrá mezclar y combinar sus botones sociales de Monarch lo suficiente para que sus visitantes no los desconecten.
Siéntate y toma una copa
A pesar de lo llamativos y desagradables que son la mayoría de los botones sociales, tendemos a ignorarlos porque se ven iguales en todos los sitios que visitamos. Claro, la idea es que los colores de la marca sean llamativos y reconocibles. Siempre puedes encontrar Facebook por su marca registrada azul. Pero a veces (¿muchas veces?), ese azul se ve terrible.
Ahí es donde entra en juego Monarch. Puede hacer que su sitio se vea más profesional y elegante, y sinceramente, volverse más fácil de usar al diseñar sus botones sociales con nuestro complemento. Con suerte, también habrá visto el beneficio en Monarch sobre algunos de los otros complementos para compartir en redes sociales. Incluimos el Monarch con su membresía de Elegant Themes. Si no es miembro, puede dirigirse y registrarse ahora mismo y comenzar a diseñar sus botones sociales este mismo día .
Y no se olvide, también, de los otros increíbles paquetes de diseño como el de Coffee Shop que se menciona aquí. Publicamos uno nuevo todos los lunes en el blog, por lo que puede descargarlos todos y diseñar Monarch para que se vea como cada uno de ellos, si lo desea.
Imagen destacada del artículo de 32 Pixels / shutterstock.com