ElegantThemes

Cómo crear un logotipo Divi superpuesto

Uno de los ajustes estándar para casi cualquier sitio web es el logotipo del sitio web. De alguna forma, forma o moda, los propietarios de sitios web quieren que su logotipo se destaque. Y una de las mejores formas de llamar la atención sobre su logotipo es desplazarlo y superponer los elementos detrás de él. En este tutorial, le mostraremos cómo compensar el logotipo de su sitio web para que se superponga a todo el encabezado del sitio web. ¡Vamos a profundizar en!

Vista previa del efecto

Echemos un vistazo a lo que queremos lograr hoy.

Escritorio

Teléfono celular, teléfono móvil

resultados móviles

Crea y sube tu encabezado global

Lo primero que hacemos es descargar uno de nuestros paquetes de encabezado y pie de página gratuitos. Para este artículo usaremos el Paquete de diseño de tienda de electrónicaasí que vamos a descargar esos Paquete de encabezado y pie de página gratuito a juego cargar más tarde.

A continuación, vaya a Divi Theme Builder. Puede encontrarlo en su panel de administración de WordPress en Divi – creador de temas. Para cargar el paquete de encabezado y pie de página descargado, haga clic en el Icono de flecha hacia arriba y hacia abajo en la esquina superior derecha de la página. Esto abrirá las opciones de portabilidad del generador de temas.

Portabilidad del creador de temas

Entonces le gustaría hacer clic en eso Importar Tab, seleccione el archivo JSON extraído para el paquete de encabezado y pie de página, luego haga clic en Importar plantillas de Divi Theme Builder Botón.

Subir

Después de eso, puede hacer clic en el área verde que dice Encabezado global. Esto abrirá el constructor visual. Si has elegido anular la plantilla de sitio web predeterminada el encabezado ya existe en el paso anterior. Si no es así, descárguelo de su biblioteca como cualquier otro paquete de diseño.

Crea el logo superpuesto

Ahora es el momento de diseñar el logotipo usted mismo. Primero abra el módulo de menú en la segunda sección.

Módulo de menú de la sección 2

Una vez allí, va al Progresivo Tab y busque el Logotipo de menú Sección siguiente CSS personalizado. Hay varias formas de lograr este efecto con CSS.

Utilice un margen inferior negativo

CSS de logotipo superpuesto

Puede hacer esto con una sola línea de código CSS. Agregaremos un borde negativo al logotipo del sitio, lo desplegaremos hacia abajo y superpondremos el elemento del menú detrás de él. El valor que utilice depende en particular de su logotipo y encabezado. Con valores relativos como vh, vw, o % puede ayudar a que el logotipo superpuesto sea más coherente en una variedad de dispositivos.

CSS-CODE-margin-down; -60%; CÓDIGO CSS

CSS superpuesto

También debe verificar los resultados con diferentes ventanas gráficas. Lo más probable es que deba personalizarse específicamente para dispositivos móviles y computadoras de escritorio. Para hacer esto, simplemente mueva el mouse sobre el Logotipo de menú Título y seleccione la Micono de teléfono obile. Luego navega hasta el Pestaña de teléfono móvil.

Cualquier cambio que realice en el código CSS ahora solo se aplica a las ventanas gráficas del tamaño de los dispositivos móviles.

CSS del teléfono celular

Solo para computadoras de escritorio

Sin embargo, si solo desea que el efecto de logotipo superpuesto aparezca en el escritorio, habilite las opciones de respuesta como se indicó anteriormente, simplemente establezca el valor en 0. Esto mantendrá las versiones que no son de escritorio en su posición predeterminada mientras mantiene el efecto de escritorio como lo diseñó. .

solo escritorio

Usando Transform Translate

Otra forma de lograr este efecto es a través del transformar: traducir Propiedad CSS. Aquí reposiciona un elemento en un eje X, Y y especifica exactamente dónde debe aparecer el elemento en la página. Esta propiedad le brinda un control mucho más preciso sobre el posicionamiento del logotipo.

Transformación de CÓDIGO CSS: traducir (0%, 150%). CÓDIGO CSS

transformar traducir

Con este método de manipulación de CSS, puede hacer mucho más que superponerse verticalmente. Puede mover eficazmente el logotipo a cualquier lugar y superponerlo alguna Elemento de la página, no solo la parte directamente detrás de él.

El primer número indica dónde está el logotipo en el eje X (horizontal) y el segundo valor es el eje Y (vertical). Un valor de (0,0) es la ubicación estándar del logotipo.

Teniendo esto en cuenta, para los temas solo de escritorio, debe habilitar las opciones de respuesta y cambiarlas todas. transformar: traducir Valores hasta (0,0) para persistir en dispositivos que no son de escritorio.

solo superpuesto en el escritorio

Guarda tus cambios

El último paso es simplemente guardar los cambios. Asegúrese de hacer clic en la marca verde en la configuración del módulo y en el botón verde de guardar en la parte inferior derecha. Luego puede guardar para hacer clic en la X en la parte superior derecha de la pantalla.

Guardar la configuración

El último paso para terminar su logotipo superpuesto es asegurarse de que todos los cambios se hayan guardado en Theme Builder. Asegúrese de hacer clic Guardar en la computadora también sobre las distintas plantillas.

Todos los cambios guardados

Si se llama Todos los cambios guardados, su nuevo logotipo superpuesto estará disponible en su sitio web.

Resultados finales

Echemos un vistazo a lo que le ha traído su arduo trabajo, ¿de acuerdo? Si ha utilizado el mismo paquete de diseño de encabezado gratuito que usamos nosotros, debería ver algo similar.

Escritorio

Resultados finales

Teléfono celular, teléfono móvil

resultados móviles

Envolver

La superposición de su logotipo con otros elementos de la página puede ser el estilo visual que necesita su sitio web. Es un efecto simple y rápido que puede lograr con una sola línea de código CSS directamente en el constructor Divi. Mientras usábamos Theme Builder para este tutorial en particular, puede aplicar el mismo código y efecto a otras imágenes y elementos en su página para moverlos y darles un impulso visual.

¿Qué opinas de superponer tu logotipo Divi? ¡Háznoslo saber en los comentarios!

El cargo Cómo crear un logotipo Divi superpuesto apareció primero Blog temático elegante.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *