Formas simples y creativas de mostrar logotipos de empresas en Divi

Vistazo

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

Preparación de las imágenes de su logotipo

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

Dado que cada logotipo tiene un tamaño único, es prácticamente imposible hacer que todos tengan las dimensiones exactas. Aquí es donde un editor de fotos es ú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 un fondo transparente.

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

Luego repite el proceso para el resto de tus logos.

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 imágenes o la galería de imágenes), siempre puede usar los efectos de filtro integrados de Divi para ajustar los colores también.

Suscríbete a nuestro canal de Youtube

#1 Uso del módulo Divi Gallery para mostrar los logotipos de la empresa (simplemente arrastrar y soltar)

Este primer método para agregar logotipos de empresas a su sitio con Divi es bastante fácil. 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 constructor 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 subtítulo: NO

Mostrar paginación: NO

De forma predeterminada, el módulo de la galería agregará una superposición flotante 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 configurando el Color del icono de zoom y el Color de 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, podría agregar un borde con una sutil sombra de cuadro.

Ancho del borde de la imagen: 1px

Color del borde de la imagen: #dddddd

Sombra del cuadro de la imagen: 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 columnas, puede crear fácilmente diseños únicos para los logotipos de su empresa. Aquí hay 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 mostrarle un aspecto diferente.

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

También puede agregar logotipos de empresas a su sitio web utilizando el código abreviado 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 su estructura de columnas también en dispositivos móviles.

Aquí está cómo hacerlo.

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 izquierda y actualice lo siguiente:

Contenido: «Como aparece en»

Fuente del texto: Montserrat

Peso de la fuente del texto:

Texto en negrita Tamaño del texto: 26 px

Orientación del texto: centro

Ahora agregue otro módulo de texto en la columna de la derecha. En la pestaña de contenido, elimine el contenido simulado que se encuentra actualmente allí 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 multimedia. 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 debería 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 abreviado de 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 medianil personalizado: SÍ

Ancho de medianil: 1

Igualar alturas de columna: SÍ

Con esta configuración, tiene más espacio para que sus logotipos respiren. 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 avanzada de fila.

Este CSS funciona porque configuramos Equalize Column Heights en SÍ, lo que habilita 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:

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 escalan a un tamaño más pequeño. Lo admito. Ocho columnas probablemente 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 abreviado, 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 botón, 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 abreviado de la galería de wordpress de sus logotipos a dos pestañas diferentes.

Para este ejemplo, seleccioné 6 logos con 3 columnas para cada galería.

Esto puede ser útil para sitios que requieren muchos logotipos.

#3 Uso de Divi Builder para crear un diseño personalizado para logotipos de empresas

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 los diseños de logotipos de empresas. Me gustan más los diseños de 6 columnas y 4 columnas para los logotipos, en gran parte por cómo responden en dispositivos móviles.

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

Primero, comencemos con la creación de 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 canaleta: 1

Igualar alturas de columna: SÍ

Acolchado personalizado: 4vw arriba, 4vw abajo

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 logotipo a cada columna de la siguiente manera:

Columna 1: 1 logo

Columna 2: 2 logos

Columna 3: 3 logos

Columna 4: 3 logos

Columna 5: 2 logos

Columna 6: 1 logo

Ahora, con esta configuración, puede ajustar la alineación vertical usando 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.

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

Pero para este diseño, voy a alinear los módulos con la parte inferior de la fila. Así que reemplace el fragmento «alinear elementos: centro» con lo siguiente:

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 del divisor superior: ver captura de pantalla

Color del divisor superior: rgba(255,255,255,0.03)

Altura del divisor superior: 13vw

Volteo del divisor superior: vertical

Relleno personalizado: 0px arriba, 0px abajo

Para nuestro encabezado, vamos a crear una nueva sección y colocarla 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:

Fuente del encabezado 2: Montserrat

Peso de la 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: 32 px

Margen personalizado: 0px inferior

Finalmente, agregue un módulo de imagen debajo del módulo de texto con el logotipo de una empresa que desea que se destaque sobre el resto. Luego actualice lo siguiente:

Alineación de 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 deberían brindarle todo lo que necesita para crear el diseño que desea lograr con el mínimo esfuerzo. Y con el poder de Divi a tu lado, deberías divertirte creando algunos diseños únicos propios.

Espero escuchar de usted en los comentarios.

¡Salud!