{"id":1061,"date":"2018-08-24T11:28:28","date_gmt":"2018-08-24T09:28:28","guid":{"rendered":"https:\/\/www.templatemonster.com\/fr\/blog\/?p=1061"},"modified":"2018-08-24T11:28:28","modified_gmt":"2018-08-24T09:28:28","slug":"comment-creer-votre-site-web-sans-toucher-au-code-didacticiel-au-power-builder","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/fr\/comment-creer-votre-site-web-sans-toucher-au-code-didacticiel-au-power-builder\/","title":{"rendered":"Comment cr\u00e9er votre site Web sans toucher au code [Didacticiel au Power Builder]"},"content":{"rendered":"

Construire votre propre site Web peut \u00eatre une vraiment emb\u00eatant. Surtout, si vous \u00eates d\u00e9butant dans le d\u00e9veloppement web<\/strong>. Nous sommes tous pass\u00e9s par l\u00e0, mais je vous ai couvert ! Aujourd'hui, je vais prendre un de nos th\u00e8mes et vous montrer comment vous pouvez facilement le personnaliser selon vos besoins, soyez attentif et suivez-moi.<\/p>\n

A titre d'exemple, nous allons utiliser et modifier le Builderry<\/a>\u00a0-\u00a0Th\u00e8me WordPress pour soci\u00e9t\u00e9 de construction<\/a>.<\/p>\n

\"power-builder-tutorial-1\"<\/p>\n

Ce th\u00e8me a \u00e9t\u00e9 soigneusement adapt\u00e9 par notre \u00e9quipe de concepteurs d\u00e9di\u00e9s aux entreprises de construction. Pour vous montrer \u00e0 quel point le processus de personnalisation est cool, nous en ferons un th\u00e8me de site Web de studio de d\u00e9veloppement.<\/p>\n

Ce qui est g\u00e9nial avec ce th\u00e8me, c'est qu'il est bas\u00e9 sur\u00a0Cherry Framework 5\u00a0et poss\u00e8de le\u00a0Power Builder<\/strong>\u00a0pour rendre le processus de personnalisation plus rapide et plus facile.<\/p>\n

\"power-builder-tutorial-2\"<\/p>\n

Power Builder est un outil tr\u00e8s utile pour changer l'apparence de votre site Web\u00a0sans toucher au code<\/strong>.<\/p>\n

<\/div>\n
\n
<\/div>\n

Une br\u00e8ve revue de mon id\u00e9e :<\/b><\/h3>\n

<\/p>\n

Je veux construire un site web pour un projet appel\u00e9 \u2018Startup Express<\/strong>\u2019. L'id\u00e9e principale de mon projet imaginable est de permettre aux jeunes d\u00e9veloppeurs, concepteurs et personnes simplement talentueuses de se connecter et de d\u00e9marrer un projet ensemble.<\/p>\n

\u2018Startup Express\u2019 n\u00e9cessitera un site Web avec un look compl\u00e8tement diff\u00e9rent.<\/p>\n

<\/div>\n
\n
<\/div>\n

Votre parcours de personnalisation commence !<\/b><\/h3>\n

<\/p>\n

Juste apr\u00e8s l'achat de notre th\u00e8me, vous recevrez un lien vers la page de documentation avec toutes les instructions d\u00e9taill\u00e9es <\/strong> sur la fa\u00e7on de l'installer et de l'activer.<\/p>\n

Pour acc\u00e9der au Power Builder, rendez-vous simplement sur \u2018Pages<\/em>\u2019 > \u2018All Pages<\/em>\u2019. Nous allons \u00e9diter la page d'accueil de notre site, alors choisissons la page \"Home\" de la liste.<\/p>\n

Voici \u00e0 quoi ressemble la zone de travail du g\u00e9n\u00e9rateur :<\/p>\n

\"power-builder-tutorial-3\"<\/p>\n

Donc, fondamentalement, vous pouvez supprimer et ajouter des \u00e9l\u00e9ments \u00e0 la page avec la m\u00e9thode drag & drop. Assez simple, non ?<\/p>\n

Tout d'abord, j'ai nettoy\u00e9 la zone sur notre page d'accueil. Vous pouvez faire la m\u00eame chose, allez-y et retirez tous les \u00e9l\u00e9ments de la zone de travail. Nous allons construire la page \u00e0 partir de z\u00e9ro en ajoutant les modules dont nous avons r\u00e9ellement besoin, et non pas simplement modifier les param\u00e8tres par d\u00e9faut.<\/p>\n

<\/div>\n
\n
<\/div>\n

Que diriez-vous d'une photo cool sur en haut de la page ?<\/strong><\/h3>\n

J'ai tout nettoy\u00e9 de mon c\u00f4t\u00e9 et j'esp\u00e8re que vous l'avez fait aussi. Si oui, nous pouvons continuer et ajouter une ligne maintenant.<\/p>\n

\"power-builder-tutorial-4\"<\/p>\n

Ensuite, cliquez sur \u2018Insert Module(s)<\/em>\u2019 et choisissez tout ce que vous voulez ajouter. J'ai d\u00e9cid\u00e9 que je voulais avoir une image statique avec le logo en haut de la page. Donc je clique \u2018Insert Module(s)<\/em>\u2019 et je s\u00e9lectionne le module \u2018Image<\/em>\u2019.<\/p>\n

\"power-builder-tutorial-5\"<\/p>\n

\"power-builder-tutorial-6\"<\/p>\n

Le module appara\u00eet sur la liste et nous pouvons maintenant le personnaliser.<\/p>\n

\"power-builder-tutorial-7\"<\/p>\n

\"power-builder-tutorial-8\"<\/p>\n

Une fois que vous avez s\u00e9lectionn\u00e9 l'image que vous souhaitez utiliser en haut de la page, vous disposez de nombreuses options. Vous pouvez ins\u00e9rer un lien sur cette image, changer la fa\u00e7on dont elle appara\u00eet \u00e0 l'\u00e9cran, etc.<\/p>\n

\"power-builder-tutorial-9\"<\/p>\n

J'ai d\u00e9cid\u00e9 de rester simple, je ne lie pas cette image, ce sera juste une image mignonne pr\u00e9sentant le logo et l'esprit de notre projet. J'ai aussi choisi le style d'animation \u2018Fade In\u2019.<\/p>\n

<\/div>\n
\n
<\/div>\n

Bloc de description de projet<\/strong><\/h3>\n

Et apr\u00e8s ? Je pense que nous devrions expliquer au visiteur de quoi je parle et quels objectifs je garde en t\u00eate. Pour ce faire, nous devons ajouter les modules 'Text' et 'Button'.<\/p>\n

\"power-builder-tutorial-10\"<\/p>\n

J'ai rempli le texte et l'ai plac\u00e9 sur la gauche pour que les clients n'aient pas de probl\u00e8mes pour lire le texte sur la photo que j'ai s\u00e9lectionn\u00e9e.<\/p>\n

\"power-builder-tutorial-11\"<\/p>\n

Je voudrais noter l'une de mes fonctionnalit\u00e9s pr\u00e9f\u00e9r\u00e9es de ce constructeur. Lors de la personnalisation de chaque module, vous aurez la possibilit\u00e9 de d\u00e9cider si vous souhaitez que ce module soit affich\u00e9 ou masqu\u00e9 sur l'une des versions de vos sites Web.\u00a0Cool, hein ?<\/strong><\/p>\n

<\/p>\n

Vous pouvez maintenant masquer un module sur la version tablette, t\u00e9l\u00e9phone ou bureau de votre site Web \u00a0en un seul clic de souris !<\/strong><\/p>\n

\"power-builder-tutorial-12\"<\/p>\n

Je souhaite \u00e9galement ajouter un bouton permettant aux clients de nous contacter imm\u00e9diatement et de commencer \u00e0 travailler avec nous. La personnalisation des boutons est tr\u00e8s simple. J'ai rempli le texte qui sera affich\u00e9 sur le bouton, s\u00e9lectionn\u00e9 l'option d'alignement, choisi le lien \u00e0 ouvrir dans le nouvel onglet par le clic et c'est tout, pr\u00eat \u00e0 partir !<\/p>\n

\"power-builder-tutorial-13\"<\/p>\n

<\/div>\n
\n
<\/div>\n

Partage de nos bureaux<\/strong><\/h3>\n

\u2018Startup Express<\/strong>\u2019 a son si\u00e8ge \u00e0 New York et nous sommes heureux de partager l'emplacement du bureau avec les visiteurs de notre site. Le module suivant sur la page d'accueil sera donc le module Google Map.<\/p>\n

Pour pouvoir utiliser l'int\u00e9gration de Google Maps, vous devez obtenir la cl\u00e9 de l'API Google Maps\u00a0ici<\/a>. Ensuite, allez \u00e0 \u2018Power Builder<\/em>\u2019 dans l'admin WP et remplissez la cl\u00e9.<\/p>\n

\"power-builder-tutorial-14\"<\/p>\n

Maintenant, nous pouvons ajouter le module Google Maps et \u00eatre s\u00fbr que tout fonctionnera correctement de notre c\u00f4t\u00e9.<\/p>\n

\"power-builder-tutorial-15\"<\/p>\n

\"power-builder-tutorial-16\"<\/p>\n

J'ai rempli l'adresse et j'ai \u00e9galement d\u00e9cid\u00e9 que je ne voulais pas que le zoom de la carte soit contr\u00f4l\u00e9 par la molette de la souris. C'est \u00e0 vous de d\u00e9cider si vous souhaitez utiliser cette option, mais pour ma part, je trouve cela tr\u00e8s ennuyeux.<\/p>\n

\"power-builder-tutorial-17\"<\/p>\n

<\/div>\n
\n
<\/div>\n

Mise en place de la vitrine des projets<\/strong><\/h3>\n

Il est temps de pr\u00e9senter les projets qui ont \u00e9t\u00e9 lanc\u00e9s sur la plateforme \u00ab Startup Express \u00bb. Le module \u2018Project Terms<\/em>\u2019 est pratique dans cette situation. Mais juste au-dessus de ce module, il sera bon d\u2019ajouter le module \u2018Text<\/em>\u2019 et donner \u00e0 votre visiteur de site Web une br\u00e8ve explication dequoi parle ce bloc de votre page.<\/p>\n

\"power-builder-tutorial-18\"<\/p>\n

Tous les projets sur mon site sont inclus dans l\u2019une des huit cat\u00e9gories. \u00c9tant donn\u00e9 que de nombreux projets sont r\u00e9pertori\u00e9s sur le site Web, il vaudra mieux afficher ces huit cat\u00e9gories et le client partira de l\u00e0.<\/p>\n

A ce propos, vous pourrez \u00e9galement afficher les projets par certaines balises \u00e0 l'aide du module \u2018Project Terms<\/em>\u2019, donc l'affichage des cat\u00e9gories est juste ma d\u00e9cision.<\/p>\n

\"power-builder-tutorial-19\"\"power-builder-tutorial-20\"<\/p>\n

J'ai rempli le texte et l'ai centr\u00e9. Fait en gras et d\u00e9fini la ligne \u2018We started<\/em>\u2019 comme en-t\u00eate.<\/p>\n

\"power-builder-tutorial-21\"<\/p>\n

C'est tout pour le moment, la gestion de Power Builder est termin\u00e9e. N'\u00eates-vous pas d'accord que c'\u00e9tait assez facile ?<\/p>\n

<\/p>\n

<\/div>\n
\n
<\/div>\n

La ligne d'arriv\u00e9e est proche, nous avons presque termin\u00e9<\/strong><\/h3>\n

Une fois connect\u00e9 \u00e0 votre panneau d'administration, acc\u00e9dez \u00e0 votre site Web et cliquez sur le bouton \u2018Customization<\/em>\u2019.<\/p>\n

\"power-builder-tutorial-22\"\"power-builder-tutorial-23\"<\/p>\n

Ici, vous pourrez modifier le sch\u00e9ma de couleurs, personnaliser votre zone d\u2019en-t\u00eate et de pied de page. Tous ces changements mineurs rendront votre th\u00e8me plus complet et bien pens\u00e9.<\/p>\n

Aujourd'hui, nous avons appris \u00e0 personnaliser votre mod\u00e8le \u00e0 l'aide de Power Builder. Nous n'avons pas touch\u00e9 une seule ligne de code, mais nous avons compl\u00e8tement modifi\u00e9 l'apparence de notre site Web et l'avons pr\u00e9par\u00e9 pour notre soci\u00e9t\u00e9 Startup Express <\/strong>. Voici le r\u00e9sultat que j'ai obtenu :<\/p>\n

\"startup-express\"<\/p>\n

Comme vous pouvez le voir, il est tr\u00e8s facile de changer l'apparence de votre site WordPress. Et m\u00eame si vous choisissez une\u00a0solution pr\u00eate \u00e0 l'emploi<\/a>, vous serez capable de changer et d'ajouter les \u00e9l\u00e9ments sur votre page Web.<\/p>\n

<\/div>\n
\n
<\/div>\n

Ne manquez pas notre aper\u00e7u Power Builder sur YouTube !<\/strong><\/h3>\n