search
Comment créer une Beamery Page

Last Updated:

Les Beamery Pages vous permettent de créer des pages de destination hautement personnalisées afin de mettre en avant votre marque employeur auprès des candidats potentiels. Les pages peuvent être liées à des Convert Flows afin de convertir les visiteurs passifs en contacts Beamery avec lesquels vous pouvez entretenir une relation.


Comment créer une nouvelle Beamery Page

Pour créer une Beamery Page, cliquez d’abord sur Pages dans le menu de navigation de gauche pour afficher la liste des pages. 

Ensuite, cliquez sur Add Page pour commencer à créer votre nouvelle page. 

Page Details

Formulaire Page Details avec le nom, l’URL, le titre, la description et les paramètres de la page

Vous devez maintenant renseigner les détails de la page. Donnez un nom à votre page et choisissez une URL unique pour celle-ci. Choisissez ensuite un titre et ajoutez une courte description. Ces éléments seront utilisés dans les résultats de recherche et sur les réseaux sociaux lorsqu’un lien vers votre page est partagé. 

Choisissez ensuite un appel à l’action pour votre page. Il peut s’agir d’un lien vers un formulaire Beamery ou vers une URL externe. 

Une fois les détails de la page renseignés, cliquez sur Continue pour accéder au Page Builder

The Page Builder

Page Builder : volet d’édition à gauche (1) et aperçu de la page à droite (2)
 
Le Page Builder se compose de 2 parties :
  1. À gauche se trouve l’éditeur lui-même, qui permet à l’utilisateur de mettre à jour le contenu de la page.
  2. À droite se trouve un aperçu de la page, dans lequel les modifications effectuées dans la section de l’éditeur apparaissent immédiatement. Il est ainsi possible de voir immédiatement les modifications apportées.
Modifier un bloc :
  1. Cliquez à droite sur la zone de la page qui doit être modifiée. 
  2. Le contenu apparaît dans la barre latérale gauche. Les détails du contenu varient pour chaque bloc en fonction des informations affichées dans celui-ci. La barre latérale peut défiler s’il y a plus de contenu qu’il n’est possible d’en afficher.
  3. Une fois les modifications effectuées, cliquez sur Save changes en bas de la barre latérale. Un message s’affiche pour indiquer que les modifications ont été enregistrées.
  4. Vous pouvez également annuler toutes les modifications. Dans ce cas, aucune modification ne sera enregistrée.

Éléments de texte 

Tous les corps de texte peuvent être mis en forme. Les options de mise en forme disponibles sont les suivantes, dans l’ordre d’apparition dans l’éditeur de texte :

  • Gras
  • Italique
  • Souligné
  • Couleurs : texte et arrière-plan
  • Lien hypertexte
  • Liste à puces
Barre d’outils de mise en forme du texte encadrée au-dessus d’un champ de texte

Lors de l’insertion de liens hypertexte, vous pouvez :

  • Insérer une URL
  • Définir l’apparence du texte
  • Choisir si le lien s’ouvre dans l’onglet actuel ou dans un nouvel onglet
Fenêtre d’insertion de lien avec les champs URL et Text et la case Open in new tab
 

Header Block

Header Block sélectionné avec ses options numérotées dans le volet gauche

Informations pouvant être modifiées dans ce bloc :


1. Logo : vous pouvez importer ici le logo de l’entreprise. Les formats de fichier pris en charge sont les suivants : PNG, JPG, SVG. Vous pouvez supprimer l’image en cliquant sur « Delete »

2. Link : URL vers laquelle le candidat est redirigé lorsqu’il clique sur le logo. Il s’agit généralement du site principal de l’entreprise ou de sa page Carrières principale. Cela évite que le candidat se retrouve dans une impasse.

3. Button text. Texte à afficher sur le bouton

4. Button color. Couleur du bouton

5. Text Colour : couleur du texte à l’intérieur du bouton

6. Link type. Action à effectuer lorsque le candidat clique sur le bouton. Il existe 2 types de liens différents :
A) Le plus couramment utilisé est un lien vers un formulaire Beamery (voir la section consacrée aux formulaires plus loin dans ce document). Dans ce cas, l’utilisateur doit sélectionner un formulaire existant dans une liste déroulante comme information du lien (7)
B) L’utilisateur peut également choisir de créer un lien vers une URL externe. Dans ce cas, l’URL complète vers laquelle le lien doit pointer doit être fournie comme information du lien (7)

7. Link information. Voir le point 6

Vous pouvez également activer le défilement parallaxe dans ce bloc. Veuillez noter que cette option ne sera visible que lors de la consultation d’une page en ligne.

Bloc avec image d’arrière-plan et option d’affichage encadrée dans le volet gauche

Hero Block

Hero Block sélectionné avec ses options numérotées dans le volet gauche

Informations pouvant être modifiées dans ce bloc :


1. Header text : première ligne de texte affichée au-dessus de l’image d’arrière-plan

2. Sub-header text : deuxième ligne de texte affichée au-dessus de l’image d’arrière-plan

3. Background color.  Couleur de l’arrière-plan

4. Background image. Image principale à afficher en arrière-plan. Les formats de fichier pris en charge sont les suivants : PNG, JPG, SVG. Vous pouvez supprimer l’image en cliquant sur « Delete ». Il s’agit également de l’image qui apparaîtra lorsque vous partagerez votre page sur les réseaux sociaux. Si aucune image n’est disponible, le logo de l’entreprise s’affiche à la place.

Remarque : nous recommandons de conserver l’image de bannière dans des dimensions de 1440x540. Lors de l’importation, lorsque vous avez la possibilité de recadrer l’image, vous pouvez également cliquer sur « Skip » dans le coin inférieur droit afin d’empêcher le recadrage de la bannière.

Text + Image Block

 

Text + Image Block avec l’option de position de l’image encadréeInformations pouvant être modifiées dans ce bloc :

1. Header text : première ligne de texte affichée dans le bloc de texte

2. Body text : deuxième ligne de texte affichée dans le bloc de texte

3. Image : image principale à afficher sur le côté droit. Les formats de fichier pris en charge sont PNG, JPG, SVG. Vous pouvez supprimer l’image en cliquant sur « Delete ». Dans « Image Placement »/« Video Placement », vous pouvez sélectionner Left ou Right pour choisir la position de l’image. NB : cette option concerne uniquement l’affichage en plein écran sur ordinateur. En affichage mobile, la zone de texte est toujours affichée au-dessus de l’image ou de la vidéo afin de préserver le contexte du bloc. 

4. Background color.  Couleur de l’arrière-plan

Split Block

Split Block avec l’option Image size encadrée dans le volet gauche

Ce bloc comprend 3 sous-blocs différents nommés « Benefit 1 », « Benefit 2 » et « Benefit 3 », mais vous pouvez supprimer ceux de votre choix.

Informations pouvant être modifiées dans ces sous-blocs :

1.  Block Header text : ajouter ou modifier l’en-tête d’un bloc.

2. Color : modifier la couleur d’arrière-plan du bloc.

3. Header text : première ligne de texte affichée dans le bloc de texte

4. Body text : deuxième ligne de texte affichée dans le bloc de texte

5.  Hyperlink : ajouter un lien vers l’URL d’un autre site. 

Bloc Split sur la page avec trois colonnes d’icônes et de texte

A) Pour ce faire, sélectionnez dans le corps du texte les mots auxquels vous souhaitez ajouter un lien.
B) Cliquez sur l’élément de lien, saisissez l’URL de la page vers laquelle vous souhaitez rediriger les visiteurs et indiquez si vous souhaitez que la page s’ouvre dans un nouvel onglet ou remplace la page existante

6. Image : image principale à afficher sur le côté droit. Les formats de fichier pris en charge sont PNG, JPG, SVG. Vous pouvez supprimer l’image en cliquant sur « Delete ».

7.  Image Size : taille de l’image de l’avantage. Sélectionnez « Regular » ou « Large »

Two and Four Column Split Blocks

Exemples de Two Column et Four Column Split BlocksIl existe également deux autres blocs divisés : l’un avec deux avantages et l’autre avec quatre avantages. Leur fonctionnement est identique à celui du bloc ci-dessus, à la seule différence du nombre d’avantages. Ces blocs apparaissent comme des blocs masqués dans le Page Builder ; pour les utiliser, vous devez donc les rendre visibles (pour savoir comment procéder, consultez la section ci-dessous).

Story Block

Story Block sélectionné avec ses options numérotées

Informations pouvant être modifiées dans ce bloc :


1. Header text : première ligne de texte affichée dans le bloc de texte

2. Body text : deuxième ligne de texte affichée dans le bloc de texte

3. Background color.  Couleur de l’arrière-plan

Map Block

Map Block avec l’option d’affichage de la carte encadrée

Informations pouvant être modifiées dans ce bloc :


1. Link : URL à afficher dans l’iFrame.

2. Background color.  Couleur de l’arrière-plan

3. Map Size : taille de l’image. Sélectionnez « Regular » ou « Full Screen ». 

Remarque : lorsque vous copiez-collez le lien Google Maps dans la section Link, veillez à suivre les étapes ci-dessous :

  • Trouvez le lieu concerné et cliquez sur l’icône Partager. Cliquez ensuite sur « Intégrer une carte » et repérez le code HTML.Google Maps avec la fenêtre de partage et l’option Intégrer une carte encadrée
  • Supprimez <iframe src=" au début du code et ></iframe> à la fin du code.
    • Exemple :
      Exemple de code HTML d’intégration Google Maps à modifier
  • Collez le lien modifié dans le Page Builder Beamery.

Champ du Map Block avec le lien Google Maps modifié collé

iFrame Block

iFrame Block avec ses options numérotées et un aperçu de page intégrée

Informations pouvant être modifiées dans ce bloc :

1. Link : URL à afficher dans l’iFrame.
Remarque : l’URL liée à l’iFrame peut ne pas avoir été conçue pour afficher un iFrame et peut nuire à l’expérience du candidat

2. Height : hauteur de l’iFrame en pixels. Plus le nombre est élevé, plus l’iFrame est haut

3. Greenhouse question : si ce bloc doit contenir un lien vers un site d’offres d’emploi Greenhouse, cochez cette case. Un traitement spécial a été intégré afin d’améliorer l’expérience du candidat (défilement et masquage des sections non pertinentes)

4. iFrame Size : taille de l’image affichée. Sélectionnez « Regular » ou « Full Screen »

NB : alors que la carte occupe toute la zone du bloc, le bloc iFrame n’augmente pas en hauteur. Cela s’explique par la nécessité de conserver une zone cliquable pour que le bloc reste modifiable. 

Text + Video Block

Text + Video Block avec ses options numérotées

Les liens vidéo de ce bloc doivent provenir de YouTube. Les contenus vidéo hébergés ailleurs doivent utiliser le bloc de contenu iFrame. Informations pouvant être modifiées dans ce bloc :
2. Title text : première ligne de texte affichée dans le bloc de texte

3. Body text : deuxième ligne de texte affichée dans le bloc de texte

4. Link : URL de la vidéo à afficher

5. Background color.  Couleur de l’arrière-plan

Footer Block

Footer Block avec ses options numérotées

Informations pouvant être modifiées dans ce bloc :
2. Header text : première ligne de texte affichée dans le bloc de texte

3. Body text : deuxième ligne de texte affichée dans le bloc de texte

4. Button text. Texte à afficher sur le bouton

5. Button color. Couleur du bouton

6. Link type. Action à effectuer lorsque le candidat clique sur le bouton. Il existe 2 types de liens différents :
A) Le plus couramment utilisé est un lien vers un formulaire Beamery (voir la section consacrée aux formulaires plus loin dans ce document). Dans ce cas, l’utilisateur doit sélectionner un formulaire existant dans une liste déroulante comme information du lien (7)
B) L’utilisateur peut également choisir de créer un lien vers une URL externe. Dans ce cas, l’URL complète vers laquelle le lien doit pointer doit être fournie comme information du lien (7)
7. Link information. Voir le point 6

8. Background color.  Couleur de l’arrière-plan

9. Background Image : image en arrière-plan du bloc de pied de page (similaire à celle du bloc d’en-tête)

Masquer et organiser les blocs

Pour tous les blocs, une case à cocher « Hide this block » se trouve en bas du volet gauche.

Case Hide this block encadrée en bas du volet gauche

Lorsqu’elle est cochée, le bloc est masqué dans le panneau de droite et n’apparaît pas sur la page finale.

Pour afficher à nouveau le bloc, sélectionnez-le simplement dans le panneau de droite, à l’endroit où il est indiqué « Hidden block: story », puis décochez la case située en bas du panneau de gauche.

Vous pouvez également modifier l’ordre des blocs à l’aide des flèches vers le haut et vers le bas situées dans le coin supérieur droit du bloc.

Commandes du bloc : Move, Clone, Delete et Hide

Les blocs peuvent également être clonés afin de créer plusieurs instances d’un bloc donné dans votre page. Pour ce faire, utilisez le bouton de clonage, visible lors de la modification d’un bloc. Si vous souhaitez supprimer un bloc cloné, vous pouvez simplement le supprimer. (Les blocs d’origine peuvent uniquement être masqués, et non supprimés).

REMARQUE : pour modifier le bloc Custom Footer, vous devez effectuer cette opération dans la page Company Settings. Les modifications effectuées ici seront répercutées sur toutes vos pages et tous vos formulaires Beamery.