Come personalizzare la pagina carriere con il codice o l'IA

La tua pagina carriere è spesso il primo vero contatto di un candidato con la tua azienda. Quando somiglia al resto del tuo sito web, con gli stessi font, gli stessi colori e lo stesso tono di voce, la si percepisce come parte del tuo brand e non come la pagina di uno strumento di selezione.

Ogni azienda su Emploist ha una pagina carriere pronta dal primo giorno, con il proprio logo e il proprio colore. Se vuoi andare oltre, puoi cambiarne completamente l’aspetto modificandone il codice. Sembra una cosa tecnica, ma non serve essere sviluppatori. Questa guida mostra due modi per farlo:

Modifica il codice in Emploist. Ideale per piccole modifiche, come un nuovo titolo o un nuovo font. Vedi ogni modifica in un’anteprima dal vivo mentre scrivi.
Lascia fare a un assistente IA. Ideale per modifiche più grandi, come una nuova sezione. Scarichi il codice, descrivi a parole semplici ciò che vuoi e carichi quello che l’assistente ti restituisce.

Per mostrarli entrambi useremo Northwind Labs, un’azienda di esempio. Ecco la sua pagina carriere prima di iniziare.

northwind.emploist.com

La pagina carriere di Northwind Labs con il design predefinito di Emploist.

Cosa puoi modificare

La tua pagina carriere è composta da sei file. Ognuno è un piccolo file di testo che puoi aprire e modificare:

File	Cosa controlla
`layout.liquid`	La cornice intorno a ogni pagina: l’intestazione, il piè di pagina e ciò che viene caricato in ogni pagina, come i font
`jobs.liquid`	La pagina principale, con la tua introduzione e l’elenco delle posizioni aperte
`job.liquid`	La pagina di una singola posizione
`apply.liquid`	Il modulo di candidatura
`applied.liquid`	La pagina di ringraziamento che i candidati vedono dopo essersi candidati
`styles.css`	L’aspetto di tutto: colori, font, dimensioni e spaziature

I file usano tre linguaggi semplici. HTML dice cosa c’è nella pagina, come titoli e pulsanti. CSS dice che aspetto ha. Liquid aggiunge dei segnaposto, come {{ company.name }}, che Emploist sostituisce con il nome della tua azienda, le tue posizioni e altri dettagli quando un candidato apre la pagina.

Puoi fare tutte le prove che vuoi senza rompere la tua pagina carriere:

Per i candidati non cambia nulla finché non fai clic su Salva.
Emploist controlla il codice prima di salvarlo e, se qualcosa non va, ti dice cosa correggere.
Puoi tornare al design predefinito in qualsiasi momento.

Per iniziare, accedi come amministratore e apri Pagina carriere nella barra laterale. La scheda Design contiene il colore della pagina e il suo codice. Se ti basta il colore del tuo brand, sceglilo in Colore principale e hai finito. Non serve scrivere codice.

La scheda Design delle impostazioni della pagina carriere in Emploist: un selettore “Primary color” e una sezione “Code” con i pulsanti “Edit code”, “Download ZIP” e “Upload ZIP”. — Pagina carriere → Design. La sezione Codice contiene tutto ciò che serve per questa guida.

Opzione 1: modifica il codice in Emploist

Apri l’editor

Fai clic su Modifica codice. A sinistra c’è il codice della tua pagina, con una scheda per ogni file e una breve nota sulla sua funzione. A destra c’è un’anteprima dal vivo della tua pagina carriere, con posizioni di esempio.

L'editor del codice di Emploist: le schede dei file e il codice di layout.liquid a sinistra e un'anteprima dal vivo della pagina carriere a destra. — L'editor del codice. L'anteprima a destra si aggiorna mentre scrivi.

Sopra l’anteprima, Vai alla pagina ti permette di passare da una all’altra delle pagine che i candidati possono vedere: l’elenco delle posizioni, una posizione, il modulo di candidatura, la pagina di ringraziamento, una posizione chiusa e “Pagina non trovata”. Anche un clic sulla scheda di un file mostra la pagina che controlla.

Cambia il titolo

Fai clic sulla scheda jobs.liquid. La riga 3 contiene il grande titolo in cima alla pagina:

<h1 class="hero-title">Join {{ company.name }}</h1>

Sostituisci la parola “Join” con “Build what’s next at”. Lascia {{ company.name }} così com’è: è lì che Emploist inserisce il nome della tua azienda. Un attimo dopo che hai smesso di scrivere, l’anteprima mostra il nuovo titolo.

Il file jobs.liquid nell'editor con il titolo modificato in “Build what's next at {{ company.name }}” e l'anteprima che mostra “Build what's next at Northwind Labs”. — Modifica il testo tra i tag e l'anteprima si aggiorna di conseguenza.

Usa il tuo font

Per cambiare font bastano due piccole modifiche. Useremo Fraunces, un font gratuito di Google Fonts.

Carica il font. Su Google Fonts, apri il font, fai clic su Get font, poi su Get embed code e copia la riga <link> che contiene fonts.googleapis.com/css2. In layout.liquid, incollala su una nuova riga subito sopra quella che contiene stylesheet_url:
```
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,100..900&display=swap">
```
Usalo. In styles.css, trova nelle prime righe quella che comincia con --font: e inserisci il nome del font tra virgolette all’inizio dell’elenco, seguito da una virgola:
```
--font: "Fraunces", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
```
Gli altri font dell’elenco sono di riserva, nel caso in cui un browser non riesca a caricare il tuo.

Il file styles.css nell'editor con Fraunces aggiunto alla riga --font e l'anteprima che mostra la pagina carriere con il font Fraunces. — Ora Fraunces è usato in tutta la pagina.

Controllala su smartphone

Molti candidati apriranno la tua pagina carriere dallo smartphone. Fai clic sull’icona del telefono sopra l’anteprima per vedere la pagina nelle dimensioni di uno smartphone.

L'anteprima dell'editor nelle dimensioni di uno smartphone, con la pagina carriere, il nuovo titolo e il nuovo font in una colonna stretta. — L'icona del telefono mostra l'anteprima nelle dimensioni di uno smartphone.

Correggi gli errori prima che vadano online

Se una modifica rompe qualcosa, Emploist te lo dice subito. Sulla scheda del file compare un segno rosso, al posto della pagina l’anteprima mostra cosa è andato storto e un elenco sotto il codice indica il problema e la riga in cui si trova. Fai clic su un problema per raggiungerlo. Il più delle volte si tratta di un errore di battitura o di un tag di chiusura mancante, e di solito basta annullare l’ultima modifica (Cmd+Z su Mac, Ctrl+Z su Windows).

L'editor con un problema: la scheda jobs.liquid ha un segno rosso, la riga 4 è sottolineata, l'anteprima dice che non è stato possibile mostrare la pagina e un elenco sotto il codice indica 1 problema da risolvere prima di salvare: jobs.liquid, riga 4, tag non chiuso. — Se elimini per errore un {% endif %}, il suo {% if %} resta aperto ed Emploist indica la riga esatta.

Finché ci sono problemi non puoi salvare, quindi i candidati non vedono mai una pagina non funzionante.

Scopri cosa puoi usare

Fai clic su Riferimento in alto nell’editor per vedere tutti i segnaposto che puoi usare, come la sede di una posizione o la descrizione della tua azienda, con una nota su cosa mostra ciascuno.

Il pannello “Reference” aperto sopra l'editor, con l'elenco dei segnaposto come company.name e company.description e di cosa mostra ciascuno. — Riferimento elenca tutto ciò che i template possono mostrare.

Salva le modifiche

Quando l’anteprima ti convince, fai clic su Salva. La tua pagina carriere si aggiorna subito per i candidati.

Hai cambiato idea? Il menu Altre azioni (i tre puntini accanto a Scarta) contiene Ripristina codice predefinito, che riporta il design predefinito di Emploist. Come per ogni modifica, sulla tua pagina carriere non cambia nulla finché non salvi.

Il menu “More actions” nell'editor, con “Download ZIP”, “Upload ZIP” e “Reset to default code”. — Altre azioni: scarica o carica il codice come ZIP, oppure ricomincia da capo.

Opzione 2: lascia che un assistente IA faccia le modifiche

Per modifiche più grandi, come una nuova sezione o un layout diverso, spesso è più facile descrivere ciò che vuoi e lasciare che sia un assistente IA a scrivere il codice. Noi useremo Claude, ma qualsiasi assistente in grado di leggere e restituire file funziona più o meno allo stesso modo.

Scarica il codice

Nella scheda Design, fai clic su Scarica ZIP. Riceverai un file chiamato careers-page.zip con:

I tuoi sei file, con tutte le modifiche che hai salvato.
Una guida, README.md, che spiega le regole delle pagine carriere e tutti i segnaposto che puoi usare. È ciò che aiuta un assistente IA a scrivere il codice giusto al primo colpo.
Un kit di anteprima (preview.mjs e company.json) per vedere l’anteprima della pagina sul tuo computer. È facoltativo e ne parliamo alla fine.

Non serve decomprimerlo: Claude può leggere lo ZIP così com’è.

Chiedi le modifiche

Apri claude.ai, inizia una nuova chat e allega careers-page.zip con il pulsante +. Poi descrivi a parole semplici ciò che vorresti, come faresti con un designer. Ecco cosa abbiamo chiesto noi:

Ecco il codice della nostra pagina carriere su Emploist. Rendi la pagina delle posizioni più calda e accogliente: un’introduzione più grande con un pulsante che porta alle posizioni aperte e una sezione “Why join us” con alcuni benefit (lavoro da remoto, budget per la formazione, 30 giorni di ferie, offsite con il team). Segui README.md e rimandami uno ZIP da caricare.

Una nuova chat su claude.ai con careers-page.zip allegato e la richiesta di una pagina delle posizioni più accogliente, con un'introduzione più grande e una sezione “Why join us”. — Allega lo ZIP e descrivi ciò che vuoi.

Chiedere di seguire README.md e di restituire uno ZIP ti risparmia qualche scambio di troppo.

Ricevi il codice aggiornato

Claude ci ha messo circa quattro minuti. Ha letto la guida e il codice, ha fatto le modifiche e poi ha verificato il proprio lavoro: ha visualizzato l’anteprima della pagina in formato desktop e smartphone con il kit di anteprima e ha eseguito lo stesso controllo che Emploist esegue prima di salvare. Poi ha restituito un nuovo careers-page.zip, con un riepilogo delle modifiche:

Un’introduzione più grande e accogliente, con un nuovo titolo, una frase di benvenuto e un pulsante See open roles (“Vedi le posizioni aperte”) che porta giù all’elenco.
Una sezione “Why join us” (“Perché lavorare con noi”) con quattro riquadri: lavoro da remoto, budget per la formazione, 30 giorni di ferie e offsite con il team.
Piccoli ritocchi alle posizioni aperte, come una breve introduzione sopra l’elenco.

La risposta di Claude su claude.ai: careers-page.zip è pronto da caricare, un elenco delle modifiche a jobs.liquid e styles.css, una nota sul fatto che il nuovo titolo è testo fisso e lo ZIP con un pulsante “Download”. — Claude spiega cosa ha cambiato e restituisce uno ZIP da scaricare.

Leggi il riepilogo prima di caricare il file. In questo caso Claude ci ha segnalato di aver sostituito il nostro nuovo titolo con il suo, “Come build what’s next with us”, e ci ha indicato quale riga modificare per cambiarlo. Ha anche mantenuto generici i benefit, senza inventare dettagli come l’importo del budget per la formazione, così potevamo aggiungere i nostri.

Se il risultato non è ancora perfetto, continua la conversazione: “rendi il pulsante verde”, “aggiungi un benefit sull’assicurazione sanitaria” oppure “accorcia l’introduzione”. Quando hai finito, chiedi lo ZIP aggiornato.

Caricalo in Emploist

Torna alla scheda Design, fai clic su Carica ZIP e scegli lo ZIP di Claude. Emploist apre l’editor con il nuovo codice caricato ma non ancora salvato, così puoi controllarlo prima che cambi qualcosa per i candidati.

L'editor subito dopo il caricamento dello ZIP: lo stato indica “Unsaved changes”, un messaggio dice che i file sono stati caricati da careers-page.zip e invita a controllare l'anteprima e poi salvare, e l'anteprima mostra l'introduzione ridisegnata con un pulsante “See open roles”. — Il codice caricato si apre nell'editor, pronto da controllare.

Usa Vai alla pagina e l’icona del telefono per controllare ogni pagina. Se qualcosa non va, correggilo nell’editor o chiedi di nuovo a Claude. Quando è tutto a posto, fai clic su Salva.

Il risultato

Ecco la pagina carriere di Northwind Labs dopo entrambe le modifiche: il font Fraunces aggiunto nell’editor e il nuovo design di Claude. Confrontala con il design predefinito all’inizio di questa guida.

La pagina carriere ridisegnata di Northwind Labs con il font Fraunces: un'etichetta “Careers at Northwind Labs”, il titolo “Come build what's next with us”, la descrizione dell'azienda, una frase di benvenuto, un pulsante “See open roles” con il numero di posizioni aperte e una sezione “Why join us” con quattro riquadri: “Remote-friendly”, “Learning budget”, “30 days off” e “Team offsites”. — La pagina carriere finita, con le posizioni aperte più in basso.

E su smartphone:

La pagina carriere ridisegnata su smartphone: il titolo, la descrizione dell'azienda e un pulsante “See open roles” a tutta larghezza, con la sezione “Why join us” che inizia subito sotto. — La stessa pagina su smartphone.

Anteprima sul tuo computer (facoltativa)

Se vuoi provare le modifiche sul tuo computer prima di caricarle, il kit di anteprima incluso nello ZIP mostra la tua pagina carriere con posizioni di esempio, proprio come l’anteprima di Emploist. Serve Node.js 22 o versioni successive.

Decomprimi careers-page.zip.
Apri un terminale nella cartella decompressa ed esegui node preview.mjs.
Apri http://localhost:4321 nel browser e ricarica la pagina dopo ogni modifica.

Per cercare problemi nel codice nello stesso modo in cui lo fa Emploist prima di salvare, esegui node preview.mjs check. Se usi un assistente IA che lavora con i file sul tuo computer, come Claude Code, puoi chiedergli di eseguire questi comandi al posto tuo.

Buono a sapersi

Solo gli amministratori possono modificare il codice. Gli altri membri del team possono vedere la scheda Design, ma non modificarla.
JavaScript non viene eseguito sulle pagine carriere. Così la tua pagina e i tuoi candidati restano al sicuro. Tutto ciò che è descritto in questa guida funziona senza.
Immagini, font e fogli di stile possono essere caricati da altri siti web, purché il loro indirizzo inizi con https://. È così che funziona Google Fonts.
I moduli di candidatura continuano a funzionare comunque tu modifichi il design, quindi le candidature finiscono sempre nella posta in arrivo di ogni posizione.

Vuoi vedere la tua pagina carriere? Inizia la prova gratuita: sarà pronta non appena configuri la tua azienda. Poi rendila davvero tua.