homefinance blog
Hay muchas razones para mostrar los logotipos de la compañía en su sitio web. Una sección “presentada en” de los logotipos de la compañía podría influir en los posibles inversores o socios. O una sección “Nuestros clientes incluyen” podría establecer evidencia social valiosa con los visitantes. Pero por alguna razón, es importante saber cómo agregar estos logotipos a su sitio web. En este tutorial, pasaré tres métodos diferentes para agregar los logotipos de la empresa a su sitio web con Div. ¡Incluso te mostraré cómo agregar los registros a cualquier modo de división! Esto es lo que se cubrirá en este tutorial:
Preparación de logotipos
Uso del módulo de la galería Div para mostrar logotipos con un simple deslizamiento y fijación
Uso de WordPress Gallery incorporando para mostrar los logotipos
Uso de Divi Builder para crear un aspecto personalizado para los logotipos
¡Vamos a empezar! Eche un vistazo a algunos modelos posibles utilizando las técnicas en este tutorial.
Preparación de las imágenes del signo Al preparar los logotipos que se mostrarán en su sitio, es importante asignar tiempo para dimensionar sus imágenes usando un editor de fotos antes de agregarle a su sitio. Esto le ahorrará el dolor de la cabeza en un intento de dimensionar y Coloque los logotipos con anchos, llenado o bordes personalizados. Confía en mí. No quieres ir a ese camino si no tienes que hacerlo.
Debido a que cada logotipo tiene un tamaño único, es casi imposible hacer que todos tengan las dimensiones exactas. Aquí hay un editor de fotos útil. Por ejemplo, con Photoshop, puede crear un nuevo archivo y establecer las dimensiones del documento en cualquier tamaño que desee ser todas las imágenes de su logotipo (en este caso 226px con 100px). Luego agregue la imagen del logotipo al documento y cambie el tamaño y el tamaño y el tamaño de 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 repita el proceso para el resto de los logotipos.
Puede mantener el color de registro original o usar un editor de fotos para cambiarlos en cualquier color que desee. Si tiene la intención de agregar los logotipos usando una división (es decir, el módulo de imagen o la galería de imágenes), siempre puede usar los efectos de filtro incrustado del DIV para ajustar los colores. Suscríbase a nuestro canal de YouTube # 1 utilizando el módulo de la Galería Div Div para mostrar los logotipos de la compañía (un simple deslizamiento y corrección) Este primer método para agregar el logotipo de la compañía a su sitio web es tan fácil como se vuelve. Usando la función de dibujo y colocación del DIV, puede extraer todos los logotipos de la compañía en Divi Builder para crear instantáneamente la galería de imágenes para mostrar los logotipos en una cuadrícula.
Para hacer esto, cree una nueva página e implemente Divi Builder para construir sobre el front-end. Seleccione la opción “Construir desde Scratch”. Una vez que el Builder Divi esté en funcionamiento, abra la carpeta que contiene todas las imágenes y seleccione. Luego, simplemente tire de ellos a la ventana del navegador con el constructor. Divi agregará automáticamente esas imágenes en 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. Agrego 8 imágenes con logotipo y no quiero que yo Mostrar ningún título, subtítulo o paginación, puedo actualizar lo siguiente:
Número de imagen: 8 Mostrar título y leyenda: No Paging: No
Por defecto, el módulo de la galería agregará una superposición con el mouse 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 con el icono de flotar o el icono de flota.
Para mantener las cosas limpias y simples, puede deshacerse de la superposición con el mouse estableciendo un icono de zoom y un color superpuesto a transparente. Después de eso, puede explorar todas las opciones de diseño para crear modelos únicos para la galería de imágenes. Por ejemplo, puede agregar un borde con una sombra de una caja sutil.
Image edge width: 1 px color edge image: #ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddical
Así es como sería el diseño final para diferentes tamaños del navegador.
Y debido a que esta galería se puede agregar a cualquier estructura de columnas, puede crear fácilmente modelos únicos para los logotipos de su empresa. Aquí hay un ejemplo de dos columnas con un módulo de texto a la izquierda y la galería de imágenes (con los logotipos) a la derecha. Hemos agregado un gradiente de fondo solo para mostrarle un aspecto diferente. El uso de la galería de WordPress# 2 para mostrar los logotipos de la compañía (con cualquier DIV), también puede agregar los logotipos de la compañía en su sitio web utilizando el código corto de WordPress Image Gallery. Esto es sorprendentemente fácil de hacer y es perfecto para los logotipos, porque en la mayoría de los casos, no tendrá que agregar estilos personalizados a las imágenes. Lo maravilloso de este método es que puede implementar hasta 9 columnas para sus logotipos que se amplifican con la ventana del navegador, lo que le permite mantener las columnas en el móvil.
Aquí le mostramos cómo hacerlo. En Divi Builder, cree una nueva sección con una estructura de columna de un cuarto -cuarto.
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 a la columna izquierda y actualice lo siguiente: Contenido: “Como se presenta en” Texto de la fuente: Montserrat El peso del texto: Texto en negrita: 26 PX Texto Orientación: Centro
Ahora agregue otro módulo de texto a la columna derecha. En la pestaña Contenido, elimine el contenido simulado actualmente ubicado y haga clic en el botón “Agregar contenido multimedia” en la parte superior del cuadro del editor de contenido.
Esto mostrará la ventana de la galería de medios emergentes. Luego 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 (uso ocho imágenes para este ejemplo). Haga clic en el botón Crear galería. Esto mostrará 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: No hay columnas: 8 (esto debe ser igual al número de imágenes en la galería para que permanezca en una sola línea) Tamaño: Tamaño completo
Luego haga clic en Crear una nueva galería.
Esto incorporará el código corto requerido para la galería incorporada 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: haga que esta fila se complete el ancho: Sí, use el ancho personalizado del canal: Sí, el ancho de la canaleta: 1 iguala las alturas de la columna: Sí con esta configuración, tiene más espacio para que los logotipos respiren. Ahora solo se deja ajustar el texto a la izquierda para alinearse verticalmente con los logotipos a la derecha. Puede agregar el relleno personalizado requerido en la columna izquierda para lograr esto, pero para garantizar que ambos módulos permanezcan enfocados verticalmente, puede agregar el siguiente CSS al elemento principal en la configuración de fila avanzada.
Alinine-Ritams: Centro;
Este CSS funciona porque establecemos las alturas de la columna en YES, lo que permite la propiedad “Mostrar” para una fila. Para obtener más información sobre esto, verifique cómo alinear verticalmente el contenido en el Div.
Y para eliminar el borde gris alrededor de nuestras imágenes, debemos agregar el siguiente fragmento CSS a la configuración de nuestra página: .gallery img {border: no es importante;
}
Aquí está el diseño final.
Aquí está con un fondo negro agregado en una fila.
En el móvil, las columnas no se rompen en ningún tamaño de la pantalla. Las imágenes simplemente se reducen a un tamaño más pequeño. Reconocer. Ocho columnas son probablemente demasiadas en el teléfono inteligente, porque las imágenes se vuelven muy pequeñas.
Incorpore los registros en cualquier modo Divi porque este es un código construido, puede agregar esta galería a casi cualquier div que abre muchas posibilidades diferentes. Por ejemplo, puede agregar imágenes del logotipo dentro de un interruptor, un acordeón o incluso un módulo de archivo. Aquí hay un ejemplo de cómo se vería cuando agrega el código corto de su galería de WordPress en dos pestañas diferentes. Para este ejemplo, seleccionamos 6 logotipos con 3 columnas para cada galería.
Esto podría ser útil para sitios que requieren muchos logotipos. # 3 Uso de Divi Builder para crear un aspecto personalizado para los logotipos de la compañía si desea obtener algo más creativo con los aspectos del logotipo de su empresa, puede usar Divi Builder para diseñar casi cualquier cosa que pueda imaginar. La división de la fila de elementos acepta la aparición de columnas de hasta 6 columnas, que es más que suficiente para la mayoría de los aspectos del logotipo de la compañía. Me gustan los aspectos con 6 columnas y 4 columnas mejor para logotipos, en su mayor parte, para cómo responden en el móvil. En el próximo diseño, le mostraré algunos consejos sobre cómo llevar los aspectos del logotipo de la compañía en el siguiente nivel. En primer lugar, comencemos con la creación de una nueva sección con seis columnas. Antes de comenzar a agregar algo a nuestras columnas, vaya a la configuración promedio y actualice lo siguiente: Ancho personalizado: 90% Ancho de canaletas: 1 iguala las alturas de la columna: Sí Lineo personalizado: 4VW arriba, 4VW Jossalvei. Luego agregue un módulo de imagen en su primera columna y luego seleccione una de las imágenes del logotipo.
Luego continúe agregando imágenes con logotipo a cada columna, como sigue: Columna 1: 1 Columna 2: 2 LOGO 3: 3 Columna 4: 3 Logos Columna 5: 2 Logos Columna 6: 1 LOGO
Ahora, con esta configuración, puede ajustar la alineación vertical utilizando un fragmento CSS personalizado. Si desea enfocar el contenido verticalmente, puede agregar el mismo fragmento CSS que agregamos a Central nuestro texto junto a la Galería de signos en el # 2 anterior. Abra la configuración de la fila y agregue el siguiente CSS al elemento principal. Alinine-Ritms: Center; como puede ver, esto crea un aspecto redondeado. Pero para este aspecto, alinearé los módulos en la parte inferior de la fila. Entonces, reemplace el fragmento “Align-Pritams: Center” con lo siguiente: Align-Pritms: Flex-End;
Esto alinea todos los módulos en la parte inferior de la fila, lo que funcionará bien con la sección divisional que agregaremos. Ahora estamos listos para personalizar nuestra sección. Abra la configuración de la sección y actualice lo siguiente: Antecedentes: # 2a3443 El estilo superior del divisor: consulte la captura de pantalla del divisor superior: RGBA (255,255,255,03) Altura del separador superior: Divisor superior de 13 VW: Llenado personalizado vertical: 0 px de desde Arriba, 0 px a continuación
Para nuestra sección, crearemos una nueva sección y la colocaremos por encima de la sección que acabamos de crear. Cree una nueva sección común con una estructura de fila con una columna. Actualice la configuración de la sección de la siguiente manera: Color de fondo: # 2A3443 Estilo del divisor inferior: Ver Captura del color del divisor inferior: RGBA (238,238,0.09) Altura del divisor inferior: 13 VW Lineo personalizado: 0 PX A continuación
Ahora guarde la configuración y agregue un módulo de texto en una fila y actualice lo siguiente: Para el contenido, agregue lo siguiente:
como se muestra en
2 encabezado de fuente: Montserrat Título 2 Fuente de peso: Dare Título 2 Alineación de texto: Centro de rúbrica 2 Color de texto: #FFFFFFFFF Fain 2 Texto: 32 PX Margen personalizado: 0 PX Desde este último, agregue un módulo de imagen en el módulo de texto con un LOGO de la empresa que desea destacar por encima de los demás. Luego actualice lo siguiente: Alineación de imágenes: Centro Marja personalizado: -75 PX
Verifique el resultado final.
Pensamientos finales Crear una sección en su sitio web para logotipos de la empresa en realidad es bastante simple. Una vez que tenga imágenes de logotipo de tamaño correctamente utilizando un editor de fotos, Div puede manejar el resto. Los métodos cubiertos en este tutorial deben ofrecer todo lo que necesita para crear el aspecto que desea hacer con un esfuerzo mínimo. Y con el poder de Div en su esquina, debe divertirse creando algunos modelos únicos. Espero tener noticias suyas en los comentarios. ¡Suerte!
