Comment créer un thème personnalisé ?

Sur votre compte de marketing automation, en plus des thèmes livrés par défaut, vous avez la possibilité de créer vos propres modèles.

Créer un thème personnalisé à vos couleurs vous permet de préparer des emails (ou des pages d'atterrissage) respectant parfaitement votre charte graphique, avec une structure qui vous correspond. Le but ? Gagner en simplicité, en cohérence et gagner un temps précieux lors de la création de vos futures campagnes.

Il existe deux méthodes pour créer un thème personnalisé sur Webmecanik Automation : la méthode visuelle (la plus simple) et la méthode technique (par le code).

💡 La méthode la plus simple : Créer et transformer un email depuis le Builder

Si vous ne maîtrisez pas le code, pas d'inquiétude ! La manière la plus simple de créer un thème reste de construire votre email directement dans le builder (l'éditeur visuel), puis de transformer cet email en thème.

Voici comment procéder :

1. Créez un nouvel email sur votre compte Webmecanik Automation.

2. Ouvrez le constructeur (Builder) et concevez votre modèle idéal de A à Z grâce au glisser-déposer : intégrez votre logo, ajustez vos couleurs, placez vos blocs de textes, d'images et de boutons pour créer la structure parfaite.

3. Une fois votre design terminé, vous pouvez utiliser la fonctionnalité native de l'outil pour transformer cet email en thème personnalisé afin de le réutiliser à l'infini.

👉 Pour découvrir la manipulation détaillée étape par étape, consultez notre guide dédié : Comment transformer mon email en thème personnalisé ?

👨‍💻 Méthode avancée : Créer son code en MJML

Pour les profils plus techniques qui souhaitent maîtriser leur modèle de A à Z depuis le code, Webmecanik Automation gère son email builder grâce à la technologie open source la plus moderne pour l'emailing : MJML.

MJML est un langage qui permet de générer du code HTML 100% responsive (adaptable sur mobile et ordinateur) pour tous les clients de messagerie, très simplement et sans se soucier du rendu final (qui est géré automatiquement). Si vous avez des bases en HTML et en CSS, coder en MJML sera un jeu d'enfant.

Les étapes de création :

1. Testez votre code : Rendez-vous sur l'éditeur en ligne https://mjml.io/try-it-live/.

2. Concevez votre thème : Aidez-vous de la documentation officielle MJML pour structurer votre code.

3. Sauvegardez votre travail : Une fois le contenu de votre modèle réalisé, enregistrez-le dans un fichier nommé impérativement : nomdevotretemplate.mjml.twig.

4. Créez l'archive : Créez le fichier .zip classique regroupant l'arborescence de votre thème (voir le chapitre suivant).

5. Importez le thème : Importez ce .zip dans l'interface de Webmecanik Automation (menu Thèmes > Installer un thème).

6. Utilisez-le : Créez un nouvel email pour retrouver votre nouveau template, prêt à être utilisé.

⚠️ Attention : Tout le style de votre email doit être intégré "en inline" (en ligne). Les balises <mj-head> et <mj-style> ne sont pas supportées par l'outil.

📁 L'arborescence du dossier d'un thème (.zip)

Si vous optez pour la création par le code et l'importation via un fichier .zip, l'architecture de votre dossier est très simple, mais elle doit absolument être respectée pour que l'import fonctionne correctement.

Voici les règles importantes à ne pas manquer :

• L'architecture (dossiers/sous-dossiers) : Elle doit correspondre aux standards exigés par l'outil (généralement un dossier contenant les répertoires html et les fichiers de base).

• Le fichier config.json : Présent à la racine, il doit être parfaitement structuré. Il déclare le nom de votre thème et active les fonctionnalités associées ( "page", "email", et/ou "form"), selon que votre thème est prévu pour des emails, des pages ou des formulaires.

• La création du zip : Il est impératif de faire une archive .zip du contenu du dossier parent, et non du dossier lui-même.

  • Exemple : Si votre dossier de travail s'appelle "MonTheme", ne zippez pas le dossier "MonTheme". Ouvrez-le, sélectionnez tous les fichiers à l'intérieur (le fichier config.json inclus), et zippez cette sélection. Ainsi, le fichier config.json sera bien placé à la racine de votre archive .zip.

🎁 Exemple prêt à l'emploi

Parce que le plus simple pour comprendre le fonctionnement technique reste de partir d'un exemple concret, vous trouverez en pièce jointe attachée à cet article un exemple de thème pré-configuré pour votre compte Webmecanik Automation !

Téléchargez-le, analysez son arborescence et servez-vous-en comme base de travail.