WebSite X5Help Center

 
Daniele C.
Daniele C.
User

Orrei sapere se qualcuno di voi ha provato a creare un'intestazione stile google  it

Auteur : Daniele C.
Visité 1106, 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
14 RéPONSES - 2 UTILE - 1 CORRECT
Giuseppe Guida
Giuseppe Guida
User

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)

Lire plus
Posté le de Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

P.S. per le animazioni o le slideshow a pieno schermo in intestazione devi ricorrere a codici esterni

Lire plus
Posté le de Giuseppe Guida
Mirko Boschetti
Mirko Boschetti
Moderator

@Giuseppe,

non sò se hai guardato il link di Daniele, parla del header che con scroll della pagina diventa più stretto...

ciaooooooooooo

Lire plus
Posté le de Mirko Boschetti
Giuseppe Guida
Giuseppe Guida
User

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...

Lire plus
Posté le de Giuseppe Guida
Daniele C.
Daniele C.
User
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.

Lire plus
Posté le de Daniele C.
Daniele C.
Daniele C.
User
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?

Lire plus
Posté le de Daniele C.
Daniele C.
Daniele C.
User
Auteur

naturalmente da editor interno sennò devo modificare il codice ad ogni esportazione e diventa una stenta

Lire plus
Posté le de Daniele C.
Mirko Boschetti
Mirko Boschetti
Moderator
Daniele C.
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?

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...

Lire plus
Posté le de Mirko Boschetti
Daniele C.
Daniele C.
User
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.

Lire plus
Posté le de Daniele C.
Mirko Boschetti
Mirko Boschetti
Moderator

allora se vuoi fare con codice, al passo 4 nel tag head metti questo:

<style>
#imHeaderBg{
box-shadow: 0 3px 5px #A9A9A9;

}
</style>

Lire plus
Posté le de Mirko Boschetti
Daniele C.
Daniele C.
User
Auteur

Era quello che volevo fare.

 piango dalla felicità

Lire plus
Posté le de Daniele C.