Immagine con testo e pulsante 
Autor: Luigi B.
Besucht 127,
Followers 1,
Geteilt 0
Buongiorno,
sto creando un nuovo sito web per la mia nuova attività che a breve comincerò
Avrei bisogno nella riga 1 della Home page di mettere una immagine a tutta larghezza dove sopra dovrei inserire un testo ed un pulsante
Come posso fare ??
Ho tutti gli strumenti già nella mia versione di Website X5 pro (vers. 2022 3.7) oppure devo acquistare una integrazione ??
E' possibile avere una indicazione passo passo su come vfare in entrambe le situazioni ?
Grazie mille in anticipo per il vostro aiuto
Gepostet am
Devi acquistare l'oggetto content slider ma sappi che non è responsive. Per farlo responsive ci devi inserire codice extra oppure devi utilizzare immagini con un focus centralizzato in maniera che l'occhio dello spettatore poco attento non percepisca i tagli laterali. Per avere indicazioni passo passo puoi visitare il mio sito per varie soluzioni suggerite ma devi masticare qualcosa di programmazione oppure aspettare qualke idea più semplice proveniente da altri sviluppatori oppure vai sulla piattaforma di giancarlolab.it dove trovi soluzioni veramente uniche, pronte e impaccchettate per essere utilizzate da subito.
Ciao Roberto. L'oggetto Content Slider non è a pagamento, è di default tra gli oggetti standard di Website X5.
Io non l'ho mai acquistato, non so se ora è a pagamento, non ho rinnovato all'ultima versione e non uso Website X5 da tanto, non vorrei siano cambiate le cose.
Vero hai ragione Giuseppe mio errore ma la sostanza sul responsive non cambia. Se non ci sai mettere le mani non serve a nulla ossia io di questi oggetti che vedo installati con foto supertagliate mi vergognerei a chiedere pure 5 euro per un template.
... Ciao, ... tutto dipende dalla combinazione della struttura reale ed da ciò che vuoi ottenere, ci sono decine di variabili ed aspetti su cui districarsi...
... ... per farla breve ti oriento su tre esempi basilari...
... ...... ...... ...... ...... ...... ...
1) ...
... a) ... nella prima cella a tutta riga (o meno) potresti usare l'Oggetto Testo, comprensivo di testo descrittivo e di immagine per il pulsante o testo per il pulsante...
... b) ... mettere un'immagine di sfondo alla cella del testo;
... c) ... in alternativa a b) puoi mettere un'immagine di sfondo alla riga, oppure lo slide immagini, oppure video;
... ...... ...... ...... ...... ...... ...
2) ...
... a) ... nella prima cella potresti usare l'Oggetto Testo, comprensivo di testo descrittivo;
...b) ... nella cella sottostante potresti usare l'Oggetto Pulsante;
... c) ... raggruppare le due celle in unica riga, ed assegnare l'immagine di sfo ndo alla riga( oppure, slide o video);
... ...... ...... ...... ...... ...... ...
3) ...
... potresti usare nella prima cella della prima riga direttamente l'Oggetto Content Slider, molto adatto per questi scopi, nel quale puoi usare testo descrittivo breve, immagini e pulsante, con immagini di sfondo sia nella slide o usare quella di sfondo della riga; a seconda del risultato che ti è più congeniale...
... ...... ...... ...... ...... ...... ...
4) ...
... eventuali altre possibili idee senza bisogno di strafare.
... ...... ...... ...... ...... ...... ...
... facendo le varie prove potrai confrontare e valutare i risultati ottenuti...
... per esempio puoi usare una prima pagina per il punto 1), una seconda pagina per il punto 2), ed una terza pagina per il punto 3), così potrai facilmente valutare...
... nota: le immagini di sfondo sono in modalità CSS COVER, cioè Centro/Centro sulla priorità Larghezza/Altezza, lo capirai da te con le prove, ma se non ti fosse chiaro avvisami...
... raramente occorre intervenire in EXTRA se non solo per alcuni casi in cui per certi motivi si vuol ottenere o mantenere l'aspetto razionale delle immagini di sfondo mantenendo a tutta la larghezza, e nel qual caso ti interessasse, avvisami...
.
ciao
.
... riferimento alla mia citazione l'ho fatto io per fartene un'idea, rapidamente senza andar tanto per il sottile, con pochi ed essenziali click, relativi ai miei precedenti punti 1), 2, 3):
>> VEDI
.
ciao
.
Ecco alcuni esempi:
CONTENT SLIDER E OGGETTO ADATTATO PROSSIMO AL RESPONSIVE
CONTENT SLIDER CON VIDEO RESPONSIVE
CONTENT SLIDER SU SFONDO RIGA CON IMMAGINI ADATTATE PROSSIME AL REPONSIVE
SCRIVI SULL'IMMAGINE CON L'OGGETTO RESPONSIVE IMMAGINE
VIDEO RESPONSIVE SU SFONDO RIGA UTILIZZANDO L'OGGETTO IMMAGINE
EFFETTO ONDA SU CONTENT SLIDER RESPONSIVE
Con gli strumenti messi a disposizione di incomedia si possono fare moltissime cose ma di default è scarso nell'ottimizzazione responsive.
Per il responsive prima si ragionava così:
Ogni elemento aveva una dimensione abbastanza rigida. Oggi Si usano tecniche più dinamiche:
Responsive Design ▼
Invece di fissare larghezza e altezza, si lascia che l'elemento si adatti al contenitore.
Esempio CSS:CSSimg { width: 100%; height: auto;}
L'aspect ratio esiste ancora, ma viene mantenuto automaticamente.
Proprietà CSS aspect-ratio
Oggi non serve più fare hack con padding-top. ► CSS.card { aspect-ratio: 16 / 9;}
Il browser calcola tutto da solo.
Container Queries
Sempre più diffuse. Un elemento non si adatta più alla finestra del browser ma al contenitore in cui si trova.
CSS@container (min-width: 600px) { .card { aspect-ratio: 4 / 3; }}
Qui il rapporto può cambiare dinamicamente.
Fluid Design
Molti designer non progettano più pensando a un singolo aspect ratio.
Progettano componenti che funzionano da:▼
L'obiettivo è che il layout si adatti, non che rispetti un solo rapporto.
CSS Grid e Flexbox
Spesso il rapporto d'aspetto non viene imposto direttamente.
Si definiscono aree flessibili:
CSSdisplay: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); Le card si ridimensionano automaticamente.
Infine abbiamo CLAMP
Clamp → gestisce la fluidità CSSfont-size: clamp(16px, 2vw, 28px);
Significa:
Il browser adatta il valore senza media query.
Perché oggi è così popolare?
Prima si faceva:
CSSh1 { font-size: 24px;} @media (min-width: 768px) { h1 { font-size: 32px; }} @media (min-width: 1200px) { h1 { font-size: 48px; }}
Oggi:
CSSh1 { font-size: clamp(24px, 4vw, 48px);}``
Molto più pulito.
Dove viene usato maggiormente?
La triade moderna del CSS
Se guardi i framework e i siti più recenti, il trend è:
In pratica oggi un componente ben fatto potrebbe essere:
CSS.card { width: 100%; max-width: 500px; aspect-ratio: 16 / 9; padding: clamp(15px, 2vw, 40px);} .card h2 { font-size: clamp(1.2rem, 3vw, 2rem);}
Niente media query o quasi.
Buon lavoro!!!!