Framer et WordPress sont deux plateformes performantes, mais elles répondent à des besoins très différents. Framer est réputé pour ses fonctionnalités de conception interactive et esthétique, souvent utilisées pour créer des landing pages ou des microsites élégants. WordPress, quant à lui, est un système de gestion de contenu utilisé par des millions de personnes pour gérer aussi bien des blogs personnels que de grands sites.
Imaginez maintenant ceci : vous avez déjà un site WordPress en ligne, mais vous venez de créer une superbe page d’accueil avec Framer. Vous adorez son apparence et son ergonomie. Elle est rapide, réactive et conçue exactement comme vous le souhaitez. La question suivante qui se pose est simple, mais importante.
Pouvez-vous rendre ce site Framer accessible sur votre domaine WordPress?
Cette question est de plus en plus fréquemment posée ces derniers temps, car les designers et les développeurs web cherchent des moyens créatifs d'associer les outils qu'ils affectionnent. Cela paraît simple, mais la réponse est plus complexe qu'il n'y paraît. Il existe plusieurs solutions, chacune présentant ses avantages, ses limites et ses spécificités techniques.
Ce guide vous expliquera tout en détail. Vous apprendrez comment associer votre domaine ou sous-domaine WordPress à un projet Framer, les pièges à éviter et quelle méthode est la plus efficace en pratique.
Commençons.
Est-il vraiment possible de connecter WordPress en tant que domaine personnalisé Framer ?
Oui, vous pouvez connecter votre domaine WordPress à un projet Framer, mais avec quelques précisions.
Vous ne combinez pas les deux plateformes au sens traditionnel du terme. Framer est un outil de création de sites web hébergé, tandis que WordPress est un système de gestion de contenu qui fonctionne généralement sur son propre serveur. En réalité, vous redirigez le trafic d'un domaine ou sous-domaine actuellement utilisé ou enregistré via WordPress vers unsite hébergé par Framer.
Cela signifie que vous pouvez attribuer un domaine ou un sous-domaine personnalisé, auparavant lié à WordPress, à Framer en modifiant ses paramètres DNS. Vous n'installez pas WordPress dans Framer, ni l'inverse. Vous utilisez plutôt des enregistrements DNS, comme les enregistrements A ou CNAME, pour indiquer à Internet où se rendre lorsqu'un utilisateur accède à votre domaine.
Il est idéal pour lancer des pages de campagne, tester de nouveaux designs ou héberger un prototype Framer sans affecter votre site WordPress.
Besoin d'aide pour connecter correctement Framer et WordPress ?
Chez Seahawk, nous aidons les marques à connecter Framer à WordPress via des sous-domaines, un proxy inverse ou des intégrations sans perturber votre site.
Ce dont vous avez besoin avant de commencer
Avant de commencer à associer votre site WordPress ou votre sous-domaine à un projet Framer, vous devez vous assurer d'avoir mis en place quelques éléments.
Tout d'abord, assurez-vous d'avoir accès à votre registraire de domaine ou à votre fournisseur d'hébergement pour mettre à jour vos paramètres DNS. C'est là que vous ajouterez ou modifierez les enregistrements A et CNAME.
Ensuite, assurez-vous que votre projet Framer est prêt à être publié. Vous devrez accéder à la section « Domaine » des paramètres de votre projet pour connecter un domaine personnalisé.
Enfin, n'oubliez pas que la propagation des modifications DNS peut prendre du temps. Prévoyez d'attendre quelques heures, voire jusqu'à 48 heures, avant que votre site ne soit accessible avec la nouvelle configuration.
Le fait d'avoir ces éléments prêts facilitera la connexion et évitera des retards inutiles.
Option A : Connecter Framer à un sous-domaine WordPress (étape par étape)
La méthode la plus simple et la plus fiable pour connecter un projet Framer à un site WordPress consiste à utiliser un sous-domaine. Cela permet de conserver les deux plateformes séparées tout en les connectant via le même domaine principal. Par exemple, vous pouvez utiliser un sous-domaine comme launch.votresite.com ou design.votresite.com pour afficher votre site Framer.
Voici comment le configurer :
Étape 1 : Créer un sous-domaine
Connectez-vous à votre tableau de bord d'enregistrement de domaine ou d'hébergement. La plupart des fournisseurs vous permettent de créer un sous-domaine dans les paramètres DNS. Cette option peut s'appeler « Gestion des sous-domaines » ou se trouver directement dans la section des enregistrements DNS.
Ajoutez le sous-domaine que vous souhaitez utiliser et configurez-le pour qu'il pointe vers votre gestionnaire DNS.
Étape 2 : Ouvrez votre projet Framer
Dans votre tableau de bord Framer, accédez au site que vous souhaitez publier. Cliquez sur l'onglet « Paramètres », puis sur « Domaines ». Choisissez l'option permettant de connecter un domaine personnalisé.
Saisissez votre sous-domaine complet. Par exemple : promo.votresite.com.
Étape 3 : Ajouter des enregistrements DNS
Framer vous fournira les valeurs DNS à utiliser. Généralement, cela implique l'ajout d'un enregistrement CNAME comme celui-ci :
| Nom | Taper | Valeur |
|---|---|---|
| promo | CNAME | sites.framer.app |
Ajoutez ceci à vos enregistrements DNS dans votre compte de registraire de domaine. Enregistrez les modifications.
Étape 4 : Attendre et publier
Les modifications DNS peuvent prendre de quelques minutes à quelques heures. Une fois l'enregistrement actif, retournez dans votre projet Framer et cliquez sur « Publier ». Votre site Framer sera alors accessible via le sous-domaine que vous avez configuré.
L'utilisation d'un sous-domaine permet de préserver l'intégrité de votre site WordPress principal tout en vous offrant la possibilité de lancer des pages de destination, des portfolios ou des prototypes indépendants.
Option B : Utiliser un proxy inverse pour masquer Framer sur votre domaine WordPress principal
Si vous souhaitez que votre projet Framer apparaisse directement sur votre domaine WordPress principal, et non sur un sous-domaine, vous devrez utiliser une méthode appelée proxy inverse. Cette approche vous permet d'afficher le contenu de Framer tout en conservant le domaine votresite.com.
Cette configuration est plus avancée et fonctionne mieux si vous êtes familiarisé avec la configuration des serveurs.
Étape 1 : Comprendre le rôle d’un proxy inverse
Un proxy inverse agit comme un intermédiaire. Lorsqu'un internaute visite votre domaine, il récupère le contenu de votre site Framer et l'affiche comme s'il provenait de votre serveur WordPress. Ainsi, les visiteurs voient votre page Framer tandis que l'URL reste inchangée.
Étape 2 : Pointez votre domaine vers un serveur que vous contrôlez
Vous devez héberger votre site WordPress ou au moins gérer sa configuration serveur. Si votre site est hébergé sur un serveur mutualisé, cette étape peut s'avérer impossible. Vous aurez besoin d'accéder aux fichiers du serveur ou à des outils comme NGINX ou Apache.
Étape 3 : Configurer les règles de proxy
Voici un exemple simple utilisant NGINX :
location / { proxy_pass https://your-framer-site.framer.website; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }Cela indique à votre serveur d'afficher le contenu de Framer tout en préservant votre domaine.
Étape 4 : Tout tester
Après avoir enregistré vos modifications, videz votre cache et essayez d'accéder à votre domaine. Le projet Framer devrait se charger sur votresite.com.
Limites à prendre en compte
- Le référencement naturel peut être affecté si le proxy n'est pas correctement configuré
- Les plugins ou les redirections serveur peuvent entrer en conflit
- Peu adapté aux débutants et peut nécessiter un entretien régulier
Cette méthode est puissante mais risquée si elle n'est pas maîtrisée. Elle est souvent utilisée pour des campagnes courtes ou des pages d'accueil temporaires.
WordPress et Framer sur le même domaine : est-ce que ça vaut le coup ?
Combiner WordPress et Framer sur un même domaine peut donner l'impression de mélanger deux univers différents. Parfois, le résultat est excellent, mais d'autres fois, cela crée plus de complexité que de simplicité.
Si votre objectif est de gérer un site web complet avec du contenu, une boutique en ligne et un blog, votre site WordPress doit rester la base. Framer, en revanche, est idéal pour les pages axées sur le design, comme les portfolios, les pages de campagne ou les présentations visuelles.
La configuration est judicieuse si vous souhaitez lancer un projet Framer indépendant sans modifier votre site WordPress principal. L'utilisation d'un sous-domaine est la solution la plus simple et la plus fiable.
Cependant, rediriger votre domaine principal vers Framer via un proxy inverse n'est pertinent que pour des besoins ponctuels ou pour des pages d'accueil. Cette solution est plus complexe, plus risquée et peut perturber le fonctionnement de votre site WordPress.
Dans la plupart des cas, les maintenir séparés mais connectés est la solution la plus judicieuse.
Alternative : Intégrer des projets Framer dans WordPress
Si la configuration d'un domaine personnalisé ou d'un proxy inverse vous semble trop technique, il existe une solution beaucoup plus simple : intégrer un projet Framer directement dans votre site WordPress grâce à une iframe.
Cette méthode permet de faire fonctionner les deux plateformes séparément. Votre projet Framer reste hébergé sur sa propre URL, et WordPress gère le reste de votre contenu.
Comment faire
Commencez par publier votre projet Framer sur une URL active. Ensuite, copiez cette URL.
Ensuite, dans votre tableau de bord WordPress, accédez à la page ou à l'article où vous souhaitez afficher le projet Framer. Utilisez un bloc HTML personnalisé et collez ce code :
<iframe src="https://your-framer-site.framer.website" width="100%" height="600" frameborder="0">Ajustez la hauteur selon les besoins de votre conception.
C'est idéal pour présenter un portfolio, une maquette de produit ou un design interactif sans modifier vos paramètres DNS. Bien que vous n'ayez pas un contrôle total sur le référencement, cette méthode est rapide, sûre et parfaite pour mettre en valeur vos créations graphiques au sein de votre site WordPress existant.
Conclusion : Trouvez la configuration adaptée à vos objectifs
Framer et WordPress offrent chacun des avantages précieux. L'un propose une grande liberté visuelle et des mises en page modernes, tandis que l'autre vous donne un contrôle total sur le contenu, les fonctionnalités et le référencement. Le véritable atout réside dans la capacité à les utiliser conjointement de manière optimale pour votre configuration.
Pour la plupart des utilisateurs, rediriger un sous-domaine vers un projet Framer est la solution la plus simple. Facile à gérer, elle fonctionne parfaitement avec les enregistrements DNS existants et protège votre site WordPress principal des erreurs. Le proxy inverse offre un contrôle plus poussé, mais nécessite une équipe compétente et une expertise technique. L'intégration via des iframes est une autre méthode pour afficher des designs Framer sans impacter le reste de votre site.
Chaque concepteur, développeur et entreprise a des objectifs différents. L'essentiel est de se concentrer sur les besoins actuels de votre site web et de mettre en place le processus adéquat.
FAQ : Réponses rapides à vos questions
Est-il possible d'intégrer Framer à WordPress sans affecter mon site ?
Oui. Vous pouvez utiliser une iframe pour intégrer un projet Framer sans rien modifier sur votre site WordPress existant.
Puis-je utiliser mon domaine principal pour WordPress et Framer ?
Uniquement si vous utilisez une configuration de proxy inverse, ce qui est complexe. Le choix le plus sûr est d'utiliser un sous-domaine pour votre projet Framer.
Puis-je héberger Framer directement sur mon site WordPress ?
Non. Framer est une plateforme distincte et ne fonctionne pas au sein de WordPress. Vous pouvez uniquement vous y connecter via des enregistrements DNS ou l'intégrer comme une section encadrée.
