Tutorial de Flatsome Theme: Cómo crear un encabezado de marco flotante con Flatsome Theme

En este tutorial, se le mostrará cómo utilizar la función Temas planos Crear un Cabecera de marco flotanteEste diseño es muy popular últimamente. Este diseño se ha hecho muy popular últimamente y es especialmente adecuado para sitios web pequeños que no tienen muchos elementos de navegación. Las cabeceras flotantes dan un aspecto moderno y limpio y son perfectas para sitios web de empresas que quieren mostrar una navegación limpia en sus páginas.

¿Por qué utilizar una cabecera de marco flotante?

Las cabeceras de marco flotante aportan un diseño limpio y moderno a los sitios web, y son especialmente adecuadas para sitios web empresariales que requieren una navegación limpia. A diferencia de las tradicionalescabecera flotanteA diferencia de las aplicaciones móviles, este diseño de marco es cada vez más popular en el diseño de sitios web modernos. Proporciona a los usuarios una forma más intuitiva de navegar al tiempo que mantiene un aspecto visual minimalista.

Pasos para crear una cabecera de marco flotante

En este tutorial, esto se hará utilizando la función Tema Flatsome con opciones integradas y CSS personalizado para implementar una cabecera de marco flotante. Aquí están los pasos detallados:

Paso 1: Definir el color de fondo

En primer lugar, para asegurarnos de que se muestra la cabecera flotante, tenemos que establecer un color de fondo para todo el sitio. Vaya a Opciones del tema FlatsomeSelección apertura (jerga ajedrecística)y, a continuación, establezca el Color de fondo del contenido. Esto permitirá que la cabecera flotante sea visible en la página.

Paso 2: Eliminar el fondo de la cabecera principal

Por defecto, los temas de Flatsome ofrecen Página de inicio Establezca un color de fondo. Para el efecto flotante, tenemos que establecer su fondo transparente. Ve a Ajustes de cabeceraA continuación, busque el Página de inicioajustando la transparencia de su color de fondo a 0asegurándose de que su fondo se vuelve transparente.

Paso 3: Desactivar los separadores de cabecera

Flatsome añade por defecto un separador debajo de la cabecera de la página de inicio, lo que puede afectar al efecto flotante. Tenemos que desactivar este separador. Ir a Ajustes de cabeceraDesmarque la casilla delimitador Opciones.

Paso 4: Añadir CSS personalizado

A continuación, tenemos que refinar aún más la apariencia de la cabecera flotante utilizando CSS personalizado. Esto se puede hacer con el Configuración avanzada de Flatsome ha dado en el clavo CSS personalizado para insertar el código.

El siguiente CSS personalizado está diseñado para cabeceras flotantes:

/* Estilo de cabecera flotante */
.floating-header {
    margin-top: 60px; /* Añadir espacio por encima de la cabecera */
    max-width: 100%; /* Asegurar que la cabecera no se estira demasiado */
    border-radius: 10px; /* Redondea las esquinas */
    padding: 10px 20px; /* Añadir relleno para un aspecto más limpio */
    background-color: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    backdrop-filter: blur(10px); /* Aplicar un sutil efecto de desenfoque */
}

/* Ajustes de cabecera para móviles */
@media (max-width: 768px) {
    .floating-header {
        padding: 10px; /* Ajustar el relleno para pantallas pequeñas */ @media (max-width: 768px) { .floating-header {
    }
}

este párrafo CSS Garantizará que la cabecera flotante tenga esquinas redondeadas limpias, márgenes interiores adecuados y un sutil efecto de difuminado al desplazarse para darle un aspecto más moderno.

Paso 5: Ajustar el espaciado y las sombras en la página

Para garantizar que el encabezado flotante no se superponga a otros contenidos al desplazarse, añada un icono margin-topFlatsome añade un efecto de sombra a la cabecera que interfiere con el efecto flotante. Pegue el siguiente código en Configuración avanzada de Flatsome ha dado en el clavo CSS personalizado Parte.

/* Eliminar la sombra de la cabecera */
cabecera {
    box-shadow: none;
}

Paso 6: Pruebas y ajustes

Después de completar los ajustes anteriores, puede previsualizar el efecto de la cabecera de marco flotante en su sitio web.

resúmenes

pasar (una factura o inspección, etc.) Temas planos con opciones incorporadas y CSS personalizado, es fácil crear un moderno Cabecera de marco flotanteEste estilo de diseño es ideal para sitios pequeños, especialmente los que tienen poca navegación. Este estilo de diseño es ideal para sitios pequeños, especialmente los de negocios que no tienen muchos elementos de navegación. Para más tutoriales e información relacionada con WordPress, ¡estate atento!Red de fluctuación de fotonestiene los tutoriales de WordPress más completos y los más activos.Comunidad de intercambio de WordPress.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres