Buon pomeriggio.
Nel sito a cui lavoroho creato delle immagini con un overlay per ogni pagina che fanno da intestazione e quindi contengono il titolo principale in h1 (un esempio
chi-siamo) .
Si tratta di un modulo personalizzato con doppio codice, uno per mobile e uno per desktop (ho utilizzato le classi bootstrap d-flex d-sm-none) per caricare immagini differenti e formattazione differenti per i dispositivi mobili tramite css.
Qui l'html che richiama due id differenti, hero e hero2:
<section id="hero-intro-chisiamo" class="d-none d-sm-flex">
<div class="heroinner ombratesto opacity" data-aos="fade-down" data-aos-delay="400" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="false" data-aos-once="true">
<h1 class="display-1">
<strong>Chi siamo</strong>
</h1>
</div>
</section>
<section id="hero2-intro-chisiamo" class="d-flex d-sm-none">
<div class="heroinner ombratesto" data-aos="fade-down" data-aos-delay="400" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="false" data-aos-once="true">
<h1 class="display-1">
<strong>Chi siamo</strong>
</h1>
</div>
</section>Qui il css:
/*Parallasse chi siamo*/
#hero-chisiamo {
position: relative;
height: 600px;
background: url(/images/chi-siamo/chi-siamo-parallasse.webp) no-repeat center;
background-size:cover;
color: #ffffff;
background-attachment: fixed;
display: flex;
align-items: center;
padding: 0 60px;
text-align: center;
justify-content: center;
background-position: top;
box-shadow: 2px -2px 6px rgba(0, 0, 0, 0. inset;
-moz-box-shadow: 2px -2px 6px rgba(0, 0, 0, 0. inset;
-webkit-box-shadow: 2px -2px 6px rgba(0, 0, 0, 0. inset;
}
#hero-chisiamo::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0. 80%);
}
/*Fine*/
/*Parallasse chi siamo mobile. Ho caricato un'immagine di background ritagliata*/
#hero2-chisiamo {
position: relative;
height: 500px;
background: url(/images/chi-siamo/chi-siamo-parallasse-mobile.webp) no-repeat center;
background-size:cover;
color: #ffffff;
background-attachment: fixed;
display: flex;
align-items: center;
padding: 0 60px;
text-align: center;
justify-content: center;
background-position: top;
box-shadow: 2px -2px 6px rgba(0, 0, 0, 0. inset;
-moz-box-shadow: 2px -2px 6px rgba(0, 0, 0, 0. inset;
-webkit-box-shadow: 2px -2px 6px rgba(0, 0, 0, 0. inset;
}
#hero2-chisiamo::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0. 80%);
}
/*Fine*/Analizzando la pagina con
https://it.seotesteronline.com/ mi sono resa conto che però vengono comunque calcolati due tag <h1> (quindi questo discorso su ogni pagina
), anche se di fatto "nascosti" sui diversi tipi di dispositivi, mentre pensavo che il fatto stesso di non venire caricato lo escludesse dal codice sorgente.
Cosa mi consigliate?
Creo due moduli differenti, uno per desktop e uno per dispositivi mobili, e imposto le classi di visualizzazione a tutto il modulo piuttosto che all'interno del codice dell'unico modulo?
O cerco di sistemare la questione mantenendo un solo h1 e cercando di ovviare con solo css, magari unificando le classi hero e hero2 e modificando le regole che vanno cambiate (sostanzialmente l'immagine di sfondo) con una regola del tipo @media?
Se creo due moduli distinti, la pagina risultera comunque con due <h1>?
Spero di essermi spiegata in maniera abbastanza chiara.
Grazie a tutti
