Comment créer un thème WordPress sans codage en 3 étapes simples
Avant l’ère du générateur de page, la création de thèmes n’était qu’un rêve pour les utilisateurs de WordPress qui n’avaient pas de compétences en programmation. Pour créer un thème WordPress, vous devez maîtriser au moins PHP, HTML et CSS. Si vous souhaitez créer un thème WordPress complexe (comme celui vendu sur themeforest), c’est aussi une condition préalable à la maîtrise du JavaScript. C’était à l’époque. Aujourd’hui, vous pouvez créer des thèmes WordPress même si vous n’avez aucune connaissance de la programmation. Certains plug – ins de création de page WordPress, y compris elementor, sont fournis avec des fonctionnalités de création de thème qui vous permettent de créer des thèmes WordPress sans avoir à écrire une seule ligne de code. Vous pouvez créer des thèmes WordPress en utilisant l’éditeur de glisser – déposer visuel.
Avant de continuer, il y a une chose que vous devez savoir. Les thèmes WordPress se composent généralement de trois parties principales: un en – tête, un pied de page et un modèle de post individuel. La fonction Theme Builder de l’élément vous permet de créer ces trois sections. De plus, vous pouvez créer des pages personnalisées 404, des pages d’archives, des pages d’auteurs, etc. Note: le générateur de thème n’est disponible que sur elementor pro. Obtenez comment fonctionne elementor pro elementor Theme Builder la fonctionnalité elementor Theme Builder fonctionne en remplaçant certains des sujets actifs. Par exemple, si vous utilisez elementor pour créer et publier un titre, ce nouveau titre remplace le titre du sujet actif actuel. Il en va de même pour les pieds de page, les modèles de pâte simple, les pages 404, les pages d’archives, etc.
En général, les sites Web ont le même modèle d’en – tête et de pied de page sur tous les messages et pages. Dans l’élément, vous pouvez définir les critères d’affichage pour définir un modèle d’en – tête \/ pied de page qui ne s’applique qu’à une page ou à un message particulier. Bien sûr, vous pouvez définir un modèle d’en – tête \/ pied de page à appliquer à l’ensemble du site. Il y a une chose. Vous ne pourrez pas enregistrer le tem
Origine Pour ajouter un widget, il suffit de faire glisser le Widget désiré du panneau de gauche dans la zone de la toile. Le premier Widget que nous voulons ajouter dans cet exemple est une liste d’icônes. Nous utiliserons ce Widget pour afficher votre numéro de téléphone et votre adresse e – mail.
Vous pouvez modifier le Widget que vous venez d’ajouter à partir du panneau de gauche. Vous pouvez modifier la disposition, l’icône par défaut ou la couleur \/ style du texte. Passez à l’onglet style chaque fois que vous voulez personnaliser le texte ou les icônes. (pour convertir un widget en mode Édition, cliquez sur la poignée du Widget.) Vous pouvez également cliquer sur le Widget dans le navigateur. Ajouter un autre Widget dans la deuxième colonne. Dans cet exemple, nous avons ajouté un widget d’icônes sociales. De même, vous pouvez modifier ce Widget à travers le panneau gauche à gauche. Utilisez ce panneau pour personnaliser vos icônes de médias sociaux.
Titre principal nous utiliserons également deux colonnes comme titre principal. La première colonne (à gauche) sert à placer le logo du site et la deuxième colonne (à droite) sert à placer le menu du site. Cliquez sur le bouton plus dans l’éditeur d’éléments pour ajouter une nouvelle section et sélectionnez l’option structure à deux colonnes. Faites glisser le Widget logo du site du panneau de gauche dans la zone de la toile. Vous trouverez ce Widget (logo du site) dans la Section du site. Elementor téléchargera automatiquement le logo de votre site Web. Définit l’alignement et la taille. Pour définir la taille, vous pouvez passer à l’onglet style et changer la valeur de largeur.
Ajoutez un autre Widget (menu de navigation) à la deuxième colonne. Vous pouvez également trouver ce Widget dans la section site. De même, vous pouvez personnaliser le menu en utilisant le panneau de gauche. Vous pouvez définir la couleur du texte, la couleur en vol stationnaire, la largeur, etc.
– Oui. Nommez le modèle et cliquez sur le bouton créer un modèle. Puisque nous voulons créer des pieds de page à partir de zéro, fermez la Bibliothèque de modèles pour ouvrir l’éditeur d’éléments. Cliquez sur le bouton plus dans la zone toile pour ajouter une nouvelle section. Sélectionnez l’option structure à deux colonnes. Faites glisser le Widget icons social du panneau de gauche dans l’une des colonnes de l’éditeur. Une fois ajouté, vous pouvez personnaliser l’icône en utilisant le panneau de gauche. Pour voir les pages du site (pages d’information, pages de contact, conditions d’utilisation et politique de confidentialité), nous utiliserons le Widget de liste d’icônes. Ensuite, faites glisser le Widget dans une autre colonne d’éditeur. Dans cet exemple, nous changeons la disposition en ligne. Ceci convertit la liste des icônes en mode horizontal. Remplacer le texte par défaut dans le champ texte par l’étiquette de navigation souhaitée (comme info, contact, conditions d’utilisation, etc.) et ajouter un lien dans le champ lien. Vous pouvez également supprimer l’icône si vous le souhaitez. Dans cet exemple, nous n’utilisons pas d’icônes. Utilisez le panneau de gauche pour personnaliser le Widget de liste d’icônes. Une fois terminé, vous pouvez cliquer sur le bouton public. Cliquez sur le bouton Ajouter une condition pour définir l’emplacement où vous souhaitez appliquer le modèle de pied de page. Si vous souhaitez activer le modèle de pied de page sur l’ensemble du site, cliquez simplement sur le bouton Enregistrer et continuer, car par défaut, le modèle de pied de page s’applique à l’ensemble du site. Au lieu de cela, si vous voulez juste appliquer le pied de page à une page (ou un message) spécifique, vous pouvez sélectionner la page désirée dans le menu déroulant. Une fois terminé, cliquez sur le bouton Enregistrer et continuer. # Créer un seul élément de modèle de poste vous permet également de créer des modèles de poste individuels personnalisés. Dans ce cas, nous créerons un modèle
Sélectionnez ensuite l’option structure à colonne unique. Faites glisser le Widget de section interne sur la section que vous venez d’ajouter et définissez la largeur de colonne à une valeur de comparaison d’environ 68: 32%. Activez (Sélectionnez) La première colonne (colonne à gauche) et allez à l’onglet style pour changer l’arrière – plan en gris (ou toute couleur que vous voulez). Faites glisser le Widget de formulaire dans la colonne de gauche. Puisque nous voulons utiliser ce formulaire comme formulaire d’abonnement par courriel, veuillez supprimer tous les éléments du formulaire, à l’exception du courriel. Lorsque le Widget de formulaire est sélectionné, allez à l’onglet avancé pour définir les marges. Réglez la marge droite à 15, la marge gauche à 15 et la marge inférieure à 15 (différentes valeurs de marge peuvent être utilisées si nécessaire). Allez à l’onglet styles personnaliser le formulaire. Jouez jusqu’à ce que vous soyez satisfait des résultats. Faites glisser le Widget de titre dans la première colonne et placez – le au – dessus du formulaire, puis écrivez un titre comme « aimez – vous cet article? Abonnez – vous à notre newsletter et tenez – vous au courant! ». Lorsque le Widget d’en – tête est sélectionné, allez à l’onglet avancé pour définir les marges. Réglez la marge supérieure à 15, la marge droite à 15 et la marge gauche à 15. De même, vous pouvez aller à l’onglet styles pour personnaliser le titre. Section 4 cliquez sur le bouton plus dans l’éditeur d’éléments et sélectionnez l’option structure de colonne. Faites glisser le Widget de section interne sur la section que vous venez d’ajouter et définissez la largeur de colonne à une valeur de comparaison d’environ 68: 32%. Faites glisser le Widget de navigation post dans la première colonne (à gauche). Après avoir sélectionné la navigation tardive, allez à l’onglet avancé pour définir les marges. Réglez la marge supérieure à 10 et la marge inférieure à 10. Faites glisser le Widget post – commentaire dans la première colonne et placez – le sous la navigation post. Une fois terminé, cliquez sur pu