Comment convertir PSD en WordPress en utilisant Elementor & WidgetKit
Publié: 2019-12-12Vous recherchez une solution de conversion PSD vers WordPress ? Vous voulez convertir le PSD de votre site Web prêt en WordPress, mais vous ne savez pas comment ? D'accord, je peux vous aider avec cette affaire.
Vous savez déjà que WordPress est l'une des plates-formes CMS les plus utilisées et les plus polyvalentes de ces derniers temps. Désormais, créer un site Web entièrement fonctionnel du thème PSD au thème WordPress sans codage est beaucoup plus confortable avec un constructeur de page comme Elementor.
Dans cet article, je vais vous montrer "Comment convertir un PSD en WordPress en utilisant Elementor & WidgetKit" étape par étape.
Voyons comment.
Sélection d'un design PSD
Avant de convertir un thème PSD en thème WordPress, la première chose à faire est de sélectionner une conception PSD d'un site Web. En bref, PSD est l'abréviation de PhotoShop Design, l'un des outils de conception les plus populaires avec lesquels la plupart des conceptions de sites Web WordPress sont créées.
Vous pouvez choisir l'un de vos modèles PSD préférés dans la vaste collection de PSDHUB.
Ils fournissent des modèles PSD gratuits de qualité supérieure pour votre site Web, à la fois pour un usage personnel et commercial. N'oubliez pas que votre conception PSD sélectionnée doit être simple et contemporaine.
Vérifiez les facteurs suivants lorsque vous choisissez une conception PSD,
- Structure de conception : La première chose que vous devez considérer est la structure de conception. Le design n'a pas de limites mais le codage en a.
- Mise en page propre et élégante : La troisième chose est que votre conception PSD préférée doit être propre et élégante. Il aide le développeur à créer un site Web parfait au pixel près à partir d'une mise en page propre et élégante.
- Réalisation de l'objectif : La deuxième chose est de savoir si la conception remplit votre objectif ou non. Supposons que vous ayez besoin d'un site Web de voyage, votre conception PSD doit être un PSD de site Web de voyage.
- Complexité : Enfin, essayez d'ignorer la complexité telle qu'elle est pour PSD également dans le choix de degn.
Ici, nous utilisons Eventia-Conference et Event Management Template de PSDHUB.
Installer WordPress
WordPress est bien connu pour sa facilité d'installation. Dans la plupart des cas, l'installation de WordPress est un processus très simple et prend moins de cinq minutes. Pour convertir un thème PSD en thème WordPress, l'installation de WordPress est la deuxième étape à envisager.
WordPress.org fournit un article détaillé sur "Comment installer WordPress" sur la page d'assistance de leur site. Toutefois; Voici les instructions de base de l'installation de WordPress pour vous,
- Téléchargez et décompressez d'abord le package WordPress.
- Créez une base de données pour WordPress sur votre serveur Web, ainsi qu'un MySQL.
- Téléchargez les fichiers WordPress à l'emplacement souhaité sur votre serveur Web :
- Si vous souhaitez intégrer WordPress à la racine de votre domaine, déplacez ou téléchargez tout le contenu du répertoire WordPress décompressé dans le répertoire racine de votre serveur Web.
- Si vous souhaitez que votre installation WordPress se trouve dans son propre sous-répertoire sur votre site Web, créez le répertoire du blog sur votre serveur et téléchargez le contenu du package WordPress décompressé dans le répertoire via FTP.
- Exécutez le script d'installation de WordPress en accédant à l'URL dans un navigateur Web.
C'est ça! WordPress devrait maintenant être installé.
Installer Elementor
L'article concerne la conversion d'un thème PSD en thème WordPress à l'aide d'Elementor. Nous avons donc besoin d'Elementor pour personnaliser et modifier le fichier PSD. Voyons ensuite comment installer Elementor.
Elementor est l'une des meilleures plates-formes de conception complètes pour créer un design parfait au pixel près dans WordPress. Il est préférable pour son approche de conception extensible et conviviale. Le processus d'installation d'Elementor est également une tâche simple. Suivez simplement quelques étapes simples et vous êtes prêt à concevoir votre PSD dans le générateur de pages Elementor.
Il existe deux façons d'installer le plugin Elementor. Le processus d'installation est décrit ci-dessous,
Via le site Elementor
- Allez d'abord sur elementor.com et cliquez sur télécharger.
- Dans le tableau de bord WordPress, cliquez sur Plugins > Ajouter un nouveau .
- Cliquez sur Upload Plugin et choisissez le fichier que vous avez téléchargé pour Elementor.
Via le tableau de bord WordPress
- Dans le tableau de bord, cliquez sur Plugins > Ajouter nouveau.
- Dans le champ Rechercher, entrez Elementor et choisissez le générateur de page Elementor à installer.
- Après l'installation, cliquez sur Activer.
C'est tout ce que vous avez à faire pour installer le générateur de pages Elementor. Vous pouvez également suivre la vidéo ci-dessous pour en savoir plus sur le processus d'installation.
Installer WidgetKit
WidgetKit pour Elementor - Le kit de modules complémentaires Elementor le plus avancé et le plus puissant qui améliore les capacités de création de votre site Web en ajoutant plus d'éléments et de mises en page. Ici, nous utilisons les widgets et ses éléments pour la conversion de PSD en WordPress.
Vous pouvez créer presque n'importe quel type de pages à partir d'un PSD en utilisant WordPress et WidgetKit. L'installation de Widgetkit est aussi simple que de concevoir un thème PSD vers WordPress avec celui-ci. Depuis le tableau de bord WordPress, vous pouvez facilement ajouter WidgetKit en suivant quelques étapes simples. Voyons voir,
Installer WidgetKit via le tableau de bord WordPress
- Dans le tableau de bord , cliquez sur Plugins > Ajouter nouveau.
- Entrez WidgetKit dans le champ Rechercher et choisissez WidgetKit pour Elementor à installer.
- Une fois l'installation réussie, cliquez sur Activer .
WidgetKit est maintenant prêt à être utilisé avec Elementor. Si vous avez encore une confusion, suivez simplement la vidéo. Cela vous aidera également à utiliser WidgetKit.
Convertissez votre PSD en WordPress
La partie installation est terminée. Il est maintenant temps de convertir le PSD en WordPress Elementor et WidgetKit. Il existe de nombreux fournisseurs de services PSD vers WordPress qui fournissent actuellement la conversion PSD vers WordPress ainsi que la conversion PSD vers Joomla. Toutefois; vous pouvez concevoir votre propre manière préférée. Ici, nous montrons simplement une méthode de base pour convertir un PSD en WordPress.
En outre, vous pouvez également choisir l'un de nos thèmes et modèles prêts à l'emploi dans la vaste collection de notre répertoire de thèmes et plugins WordPress.
Essayez de suivre la séquence lors de la conception d'une mise en page à partir de PSD. Cela vous aidera beaucoup,
Créer une nouvelle page
La première chose que vous devez faire est de créer une nouvelle page à partir du tableau de bord WordPress. En haut à gauche du tableau de bord WordPress, cliquez sur Pages > Ajouter nouveau.
Cliquez ensuite sur Modifier avec Elementor pour entrer Elementor Page Builder. Vous verrez un panneau Elementor comme indiqué ci-dessous.
Créez votre page à partir d'un fichier PSD
Pour créer une page ou convertir un PSD en thème WordPress, il y a trois choses principales à considérer ; Sections, colonnes et widgets. Ici, les sections sont les plus grands blocs de construction et capturent les colonnes. Vous pouvez placer des widgets dans des colonnes. En cliquant sur l'option d'édition, vous pouvez contrôler la section, la colonne et les widgets avec leur poignée.
Ajouter une section d'en-tête
Pour la section d'en-tête, nous utilisons ici un thème Eventia existant de Themexpert. Dans WordPress, vous devez utiliser un thème existant comme cadre pour concevoir un modèle, sinon WordPress lui-même en ajoute un pour vous. Ensuite, vous pouvez ajouter un logo et plusieurs pages en utilisant la conception ou la mise en page du thème existant.
Ajouter une section de héros
Maintenant, nous convertissons la section héros. Nous ajoutons d'abord une image d'arrière-plan comme le PSD, puis ajoutons une colonne dans une colonne pour ajouter plusieurs contenus et icônes.
Pour l'option de compteur ici, nous utilisons l'élément WidgetKit Countdown. La sortie et l'option d'édition sont ci-dessous.
Ajouter une section intérieure
Il est maintenant temps de concevoir la section intérieure. Ici, nous utilisons des éléments Elementor pour ajouter un arrière-plan et du texte entre deux colonnes.
Il s'agit de la section À propos de cet événement modifiée avec l'élément Elementor. Ici, nous ajoutons du texte et une image de bannière dans la colonne de la section. La vue est ci-dessous.
Avec l'icône verticale de l'équipe WidgetKit, nous concevons la section haut-parleur du fichier PSD. Là, nous ajoutons des images et une icône de site social dans une colonne différente avec le nom et la désignation.
Dans cette section, nous ajoutons simplement une icône aléatoire du PSD et donnons un titre.
On ne peut pas tout faire avec Elementor. Dans ce cas que fait-on ? Nous utilisons un addon de thème différent ou créons un addon pour le nôtre. C'est une chose courante lors de la conception d'un thème PSD vers WordPress. Ici, nous utilisons Schedule Addon du thème Eventia.
Pour la section Blog, nous utilisons l'élément de carrousel de blog de WidgetKit. Avec différents contenus visuels, vous pouvez ajouter un arrière-plan, même lire plus de bouton également.
Pour la section de pied de page, nous utilisons ici un thème Eventia existant de Themexpert comme nous le faisons avant la section d'en-tête. Ici, nous obtenons plusieurs icônes de sites sociaux et un bouton d'abonnement.
Prévisualisez et publiez votre page
Une fois que vous avez terminé de concevoir votre page à partir du PSD, vous pouvez prévisualiser votre travail et le publier . Vous pouvez également modifier une page publiée et enregistrer votre travail en tant que brouillon . Cela signifie que vous ne ruinerez pas votre page publiée en enregistrant votre travail en tant que brouillon . Voici le visuel Preview d'Eventia PSD.
Dernier mot
C'est tout pour aujourd'hui, les gars. J'espère que vous apprécierez l'article et que vous aurez une idée claire de la façon de convertir un PSD en WordPress à l'aide du constructeur de pages Elementor et de WidgetKit. Appliquez la ressource, et bien sûr, n'oubliez pas de partager votre expérience et votre précieux avis dans la section des commentaires ci-dessous.