Editor landing page MIGAGEM

MigaGem include un editor di landing page integrato che permette di creare pagine promozionali anche a chi non ha un sito web proprio. Le pagine possono essere collegate alle nostre MIGAGEM per il marketing di prossimità oppure utilizzate in qualsiasi ambito come facebook e altri canali.

In questo breve video illustriamo i passaggi fondamentali per configurare una landing page:

 

 

Step 1 – Creare una colonna responsive

Questo passaggio è fondamentale per poter adattare automaticamente la pagina promozionale ad ogni dispositivo, desktop o mobile.

Dal menu verticale posizionato nella parte destra della pagina dell’editor, fare clic sulla prima voce “1 Column” (1 colonna), tenere premuto il pulsante sinistro del mouse e trascinare verso l’area bianca al centro della pagina.

Muovendo ora il mouse nell’area dove abbiamo trascinato la colonna, come mostrato nel video, possiamo già vedere la nostra colonna delimitata da una linea blu con etichetta “Row”.

Selezionando la selezione “Row” e facendo clic sull’icona  accediamo alle impostazioni della colonna e impostiamo nella sezione layout, sempre nel menu verticale a destra, il campo “width” (larghezza) al 100%. Questo è molto importante per garantire che la pagina sia responsiva.

Possiamo anche impostare una larghezza massima della colonna (max width), ad esempio a 1200px, utile per una migliore resa visiva della pagina, e degli elementi che in essa saranno contenuti, sugli schermi desktop di grandi dimensioni.

Inoltre, nella sezione “Typography”, impostiamo l’allineamento del testo (Text align) come centrato.

Per tornare al menu principale, facciamo clic sull’icona  che troviamo nell’angolo in alto a destra del menu verticale.

 

Step 2 – Inserire una immagine

Per inserire una immagine facciamo clic sulla voce “Image” del menu e trasciniamo all’interno della colonna che abbiamo creato nello step precedente, come mostrato nel video.

Si aprirà automaticamente una finestra di dialogo con la quale potremo scegliere l’immagine e caricarla nella nostra pagina proporzionale. Possiamo trascinare direttamente l’immagine nell’area tratteggiata o fare clic all’interno di questa per accedere al file manager e sfogliare le cartelle del pc.

Una volta caricata l’immagine, comparirà una anteprima, facciamo clic sull’anteprima e l’immagine sarà posizionata nella pagina.

Per chiudere la finestra di dialogo fare clic sulla X.

Anche per l’immagine, come abbiamo già fatto per la colonna, accediamo alle impostazioni per impostare la larghezza (width) al 100%. In questo modo l’immagine si adatterà automaticamente alle dimensioni del dispositivo. Per tornare al menu principale facciamo sempre clic sull’icona .

 

NB: ora che abbiamo inserito un elemento all’interno della colonna, possiamo meglio comprendere la selezione del singolo elemento all’interno della pagina del nostro editor. Spostandoci nell’editor vedremo che ogni elemento vine individuato da un perimetro blu con una etichetta, abbiamo visto “Row” passando con il mouse in prossimità dei limiti della colonna e vediamo “Image” se passiamo con il mouse sopra l’immagine. Abituiamoci sin d’ora a visualizzare i vari elementi della pagina come inseriti in “rettangoli”, in alcuni casi uno dentro l’altro. Per individuare meglio i singoli elementi e chiarire questo concetto, facciamo clic sull’icona  del menu:

In questo caso abbiamo selezionato dalla lista che ci mostra i singoli elementi la nostra immagine. Selezionando una ad una le altre voci dell’elenco visualizzeremo il perimetro dei singoli elementi.

 

Step 3 – Aggiungere link all’immagine

Ora facciamo in modo o che cliccando sull’immagine l’utente venga ridirezionato verso una qualsiasi pagina web.

Facciamo clic sulla voce “Link block” del menu e trasciniamo all’interno della colonna. Come abbiamo visto nel video, poiché questo elemento è inizialmente vuoto potremmo avere qualche difficoltà ad individuarlo accanto o sotto all’immagine. Per aiutarci utilizziamo il sistema che abbiamo illustrato precedentemente, facciamo clic sull’icona  e quindi sulla voce “Link” che troviamo nell’elenco per vedere dove si trova il link block.

A questo punto dobbiamo trascinare l’immagine all’interno del link bloc, come abbiamo visto nel video.

Possiamo quindi verificare come l’immagine si trovi ora all’interno dell’elemento link.

Completiamo l’impostazione del collegamento selezionando l’elemento link bloc e accedendo alle sue impostazioni, facendo clic sull’icona 

I campi da impostare sono:

  • Title – il nome che comparirà posizionando il mouse sull’immagine/link
  • Href – l’URL della pagina di destinazione
  • Target – scegliere se la pagina di destinazione si apriraà nella stessa finestra del browser oppure una nuova

 

Step 4 – Aggiungere un testo

Per aggiungere un testo selezioniamo dal menu la voce “Text” e trasciniamo nel punto in cui vogliamo posizionarlo nella pagina.

Digitiamo il testo desiderato e dall’immagine qui sopra vediamo come è già possibile intervenire su alcuni elementi di formattazione del testo con le icone che compaiono sopra l’area selezionata. Possiamo evidenziare con il mouse una parte o tutto il testo e renderlo grassetto, sottolineato ecc.. L’ultima icona è l’aggiunta dell’attributo link.

Una volta inserito il testo possiamo accedere alle impostazioni come abbiamo visto ai punti precedenti, tramite l’icona  del menu. Potremo impostare dalla sezione “Typography” il font, le dimensioni, l’allineamento, ecc…

Se abbiamo abilitato un link nel testo, facciamo clic sull’icona  e vediamo sempre l’elenco dei nostri elementi. All’interno dell’elemento text vedremo l’elemento link: lo selezioniamo e clicchiamo sull’icona  per inserire le impostazioni del link, come abbiamo visto nel caso del Link block.

 

Step 5 – Inserire sfondi e immagini di background

Possiamo inserire uno sfondo a tutta la pagina o ad un singolo elemento. Facciamo per prima cosa clic sull’icona  del menu, per visualizzare e selezionare gli elementi della nostra pagina. Se selezioniamo “Body”, applichiamo ad esempio un colore di sfondo a tutta la pagina: clic sulla icona  del menu poi nella szione “Decoration” clic sull campo “Background color” per visualizzare il selettore dei colori.

E possibile anche utilizzare una immagine per lo sfondo. In questo caso facciamo clic sul campo “Background” (proprio sotto il campo “Background color” che abbiamo appena visto. Cliccando ora sul + comparirà la finestra di dialogo:

Con un clic su “Images” possiamo caricare la nostra immagine per lo sfondo.

Le altre impostazioni sono:

  • Background repeat – per ripetere una immagine su tutta l’area dello sfondo, ad esempio l’elemento di un pattern.
  • Background position – per posizionare l’immagine.
  • Background attachment – per determinare se l’immagine scorrerà con il resto della pagina o rimarrà fissa.
  • Background size – per modificare le dimensioni dell’immagine.

Se vogliamo impostare un colore o una immagine di sfondo ad un singolo elemento della pagina, dovremo selezionarlo tramite il menu  ed effettuare le operazioni con lo stesso procedimento che abbiamo seguito per l’elemento Body.

 

Salvataggio della landing page e impostazioni avanzate

Al termine di ogni impostazione, ricordiamo di salvare il nostro lavoro facendo clic su .

Per gli utenti più esperti, è possibile esportare il codice HTML e CSS della pagina, facendo clic sull’icona  del menu degli strumenti che si trova sopra l’area di anteprima:

Possiamo importare il codice della landing page che abbiamo manipolato tramite codice, facendo clic sull’icona  nel menu degli strumenti. In questo caso è importante ricordare che il codice CSS dovrà necessariamente essere contenuto all’interno del tag <style>.

 

 

LINK: https://support.migastone.com/it/hrf_faq/editor-landing-page-migagem/