Blocs generals de contingut

Blocs generals (marketing i contingut)

La resta de blocs disponibles no depenen de cap connexió amb l’ERP — són peces de maquetació de propòsit general, útils per a qualsevol tipus de contingut del web (presentació de serveis, testimonis, preguntes freqüents, preus, galeria d’instal·lacions, etc.).

• Hero: la gran secció de benvinguda que sol encapçalar la pàgina d’inici. Etiqueta superior, títol principal, un fragment del títol que es pot ressaltar en un altre color, subtítol, dos botons (principal i secundari), una secció de “prova social” (una fila d’avatars petits més un text, típic del “més de X clients confien en nosaltres”) i una imatge principal gran. Exemple: “Reserva la teva sessió en dos clics. Servei professional al centre de la ciutat”, amb el botó principal enllaçant directament al bloc de reserves — o, per a una botiga, “Descobreix la nova col·lecció”, amb el botó enllaçant al catàleg.

• App Showcase: secció de dues columnes (imatge a un costat, text a l’altre, amb opció d’invertir l’ordre) amb una etiqueta amb icona, títol, subtítol i una llista de fins a diverses característiques amb la seva pròpia icona, títol i descripció cadascuna, més un botó opcional. Pensat originalment per mostrar una aplicació, però perfectament reutilitzable per presentar, per exemple, el mateix sistema de reserves en línia o qualsevol avantatge destacat del servei — com ara la facilitat de reservar hora des del mòbil en una perruqueria, o el seguiment personalitzat que ofereix una consultoria.

• Blog (Targetes): una graella de targetes d’article (imatge, categoria, títol, extracte, autor amb avatar i data) més un enllaç de “veure’ls tots”. Útil si en el futur el negoci vol publicar un blog de consells o novetats relacionades amb el seu sector — receptes i tendències per a una botiga d’alimentació, consells de manteniment per a un taller, o articles d’opinió per a una consultoria.

• Blurbs (Per què triar-nos): títol, descripció i una graella de targetes breus (icona, títol, text), amb el nombre de columnes per fila configurable. Bloc clàssic de “per què triar-nos” — útil per destacar, per exemple, “Professionals certificats”, “Cita en 24h”, “Enviament gratuït a partir de 30€”, o “Materials de primera qualitat”, segons el sector del negoci.

• Blurbs (Amb Botons): variant de l’anterior però amb targetes més grans, cadascuna amb el seu propi color, icona, títol, text i un botó propi amb el seu enllaç — pensat per presentar diverses “solucions” o línies de servei diferents, cadascuna portant a la seva pròpia pàgina o secció (per exemple, una targeta per a “Serveis a domicili”, una altra per a “Serveis a l’establiment”, una altra per a “Assessorament en línia”).

• Carrusel de Blurbs: les mateixes targetes breus (color, icona, títol, descripció) que el bloc Blurbs, però en format carrusel lliscant en lloc de graella fixa — útil quan hi ha moltes targetes i no es vol allargar la pàgina.

• Carrusel d’Imatges: una etiqueta superior, títol, descripció i una llista d’imatges (cadascuna amb el seu text alternatiu i un peu de foto opcional) que es recorren en un carrusel horitzontal amb fletxes.

• Casos d’Èxit: pensat per a testimonis més elaborats tipus “cas d’èxit”: cada targeta porta el seu propi color, una imatge, una mètrica destacada (icona + text, per exemple “+40% de vendes en tres mesos” o “+200 clients fidelitzats”), una categoria (icona + text), una frase destacada, una descripció més llarga, i l’autor (avatar, nom i càrrec/relació amb el negoci — per exemple, una persona clienta real amb el seu consentiment, o la responsable d’una empresa col·laboradora).

• Contacte (Pàgina): el bloc de la pàgina de contacte: una etiqueta, títol amb part ressaltable, descripció, tres targetes de dades de contacte (correu, telèfon i ubicació, cadascuna amb el seu títol i la seva dada) i un formulari de contacte amb títol i text de botó propis. Aquest formulari sí té lògica real al darrere: en enviar-lo, el missatge arriba per correu electrònic a l’adreça configurada per al negoci (fent servir un servei extern d’enviament de correu transaccional) — no cal cap acció manual per rebre’l, simplement arriba a la bústia de correu del negoci.

• Toggle de Contingut (Imatge A/B): títol, descripció, dues etiquetes personalitzables (per exemple “Abans”/“Després”) i dues imatges, amb un interruptor visual que alterna entre mostrar una imatge o una altra. Encaixa de manera natural per mostrar, per exemple, l’evolució d’una reforma en un negoci de construcció, un abans/després d’una perruqueria o un centre d’estètica, o una comparativa de dos acabats diferents en un taller de fusteria (sempre amb el consentiment corresponent de la persona o el client si es fa servir una imatge real).

• Ecosistema (Pilars): pensat originalment per presentar els “pilars” d’un ecosistema de producte tecnològic (etiqueta, títol, fins a diversos pilars cadascun amb color, icona, animació de pols opcional, etiqueta petita, títol, descripció i una “etiqueta de tecnologia”, més un bàner inferior destacat). És el bloc més orientat a producte digital de tota la plantilla; per a un negoci de cara al públic té menys aplicació directa, tret que es vulgui explicar, per exemple, les diferents fases d’un procés com a “pilars” (per exemple, en un centre de formació: inscripció, classes, pràctiques, certificació; o en una consultoria: diagnòstic, proposta, implementació, seguiment).

• Preguntes Freqüents (FAQ): etiqueta, títol, descripció i una llista de preguntes amb la seva resposta, més un text i botó de contacte al final per a qui no trobi el seu dubte resolt. Encaix directe: “Cal reservar hora amb antelació?”, “Puc cancel·lar una cita?”, “Feu enviaments fora de Catalunya?”, “Accepteu pagament a terminis?” — les preguntes concretes dependran totalment del sector, però l’estructura del bloc és sempre la mateixa.

• Pestanyes i Visuals (Feature Tabs): etiqueta, títol, descripció i una sèrie de pestanyes, cadascuna amb el seu propi títol, descripció, botó i imatge associada — en fer clic en una pestanya canvia la imatge mostrada. Útil per explicar, per exemple, diferents línies de servei d’un negoci amb la seva imatge corresponent sense ocupar tant espai vertical com un bloc per servei — per exemple, les diferents modalitats d’un centre de formació (presencial, en línia, mixta) o les diferents línies de producte d’una botiga.

• Filtre d’Imatges: etiqueta, títol, descripció i una col·lecció d’imatges, cadascuna amb la seva pròpia categoria de text lliure (per exemple “Instal·lacions”, “Equip”, “Treballs realitzats”) — els botons de filtre per a la persona visitant es generen sols a partir de les categories usades a les imatges, sense haver de definir-les a part.

• Galeria d’Imatges: similar a l’anterior però sense filtre, simplement una graella d’imatges ampliables en fer-hi clic, cadascuna amb el seu text alternatiu i peu de foto opcional, amb el nombre de columnes configurable. Encaix directe: una galeria de les instal·lacions del negoci, o dels productes ja acabats i lliurats en el cas d’un taller o estudi de disseny.

• Imatge Única: el bloc més simple possible amb imatge: títol opcional, subtítol, una única imatge, un peu de foto opcional, un interruptor d’amplada completa (sense marges) i un botó opcional a sota.

• Laptop Showcase (Pantalla 3D): etiqueta, títol amb part ressaltada, descripció, una llista de característiques (icona, títol, descripció) i una imatge mostrada dins d’una il·lustració de pantalla d’ordinador portàtil, amb opció d’invertir l’ordre. Pensat per mostrar captures d’un producte digital — poc habitual en la majoria de negocis físics, tret que es vulgui mostrar, per exemple, el mateix panell de reserves en línia des de la perspectiva de la clientela, o una aplicació pròpia del negoci.

• Mètriques d’Impacte: etiqueta, títol, descripció i una llista de xifres destacades, cadascuna amb el seu valor numèric, una unitat (cap, percentatge o euros), un títol i un subtítol. Exemple: “+500 clients atesos”, “98% de satisfacció”, “12 anys d’experiència” — vàlid tant per a una botiga com per a un estudi de disseny o una consultoria.

• Separador Parallax: una imatge de fons a pantalla completa amb efecte de profunditat en fer scroll, amb una etiqueta, títol, descripció i dos botons superposats. Útil com a separador visual cridaner entre dues seccions d’una pàgina llarga.

• Separador Parallax (Cita destacada): variant de l’anterior pensada específicament per a una cita/testimoni destacat a pantalla completa: imatge de fons, la cita en si, i l’autor (foto, nom, càrrec o relació amb el negoci) — per exemple, el testimoni d’una persona clienta satisfeta, a mode de gran interrupció visual entre seccions.

• Header amb Imatge o Vídeo de Fons: una capçalera de pàgina alternativa a l’Hero, amb la particularitat que el fons pot ser una imatge o un vídeo (es tria el tipus, i només s’usen els camps corresponents al tipus triat): etiqueta, títol amb part ressaltada, subtítol i dos botons, tot sobre el fons triat.

• HTML Personalitzat: un camp de codi en què es pot enganxar HTML “en cru” per inserir-lo tal qual a la pàgina (per exemple, un mapa incrustat de Google Maps amb la ubicació de l’establiment, o un widget d’un tercer), amb un interruptor d’amplada completa. Avís important: aquest contingut s’insereix literalment a la pàgina, sense cap comprovació de seguretat — només s’ha de fer servir amb codi de total confiança (mai enganxar codi copiat d’un lloc no verificat).

• Preus (Pricing): etiqueta, títol, descripció, un interruptor Mensual/Anual (amb els seus textos personalitzables, inclòs un text de descompte tipus “-20%”) i una llista de plans, cadascun amb nom, descripció, l’opció de destacar-lo com a “Més Popular”, un estil de botó, preu mensual i anual, text i enllaç de botó, i la seva pròpia llista de característiques (cadascuna marcable com a inclosa o no inclosa). Pensat originalment per a plans de subscripció tipus programari; per a un negoci de serveis es pot adaptar, per exemple, a bons de sessions (bo de 5 sessions, bo de 10 sessions…) o a diferents nivells de servei (bàsic, avançat, premium), tot i que no està pensat específicament per a serveis solts amb reserva d’hora concreta — per a això convé usar el bloc Calendari, que sí porta els preus reals de l’ERP.

• Sectors (Casos d’Ús): títol, descripció i una llista de “sectors”, cadascun amb el seu títol, un enllaç i una imatge de portada — pensat originalment per mostrar a quins tipus de negoci es dirigeix un producte; es pot adaptar a “a qui va dirigit cada servei” (per exemple, en un centre de formació: estudiants, professionals en actiu, empreses; o en una botiga d’articles esportius: principiants, esportistes habituals, clubs).

• Sponsors / Logotips de Clients: simplement una fila de logotips, cadascun amb la seva imatge, el seu text alternatiu i un enllaç opcional (per exemple, cap al web d’aquella entitat). Útil per mostrar col·legis professionals, entitats col·laboradores, proveïdors de confiança o marques amb què treballa el negoci.

• Pestanyes Horitzontals (Imatges): títol, descripció, una fila de pestanyes de text (cadascuna amb la seva imatge associada) i un botó d’acció inferior — en fer clic en una pestanya canvia la imatge gran mostrada a sota.

• Timeline (Passos/Procés): etiqueta, títol amb part ressaltada, descripció i una llista de passos, cadascun amb el seu color, icona, una etiqueta petita (per exemple “Setmana 1”), títol, descripció i, opcionalment, un botó. Encaix molt directe per explicar el procés d’un servei o d’una compra pas a pas: per exemple, en una consultoria, “1. Primera trobada → 2. Diagnòstic → 3. Proposta → 4. Implementació i seguiment”; o en una botiga amb enviaments, “1. Comanda → 2. Preparació → 3. Enviament → 4. Lliurament”.

• Reproductor de Vídeo: etiqueta, títol, descripció, un vídeo (amb la seva imatge de portada mentre carrega) i un text sota el botó de reproduir (per exemple “Mira com treballem (1:30)”). Útil per a un vídeo de presentació del negoci o de les seves instal·lacions.

• Característiques Alternes (Zig-Zag): una llista de files, cadascuna amb imatge a un costat i text a l’altre (alternant l’ordre fila a fila per donar dinamisme visual — d’aquí el nom), amb color i icona propis, títol, descripció, una llista d’avantatges en format de marques de verificació, i un botó opcional. Bloc molt versàtil per explicar en profunditat diversos serveis un per un, cadascun amb la seva pròpia imatge — per exemple, cada línia de servei d’una consultoria, o cada categoria principal del catàleg d’una botiga.

• Contingut de Text Lliure: diferent de tots els altres — en lloc de camps solts de màrqueting (títol, imatge, botó…), és un únic editor de text enriquit amb format complet (negreta, títols, llistes, enllaços), pensat per a prosa llarga que no encaixa en cap bloc de targetes ni d’herois: textos legals, un futur blog, condicions d’un servei, etc. És el bloc que fan servir de fàbrica les tres pàgines legals del lloc (Avís Legal, Política de Privadesa, Política de Galetes).

  Avís important: el contingut d’aquestes tres pàgines legals, tal com ve de fàbrica, és un text de farciment marcat explícitament amb l’advertència “Substitueix aquest contingut abans de publicar” — no és text legal vàlid. Abans de donar el web per publicat de cara al públic, cal substituir-lo pel text legal real del negoci (normalment redactat o revisat per una assessoria, ja que depèn de dades concretes del negoci: NIF, domicili social, tractament real de dades de la clientela, etc.).