¡Tu licencia Divi con un -20% de DescuentoOferta aquí

Formas simples y creativas de mostrar logotipos de empresas en Divi

Oct 12, 2020 | Tutoriales para 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 usando las técnicas de este tutorial.

logotipos de empresas

logotipos de empresas

logotipos de empresas

logotipos de empresas

logotipos de empresas

logotipos de empresas

Preparación de las imágenes de su logotipo

Cuando prepare 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, acolchado o márgenes personalizados. Créeme. 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 al tamaño que desee que tengan todas las imágenes de su logotipo (en este caso, 226 px por 100 px).

logotipos de empresas

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.

logotipos de empresas

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

logotipos de empresas

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 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.

# 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 la interfaz. 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.

logotipos de empresas

Divi agregará automáticamente esas imágenes a un nuevo módulo de la 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

logotipos de empresas

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.

logotipos de empresas

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 : 1px Color del borde de la imagen : #dddddd Sombra del cuadro de imagen: ver captura de pantalla

logotipos de empresas

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

logotipos de empresas

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. 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 mostrarte un aspecto diferente.

logotipos de empresas

# 2 Uso de la galería de WordPress incorporada 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 será necesario 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 la columna en el dispositivo móvil también.

He aquí cómo hacerlo.

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

logotipos de empresas

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 del texto: Montserrat
Peso de la fuente del texto:
Texto en negrita Tamaño del texto: 26px
Orientación del texto: centro

logotipos de empresas

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.

logotipos de empresas

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.

logotipos de empresas

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.

logotipos de empresas

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 canalón: 1 Igualar
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.

01
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 .

logotipos de empresas

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:

01
02
03
.gallery img {
border: none !important;
}

logotipos de empresas

Aquí está el diseño final.

logotipos de empresas

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

logotipos de empresas

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.

logotipos de empresas

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.

logotipos de empresas

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 canalón: 1
Igualar alturas de columna: SÍ

Acolchado personalizado: 4vw superior, 4vw inferior

logotipos de empresas

Guardar ajustes.

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

logotipos de empresas

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

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

logotipos de empresas

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.

01
align-items: center;

logotipos de empresas

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:

01
align-items: flex-end;

logotipos de empresas

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

logotipos de empresas

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

logotipos de empresas

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:

01
<h2>As Featured In</h2>

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

Margen personalizado: 0px inferior

logotipos de empresas

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 imagen: centro
Margen personalizado: -75px

logotipos de empresas

Mira el resultado final.

logotipos de empresas

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

¡20% de Descuento en Divi!

Sitios web y usuarios ilimitados

Únete a más de 700.000 clientes y obten acceso a Divi, Extra, Bloom, Monarch y mucho más. Impulsa a todo tu equipo y crea sitios web ilimitados con una licencia.

¡Ir al descuento!



You have Successfully Subscribed!

Pin It on Pinterest

Share This