Formas simples y creativas de mostrar los logotipos de la empresa en Divi

Hay muchas razones para mostrar logotipos de empresas en su sitio web. Una sección "Destacada en" de los logotipos de la empresa podría dominar a los posibles inversores o socios. O una sección "Nuestros clientes incluyen" podría establecer una valiosa prueba social con los visitantes. Pero sea cual sea el motivo, es importante saber cómo agregar estos logotipos a su sitio web. En este tutorial, voy a repasar tres métodos diferentes para agregar logotipos de empresas a su sitio web con Divi. ¡Incluso te mostraré cómo agregar galerías de logotipos a cualquier módulo Divi!

Esto es lo que se cubrirá en este tutorial:

• Preparación de las imágenes de su logotipo
• Uso del módulo de la galería Divi para mostrar logotipos con solo arrastrar y soltar
• Uso de la galería de WordPress incrustada para mostrar logotipos
• Uso de Divi Builder para crear un diseño personalizado para logotipos

¡Empecemos!

Vistazo

Aquí hay un vistazo a algunos de los diseños posibles utilizando las técnicas de este tutorial.

Preparación de las imágenes de su logotipo

Al preparar sus logotipos para que se muestren en su sitio web, es importante que se tome el tiempo para dimensionar sus imágenes con un editor de fotos antes de agregarlas a su sitio. Esto le evitará el dolor de cabeza de intentar ajustar el tamaño y la posición de sus logotipos con anchos, relleno o márgenes personalizados. Confía en mí. No querrás seguir ese camino si no es necesario.

Dado que cada logotipo tiene un tamaño único, es prácticamente imposible que todos tengan las dimensiones exactas. Aquí es donde un editor de fotos resulta útil. Por ejemplo, con Photoshop, puede crear un nuevo archivo y establecer las dimensiones del documento en el tamaño que desee que tengan todas las imágenes de su logotipo (en este caso, 226 px por 100 px).

Luego agregue la imagen del logotipo al documento y cambie el tamaño y coloque la imagen directamente en el centro. Asegúrese de que sea un archivo de imagen png con fondo transparente.

Luego exporte la imagen como un archivo png para mantener el fondo transparente.

Luego repita el proceso para el resto de sus logotipos.

Puede mantener el color original del logotipo o usar un editor de fotos para cambiarlos al color que desee. Si planea agregar sus logotipos usando un Divi (es decir, el módulo de imagen o la galería de imágenes), siempre puede usar los efectos de filtro incorporados de Divi para ajustar los colores también.

Suscríbete a nuestro canal de Youtube

# 1 Uso del módulo de la galería Divi para mostrar los logotipos de la empresa (un simple arrastrar y soltar)

Este primer método para agregar logotipos de empresas a su sitio con Divi es tan fácil como parece. Con la función de arrastrar y soltar de Divi, puede arrastrar todos los logotipos de la empresa al Divi Builder para crear instantáneamente una galería de imágenes para mostrar sus logotipos en una cuadrícula.

Para hacer esto, cree una nueva página e implemente Divi Builder para construir en el front-end. Seleccione la opción "Construir desde cero". Una vez que el generador Divi esté en funcionamiento, abra la carpeta que contiene todas sus imágenes y selecciónelas. Luego, simplemente arrástrelos a la ventana del navegador con Divi Builder.

Divi agregará automáticamente esas imágenes a un nuevo módulo de galería y abrirá la configuración de la galería para iniciar el proceso de personalización por usted.

Como estoy agregando 8 imágenes de logotipos y no quiero mostrar ningún título, leyenda o paginación, puedo actualizar lo siguiente:

Número de imágenes: 8
Mostrar título y pie de foto: NO
Mostrar paginación: NO

De forma predeterminada, el módulo de la galería agregará una superposición de desplazamiento con un icono para cada imagen. Puede ajustar la configuración de superposición para el color del icono de zoom, el color de superposición de desplazamiento o el icono de desplazamiento.

Para mantener las cosas limpias y simples, puede deshacerse de la superposición de desplazamiento estableciendo el Color del icono de zoom y el Color de la superposición de desplazamiento en transparente.

Después de eso, puede explorar todas las opciones de diseño para crear diseños únicos para su galería de imágenes. Por ejemplo, puede agregar un borde con una sombra de cuadro sutil.

Ancho del borde de la imagen: 1 px
Color del borde de la imagen: #dddddd
Image Box Shadow: ver captura de pantalla

Así es como se vería el diseño final en diferentes tamaños de navegador.

Y debido a que esta galería se puede agregar a cualquier estructura de columna, puede crear fácilmente diseños únicos para los logotipos de su empresa. A continuación se muestra un ejemplo de un diseño de dos columnas con un módulo de texto a la izquierda y el módulo de galería de imágenes (con los logotipos) a la derecha. Agregué un degradado de fondo solo para mostrarte un aspecto diferente.

# 2 Uso de la galería de WordPress incrustada para mostrar los logotipos de la empresa (con cualquier módulo Divi)

También puede agregar logotipos de la empresa a su sitio web utilizando el código corto de la Galería de imágenes de WordPress. Esto es sorprendentemente fácil de hacer y es perfecto para logotipos porque, en la mayoría de los casos, no necesitará agregar estilos personalizados a las imágenes. Lo bueno de este método es que puede implementar hasta 9 columnas para sus logotipos que se escalan con la ventana de su navegador, lo que le permite mantener la estructura de sus columnas en el móvil también.

Así es como se hace.

En Divi Builder, cree una nueva sección con una estructura de columna de un cuarto y tres cuartos.

Supongamos que desea tener un texto a la izquierda de los logotipos de su empresa en una galería de seis columnas. Primero agregue un módulo de texto en la columna de la izquierda y actualice lo siguiente:

Contenido: "Como aparece en"
Fuente de texto: Montserrat
Peso de la fuente del texto: negrita
Tamaño del texto del texto: 26px
Orientación del texto: centro

Ahora agregue otro módulo de texto en la columna de la derecha. Debajo de la pestaña de contenido, elimine el contenido simulado que se encuentra actualmente y haga clic en el botón "Agregar medios" en la parte superior del cuadro del editor de contenido.

Esto abrirá la ventana emergente de la Galería de medios. A continuación, haga clic en el enlace Crear galería a la izquierda de la ventana emergente. Luego, seleccione las imágenes del logotipo que desea incluir en la galería (estoy usando ocho imágenes para este ejemplo). Luego haga clic en el botón Crear galería.

Esto abrirá la página Editar galería en la ventana emergente. Actualice la configuración de la Galería en la barra lateral derecha de la siguiente manera:

Enlace a: Ninguno
Columnas: 8 (esto debe ser igual al número de imágenes en la galería para que permanezcan en una línea)
Tamaño: tamaño completo

Luego haga clic en el botón Crear una nueva galería.

Esto incrustará el código corto de la galería necesario integrado en WordPress y mostrará la galería dentro del módulo de texto.

Ahora abra la configuración de la fila y actualice lo siguiente:

Hacer esta fila de ancho completo: SÍ
Usar ancho de canalón personalizado: SÍ
Ancho de la canaleta: 1
Ecualizar alturas de columna: SÍ

Con esta configuración, tiene más espacio para que respiren sus logotipos. Ahora todo lo que queda por hacer es ajustar el texto de la izquierda para alinearlo verticalmente con los logotipos de la derecha. Puede agregar el relleno personalizado necesario a la columna de la izquierda para lograr esto, pero para garantizar que ambos módulos permanezcan centrados verticalmente, puede agregar el siguiente CSS personalizado al Elemento principal en la pestaña Configuración de fila Avanzada.

align-items: center;

Este CSS funciona porque establecemos Equalize Column Heights en YES, habilitando así la propiedad "display: flex" para la fila. Para obtener más información sobre esto, consulte cómo alinear verticalmente el contenido en Divi.

Y para eliminar el borde gris alrededor de nuestras imágenes, debemos agregar el siguiente fragmento de CSS a la configuración de nuestra página:

.gallery img {
border: none !important;
}

Aquí está el diseño final.

Aquí está con un fondo negro agregado a la fila.

En dispositivos móviles, las columnas no se rompen en ningún tamaño de pantalla. Las imágenes simplemente se escalan a un tamaño más pequeño. Lo admito. Es probable que ocho columnas sean demasiadas en un teléfono inteligente porque las imágenes se vuelven muy pequeñas.

Incrustar galerías de logotipos en cualquier módulo Divi

Debido a que se trata de una inserción de código corto, puede agregar esta galería a casi cualquier módulo Divi, lo que abre muchas posibilidades diferentes.

Por ejemplo, puede agregar imágenes de logotipos dentro de un módulo de alternancia, un acordeón o incluso un módulo de pestañas.

Aquí hay un ejemplo de cómo se vería cuando agrega el código corto de la galería de wordpress de sus logotipos a dos pestañas diferentes.
Para este ejemplo, seleccioné 6 logotipos con 3 columnas para cada galería.

Esto puede resultar útil para sitios que requieran muchos logotipos.

# 3 Uso de Divi Builder para crear un diseño personalizado para los logotipos de la empresa

Si desea ser un poco más creativo con los diseños del logotipo de su empresa, puede usar Divi Builder para diseñar casi cualquier cosa que pueda imaginar. El elemento de fila de Divi admite diseños de columnas de hasta 6 columnas, lo que es más que suficiente para la mayoría de diseños de logotipos de empresas. Me gustan los diseños de 6 y 4 columnas que mejor se adaptan a los logotipos, en gran parte por cómo responden en el móvil.

En el siguiente diseño, le mostraré algunos consejos sobre cómo llevar los diseños del logotipo de su empresa al siguiente nivel.

Primero, comencemos creando una nueva sección con una fila de seis columnas.

Antes de comenzar a agregar algo a nuestras columnas, vaya a la configuración de la fila y actualice lo siguiente:

Ancho personalizado: 90%
Ancho de la canaleta: 1
Ecualizar alturas de columna: SÍ

Acolchado personalizado: 4vw superior, 4vw inferior

Guardar ajustes.

Luego agregue un módulo de imagen a su primera columna y luego seleccione una de las imágenes de su logotipo.

Luego continúe agregando imágenes de un logotipo a cada columna de la siguiente manera:

Columna 1: 1 logo
Columna 2: 2 logotipos
Columna 3: 3 logotipos
Columna 4: 3 logotipos
Columna 5: 2 logotipos
Columna 6: 1 logo

Ahora, con esta configuración, puede ajustar la alineación vertical utilizando un fragmento de CSS personalizado. Si desea centrar verticalmente el contenido, puede agregar el mismo fragmento de CSS que agregamos para centrar verticalmente nuestro texto junto a la galería de logotipos en el n. ° 2 anterior. Abra la configuración de la fila y agregue el siguiente CSS al elemento principal.

align-items: center;

Como puede ver, esto crea un diseño redondeado para los logotipos.

Pero para este diseño, alinearé los módulos con la parte inferior de la fila. Por lo tanto, reemplace el fragmento "align-items: center" con lo siguiente:

align-items: flex-end;

Esto alinea todos los módulos con la parte inferior de la fila, lo que funcionará bien con la sección Divisores que agregaremos.

Ahora estamos listos para personalizar nuestra sección. Abra la configuración de la sección y actualice lo siguiente:

Fondo: # 2a3443

Estilo de divisor superior: ver captura de pantalla
Color del divisor superior: rgba (255,255,255,0.03)
Altura del divisor superior: 13vw
Flip divisor superior: vertical

Relleno personalizado: 0px arriba, 0px abajo

Para nuestro encabezado, crearemos una nueva sección y la colocaremos encima de la sección que acabamos de crear. Cree una nueva sección regular con una estructura de fila de una columna.

Actualice la configuración de la sección de la siguiente manera:

Color de fondo: # 2a3443

Estilo del divisor inferior: ver captura de pantalla
Color del divisor inferior: rgba (238,238,238,0.09)
Altura del divisor inferior: 13vw

Relleno personalizado: 0px inferior

Ahora guarde su configuración y agregue un módulo de texto a la fila y actualice lo siguiente:

Para el contenido, agregue lo siguiente:

<h2>As Featured In</h2>

Fuente del encabezado 2: Montserrat
Peso de fuente del encabezado 2: Negrita
Alineación del texto del encabezado 2: centro
Color del texto del encabezado 2: #ffffff
Tamaño del texto del encabezado 2: 32px

Margen personalizado: 0px inferior

Finalmente, agregue un módulo de imagen debajo del módulo de texto con un logotipo de la empresa que desee destacar sobre el resto. Luego actualice lo siguiente:

Alineación de la imagen: centro
Margen personalizado: -75px

Mira el resultado final.

Pensamientos finales

Crear una sección en su sitio web para los logotipos de la empresa es bastante simple. Una vez que tenga las imágenes del logotipo del tamaño adecuado con un editor de fotos, Divi puede encargarse del resto. Los métodos cubiertos en este tutorial deben proporcionar todo lo que necesita para crear el diseño que busca lograr con el mínimo esfuerzo. Y con el poder de Divi en tu esquina, deberías divertirte creando tus propios diseños únicos.

Espero tener noticias tuyas en los comentarios.

¡Salud!