Stili di CSS hacks per OptimizePress

Stili di CSS hacks per OptimizePress

Pubblicato il 26 Febbraio, 2019

Scritto da Matteo Feduzi

OptimizePress, Wordpress

Una volta testato il corretto funzionamento delle tue pagine di OptimizePress ti troverai a rendere il tutto più accattivante.

Migliorare la grafica delle tue pagine web non deve essere solamente un capriccio ma una grande strategia per attirare molti più utenti a svolgere una determinata call to action.

Quando utilizzi OptimizePress hai la possibilità di personalizzare qualsiasi pagina.

In questo articolo condividerò con te qualche hacks CSS per rendere il design delle tue pagine ancora più fantastiche di quanto non siano già.

Il CSS (Cascading Style Sheets) non è altro che un codice che si va ad applicare al nostro HTML.

OptimizePress ti da due possibilità:

  • Aggiungere codici CSS validi in tutte le tue pagine.
  • Aggiungere codici CSS a singole pagine.

La prima possibilità ti servità nel caso in cui dovessi per esempio replicare la stessa personalizzazione dell’header anche in tutte le altre pagine senza riscrivere il codice ogni volta.

La seconda possibilità ti servirà nel caso in cui dovessi personalizzare un singolo oggetto di una pagina web.

Questa flessibilità ti consente di avere elementi con design unici su tutto il tuo sito o su ogni singola pagina.

Ecco le due aree dove è possibile applicare CSS:

  • OptimizePress dashboard – Qui puoi applicare gli stili globali che funzioneranno su tutte le pagine generate dal LiveEditor di OptimizePress.
    Vai su OptimizePress > Dashboard > Global Settings > Custom CSS (Sitewide)
  • Page Settings – Qui puoi aggiungere del CSS valido su una singola pagina.
    Quando sei all’interno di una pagina tramite LiveEditor vai su Page Settings > Other Scripts > Scegli Custom CSS dal menù a discesa. Se non vedi già un’area di testo CSS fai click sul pulsante “Add New” e poi scegli “Custom CSS”.

Di seguito potrai trovare i codici CSS che ti permetteranno di personalizzare le tue pagine.

Ci tengo a dire inoltre, che alcuni codici sono stati forniti direttamente dai membri del suppoto tecnico di OptimizePress.

Apprendiamo il codice

Quando andrai a scrivere del codice (specialmente se tanto) ti consiglio di aggiungere un commento che ricordi il funzionamento del codice che segue.

Come questo:

/* Il commento va qui */

/* = apre il commento.

*/ = chiude il commento.

Ciò significa che puoi scrivere commenti nel tuo codice CSS come nota a te stesso o ad altri, spiegando che cos’è il codice o che cosa fa.

Il commento non apporterà nessuna modifica nelle pagine web.

Ho creato questa guida in italiano perché tu possa copiare i codici CSS qui sotto e inserirli direttamente nelle tue pagine con un semplice copia e incolla.

Non aver paura dei commenti, come abbiamo detto prima non apporteranno nessuna modifica al tuo sito e potrai rimuoverli o modificarli.

CSS per pagine create con LiveEditor

Ecco alcune delle modifiche più importanti che potrai fare grazie al CSS:

/* SPOSTA IL LOGO A DESTRA */
.container .eight.columns {
   width: 300px;
   float: right;
}
body .container .navigation #navigation-alongside {
   float: left;
}
.container .eight.columns {
   width: 300px;
   float: right;
}
body .container .navigation #navigation-alongside {
   float: left;
}
/* CAMBIA IL COLORE DEL TESTO DELL'OGGETTO NEL MENU ATTIVO */
body .container .navigation ul .current-menu-item a {
   color: #ff9900 !important;
   text-decoration: underline;
}
/* AGGIUNTA DI BORDI CON OMBRA */
.container {
   box-shadow: 0px 10px 40px #888888;max-width:1060px;
}
body {
   background-color: #ededed;
}
/* MODIFICA CONTENUTI CONTEGGIO COLORI */
.toggle-panel {
   border: 1px solid #ccc;
   background-color: #ededed;
}

Se vuoi che i tuoi codici di CSS vengano visualizzati esclusivamente quando viene stampata una tua pagina utilizza il seguente codice.

@media print {
/* qui aggiungi i codici CSS che vuoi vengano visualizzati in stampa */
}

Riga tratteggiata

Se vuoi suddividere le varie sezioni di una pagina puoi utilizzare questa personalizzazione.

Guarda l’immagine di esempio qui sotto:

Per eseguire questa personalizzazione dovrai prima dare un nome alla classe dello stile.

In questo caso dovrai quindi aggiungere “dash-it”.

Per prima cosa dovrai creare la tua sezione selezionando “Add New Row” all’interno di una pagina in LiveEditor.

Seleziona poi successivamente la penna presente nella sezione che hai appena creato e scorri fino a quando non troverai il contenuto della seguente immagine.

Una volta creata la classe aggiungi il seguente codice CSS alla pagina:

/* DASHED BORDER ON ROW */
.dash-it {
   border-top-style: dashed !important;
}

Per aggiungere il bordo tratteggiato sia alla parte superiore che quella inferiore utilizza il seguente codice:

.dash-it {
   border-top-style: dashed !important; border-bottom-style: dashed !important;
}

Puoi impostare anche una riga più sottile inserendo un valore specifico nel campo “Row border top (Width)” e “Row border bottom (Width)” della sezione apposita.

Il CSS di seguito ti mostrerà come squadrare o arrotondare i bordi dell’OverlayOptimizer come nell’immagine sottostante:

/* SQUADRARE O ARROTONDARE I BORDI DELL'OVERLAYOPTIMIZER */
.fancybox-skin {
   -webkit-border-radius: 5px !important;
   -moz-border-radius: 5px !important;
   border-radius: 5px !important;
}

Alcuni CSS extra

Ecco come puoi creare un bottone all’interno del menù:

Vai su Aspetto > Menu > Clicca Impostazioni schermata in alto a destra > Seleziona il checkbox Classi CSS

Ora vai nel menù interessato e seleziona un oggetto, vedrai la classe CSS come nella seguente immagine:

Inserisci una classe CSS che non è ancora stata utilizzata e clicca su “Salva menù“.

Vai su OptimizePress > Dashboard > Global settings > Custom CSS (Sitewide) e inserisci il codice come mostrato qui sotto.

Considera che così facendo imposterei la personalizzazione in una qualsiasi pagina che riporterà quella classe.

Per inserirlo su una singola pagina dovrai seguire i passaggi mostrati all’inizio di questa guida.

Incolla il seguente codice in modo che appaia uguale all’immagine precedente.

/* PERSONALIZZARE E CREARE UN BOTTONE IN UN OGGETTO DEL MENU */
.bottone {
   background-color: #ff6800;
   background: #ff6800;
   color: #fff;
   -webkit-border-radius: 3px;
}

Aggiungere il triangolo trasparente alla riga

Ecco l’effetto che potrai ottenere con questa personalizzazione:

Per poter applicare questa personalizzazione dovrai prima aggiungere il seguente codice CSS:

/* Aggiungi un triangolo trasparente nella riga con il CSS */
.arrowRow {
  position: relative;
  bottom: 0;
  width: 100%;
  padding-bottom:4%; /* This adjusts top & bottom padding, you could remove this & add height class to before and after */
  background-color: #fff; /* Edit the colour to match the colour of the row below */
}
.arrowRow:before, .arrowRow:after {
  content:'';
  position: absolute;
  bottom: 100%;
  width: 50%;
  padding-bottom:inherit;
  background-color: inherit;
}
.arrowRow:before {
  right: 50%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -ms-transform: skewX(60deg); /* These change the angle, change all references */
  -webkit-transform: skewX(60deg);
  transform: skewX(60deg);
}
.arrowRow:after {
  left: 50%;
  -ms-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -ms-transform: skewX(-60deg);
  -webkit-transform: skewX(-60deg);
  transform: skewX(-60deg);
}

Successivamente inserisci il seguente codice nella sezione Code After Row.

Conclusioni

OptimizePress è un tool potentissimo che permette la creazione di landing page professionali all’interno del CMS di WordPress.

Se il tuo obbiettivo è convertire una grande percentuale di utenti questo è il tool che fa per te.

Non dimenticare di lasciare un commento se questa guida ti è piaciuta e continua a seguire il mio blog se ti fa piacere, ho molti contenuti pronti per te!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *