Cerca nel sito

+39 037159181

info@simacosrl.it

Documentazione

HEADINGS

headings 2

headings 3

headings 4

headings 5

headings 6

CACHE

IN GENERALE: se non si notano aggiornamenti dopo una qualsiasi azione cancellare la cache

Configurazione -> Sviluppo -> Prestazioni
"svuota tutte le cache"

LINGUE

Configurazione -> Impostazioni internazionali e lingue -> Lingue

- Attivare, disattivare, aggiungere lingue

- Rendere traducibile il tipo di contenuto desiderato. Ad esempio accedere alla modifica della pagina e selezionare in "supporto multilingue" Enabled, with field translation

FONT

Per impostare il font generale l'opzione, nella lista degli enabled fonts è "everything(body)"
Per rendere disponibili altri font "add selector in theme CSS"

Typekit font:

Verificare se il font è presente qui:

Aspetto -> Font your face -> enabled font

Se il font manca dalla lista andare su ADOBE -> https://typekit.com/account/tokens

Visualizza un font poi "aggiungi a progetto web"
scegliere un progetto web qualsiasi, poi SALVA poi FINE

Configurazione -> Interfaccia utente -> @font-your-face settings

"Update Typekit fonts"

Google font

Verificare se il font è presente

Aspetto -> Font your face -> enabled font

Se il font manca dalla lista
"browse all fonts" -> cerca e abilita il font (scegliere se possibile il latin-regular)

CANCELLARE LA CACHE

Per impostare il font generale l'opzione, nella lista degli enabled fonts è "everything(body)"
Per rendere disponibili altri font "add selector in theme CSS"

HOME

Nella home e nelle altre pagina sono disponibili:

5 blocchi fissi di testo e contenuto liberi
5 blocchi in evidenza
slideshow
brochure
accordion
carousel
galleria immagini
icone + testo

In base al mockup decidere quali sono i blocchi della home e i blocchi fissi e decidere l'ordine nella lista dei blocchi

Modificare l'ordine SOLO nella regione "blocchifissi": Struttura -> Blocchi -> region-blocchifissi

In generale, la differenza tra un blocco fisso e un blocco in evidenza è che in un blocco fisso c'è un HTML che in generale non verrà mai cambiato, mentre nei box in evidenza il contenuto è determinato dalle pagine ad esso associato, quindi in un blocco "in evidenza" non vengono inseriti direttamente i contenuti: questi saranno dei campi presenti nei nodi associati a quel box.

FORMATI IMMAGINE

Quadrato 1:1 (768x768)
Rettangolo 16:9 (1140x640)
Rettangolo 4:3 (1140x855)
Rettangolo verticale 16:9 (768x1370)
Rettangolo verticale 3:4 (768x1024)
Slideshow (2600x1300)
Slideshow (2600x940)

I formati immagine devono essere modificati nei box

Slideshow
In evidenza
Figli

Ogni modifica deve essere fatta in due posti:

1: nel Content Type "pagina"

serve a definire la finestra di crop che l'utente può utilizzare per croppare l'immagine nel formato scelto. Per ogni campo cliccare su "manual crop", scegliere il formato e salvare

2: nella vista dei blocchi slideshow, in evidenza e figli

per mostrare l'immagine caricata in quel formato

Vista Slideshow: modificare il campo "immagine slideshow HP"

Vista figli: modificare Immagine principale 768x768

Nella vista "figli" è possibile modificare anche l'immagine di qualsiasi box Evidenza e i box in evidenza trasformati in carousel

PER OGNI MODIFICA ALLA VISTA "Applica" e poi "Salva" in alto a destra

Figli e In evidenza

Animazioni

Riferimento: https://ianlunn.github.io/Hover/

ICONA E TESTO

<div class="icona">
<i class="fa-solid fa-industry fa-fw"></i>
<h4><strong>00</strong> AREA SITO PRODUTTIVO</h4>
</div>

<div class="icona">
<i class="fa-solid fa-seedling fa-fw"></i>
<h4><strong>00</strong> LINEE PRODUTTIVE</h4>
</div>

<div class="icona">
<i class="fa-solid fa-tomato fa-fw"></i>
<h4><strong>00</strong> CAPACITÀ DI PRODUZIONE</h4>
</div>

<div class="icona">
<i class="fa-solid fa-globe fa-fw"></i>
<h4><strong>00</strong> NUMERO PAESI IN CUI ESPORTIAMO</h4>
</div>

</div>

Due esempi di stili da copiare nel css aggiuntivo in T&S:

1

.testo1fisso .colonne {
margin:50px 0 50px 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 20px;
}

.testo1fisso .icona {
text-align:center;
}

.testo1fisso .icona i {
background-image: linear-gradient(to right, #c60e06, #f7780e);
font-size: 40px;
padding: 20px;
border-radius: 40px;
width: 40px;
box-sizing: content-box;
color: #fff;
}

.testo1fisso .icona h4 {
text-align:center;
font-size:25px;
line-height:25px;

}

@media (max-width:767px) {
.testo1fisso .colonne {
display: grid;
grid-template-columns: 1fr;
}
}

2

.testo5fisso .colonne {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
text-align: center;
}

.testo5fisso .icona i {
color: #000;
}

.testo5fisso .icona h4 {
/*se affiancato all'icona: display:inline-block; */ display:inline-block;
margin-left:5px;
color:#fff;
font-size:16px;
font-weight:bold;
}

@media (max-width:767px) {
.testo5fisso .colonne {
display: grid;
grid-template-columns: 1fr;
}
}

TESTO E CTA

html:

<div class="testoecta">
<p>testo testo testo testo</p>
<p><a href="/" class="btn">scopri di più</a></p>
</div>

css:

.testoecta {
display:flex;
gap:30px;
padding:30px 30px 30px 30px;
margin:50px 0 50pz 0;
color:#ffffff;
font-size:30px;

/****

se si vuole sfondo in gabbia mettere sfondo qui e non nel bloccofisso che si utilizza

background: #1d3867;
oppure
background-image: linear-gradient(to right, #1d3867, #2586b9);

**********/

}

@media (max-width: 767px) {

.testoecta {
display:block;

}

Webform

- aggiungere una webform

inserire un titolo, eventualmente una voce di menu e salvare.

Dopo aver creato la webform viene generata una pagina con la webform. E' possibile da questa webform creare anche un blocco che puo essere aggiunto a qualunque contenuto (tipicamente verrà inserito in un "testobloccofisso")

- Dopo aver salvato la prima volta si apre un'interfaccia che consente di inserire i campi. Solitamente si usano campi di testo (per testi e numeri), aree di testo (per messaggi piu lunghi), email, opzioni del selettore (per select e radio button) e altri.

- Se vogliamo inserire dei testi fissi nella form (tipo "contattaci per avere maggiori informazioni") aggiungere un campo di tipo "markup"

- è possibile inserire etichette sopra il campo, oppure se si vuole inserire l'etichetta DENTRO il campo usare il campo "placeholder".

- per inserire la privacy (il nome del campo non è importante) aggiungere un campo di tipo "opzioni del selettore", obbligatorio e aggiungere l'unica opzione "sì|Acconsenti al <a href="/privacy">trattamento dei dati personali</a>". visualizzazione etichetta: "nessuno"

- Si possono creare dei riquadri per dividere la form in parti (es: nella metà di sinistra un markup e nella metà di destra la form). Creare un riquadro e trascinare i campi al suo interno. Aggiungere le classi CSS nel riquadro, ad esempio "col-sm-4 col-xs-12 left". Il sistema bootstrap lavora su 12 colonne totali, quindi queste classi creano un contenitore largo 4 su 12, quindi il 33%. Quello di destra avrà quindi le classi "col-sm-8 col-xs-12 right". Se si volessero fare due contenitori larghi il 50% avrnno entrambi "col-sm-6" ecc

- Anche per il singolo campo, in basso si trova "wrapper css classes". Per ogni campo inserire ad esempio "col-sm-6 col-xs-12 left" per il nome e "col-sm-6 col-xs-12 right" per il cognome. "col-xs-12 totale" per un campo largo 100%.

- è possibile creare una pagina di atterraggio (è sempre consigliabile farlo). Creare una pagina normale con il contenuto desiderato (tipo "grazie per averci scritto ecc). Nel tab "impostazioni maschera" della webform scegliere "Destinazione della redirezione" -> Custom URL e inserire l'indirizzo relativo della pagina (es:"grazie-averci-contattato". Creare questa pagina è utile anche come trigger su Google tag manager per registrare l'avvenuta conversione di una campagna ADS ad esempio.

- Nel tab "impostazioni maschera" In SPAM PREVENTION mettere il check per attivare il captcha.

In impostazioni avanzate mettere " Disponibile come blocco ".

Togliere il check su "Show the notification about previous submissions " e inserire il testo del submit button.

Dopo aver creato la versione BLOCCO della webform, questo blocco potrà essere richiamato in qualunque parte della pagina, impostando un formato di testo PHP e inserendo il codice. SOSTITUIRE LA CLASSE "FOMCONTATTI":

Dove 402 è l'id della webform. L'id della webform è il numero che si legge nelle url mentre modifichiamo la webform.

- Per impostare il recaptcha di google: per aggiungere a google un sito per il recaptcha: loggarsi su google con account info@weblitz.it. Visitare https://www.google.com/recaptcha/admin. In alto a destra clicca sul "+". INserire etichetta, url del sito e come tipo di recaptcha la versione V2. INserire poi in /admin/config/people/captcha/recaptcha le chiavi fornite da google.

- PER STILIZZARE LA FORM: aggiungere css in template e stili. SOSTITUIRE LA CLASSE "FORMCONTATTI". Si possono creare infinitiblocchi come questo con classi diverse

/***css formcontatti****/

/****stile dei campi****/
.formcontatti .form-type-textfield input,
.formcontatti .form-type-webform-email input,
.formcontatti .form-type-textarea textarea {
padding:0px 10px 0px 10px /*top right bottom left*/;
margin:0px 0px 20px 0px /*top right bottom left*/;
color: #000 /*colore del testo*/;
background: transparent /*colore sfondo*/;
text-transform: none /* uppercase */;
border-top: /* 1px solid #000 */;
border-right: /* 1px solid #000 */;
border-bottom: /* 1px solid #000 */;
border-left: /* 1px solid #000 */;
border-radius: 0 /* 10px */;
box-shadow: /* 0px 0px 9px -3px rgba(0,0,0,0.75) */;
}

/****stile delle label****/
.formcontatti .webform-component > label {
color: #000 /*colore del testo*/;
text-transform: none /* uppercase */;
font-weight: normal /* bold */;
margin: 0px 0px 5px 0px /*top right bottom left*/;
font-size: 16px;
}

/****placeholder/segnalibro****/
.formcontatti .form-control::placeholder {
color: #000 /*colore del testo*/;
text-transform: uppercase /* uppercase */;
}

/****link(es: link privacy)*****/
.formcontatti .form-item a {
color:#000;
text-decoration:underline!important;
}

/****bottone*****/
.formcontatti .btn {
float: /* left o right */;
color: /* #ffffff */;
border: /* 1px solid #000 */;
background: /* #000000 */;
text-transform: none /* uppercase */;
font-weight: normal /* bold */;
transition: all 0.3s;
}

.formcontatti .btn:hover {
color: /* #ffffff */;
border: /* 1px solid #000 */;
background: /* #dddddd */;
text-transform: none /* uppercase */;
font-weight: normal /* bold */;
}