Passer au contenu principal

Appliquer un code personnalisé à votre site carrière

Comment ajouter votre propre HTML, CSS et JavaScript à votre site carrière

Avant d'appliquer du code personnalisé, assurez-vous d'abord de considérer les autres options disponibles dans l'éditeur de votre site carrière. Par exemple, il se peut que ce que vous souhaitez réaliser soit déjà possible via un bloc existant ou par des Réglages au sein d'un bloc.

Cet article vous guide sur l'ajout de code personnalisé à votre site carrière. Veuillez noter que Teamtailor ne peut pas vous aider à ajouter ou à maintenir le code personnalisé que vous avez mis en œuvre. Les mises à jour du produit peuvent affecter votre code, et vous êtes responsable de faire les ajustements en conséquence.

Le code personnalisé ne peut pas être appliqué à toutes les pages de Teamtailor, par exemple la page Connect et les candidatures. Si vous avez besoin d'un code personnalisé étendu, envisagez d'héberger votre page carrière sur votre site web pour un contrôle total du design et des fonctionnalités via un widget de liste d'offres ou une redirection complète du site carrière.

Lors de l'application d'un code personnalisé à votre site, trois options sont disponibles :

  • Bloc : Personnalisation HTML & CSS

  • Paramètres de design : CSS & JavaScript

  • Enveloppes personnalisées

Explorons cela plus en détail.

Bloc de contenu : HTML & CSS personnalisés

Les blocs de personnalisation HTML & CSS peuvent être ajoutés à votre site carrière depuis la bibliothèque de blocs sur n'importe quelle page de contenu. Pour en ajouter un, cliquez sur le symbole + dans le coin inférieur gauche et sélectionnez ce bloc.

Avec ce bloc, vous pouvez utiliser votre propre HTML & CSS pour le concevoir exactement comme vous le souhaitez. Notez que ce bloc est indépendant et ne peut pas être utilisé pour modifier d'autres blocs ou pages existants.

Un domaine personnalisé est requis pour que les blocs HTML & CSS personnalisés fonctionnent correctement.

Paramètres de design : CSS & JavaScript

Dans les paramètres de design, vous pouvez activer les styles personnalisés, ce qui vous permet d'ajouter votre propre CSS et JavaScript. Ce code peut modifier des blocs existants sur le site carrière ou activer des scripts de suivi comme Google Analytics. Ces changements s'appliqueront à chaque page de votre site carrière.

Pour ce faire, rendez-vous dans les paramètres de design. Vous pouvez y accéder via l'icône de pinceau dans le coin supérieur droit de votre page principale de contenu ou dans le coin inférieur gauche de toute autre page. Une fois sur place, faites défiler jusqu'à Divers et activez Styles personnalisés. Une fois activé, vous serez invité à fournir des retours à notre équipe Produit sur votre mise en œuvre prévue, ce qui nous aidera à améliorer notre fonctionnalité Contenu.

Une fois ceci configuré, vous aurez accès à deux nouveaux champs : CSS personnalisé et JavaScript personnalisé. Gardez à l'esprit qu'un domaine personnalisé est nécessaire au bon fonctionnement de tout JavaScript.

Si vous prévoyez de modifier un bloc existant spécifique, il est essentiel d'appliquer d'abord une enveloppe personnalisée. Cela garantit que vous avez une classe unique à cibler, évitant des modifications non intentionnelles sur l'ensemble de votre site carrière.

Une fois l'enveloppe en place, vous pouvez inspecter le code de votre site carrière pour identifier d'autres éléments. À partir de là, vous pouvez utiliser CSS ou JavaScript pour appliquer les modifications que vous souhaitez.

Enveloppes personnalisées

Lorsque vous appliquez du code personnalisé à votre site carrière, vous pouvez cibler un bloc de contenu spécifique avec CSS en utilisant des enveloppes personnalisées.

Pour travailler avec des enveloppes personnalisées sur le site carrière, une classe d'enveloppe doit d'abord être créée. Pour cela, rendez-vous sur le bloc que vous souhaitez modifier avec votre code, puis cliquez sur Réglages. Assurez-vous que la classe personnalisée est activée on.

Ensuite, une nouvelle section appelée Classe personnalisée apparaît dans le bloc, où vous pouvez nommer la classe comme vous le souhaitez. Juste en dessous, vous verrez l'enveloppe personnalisée exacte à utiliser dans le code de style dans le design global.

🤖 Cet article est traduit à l’aide de l’IA. Faites-nous savoir si quelque chose vous semble incorrect.

Avez-vous trouvé la réponse à votre question ?