Els blocs: portada, galeria, equip, opinions, mapa, formulari…

Cada pàgina de la web es compon apilant blocs. N’hi ha 26, agrupats en cinc famílies: Portada, Bàsic, Fotos i vídeo, Negoci i Avançat. Els afegeixes des del botó Afegir bloc del panell esquerre, i després els arrossegues per ordenar-los.

Treballar amb un bloc

En passar el ratolí per un bloc de la llista apareixen les seves accions:

• Editar — obre el formulari amb dues pestanyes: Contingut (els textos, imatges i opcions pròpies del bloc) i Ajustos del bloc (els comuns a tots, vegeu més avall).
• Pujar / Baixar o arrossegar — canvia l’ordre.
• Duplicar — crea una còpia just a sota. Útil per repetir una estructura canviant només el text.
• Visible / Amagat — un bloc amagat no es veu a la web però es conserva.
• Treure — l’esborra, amb confirmació.

Un avís de «Hi ha canvis sense desar» et recorda que desis abans de tancar el formulari.

Ajustos comuns a tots els blocs

Com s’escriu un enllaç

Tots els botons accepten el mateix format d’enllaç:

• el nom d’una pàgina de la web: carta, reservas, contacto;
• una àncora de la mateixa pàgina: #horario;
• una adreça completa: https://…;
• les paraules whatsapp, telefono o email, que obren WhatsApp, marquen el telèfon o obren el correu amb les dades d’Ajustos del lloc → Contacte.

Portada

Portada (bàner principal)

El primer bloc de la pàgina d’inici. Porta imatge de fons o vídeo de fons (un enllaç de YouTube o Vimeo, o un mp4/webm de la biblioteca), una etiqueta petita a sobre del títol (per exemple «Restaurant»), el títol, el subtítol i fins a dos botons.

Opcions: Alçada (pantalla completa, alta, mitjana, baixa), Alineació (centrat o esquerra), Enfosquir el fons en percentatge (perquè el text es llegeixi sobre la foto) i Mostrar el logotip sobre el títol.

Amb la capçalera transparent activada a Disseny, el menú es dibuixa sobre aquesta portada amb el logotip clar. Veure disseny.

Carrusel de bàners

Diverses diapositives que van passant, cadascuna amb imatge, títol, text, botó i enllaç. Ajusta l’alçada i els segons per diapositiva (de 2 a 30).

Bàsic

• Títol — un titular solt, amb mida (gran, normal, petit) i alineació.
• Text — text lliure amb format (negreta, llistes, enllaços), amb amplada estreta, normal o ampla.
• Text i imatge — dues columnes: etiqueta, títol, text i botó a un costat i una imatge a l’altre. Tries el costat de la imatge i l’efecte en aparèixer (cap, aparèixer, lliscar, zoom). És el bloc més versàtil per a «qui som», «la nostra cuina», «com treballem».
• Imatge — una foto amb peu, enllaç opcional, amplada i cantonades arrodonides.
• Crida a l’acció — una franja de color amb títol, subtítol i dos botons. Per al «Reserva ara» a mitja pàgina.
• Icones amb text — de dues a quatre columnes amb icona, títol i text. Les raons per triar-te: «Producte de proximitat», «Aparcament gratuït», «Obert els diumenges». La icona es tria d’un catàleg.
• Separador — aire entre blocs, amb alçada en píxels i una línia opcional.

Fotos i vídeo

• Galeria de fotos — les imatges que vulguis, amb peu, en quadrícula o mosaic, de dues a quatre columnes. En prémer-ne una s’obre a mida completa.
• Vídeo — un vídeo de YouTube o Vimeo (enganxa l’enllaç normal, el de la barra d’adreces) o un mp4/webm pujat a la biblioteca. Amb imatge de portada abans de reproduir, amplada normal, ampla o completa, i l’opció de reproduir sol (sense so).
• Logotips de col·laboradors — una fila de logotips amb nom i enllaç: marques que vens, segells, associacions.

Negoci

• Carta / catàleg — les teves famílies i articles, trets del programa. Té article propi: Carta i catàleg des dels articles.
• Serveis — targetes amb imatge, icona, títol, text i preu (text), de dues a quatre columnes. Per a serveis que no són articles del catàleg o que prefereixes descriure a mà.
• Reserves / cita — el formulari de reserva connectat al TPV, a ClinicaGest o a la bústia. Té article propi: Reserves i cites.
• Botiga online — enllaç i mostra d’articles de la teva botiga. Veure botiga online.
• Horari — l’horari d’Ajustos del lloc → Horari, amb una nota al peu i, opcionalment, les dades de contacte al costat. Si no hi ha horari configurat, el bloc t’ho recorda.
• Contacte — les dades de contacte, el mapa i un formulari en un sol bloc, amb text d’agraïment en enviar.
• Formulari — només el formulari: nom, correu, telèfon (opcional), un desplegable d’assumptes a triar (un per línia) i el missatge. El que s’envia arriba a Missatges web i per correu.
• Mapa — el mapa de Google d’Ajustos del lloc → Contacte, a tota l’amplada o no.
• Equip — persones amb foto, nom, càrrec i text.
• Opinions — ressenyes amb autor, estrelles (1 a 5) i text, i un enllaç a les teves ressenyes de Google amb el botó «Veure totes les opinions».
• Tarifes — plans amb títol, preu, línies de «què inclou» (una per línia), botó, i la possibilitat de marcar-ne un com a destacat («Recomanat»).
• Preguntes freqüents — parells de pregunta i resposta que es despleguen.
• Xifres — números grans amb text i icona: «25 anys», «3.000 clients», «12 professionals». Va sobre fons de color principal per defecte.

Avançat

• Codi HTML — per incrustar alguna cosa que no té bloc: un widget de ressenyes, un mapa d’un altre proveïdor, un formulari d’un tercer. Es desa per idioma. Fes-lo servir només si saps què enganxes: el codi es publica tal qual.

Què es tradueix i què no

A cada formulari, els camps de text que tenen pestanyes d’idioma es desen per idioma; la resta (imatges, enllaços, opcions) és comuna. Més sobre idiomes.

Una pàgina d’inici que funciona

Si no saps per on començar, aquesta estructura no falla:

1. Portada amb foto, titular i dos botons (reservar i veure carta o serveis).
2. Icones amb text amb tres o quatre raons per triar-te.
3. Text i imatge explicant qui ets.
4. Carta / catàleg o Serveis.
5. Opinions.
6. Reserves / cita o Crida a l’acció.
7. Contacte amb mapa.

Mira com està resolta al restaurant d’exemple.

Continua per aquí

• Carta i catàleg des dels articles
• Reserves i cites des de la web
• Disseny: colors, tipografia i logotip
• Pàgines i menú