Creazione di una pagina su WordPress [Dalla A alla Z]

Con oltre 1,4 miliardi di siti web nel mondo nel 2018, è abbastanza normale avere difficoltà a distinguersi rapidamente . Naturalmente, il numero non è l’unico fattore da considerare: deve avere unsito web impeccabile per garantire il suo successo su Internet . Per questo, il design di ogni pagina del suo sito web non deve essere preso alla leggera . I visitatori non passeranno necessariamente attraverso la sua home page prima di ottenere le informazioni che stanno cercando. Inoltre, è probabile che tutte le pagine indicizzate del suo sito web beneficino del traffico diretto. Deve quindi offrire un’esperienza utente ottimale sia sulla home page che su tutte le altre pagine. E questo ovviamente richiede un design adeguato e reattivo, con informazioni rilevanti. Per questo, le mostrerò le migliori pratiche e i diversi passaggi per creare la sua prima pagina dalla homepage. Inoltre, la invito a guardare il video che ho aggiunto a questo articolo per seguire direttamente il processo.

Creare una pagina su WordPress

Per questo, ho fatto una presentazione

veloce, quindi su powerpoint per mostrarle i diversi elementi che ho trovato:

Perché è importante progettare bene ogni pagina del suo sito web?

A meno che non si tratti di un sito monopagina, lei ha una o più pagine che accompagnano la sua home page. Questi le permettono di per fornire molte più informazioni sui suoi prodotti, servizi o temi quando ha un blog.

E una volta indicizzati dai motori di ricerca, appaiono nei risultati quando le persone li cercano.

Pertanto, sono tutti gateway per il suo sito web e deve fare attenzione a progettare bene ciascuno di essi. Altrimenti, rischia di perdere molto traffico a causa di pagine mal progettate, soprattutto quando il suo sito inizia a guadagnare autorità.

Inoltre, tenga presente che 57% dei visitatori che visitano un sito web con una pagina mal progettata non lo consiglieranno. Mentre il suo tasso di conversione può aumentare fino a 5,5 con raccomandazioni personalizzate.

Quindi, se vuole ottenere rapidamente visibilità e migliorare le prestazioni del suo sito web, deve offrire una eccellente esperienza utente e alcune pratiche possono aiutarla.

Le migliori pratiche per le migliori pagine web

Durante la creazione di un sito web, tendiamo a concentrarci sulla sua estetica, mentre è la sua ergonomia che le permetterà di migliorare il suo tasso di conversione. Ciò significa che la sua struttura e il suo design devono essere progettati tenendo conto dell’esperienza dell’utente.

Per fare questo, ho raccolto alcune buone pratiche da adottare che probabilmente le permetteranno dihanno le pagine miglioriin vista del tema del suo sito web.

Faccia una proiezione delle sue pagine

Il consiglio principale che posso darle è quello di fare una mock-up del suo sito web. Si tratta di una fase cruciale nella creazione del suo sito web, perché le permette di prendersi il tempo necessario per riflettere e proporre il sito migliore per il suo progetto.

Alla fine, avrà un risultato preciso che le consentirà di essere molto più veloce nel design del suo sito web del suo sito web.

Optate per la semplicità

Il suo design non è l’elemento che i visitatori del suo sito web vengono ad ammirare. Vogliono trovare informazioni specifiche o, in alcuni casi, eseguire una determinata azione. Le suggerisco quindi di considerare la semplicità come una regola d’oro, al fine dioffre una navigazione facile e piacevole.

A tal fine, utilizzi solo gli elementi che hanno un valore di funzione reale per gli utenti e faccia attenzione ad evitare quelli che possono rendere il suo sito troppo complesso. Altrimenti, rischia di danneggiare l’esperienza dell’utente, con un impatto molto significativo sulle prestazioni del suo sito web.

Stabilire una gerarchia visiva

I diversi elementi delle sue pagine web devono essere ben gerarchizzati e organizzati visivamente. Infatti, i visitatori dovrebbero preleva automaticamente gli elementi più importanti della pagina, in modo che possano trovare ciò che cercano in modo semplice e fluido.

Pertanto, agisca su aspetti come dimensioni, colori, layout, pulsanti, call to action, ecc. per ottenere una gerarchia e un’organizzazione di successo.

Offrire un sistema di navigazione intuitivo

Se non ha un sito web a pagina unica, la invito a fare in modo che i visitatori possano spostarsi facilmente da una pagina all’altra. L’idea è che possano spostarsi da un punto a un altro senza alcuno sforzo e senza chiedersi dove cliccare.

A tal fine, opti per una struttura ad albero molto semplice, con un massimo di tre livelli, e non esiti a utilizzare il netlinking per collegare le pagine del suo sito web. Inoltre, si assicuri che il suo menu di navigazione sia chiaramente visibile e, se possibile, integri un menu di navigazione nel footer del suo sito web.

Il suo sito deve essere “coerente

Oltre alla facilità di navigazione, la invito a fare in modo che tutti gli elementi delle sue pagine o dell’intero sito web siano coerenti. Infatti, è necessario logica e coerenza su ogni pagina, ma è anche necessario quando si sposta da una pagina all’altra del suo sito web.

Questo riguarda principalmente gli elementi grafici del suo sito web, ovvero

  • I font utilizzati;
  • I colori ;
  • Le illustrazioni ;
  • Ecc..

In effetti, non è necessario avere esattamente lo stesso layout in tutto il sito web, soprattutto quando si dispone di un gran numero di pagine. La cosa principale è trovare il giusto equilibrio e non confondere gli utenti quando lasciano una pagina per un’altra.

Ottimizzare l’accessibilità attraverso diversi media

Attraverso uno dei suoi studi, Mobify ha rilevato che il 30% degli utenti di Internet interrompe una transazione se un sito web non si adatta correttamente al loro dispositivo mobile. E quando sappiamo che questo supporto tecnologico è il primo che drena la maggior parte del traffico internet con una quota di 51,6 %è importante esaminare questo problema.

Infatti, le pagine del suo sito web devono essere in grado disi adatta alle dimensioni di tutti gli schermi per offrire un’esperienza utente ottimale. Inoltre, Google presta molta attenzione alla reattività dei siti, in quanto classifica prima quelli che sono reattivi a scapito di quelli che non lo sono.

Se vuole che il suo sito web sia responsive, dia un’occhiata a questo articolo che le mostra passo dopo passo come farlo.

Rispettare le convenzioni o gli standard web

Il hanno già familiarità con una serie di con una serie di convenzioni di web design e le consiglio di rispettarle. Questi includono

  • Collochi il logo in alto a sinistra o al centro della pagina e aggiunga il link alla home page;
  • Metta il menu di navigazione principale in alto o sul lato sinistro della pagina;
  • Impostate i link in modo che cambino colore quando gli utenti vi trascinano sopra il mouse.
  • E così via

Anche se a volte si è tentati di voler essere originali, non faccia l’errore di cambiare queste convenzioni. Cambiarli può far perdere tempo ai visitatori o causare confusione, danneggiando l’esperienza dell’utente.

Creare pagine rilevanti

Una pagina web viene creata per fornire una particolare informazione e lei deve assicurarsi che lo faccia. Infatti, se ha intenzione di aggiungere pagine alla homepage, probabilmente è perché vuole fornire maggiori informazioni sui suoi servizi, sui suoi prodotti o su un particolare articolo. Per farlo, deve rispondere a domande come

  • Rilevanza della pagina per i suoi visitatori;
  • Cosa devono sapere i suoi visitatori;
  • Informazioni che li faranno sentire sicuri;
  • Informazioni che li ispireranno ad agire.

Mettersi nei panni dei suoi visitatori

Poiché ritengono che i siti web non si preoccupino della loro esperienza, il 68% dei visitatori non converte, secondo i dati di Vitamina T. Quindi, quando pensa al design del suo sito web, deve mettersi nei panni dei suoi visitatori si metta nei panni dei suoi visitatori perché in definitiva è per loro che lei lo fa.

In questa logica, deve prima conoscere le preferenze del suo pubblico target. Ma può sempre testare o chiedere un feedback in seguito per migliorare l’esperienza dell’utente. Per fare questo :

  • Chieda ad amici e parenti la loro opinione;
  • Chieda un feedback ai suoi visitatori;
  • Analizza il comportamento dei suoi visitatori con strumenti come Uovo pazzo ;
  • Ecc…

Una volta che ha un’idea chiara di come dovrebbe apparire la sua pagina, può passare alla fase di creazione vera e propria.

Creare la pagina dell’Agenzia Twaino SEO: passi per creare la sua pagina wordpress

1 Presentation du site avant changement

Prima di creare la seconda pagina del sito web della mia agenzia SEO, Twaino.com, ho avuto l’opportunità di fare due cose:

  • Il mock-up delle pagine del mio sito web;
5 Prendre connaissance de la maquette
  • La home page del mio sito web.

Questi due elementi mi permetteranno di creare rapidamente la seconda pagina del mio sito web. E questo, nella misura in cui il mock-up mi dà un’idea precisa del risultato e la homepage servirà come modello o supporto.

Inoltre, utilizzo il tema “Avada” che mi permette di avere il plugin “Fusion Builder” che mi sarà utile per modificare la nuova pagina del mio sito web. Si noti inoltre che per questo processo, conto tre fasi principali, tra cui :

  • Creare un modello dalla pagina iniziale
  • Creare i blocchi per la visualizzazione su schermi medi e grandi
  • Creare i blocchi per la visualizzazione su piccolo schermo

Tuttavia, prima deve accedere alla sua Dashboard.

Acceda alla dashboard del suo sito web

Per creare la seconda pagina del suo sito web, deve accedere alla console di WordPress.

2 Aller sur tableau de bord

Per farlo, basta aggiungere “…./wp-admin” all’URL del suo sito web nel browser. Il mio è “https://twaino.com/wp-admin”.

Nella pagina di connessione, compili le caselle con i suoi identificatori e poi convalidi per accedere al dashboard.

1) Creare un modello dalla pagina iniziale

Si tratta di duplicare la struttura della sua home page per utilizzarla come modello in una nuova pagina.

3 Aller sur toute les pages

1-1) Accedere ai componenti della sua homepage

Nella barra laterale destra della sua Dashboard, clicchi sulla voce “Pagine” e poi su “Tutte le pagine”. Avrà accesso a tutte le pagine del suo sito web, compresa quella con il titolo “Home”: questa è la sua home page.

4 Page Accueil Modifier

Poi clicchi su “Modifica”, che appare non appena sposta il mouse sul titolo della pagina.

Nella pagina seguente, vedrà tutti i componenti o blocchi della sua homepage nel plugin “Fusion Builder”.

1-2) Creare un modello dalla homepage

Si assicuri che la finestra Builder sia attiva e clicchi sulla terza icona della stessa riga sul lato destro

6 Appuyer sur la disquette dans fusion builder

Avrà quindi cinque finestre su questa nuova interfaccia:

  • Dimostrazioni ;
  • Modelli ;
  • Contenitori ;
  • Colonne ;
  • Elementi.

Selezioni “Modelli” se non l’ha ancora fatto e crei un nuovo modello da questa pagina.

7 Sauvegarder le template

Assuma il nome del modello nell’apposita casella e clicchi su “Salva modello”.

8 Le template est accessible

Io ho chiamato la mia “Twaino Home Page” e ho salvato.

1-3) Creare una nuova pagina

Per creare una nuova pagina, può cliccare sulla finestra “+ Crea” in alto accanto a “Visualizza pagina”.

9 Ajouter une page

Può anche creare una nuova pagina cliccando sull’opzione “Aggiungi” sotto “Pagine” nella barra laterale sinistra.

10 Completer les informations nouvelle page

Assegni un nome alla nuova pagina inserendo il suo titolo nella prima casella appena sotto “Aggiungi una nuova pagina”. Io chiamo la mia “Agenzia SEO”.

11 Insertion du fusion builder

Noterà che per impostazione predefinita, “Fusion Builder” non è attivo. Per attivarlo, clicchi sul pulsante blu “Modifica con Fusion Builder” e appariranno le varie opzioni.

1-4) Caricare il modello salvato sulla nuova pagina

Clicchi sulla terza icona sulla stessa riga della finestra “Costruttore”. Nella sezione “Template”, deve avere il modello che ha salvato e premere l’opzione “Carica”.

12 Chargement du template home page

Appare un menu che le permette di scegliere come caricare il modello in questione. Questo è :

  • Sostituisci tutti i contenuti della pagina: sostituisce tutti i contenuti già presenti nella pagina;
  • Inserisci sopra il contenuto corrente: inserisce il contenuto sopra il contenuto corrente
  • Inserisci sotto il contenuto corrente: inserisce il contenuto sotto il contenuto corrente.

Scelgo la prima opzione per il modello “Twaino Home Page”, che sostituisce tutti i contenuti e mi porta tutte le parti che ho dovuto creare nella mia home page.

13 Chargement de la page

Poi lo pubblico per vedere come appare. Per farlo, clicchi sul pulsante blu ‘Pubblica’ nell’angolo in basso a destra e poi su ‘Anteprima’.

14 Publier la page

Al mio livello, ho la pagina “Agenzia SEO” con l’URL https://www.twaino.com/agence-seo/che assomiglia esattamente alla home page del mio sito web.

15 Le template est bien charge

2) Creare blocchi per la visualizzazione su schermi medi e grandi

“Fusion Builder” presenta i diversi elementi che compongono la sua pagina web e, scorrendo verso il basso, vedrà diverse linee in blu. Questi sono i diversi blocchi della pagina e le modifiche apportate a questo livello saranno prese in considerazione nel rendering finale.

16 Changement du slider revolution

Inoltre, dato che ha fatto una duplicazione, deve solo apportare delle modifiche e non creare ogni blocco da zero.

Inoltre, ho avuto l’opportunità di creare lo “slider revolution” di questa nuova pagina e lo caricherò semplicemente. In effetti, questa è la parte della sua pagina web che si trova appena sotto il menu di navigazione. Appare agli utenti senza che debbano scorrere fino alla fine della pagina.

17 Nouveau slider revolution

Se vuole farlo, può semplicemente modificarlo dal suo modello di homepage. Tuttavia, se non sa come fare, la invito a dare un’occhiata alla creazione del sito ” Slider Revolution “. Segua i passi per creare la sua per ciascuna delle sue pagine.

2-1) Modificare il primo blocco

Ci sono diversi blocchi su questo modello, compreso il blocco di separazione che voglio conservare. In questo caso, lo lascio e modificherò gli altri blocchi tenendo conto del mio layout.

18 Template de la maquette

Dispiego il contenuto del secondo blocco “Agenzia” cliccando sulla piccola freccia a destra.

2-1-1) Modificare il testo

Per modificare il testo, clicchi sull’icona di modifica che appare quando trascina il cursore sulla cella di testo.

19 Changement du texte

Se si sposta un po’ più in basso, vedrà il campo di testo dove potrà inserire il nuovo testo ed eseguire la formattazione.

Poi clicchi su “Salva” per salvare il nuovo testo.

2-1-2) Inserire un’immagine

Ho avuto l’opportunità di realizzare in anticipo tutte le immagini che utilizzerò e lei può fare lo stesso per procedere più rapidamente.

20 Changement des images

Clicchi sull’icona di modifica che appare quando trascina il cursore sulla cella immagine accanto alla cella di testo.

21 Ajout des images

Nell’interfaccia che appare, clicchi sul pulsante “Modifica” appena sotto la vecchia immagine.

23 Selection des images

Avrà quindi la sua “Libreria multimediale”, dalla quale potrà selezionare direttamente un’immagine.

24 Chargement des images

Ha anche la possibilità di importarli cliccando sulla finestra ‘Carica file’ accanto alla ‘Libreria multimediale’.

25 Ajout de limage

Prema il pulsante “Seleziona file” e sfogli il suo computer per trovare le immagini desiderate.

26 Fusion builder pendant changement

A questo punto, rinomini le sue immagini, io ho chiamato le mie :

  • Twaino i giardinieri SEO;
  • Riferimento naturale SEO ;
  • Clienti;
27 Ajout image avec les revues
  • Competenza di Google ;
28 Ajout image expertise google
29 Texte une expertise Google

  • Alexandre MAROTEL ;
  • Mariana Seiko Sakurada ;
  • Si unisca a noi.

Poi inserisco l’immagine di “Twaino i giardinieri SEO” e la salvo per inserire la seconda immagine nella terza cella della seconda riga

Inserisco anche il secondo testo “Eccellente SEO”, facendo attenzione alla formattazione necessaria.

2-1-3) Inserire altre righe di testo e immagini

A livello di layout, c’è una terza riga che contiene un’immagine e un testo. Per risparmiare tempo a questo livello, duplichi le celle precedenti.

Per farlo, clicchi sulla seconda icona che segue direttamente l’icona di modifica e che appare quando trascina il mouse sulla cella interessata.

Al mio livello, duplico una cella di testo e un’altra cella di immagine che sposto in basso. Utilizzo lo stesso principio di prima per modificare il testo e l’immagine. Quindi ho la terza riga che include :

  • Il testo: Un’agenzia SEO che ascolta i suoi clienti;
  • L’immagine corrispondente.

Creo una quarta riga con :

  • Il testo: competenza di Google;
  • L’immagine corrispondente.

Salvi le modifiche e clicchi su “Anteprima” per vedere il risultato. Il rendering è buono, tranne l’immagine “Google” che è un po’ troppo grande.

30 Resultat des changements

31 Resultat des changements
33 Resultat des changements
32 Resultat des changements

2-1-4) Regoli le dimensioni delle sue immagini

Quando nota che le dimensioni di un’immagine sono un po’ troppo grandi, clicchi sull’icona di modifica della sua cella e prema il pulsante “Modifica”.

36 Verification du resultat

Nell’interfaccia della sua ‘Libreria multimediale’, vedrà l’opzione ‘Dimensione’ a destra e appena sopra il pulsante ‘Inserisci nella pagina’. Scelga un articolo predefinito che potrebbe essere adatto a ciò che desidera.

Al mio livello, scelgo la dimensione “400 * 265” di Avada. La resa è molto migliore e colgo l’occasione per centrare l’immagine.

35 Reduire les tailles dimages

Per quest’ultima azione, clicchi sull’icona di modifica e vada all’opzione “Allinea”, quindi selezioni “Centra” e salvi.

34 Centrer les images

Mi occupo anche di centrare tutte le altre immagini e di ridurne le dimensioni.

2-2) Aggiungere il secondo blocco

Appena sotto il blocco “Agenzia”, aggiungerò il blocco “Il mio team”. Per fare questo, rinomino il blocco che segue in “Il nostro team”. In questo blocco, modifico la cella di testo già presente inserendo il titolo “Il nostro team” con il testo che lo accompagna. Mantengo la stessa formattazione, poiché voglio ottenere lo stesso risultato.

37 Maquette notre equipe

Ora inserirò le due immagini che si susseguono verticalmente con il loro testo.

2-2-1) Inserire un’immagine

Prendo la cella che utilizzerò per la mia immagine ed elimino tutte le altre celle che non verranno utilizzate.

38 Ajout du texte notre equipe

Poi ho impostato la sua proporzione su “1/3”, premendo la prima icona nell’angolo superiore destro della cella.

39 Image et texte

Per aggiungere l’immagine, clicchi su “+ Elemento” nella cella e nella nuova pagina cerchi l’elemento “Immagine”. Quindi clicchi sul pulsante “Immagine” che apparirà e prema il pulsante “Seleziona immagine” che apparirà sulla nuova interfaccia. Apparirà la “Libreria multimediale” e potrà scegliere l’immagine desiderata.

40 Resultat texte et image

2-2-2) Inserire un testo

Per inserire il testo che segue questa immagine, duplichi la cella e le dia la proporzione “2/3”. Poi clicchi su “+ Elemento” e cerchi questa volta il pulsante “Testo”.

Prema l’elemento e nell’interfaccia di configurazione che segue, aggiunga il suo testo e proceda con la sua formattazione.

Per l’immagine successiva e il relativo testo, è sufficiente duplicare le precedenti e apportare le modifiche.

A questo punto, ho :

  • La mia immagine e un testo che mi descrive: “Alexandre MAROTEL, ………”
  • L’immagine di Mariana e un testo che la descrive: “Mariana Seiko Sakurada,……”.

Salvi le modifiche e faccia un’anteprima per vedere come appare.

2-3) Modifica un blocco con un colore di sfondo e un pulsante

Per risparmiare tempo, la invito a prendere i vecchi blocchi che assomigliano di più a quelli che vuole creare. Al mio livello, il blocco “Unisciti a noi” che voglio creare ha le stesse caratteristiche del “BLOG” del modello.

41 Partie recrutement

Pertanto, scelgo di modificare il blocco “BLOG” e di eliminare i blocchi intermedi che non mi servono più. Questi sono, ad esempio

  • Servizi ;
  • Servizi mobili ;
  • Separatore.
2-3-1) Inserire il testo e l’immagine

Per “Unisciti a noi”, ci sono tre elementi da inserire:

  • Un’immagine ;
  • Un testo con un titolo;
  • Un pulsante.

Per prima cosa, elimino le celle che non mi servono.

42 Editer le fusion builder pour image

Inserisco il mio testo modificando il vecchio contenuto con lo stesso principio.

43 Ajouer image dans fusion builder

Modifico anche l’immagine e faccio attenzione a dare la proporzione di ” ½ ” a ciascuna delle due celle.

44 Resultat fusion builder

Poi posiziono la cella immagine a sinistra e la cella testo a destra.

2-3-2) Inserire un pulsante

Per inserire il pulsante, clicchi su “+ Elemento” situato nella cella di testo e cerchi l’elemento pulsante utilizzando la barra di ricerca. Clicchi su “Pulsante” che la porta all’interfaccia di configurazione.

45 Ajouter un texte et un bouton

Per impostazione predefinita, dispone delle opzioni nella finestra “Generale” e se ha già il link al suo pulsante, può inserirlo nella casella riservata a questo scopo, nell’opzione “URL del pulsante”.

46 Selectionner un bouton

Inserisca il testo che verrà visualizzato sul pulsante nell’opzione “Testo del pulsante”.

47 Paramaetrer un bouton

Alla voce “Allineamento” selezioni “Centro”, in modo che il testo sia centrato sul pulsante.

48 Ajouter le texte du bouton

49 Centrer le bouton

2-3-3) Aggiunga uno spazio tra il pulsante e il testo

La distanza tra il testo e il pulsante è molto ridotta, quindi metterò una certa distanza tra loro. Per fare questo, creerò un separatore che sarà collocato tra questi due elementi.

51 Inserer une separation

Clicchi quindi su “+ Elemento” e cerchi l’elemento “Separatore”, quindi clicchi sul suo pulsante. Nell’interfaccia che si presenta, selezioni il menu “Nessun stile” nella finestra “Generale” per l’opzione “Stile”.

52 Insertion marge pour separation

Quindi selezioni la finestra “Disegno” e in “Margine” imposti la distanza desiderata. Inserisco un valore del 5% e posiziono il separatore tra il pulsante e il testo.

53 Fusion builder apres bouton et separation

Successivamente verifico se il rendering è gradevole facendo clic su “Anteprima”, che è il caso.

54 Verification apres changement

3) Creare i blocchi per la visualizzazione su schermi piccoli

Si noti che la visualizzazione sui computer non è sempre ottimizzata per i telefoni cellulari. Pertanto, deve creare dei blocchi dedicati alla visualizzazione ottimizzata per i dispositivi mobili. Può utilizzare il mio articolo sull’argomento che fornisce molti più dettagli.55 Slider revolution version telephone

Per verificare la visualizzazione mobile della pagina, può :

  • Utilizzi il suo cellulare per vedere direttamente l’aspetto;
  • Riduca la scheda del browser a circa “2/3” della larghezza dello schermo del computer.

3-1) Duplichi e modifichi il primo blocco

Per andare più veloce, deve solo duplicare i blocchi creati per la visualizzazione predefinita.

56 Partie agence SEO version telephone

Nel mio caso, duplico il blocco “Agenzia” e rinomino il secondo “Agenzia mobile”. Per questo blocco appena creato, lo modifico cliccando sulla piccola freccia a destra per visualizzarne il contenuto.

57 Changement pour adapter telephone

Poi riorganizzo i testi e le immagini nel blocco, separando ogni immagine con un testo.

58 Renomer les blocs pour telephone

Inoltre, clicco sull’icona di modifica delle celle di testo per diminuirne le dimensioni.

Per fare questo, ho impostato la dimensione dei titoli su “40 pixel” invece di “50 pixel”.

3-2) Attivare il display mobile

Per vedere le modifiche apportate, deve attivare la visualizzazione mobile. Clicchi sull’icona di modifica del blocco e nella finestra “Generale” scorra fino a “Visibilità del contenitore” per vedere le tre opzioni di visualizzazione:

  • Schermo piccolo: per la visualizzazione su supporti a schermo piccolo, come i telefoni;
  • Schermo medio: per i supporti con schermi medi, come i tablet;
  • Schermo grande: per i media con schermi grandi, come i computer.
59 Container visibility small screen

Selezioni il primo e faccia attenzione a deselezionare gli altri due. A questo punto la prima opzione diventerà blu e le altre due grigie.

Questa azione visualizzerà questa configurazione solo su schermi piccoli come quelli dei telefoni.

Poi salvi e faccia un’anteprima per vedere il rendering.

3-3) Creare il secondo blocco mobile

Voglio creare un nuovo blocco Mobile per “Il nostro team”. Per farlo, lo duplico e lo metto in modalità telefono utilizzando lo stesso metodo di prima.

61 Parametrage du texte pour adapter au telephone

A questo punto, la mia immagine è già troppo grande per essere visualizzata su un telefono. Per renderlo piccolo, lo inserirò direttamente nella cella del testo che lo accompagna.

60 Changement telephone notre equipe

Clicchi quindi sull’icona di modifica nella cella di testo e, appena sopra il campo di testo, prema il pulsante “Aggiungi media”.

62 Texte et image adaptees au telephone

Poi sceglie l’immagine che desidera e io prendo la mia immagine e la allineo a sinistra, facendo attenzione a ridurre le sue dimensioni a “80 pixel”.

63 Version telephone de equipe

Tuttavia, sposti il testo appena sotto l’immagine nel campo, in modo che abbia un aspetto gradevole. Faccio la stessa cosa con la seconda immagine e il suo testo, facendo attenzione ad attivare la visualizzazione sui telefoni cellulari.

Inoltre, l’ultimo blocco “Reclutamento mobile” ha già un buon layout e non ho bisogno di modificarlo ulteriormente. Tutto quello che devo fare è attivare il display mobile.

4) Controlli le sue modifiche

Dopo aver apportato tutte queste modifiche, si prenda il tempo di verificare come viene visualizzata la pagina sui diversi supporti. Questo le permetterà di individuare eventuali problemi e di apportare le correzioni necessarie.

64 Partie recrutement pour telephone

Ed ecco fatto, ha appena creato la seconda pagina del suo sito web.

Conclusione

Dopo aver creato la home page, in genere deve creare le altre pagine del suo sito web. Queste pagine forniranno ai suoi visitatori informazioni aggiuntive sui suoi prodotti e servizi o presenteranno i post del suo blog. E una volta indicizzate dai motori di ricerca, queste pagine diventano porte d’accesso per i visitatori. Per questo motivo, deve assicurarsi che ognuno di essi sia ben progettato e offra un’esperienza utente ottimale. Per raggiungere rapidamente questo obiettivo, le suggerisco di creare prima la homepage perfetta e poi di duplicarla semplicemente come modello.

A presto per un altro articolo!

Lascia un commento