Sovrapporre il contenuto delle celle in verticale 
Autore: Carmelo P.
Visite 2390,
Followers 1,
Condiviso 0
Buongiorno,
utilizzo la versione wx5 17 pro e sto cercando di ottenere quest'effetto utilizzando i soli margini della cella ma non mi riesce:
https://www.vfsglobal.ca/canada/italy/italian/index.html
Nell'esempio sopra, l'immagine su cui si sovrappongono i tre check rotondi (che si allineano restringendo la finestra del browser) è statica e cambia al refresh della pagina mentre io vorrei inserire la gallery di website a tutto schermo con dimensioni 1920x850/600 nel contenuto delle celle per comodità di ridimensionamento.
Bisogna necessariamente usare del codice per poter fare comunque in modo che l'effetto si possa riprodurre nello stesso modo?
Grazie
Postato il
... non c'entra con il titolo, ...ma per sostituire casualmente l'immagine di sfondo al refresh, devi ricorrere a codice extra/pannello esperto...
... se ti interessasse, devi postare il LINK della pagina del tuo sito per valutare oggetto e situazione, magari in Topic dedicato...
.
.
Autore
Forse non mi son saputo spiegare...
A me non interessa il refresh dell'immagine nell'intestazione, volevo capire come fare a far sovrapporre delle celle in verticale, per poter riprodurre la stessa impaginazione del sito riportato nel link dove si vedono i tre bottoni tondi "e responsive" sovrapposti all'immagine sopra.
Purtroppo non ho ancora pubblicato nulla...solo test su test... comunque grazie ;) ciao!
... ordinamento ed interruzioni di riga:
>> Passo 4 - Pagine > Comandi Barra Strumenti e Griglia > Finestra Impostazioni Responsive
.
ciao
.
Ti ho allegato un progettino fatto con la 16 Pro, importalo nella 17 Pro. Nel progettino ho ricreato quanto vedi qui a questo link, credo sia quello che volevi ottenere tu:
http://www.bozzasito001.altervista.org/sovrapposizione/
al progetto perfetto di giuseppe, per ottenere quello che chiede Carmelo, bisogna aggiungere un piccolo css per indirizzare lo stile righe...
Modifiche da fare:
in stile righe, accorpare le due righe contenenti le immagini e il testo sottostante;
scegliere il background il "colorato" e impostare il colore voluto;
andare in proprietà pagina, sezione esperto, e aggiungere questo css...
<style>
#imPageRowGraphics_X {
top:50%;
}
</style>
ricavando l'ID della riga e sostituirlo alla X e impostare la percentuale adeguata...
...screenshot della modifica effettuata su progetto di giuseppe...
volendo essere più precisi, per ottenere un buon risultato anche alle basse risoluzioni, bisogna impostare una query per le risoluzioni inferiori che rendano trasparente lo sfondo dello stile righe (avendo cura di impostare per la cella contenitore del testo, lo stesso colore di sfondo usato per lo stile righe) in modo da ottenere comunque il testo su sfondo colorato... non so se mi sono espresso chiaramente... io mi sono capito, ma non so voi...
Si Skeggia, capito perfettamente
Io ho realizzato un progettino al volo senza aggiungere codici extra (non sono quali siano le competenze di Carmelo, ecco perchè ho evitato codici extra). Con i tuoi accorgimenti anche la parte inferiore ai tre "cerchi" si sovrappone al colore di sfondo dell'oggetto testo sottostante. Perfetto. Ciaooo
Autore
Buongiorno e grazie a tutti per il prezioso aiuto.
L'esempio di Giuseppe è davvero molto simile all'effetto che vorrei ottenere...ma come hai fatto!!! Bravo!
Non ho trovato nè codici, nè margini eccetto quello del testo che viene spinto in basso.
Nel mio caso vorrei però poter usare la gallery a tutto schermo con immagini alte 600px e margine top 0 con menù subito a seguire...
Ho già provato ma sballa tutto il layout spostando i bottoni... salvo che, rivolgendomi a skeggia, tu non ti stia riferendo ad immagini in sequenza nello stile righe utilizzando il tuo codice per ridimensionarle in responsive.
Proverò ancora in un modo o nell'altro, per allegare nel caso il progetto di Giuseppe aggiornato che potrebbe essere utile anche a qualcun altro.
Autore
...vedo ora il tuo post Giuseppe: competenze in tal senso "0" e son pure arruginito.
Me la cavicchio con dei copia e incolla "ad uso personale" e ne capisco più o meno i principi .... ciao
Carmelo per la gallery come sfondo si potrebbe in sostituzione usare lo stile righe con "Elenco Immagini" (scorrono in sequenza le immagini, una ogni 4 o 5 secondi, intervallo che però non si può modificare). Solo che con Elenco Immagini in Stile Righe non hai la possibilità di settare alcuni parametri (tipo possibilità di scegliere l'Allineamento delle immagini in sequenza che nel mio primo esempio è impostato su "Alto", oppure la proprietà background-size che viene impostata in automatico su "cover" e ti "riempirebbe" tutto lo sfondo sotto gli oggetti testo e immagini posizionati sulla griglia e non vedresti lo spazio bianco nella parte inferiore dei "cerchi") e quindi bisognerebbe usare un po' di codice extra per "riadattare" il tutto come nel progettino iniziale che ti ho mandato ma con la differenza che invece della sola immagine fissa in Stile Righe hai delle immagini che scorrono. Ti prepoaro il progettino con le 4 righe di codice extra e te lo invio tra poco (in più puoi sempre fare altre modifiche come suggerito da Skeggia).
Aspetta 5 o 6 secondi (intervallo purtroppo NON modificabile in Stile Righe/Elenco Immagini... le solite stupide limitazioni di Website X5) e vedrai le immagini scorrere sotto i 3 "cerchi"... Ti allego anche progettino. Il codice extra è al PASSO 3 Mappa/Home Page/Proprietà/Esperto/Codice personalizzato/Prima della chiusura del Tag HEAD:
http://www.bozzasito001.altervista.org/sovrapposizione2/
P.s. questo è quello che otterresti con Elenco Immagini in Stile Righe ma SENZA codici extra (manca solo lo spazio sotto i tre cerchi ma secondo me andrebbe bene ugualmente e non ci operdi la testa con il codice extra):
http://www.bozzasito001.altervista.org/sovrapposizione2senzacodici/
... ...
Nel mio caso vorrei però poter usare la gallery a tutto schermo con immagini alte 600px e margine top 0 con menù subito a seguire...
... ...
[/quote
... per l'incolonnamento non si deve far altro che seguire la Guida che ti ho precedentemente indicato, ed assegnare alla reltiva riga lo sfondo come previsto dal relativo >> Stile delle Righe |
Elenco immagini...
... il tutto semplicemente ciccando...
...
.
... per l'incolonnamento non si deve far altro che seguire la Guida che ti ho precedentemente indicato, ed assegnare alla reltiva riga lo sfondo come previsto dal relativo >> Stile delleRighe |
Elenco immagini...
... il tutto semplicemente cliccando...
...
.
Autore
Ancora grazie Giuseppe per la disponibilità!
Giusto per capire perchè non ho ancora scaricato il progetto... ma se volessi che le mie immagini riempissero anche la parte superiore (quella attualmente impegnata dal menù e dallo sfondo blu per intenderci) facendo in modo che il menù possa essere spostato in testa al sito utilizzando le stesse immagini come background tipo questo link:
https://templatemo.com/live/templatemo_515_eatery
dovrò utilizzare del codice per non perdere l'effetto dei bottoni sovrapposti parzialmente o lo potrò fare sostituendo le immagini e portando l'header a "0"?
Autore
Grazie anche a te Kol, appena posso ci riprovo ma devo riuscire anche ad alzare il menù in testa al sito ed aumentare l'altezza delle immagini (vedi sopra)
magari è più semplice di quanto immaginassi. ciao
Prego Carmelo. Porta l'header a zero o lo lasci al massimo dell'altezza che vuoi anche assegnare al menù, dovrebbe essere sufficiente. Però poi dove posizioni il logo? Sullo stile righe come oggetto immagine? Ma poi dovrai fare la stessa operazione con il logo per ogni pagina del progetto. Invece se lo posizioni nell'header, dandogli sufficiente altezza per contenere il logo, te lo ritrovi in automatico in tutte le pagine...
Nel mio secondo progetto al PASSO 2 MODELLO / struttura del modello porta l'header a 45px e lascialo trasparente, porta lo sfondo dell'header a 45px, togli da File Immagine l'immagine contenuta nello sfondo dell'header e assegnagli come colore il bianco, fallo per tutti i breakpoint e ottieni questo:
P.S. quei testi che cambiano sulle slide dell'esempio visibile a questo link https://templatemo.com/live/templatemo_515_eatery
non puoi ottenerli con le sole funzioni di Website X5... O meglio potresti ma usando stratagemmi vari (tipo schede in Oggetto Testo sovrapposto allo stile righe oppure foto con testo già sovrapposto alla foto, testo che poi però non sarà selezionabile, essendo grafica, e non sarà indicizzabile) oppure con codice extra.
... dovresti affrontare un problema alla volta, con domande in Nuovi Argomenti propri dedicati, per non fare confusioni (v.1°post)...
... vedrai poi che conoscendo il programma queste complicazioni non ti si presenteranno, potendo realizzare siti anche migliori del template che hai linkato, e se poi ci metti un po' del tuo in extra, anche se non servirebbe, non avrai limiti...
... riferimento a [aumentare l'altezza delle immagini (vedi sopra)] ...non ho capito, ma nel caso meglio continuare in Topic dedicati non avendo a che fare con quanto in oggetto e potendo quindi tornare più utile...
ciao
.
Puoi ottenere una cosa del genere usando le Schede nell'Oggetto Testo e in ogni scheda gli metti un testo che farai scorrere selezionando nelle impostazioni delle Schede la voce "Presentazione" in "Tipo di visualizzazione", mettendo 6 sec. su "Avvio automatico" e rendendo poi "Non visibili" i Pulsanti di navigazione:
http://www.bozzasito001.altervista.org/sovrapposizione03withtext/
N.B. inserisci solo questa riga di codice al PASSO 3 Mappa/Home Page/Proprietà/Esperto/Codice personalizzato/Prima della chiusura del Tag HEAD eliminando tutto il resto del codice nel mio secondo progetto e utilizzando delle immagini di 1920px per almeno 600 o 700px di altezza nello Stile Righe/Elenco Immagini (occhio ai numeri in grassetto nel caso dovessero cambiare se fai modifiche al progetto):
<style>
#imPageRowGraphics_1_0, #imPageRowGraphics_1_1 {
height: 500px !important;
}
</style>
Autore
Sì, ricordo quell'esempio relativo ad un altro topic e mi tornerà utile.
Ora, per quanto riguarda la sovrapposizione delle celle ho seguito le tue indicazioni ma non lo vedo come lo hai riprodotto tu nel link sopra:
http://www.bozzasito001.altervista.org/sovrapposizione03withtext/
Ti allego degli screenshot per capire cosa intendo
1) devi inserire la riga di codice che ti ho postato nel mio messaggio precedente a questo e devi eliminare qualsiasi altro codice dal mio progettino "elencoimmagini";
2) inserisci degli oggetti "Simple separator" come da foto, con altezza 100...
3) al breakpoint di 720px rendi invisibili gli oggetti Simple Separator e metti una interruzione di riga ai tre "cerchi" come da foto...
il punto 3 lo sistemi dalla funzione "Responsive" nella griglia di impaginazione al Passo 4 Pagine
non ci dovrebbe essere altro. Fammi sapere. Se hai problemi ti invio privatamente il progetto, scrivimi qui:
guidagiuseppe70(@)gmail.com
N.B. togli le parentesi tonde, se non le mettevo nell'indirizzo mail quest'ultimo mi veniva oscurato in automatico.
Autore
...Inoltre, pur rendendo trasparente l'header, questo appare bianco.
In quest'altro screenshot puoi vedere che aumentando l'altezza dell'immagine si sfasano i bottoni che vorrei invece più bassi.
Nel frattempo, sto apprezzando anche la nuova interfaccia dell'aggiornamento 2019.1 ed i diversi template.
L'altro giorno scherzavo
....Sì, immagino che potrei semplificare scegliendone un template che si avvicini il più possibile a ciò che voglio fare, ma l'esempio che ho riportato, si avvicina davvero molto a ciò che ho in mente.
no per l'header o sfondo dell'header, anche se li rendi trasparenti, otterrai in automatico sempre il bianco ma NON dipende da Website. E' così perchè, riassunto in parole poverissime, non puà esserci trasparenza se non c'è uno sfondo sotto, se togli lo sfondo in automatico la trasparenza diventa bianca di default. Se ci metti lo sfondo poi vedrai lo sfondo attraverso la trasparenza. Quello che vuoi ottenere tu lo puoi ottenere con del codice extra, come ho fatto io in questa bozza:
http://www.bozzasito001.altervista.org/agenziaeventi001/
se sei in grado puoi "prendere" il codice da quel mio esempio con "Ispeziona"
non c'è il tuo screenshot allegato al tuo ultimo messaggio...
Io ti ho dato tutte le indicazioni che potevo darti... Non saprei che altro fare, ripeto se vuoi mandami mail in privato, te l'ho scritta sopra, ti mando il progettino con le dovute modifiche. Più di questo no saprei che altro fare.
Purtroppo se non metti un link anche provvisorio, su hosting gratuito o in una sottocartella del tuo dominio, con il progetto online con le modifiche fatte da te, non si può fare molto.
Autore
Ciao Giuseppe, la mail l'ho inviata un'oretta fa perché, pur seguendo le tue istruzioni ed inserendo il separatore, il risultato non cambia ed i bottoni non si accavallano all'immagine come nello screenshot che riallego a questo post.
Riguardo all'header trasparente, sì, il tuo esempio nel link è ciò che intendevo.
allegato ancora non... allegato, forse supera i 1024 KB...
Per l'header trasaparente ti ho spiegato come sta la situazione...
Ora controllo mail. Ciao