Cómo crear un logotipo superpuesto de Divi

Uno de los ajustes estándar de casi cualquier sitio web es el logotipo del sitio. De alguna forma, forma o moda, los propietarios de sitios web querrán diseñar su logotipo para que se destaque. Y una de las mejores maneras de llamar la atención sobre su logotipo es desplazarlo y superponer los elementos detrás de él. Para este tutorial, lo guiaremos a través de cómo compensar el logotipo de su sitio para que se superponga al encabezado general del sitio. ¡Vamos a profundizar en!

Vista previa del efecto

Echemos un vistazo a lo que estamos tratando de lograr hoy.

Escritorio

Móvil

Crea y sube tu encabezado global

Lo primero que vamos a hacer es descargar uno de nuestros paquetes gratuitos de encabezado y pie de página. Para este artículo, estamos utilizando el paquete de diseño de la tienda de electrónica , por lo que descargaremos el paquete gratuito de encabezado y pie de página correspondiente para cargarlo más tarde.

A continuación, dirígete al Divi Theme Builder. Lo encontrará en su panel de administración de WordPress en Divi – Theme Builder . Para cargar el paquete de encabezado y pie de página que descargamos, haga clic en el ícono de flecha hacia arriba y hacia abajo en la esquina superior derecha de la página. Esto abre las opciones de portabilidad de Theme Builder.

Luego, debe hacer clic en la  pestaña Importar , seleccionar el archivo JSON extraído para el paquete de encabezado y pie de página, y luego hacer clic en el botón Importar plantillas de Divi Theme Builder .

Después de esto, puede hacer clic en el área verde que dice  Encabezado global . Al hacerlo, se abrirá el constructor visual. Si seleccionó  anular la Plantilla de sitio web predeterminada en el paso anterior, el encabezado ya estará en su lugar. Si no, simplemente cárguelo como cualquier otro paquete de diseño de su biblioteca.

Ahora es el momento de comenzar a diseñar el logotipo en sí. Para comenzar, abra el módulo de menú en la segunda sección.

Una vez allí, se dirigirá a la  pestaña Avanzado y encontrará la  sección Logotipo del menú en  CSS personalizado . Hay un par de maneras diferentes de lograr este efecto con CSS.

Uso de un margen inferior negativo

Puede hacer esto con una sola línea de código CSS. Agregaremos un margen negativo al logotipo del sitio, tirando de él hacia abajo y superponiéndolo al elemento del menú detrás de él. El valor que utilice dependerá de su logotipo y encabezado, específicamente. El uso de valores relativos como  vhvw% puede ayudar a que el logotipo superpuesto sea más consistente en una variedad de dispositivos.

CSS CÓDIGO margen inferior; -60%; CÓDIGO CSS

También querrá verificar los resultados utilizando diferentes ventanas gráficas. Lo más probable es que deba ajustarse específicamente para dispositivos móviles frente a computadoras de escritorio. Para hacer esto, simplemente desplace el cursor sobre el título del logotipo del menú y seleccione el ícono del teléfono móvil . A continuación, vaya a la pestaña Teléfono móvil .

Ahora, cualquier cambio que realice en el código CSS se aplicará solo en las ventanas gráficas del tamaño de un dispositivo móvil.

Solo para escritorio

Sin embargo, si solo desea que se produzca el efecto de logotipo superpuesto en el escritorio, habilite las opciones de respuesta como se indicó anteriormente, solo establezca el valor en 0. Esto hará que las versiones que no sean de escritorio permanezcan en su posición predeterminada mientras mantienen el efecto de escritorio como usted diseñó.

Usando Transformar Traducir

Otra forma de lograr este efecto es a través de la  propiedad transform: translate CSS. Aquí es donde cambia la posición de un elemento en un eje X, Y y especifica con precisión dónde desea que aparezca el elemento en la página. Puede obtener un control mucho más preciso del posicionamiento del logotipo utilizando esta propiedad.

CÓDIGO CSS transformar: traducir (0%, 150%); CÓDIGO CSS

Usando este método de manipulación de CSS, puede hacer mucho más que simplemente superponerse verticalmente. Puede mover el logotipo de manera efectiva a cualquier lugar que desee, superponiendo  cualquier elemento en la página, no solo la parte inmediatamente detrás de él.

El primer número indicará dónde se encuentra el logotipo en un eje X (horizontalmente), y el segundo valor es el eje Y (verticalmente). Un valor de (0,0) es la ubicación predeterminada del logotipo.

Con eso en mente, para los diseños solo de escritorio, deberá habilitar las opciones receptivas y cambiar cualquier transformación: traducir valores a (0,0) para que permanezcan en su lugar en dispositivos que no son de escritorio.

Guarde sus cambios

El último paso es simplemente guardar los cambios. Asegúrese de hacer clic en la marca de verificación verde en la configuración del módulo y en el botón verde de guardar en la esquina inferior derecha. A continuación, debe guardar para hacer clic en la X en la esquina superior derecha de la pantalla.

El último paso para finalizar su logotipo superpuesto es asegurarse de que se hayan guardado todos los cambios de Theme Builder. Asegúrese de hacer clic en el  botón Guardar encima de las distintas plantillas también.

Cuando diga  Todos los cambios guardados , su nuevo logotipo superpuesto estará activo en su sitio.

Resultados finales

Echemos un vistazo a lo que consiguió con su arduo trabajo, ¿de acuerdo? Si usó el mismo paquete de diseño de encabezado gratuito que usamos nosotros, debería ver algo similar a esto.

Escritorio

Móvil

Terminando

La superposición de su logotipo con otros elementos en la página puede ser ese toque visual que su sitio web necesita. Es un efecto fácil y rápido que puede lograr con una sola línea de código CSS dentro del constructor Divi . De hecho, aunque usamos Theme Builder para este tutorial en particular, puede aplicar este mismo código y efecto a otras imágenes y elementos en su página para cambiarlos y darles un impulso visual.

¿Qué opinas sobre la superposición de tu logo Divi? ¡Cuéntanos en los comentarios!