Orrei sapere se qualcuno di voi ha provato a creare un'intestazione stile google
Auteur : Daniele C.
Visité 1233,
Followers 1,
Partagé 0
Buongiorno,
vorrei sapere se qualcuno di voi ha provato a creare un'intestazione stile google material design https://material.google.com/
con animazione e ombreggiatura.
Mi piacerebbe sapere se qualcuno è riuscito ad impostare l'header a schermo pieno direttamente da WsX5 12
Grazie in anticipo
Posté le
qui trovi tutto, anche il file di progetto da scaricare...
http://quellidelcucuzzolo.blogspot.it/2015/11/template-november-website-x5-12.html
Abilita il Responsive Design al PASSO 1 Impostazioni generali/Responsive Design, poi sempre Al PASSO 1 Impostazioni generali /Stile del Modello /Struttura del Modello principale metti una foto di 1920 px di larghezza e 400/500 px di altezza in "SFONDO DELL'INTESTAZIONE" (NON IN INTESTAZIONE!) settando il COLORE dell'INTESTAZIONE su "Trasparente" e metti l'altezza dell'INTESTAZIONE uguale all'altezza della foto (ma puoi anche dare un'altezza diversa se vuoi). Poi la stessa foto RIDOTTA di dimensioni la metti anche in "Struttura del Modello Responsive" sempre come "SFONDO DELL'INTESTAZIONE", setta anche qui il colore dell'INTESTAZIONE su Trasparente e metti l'altezza dell'INTESTAZIONE uguale alla nuova altezza della foto con dimensioni ridotte (quindi sarà ridotta in altezza anche l'INTESTAZIONE). Fai Anteprima e vedi il risultato.
La procedura che ti ho descritto la puoi vedere applicata qui su questa bozza che sto realizzando:
http://www.bozzasito003.altervista.org/locanda
(prova a ridurre la finestra del browser e vedi i risultati del lavoro anche alle risoluzioni dei dispositivi mobili)
P.S. per le animazioni o le slideshow a pieno schermo in intestazione devi ricorrere a codici esterni
già che ci sei controlla anche qui:
http://www.dadigrafica.it/siti-web-responsive.html
forse un errore con il copia incolla....
@Giuseppe,
non sò se hai guardato il link di Daniele, parla del header che con scroll della pagina diventa più stretto...
ciaooooooooooo
Si Mirko, ho visto, ma poi lui chiedeva "Mi piacerebbe sapere se qualcuno è riuscito ad impostare l'header a schermo pieno direttamente da WsX5 12" ed io ho risposto a quella sua richiesta spiegandogli come fare ;-) Per quell'altro effetto che vuole sull'header deve usare codici esterni, Website non le fa ancora quelle cose in automatico non fa la gallery full width (cosa anacronistica e impensabile al giorno d'oggi in un sito che possa definirsi al passo con i tempi) figuriamoci il resto...
Auteur
Grazie per la risposta, quello che mi interessava di più era inserire l'ombreggiatura sotto l'header inserendo il codice esterno all'interno di web site x5 forse...Non mi sono spegato bene.
Se scrollate nel link appare l'ombreggiatura ed io ho bisogno di quella che poi è presente in tutti i siti moderni naturalmente full width.
guarda l'ombra sotto la slide qui:
http://www.impianti-elettrici-boschetti.it/
se ti va bene una cosa cosi, metti un'immagine (anche diversa dalla mia) sotto intestazione con margini alti a 0...
Auteur
non è proprio quello che vorrei perchè si limita alla grandezza del corpo che sarà al max di 1150px e non si adatta allo schermo.
Non mi ricordo il cosice per inserire immagini a tutto schermo altrimenti potrei provare a fare una cosa.
Comunque non è possibile modificare l'header da codice HTML?
Auteur
naturalmente da editor interno sennò devo modificare il codice ad ogni esportazione e diventa una stenta
ma hai visto l'immagine in intestazione del link di prima.....? è tutto schermo...
inserita come SFONDO DELL'INTESTAZIONE, senza alcun codice...o forse non ti riesco a capire io...quindi rileggi bene il Post di Giuseppe sopra...
Auteur
lo sfondo non fa al caso mio, volevo provare a inserire una strip sotto con l'ombreggiatura.
Ho provato anche ad aggiungere l'ombreggiatura con shadow box ma ho applicato l'ombreggiatura a tutti gli elementi.
Farò un'ultima prova con questo codice,
<style>
.row1{
background:url('img/image.jpg') no-repeat center center;
background-size:cover;
}
</style>
altrimenti mi invento qualcosa all'esterno.
allora se vuoi fare con codice, al passo 4 nel tag head metti questo:
<style>
#imHeaderBg{
box-shadow: 0 3px 5px #A9A9A9;
}
</style>
Auteur
Era quello che volevo fare.
piango dalla felicità