Beginners Course Section 1

Use the Setup Wizard to Create a Trial Website

Sign up for a free trial website by:

• Clicking upon the Start Your Trial button
• Clicking on the Select button on the Decor Theme website template (you can select another theme if you prefer, just know that during the course, we will demonstrate using the Decor Theme template)
  

Next you will need to select the type of website, which for the purposes of this course will need to be the Shop/Retail option

Next you will need to enter your contact details, along with a name for your website. For this course, we will use the name My T-Shirt Shop

You will now receive an email from Website World which contains login details and a temporary password for your trial website. After entering your temporary password, you will be directed to the welcome page inside the CMS (content management system). It is here where you will be editing and designing your new website.

The template and type of website we chose resulted in some pages being automatically added as example pages. As the site is not live, you will be able to add and remove pages, or rename them without any penalties from search engines (which could occur if the site was live).

Adding, Removing and Renaming Web Pages

To add a new page to your website, click on the Add Page button on the left hand site of your screen (red arrow), or from the drop down menu of the Web Pages tab, the Add Page button (yellow arrow).

On a new screen, you will be asked what kind of page you would like to add. For the purposes of this course, we will add a Single Page (Drag and Drop).

After clicking on the Add New Page Now! button, you will be directed to your new About Us page. It will also be automatically added to your menu display on the left hand side of your screen, plus your menu bar on your website.

Deleting and completely removing a page from a website when it is not something we recommend due to SEO reasons. You should instead change the visability of the page to block it from being found and viewed, plus remove it from the menu. If you must delete it, be sure to redirect it's URL to a live page.

As a trial site, which your website is currently, it is fine to remove a page and delete it. To do this, click on the Web Pages button, which will in turn open up a site map page listing all of your current pages. For this example, we are going to delete the Subscribe page. First click upon the wheel cog icon next (red arrow).

Si aprirà una schermata con diverse opzioni per questa pagina. Seleziona l'opzione "Elimina questa pagina". Comparirà un messaggio di avviso. Fai clic sul pulsante "Elimina pagina ora", quindi chiudi la schermata facendo clic sulla X nell'angolo.

Anche la ridenominazione di una pagina si effettua tramite la mappa del sito. Clicca sul pulsante "Pagine web" e seleziona l'icona a forma di ingranaggio della pagina "Shopping". Le aree da modificare sono il testo del pulsante, l'intestazione della pagina e il nome del file SEO. Tieni presente che, una volta che il tuo sito web è online, non dovresti modificare il nome del file SEO, poiché ciò creerebbe link interrotti e i motori di ricerca lo interpreterebbero come una nuova pagina, dato il nuovo nome. Di conseguenza, perderesti tutti i vantaggi SEO che la pagina aveva in precedenza. Puoi modificare i nomi dei file senza penalità se il tuo sito è ancora in modalità di prova.

For the purposes of this course, we are changing the button text from Shopping to Shop, and the Page Heading from Shopping to T-Shirt Shop.

Aggiungi titoli di pagina, sottotitoli e testo dei paragrafi a una pagina

Per modificare una pagina e aggiungere titoli, intestazioni e testo dei paragrafi, fai clic sul nome della pagina nella scheda Pagine Web sul lato sinistro dello schermo. Si aprirà così la pagina da modificare. In questo esempio, modificheremo la pagina Chi siamo, come mostrato di seguito, utilizzando l'editor drag-and-drop di Innova Studio.

Ora che la pagina "Chi siamo" è aperta, possiamo aggiungere sottotitoli e testo per i paragrafi. Puoi farlo cliccando all'interno della casella di testo del paragrafo, che si trova già al centro della pagina per impostazione predefinita, oppure selezionando un frammento di testo dalla colonna di destra che contiene il tipo di testo desiderato.

Here is a link to the text we used, which you can download and copy and paste (Ctrl V) into your trial site if required.

Right click and select Save As to download About page text

Abbiamo aggiunto del testo al riquadro di paragrafo esistente, quindi abbiamo cliccato e trascinato sul riquadro di intestazione H2 sopra di esso. Abbiamo poi aggiunto un titolo a questo riquadro di intestazione, come mostrato in questa immagine:

This will then open a page from where you can edit your SEO meta tags, including your page title (page heading). We will leave it as About Us for now.

Caricare e aggiungere un'immagine a una pagina web

Open up your About Us page again by clicking on it's title which can be found in the column under Web Pages on the left hand side of the screen. 

Right click on this link and select Save As to download the image we used below.

There are two ways you can add an image to a page. The one you use will depend on the image itself you want to insert. 

1. Per inserire un'immagine in un blocco di testo esistente, posiziona il cursore nel punto in cui desideri inserire l'immagine (freccia rossa), quindi fai clic sul segno + nella barra di modifica (freccia viola). Tieni presente che se posizioni il cursore accanto al testo, la posizione del testo verrà modificata. Se desideri che l'immagine sia accanto al testo, è consigliabile utilizzare una casella di snippet: si aprirà una finestra che ti chiederà cosa desideri inserire (immagine, link o campo modulo), quindi scegli Inserisci immagine. Per caricare un'immagine dal tuo dispositivo, fai clic sul pulsante Sfoglia per aprire i file immagine sul tuo dispositivo, fai doppio clic sull'immagine (è preferibile un file JPEG) e quindi fai clic sul pulsante blu Carica.

La procedura guidata per le immagini nel CMS aprirà l'immagine, rendendola pronta per la modifica, se necessario. Mostrerà le dimensioni reali dell'immagine, il nome del file esistente e alcune opzioni per ritagliare, ruotare, ridimensionare e convertire in JPG. Ridimensioneremo questa immagine per adattarla alla pagina Chi siamo. Fai clic sulla freccia a discesa accanto alla casella Ridimensiona e seleziona l'opzione "Dimensioni immagine 448x448 Blog". Modifica il nome del file se necessario, quindi fai clic su Salva modifiche.

Si aprirà un'altra finestra che offre alcune opzioni di modifica per l'immagine, tra cui la posizione, il bordo e la spaziatura intorno all'immagine. Per questo esempio, utilizzeremo il bordo, l'allineamento e la spaziatura predefiniti, quindi faremo clic sul pulsante blu "Inserisci foto ora".

Your About Us page will now look like this from the CMS editing area:

We will cover further image editing skills in later course sections.

Adding a Logo to Your Website

One of the best ways of branding your website is to add your business logo to it. Hover over the Design option button on the menu, then choose the Background or Logo Images option.

Right click on this link and select Save As to download the logo we used.

Under the Design Options page which opens up, you'll see that the Text Logo (website name) is being shown by default. We're going to replace this with a logo image. Click the image icon (change image) to add your logo. 

Once again you will be taken to the Image Wizard where you are able to browse and then upload an image from your device (it's best if your logo is already the size it needs to be, which is 910x120px). This time, select the logo option from the Resize drop down - 910x120 Logo. Your logo will be automatically placed where the website name text was, above the menu. Press Publish to save your work so far.

You have completed Section 1 of the Beginners Course. Well done! It's now time to move onto Beginners Section 2.