Lorsque créez des sites Web pour vos clients, cherchez toujours des façons de simplifier votre vie et celle de vos clients. Dans la vidéo ci dessous, apprendrez comment créer votre propre bibliothèque de modèles de démarrage de site client et comment mettre votre bibliothèque de site à lrsquoessai et prêt à être converti pour un démarrage plus facile et plus rapide, en particulier pour les clients qui nrsquoont pas de besoins de créneau ou de contraintes budgétaires. Vidéo: comment utiliser plus rapidement et de façon plus rentable les sites Web des clients pour lancer des modèles diapositives de ce cours dans ce cours vidéo, Carrie dils, coach freelance et développeur Web, discute:
L’approche de création de pages par blocs de WordPress et l’innovation de l’édition à l’échelle du site. Comment utiliser des blocs pour créer un modèle initial et accélérer le processus de développement. Lrsquoidée est de réduire, réutiliser et recycler. Vous réduisez le temps, réutilisez les composants entre les projets et Recyclez les modèles. Tout cela est devenu beaucoup plus facile en ajoutant un éditeur de bloc au noyau WordPress Carrie dills. Carrie dills est un entraîneur freelance et un développeur de réseau. Carrie dills: Salut tout le monde. Bienvenue à cette session sur le modèle de démarrage du site client. Aujourdrsquohui, nous allons parler demplois plus rapides et plus rentables. Qui drsquoautre pense que ça nrsquoa pas lrsquoair bon. Justification Donc, si êtes un pigiste ou un agent et que construisez un site Web pour vos clients, savez qursquoil y aura des activités répétitives pour chaque projet.
Chaque fois que pouvez réutiliser ou recycler, que ce soit en Code ou en automatisant ces tâches, nous pouvons accomplir les tâches plus rapidement et raccourcir le cycle de vie du projet, ce qui est une bonne chose. Crsquoest ce dont nous allons discuter aujourdrsquohui. Maintenant, je nrsquoai pas besoin de parler de la façon de démarrer le flux de travail de développement. Ce sont peut être des sujets standard ou des plug ins fonctionnels pour ba
Barre latérale. Aujourdrsquohui, que utilisiez un éditeur classique ou que utilisiez déjà un éditeur de bloc, êtes limité à cette zone de contenu. Les sujets contrôlent le contenu des en têtes, des pieds de page et des barres latérales. Lrsquoédition complète du site introduit ensuite un ensemble complet de nouveaux blocs que pouvez utiliser pour construire drsquoautres éléments du site: en tête, pied de page et barre latérale. Par exemple, un titre de site Web, un bloc drsquoicônes de site Web ou un bloc de navigation. Ces choses sont publiées sur WordPress Core. Les blocs ne sont donc que des unités de marquage séparées. Comme je lrsquoai dit, cela peut être un bloc de navigation ou aussi simple qursquoun bloc de paragraphe.
Puis vient le concept de blocs réutilisables. Disons que avez peut être créé cette belle invitation à agir. Il a un bon fond, peut être un titre, quelques copies introductives et un bouton. Vous pouvez lrsquoutiliser pour un projet ou un sujet particulier et voulez pouvoir le réutiliser sur plusieurs pages. Ensuite, pouvez enregistrer le bloc ou la configuration du bloc en tant que bloc réutilisable, puis le libérer et lrsquoutiliser dans tout le site. Puis il y a le motif de bloc. Ce sont donc des groupes de blocs préconfigurés et préconfigurés que pouvez insérer et utiliser comme contenu initial. En drsquoautres termes, si avez un modèle de bouton, pouvez lrsquoinsérer. À chaque fois, pouvez changer le texte ou la couleur et faire ce que devez faire. Compte tenu du bloc réutilisable, pouvez le changer en un emplacement qui met à jour toutes les instances du bloc réutilisable dans lrsquoensemble du site.
Drsquoautre part, le modèle ressemble un peu à un modèle et est fabriqué. Ils sont uniques à chaque utilisation. Crsquoest la langue du bloc. Il y a beaucoup de blocs dans WordPress Core. Vous pouvez créer vos propres blocs personnalisés. Ou une bibliothèque de blocs
Un tiers qui introduit son propre add in. Aujourdrsquohui, jrsquoaimerais parler drsquoune chose, crsquoest la construction de la genèse. Maintenant, c’est un plugin wordpress gratuit. Organisation. Une mise à jour payante est également disponible. Mais aujourdrsquohui, tout ce que je ai montré, nrsquoavez besoin que drsquoune version gratuite. Il est vraiment fort. Regardons quelques termes qui apparaissent dans le contexte du plug in Genesis blocks.
Drsquoabord, on a une partie. Pensez donc, si trouvez un modèle de thème vraiment intéressant, un beau modèle de page drsquoaccueil, voulez diviser ce modèle en plusieurs parties. Crsquoest la section. Crsquoest un modèle de serrure conçu professionnellement. Beaucoup drsquoentre eux ont des plug ins Genesis blocks. Ensuite, la mise en page. Par conséquent, si une partie est coupée, la mise en page mélange et correspond à toutes ces Parties pour créer une mise en page complète. Et puis, enfin, avez la collection. Je vais te montrer. Juste pour jeter les bases. Il semble que les collections sont des collections de ces mises en page et de ces sections, qui sont toutes des styles thématiques. Maintenant, je voudrais montrer une petite démonstration où jrsquoa i créé une mise en page simple de trois pages en utilisant une collection existante dans le plug in Genesis blocks. êtes prêt, portez votre casque de présentation.
Drsquoaccord. Donc ici, je viens de recevoir une installation WordPress vanille simple. Il se trouve que jrsquoai présidé le thème Astra. Mais pouvez utiliser nrsquoimporte quel sujet que jugez approprié. Jrsquoai aussi installé un plugin, le plugin Genesis blocks. Désolé, crsquoest activé. Drsquoaccord. Créons donc une nouvelle page. À partir de là, je vais entrer dans lrsquoinserteur de bloc. C’est là que pouvez insérer le bloc WordPress Core. Il y a ensuite la mise en page à partir du plug in Genesis blocks et de la section Hosts que pouvez parcourir par catégorie. Puis nous avons la disposition. Encore une fois, il srsquoagit de versions mixtes ou de variantes de tous les Q
Les parties. Enfin, la collection.
Crsquoest une collection de ardoises. Dans la version gratuite du plugin, il est disponible gratuitement. souhaitez en savoir plus sur ces collections, je vais montrer quelques documents. Je ne veux pas mrsquoattarder sur ce point. Mais si nous ouvrons la collection, nous pouvons voir quelques sections séparées ici. Même si regardez très vite, pouvez voir une certaine continuité visuelle en termes de couleurs, de fond, de polices, etc. Je viens drsquoentrer la disposition de la page drsquoaccueil. Crsquoest une page complète. Cliquez pour le libérer. Drsquoaccord. Alors, continuons à le publier. Nous verrons à quoi ressemble lrsquoavant. Ça a lrsquoair complètement différent de ce que je veux vraiment. Nous devons donc faire quelques changements. Drsquoabord, nous allons personnaliser. Maintenant, en particulier pour le thème ASTRA, je veux juste mrsquoassurer que le contenu complet est activé. Je veux aussi enlever cette barre latérale. Allons le chercher. Je vais désactiver la barre latérale. Parfait. Continuez à publier. La seule chose que je nrsquoaime pas, crsquoest lrsquoapparition de ce titre. Le thème Astra nous offre donc un moyen de nous en débarrasser. utilisez le cadre Genesis ou lrsquoun des sous thèmes Genesis, il y a une autre façon de désactiver le titre de la page, ce qui est très intéressant. on y retourne, on verra que le titre a disparu. Jrsquoa I une très bonne page drsquoaccueil de design professionnel. Continuons à créer une autre page pour notre site de démonstration de trois pages. Ce sera la page de contact. Je vais retourner à cette collection de dalles, rouler vers le bas, et on va découvrir qursquoon est là. Nous avons un modèle de page de contact complet. Comme précédemment, je peux insérer une collection complète de groupes et de blocs en un seul clic. Je vais continuer et désactiver ce titre. Laissez nous le publier. Voyons voir. Crsquoest tout.
Oui, nous avons un bon bloc drsquoaccordéon et une bonne page. Faisons en un autre. Je sais qursquoon court. Mais on nrsquoa pas toute la journée. Drsquoaccord. Voici notre page drsquoinformation. Je suivrai le même processus que je ai montré. Ouvrez la mise en page et allez à la collection. Cette fois dans la collection drsquoardoises, je vais sélectionner un modèle pour la page drsquoinformation. Prospérité Crsquoest pour ça qursquoil est là. Bien sûr, si le faites pour un vrai client, devrez peut être échanger des couleurs, évidemment du texte et des photos. Donc, même srsquoil srsquoagit de parties et de mises en page préexistantes, il est intéressant que puissiez entrer et modifier lrsquoune drsquoelles comme le feriez avec nrsquoimporte quel autre bloc. Par conséquent, continuons à désactiver le titre de la page. Retourne voir. Drsquoaccord. Drsquoaccord. Par conséquent, si nous regardons le site comme nous le faisons actuellement, il ne sera pas trop excitant. Faisons quelques choses. La première étape consiste à obtenir un menu contenant les pages que nous avons créées. Donc, je vais quand même apprendre ça des personnalisateurs. Je vais créer un menu pour le menu principal qui apparaît dans le titre. Continuons drsquoajouter les pages que jrsquoai créées et de les publier. Dans le coin supérieur droit, pouvez voir le menu. Maintenant, une autre chose que je veux faire est drsquoaller aux paramètres de la page drsquoaccueil et de voir la page drsquoaccueil que jrsquoai créée par rapport au post précédent. Drsquoaccord. Bientôt, jrsquoai créé un site Web de trois pages. Évidemment, si crsquoétait un vrai projet, auriez du travail supplémentaire à faire. Mais pour ne citer qursquoun exemple, pouvez voir comment une collection peut vraiment aider à créer rapidement des prototypes de site Web, ou à faire sortir un site de la maison. Crsquoest très bien pour les projets de niche ou les clients qui nrsquoont pas drsquoénormes budgets pour personnaliser les sujets. Crsquoest pourquoi, en regardant vers lrsquoavenir, comme nous lrsquoavons vu dans la collection de ardoises, il srsquoagit drsquoun thème moderne pour enfants semblable à G.
Je suis dans lrsquoéditeur et je veux juste montrer comment lrsquoutiliser, puis revenir en arrière et créer votre propre plug in. Par conséquent, jrsquoai divisé la page en toutes ces sections et composantes de page distinctes. Drsquoaccord. Pour revenir au Tutoriel de Rob, il montre la partie qursquoil a créée pour le plug in de démonstration. La première chose qui suit nous dit que nous devons construire le plug in. Donc, si voulez, nous pouvons construire notre propre structure pour le plug in. Je vais à mon éditeur de code. Apprenons le tutoriel de Rob ensemble. Sur la gauche, je n’ai installé que mon site WordPress. Jrsquoai Genesis Brew, le plugin que jrsquoai créé. Jrsquoai chaque dossier, puis Genesis Brew main, qui est le fichier principal du plug in. Pour revenir au tutoriel ci dessous, jrsquoai un titre. Ce n’est que le titre standard du plugin wordpress. Voyons voir. nous passons à lrsquoétape 3 du tutoriel Rob, nous enregistrons la collection et ajouterons la disposition de la page drsquoaccueil. Revenons en plein écran. Je nrsquoai pas lrsquointention de détailler le Code, car rob fait du bon travail dans ses tutoriels. Mais je veux juste montrer cette fonctionnalité, comment elle fonctionne, cette composante Genesis Block log Layout. Je mets du contenu dans ce fichier principal. Php. Voyons ça. Crsquoest juste une balise PHP ouverte, un retour et un tas de balises de bloc. Laissez moi montrer comment cela fonctionne, comment fonctionne le balisage, parce que je pense que crsquoest très intéressant. Drsquoaccord. Donc pour revenir ici, nous avons la mise en page de toute la page. jrsquoouvre ces points de pause et que je vais dans lrsquoéditeur de code, il y a deux façons de le faire. Je peux tout sélectionner manuellement et lrsquoajouter à mon clavier, ou je peux choisir de ne copier que tout et de le mettre dans le presse papiers. Alors je le ferai. Retour à mon éditeur de code et je vais continuer à supprimer tout cela juste pour recommencer à zéro et montrer sa valeur
Facile à comprendre Ma balise PHP de départ, si je peux taper, renvoie la balise, puis jrsquoai téléchargé le contenu du presse papiers, qui est toutes les balises du carnet. Le seul problème ici est que si avez des apostrophes dans votre copie, devez éviter de les utiliser. Alors fais le. Sauvez le. Drsquoaccord. on retourne sur notre site, on srsquoen va. Jrsquoajoute une nouvelle page. Jette le. Passons à notre disposition. Crsquoest bon. Collection, Brew collection et tout ça. Maintenant, quand je clique sur cette mise en page, tout ce qursquoelle fait est de toutes les balises de bloc de la page drsquoaccueil. Php dans cette page. Je pense que crsquoest bien parce que nrsquoavez pas à écrire tout le Code manuellement. Vous créez en fait dans lrsquoéditeur de bloc, puis copiez et collez lrsquoétiquette de bloc dans le plug in. Regardons une section. La même chose. Ceci est simplement marqué avec ce bloc de téléchargement. Laissez moi montrer le héros. Crsquoest la partie héroïque. Tout est en couverture. Crsquoest une couverture avec des images dedans. Je ne sais pas à quel point crsquoest pratique de lrsquoutiliser. Mais crsquoest ce que jrsquoai montré. Ensuite, je vais rouvrir lrsquoéditeur de code. Cette fois, je ne veux pas copier tout le contenu, je veux juste copier le Code requis pour une partie particulière. Alors, allons y et écrivons le dans nos notes. Je veux juste entrer ici et le coller sur ce héros. Php. Je lrsquoai déjà fait pour chaque autre partie avant . Il srsquoagit maintenant de ce dossier de référence qui contient des captures drsquoécran des produits finis, si le souhaitez, pour chaque section et mise en page. Donc si jrsquoy retourne. Drsquoaccord. Ouvrons la mise en page. Drsquoaccord. Les captures drsquoécran que nous voyons ici, dans chaque capture drsquoécran, sont des images qui vivent dans le dossier ressources, juste pour faire savoir drsquooù elles viennent. Drsquoaccord. Donc, comme le montre le tutoriel de Rob, fondamentalement, nous pouvons créer
Construisez un échafaudage pour notre collection, créez le dans un éditeur, relâchez les balises de bloc dans votre code, et crsquoest fait. Comme pouvez le voir, jrsquoai vraiment besoin drsquoactiver le plug in que je viens de créer pour rendre la collection disponible. Il y a une autre note, je vais juste montrer un plug in qui contient une collection. Mais pouvez également créer un plug in qui contient une série de collections. Drsquoaccord. Je sais que ça avance vite. Mais tu peux le voir plus tard si tu veux. Drsquoaccord. Donc, en regardant vers lrsquoavenir, chaque fois que créez un nouveau modèle de démarrage ou une collection comme je viens de le faire, votre bibliothèque grandit. Par conséquent, si travaillez avec des clients drsquoune industrie ou drsquoun segment particulier, pouvez créer ces collections et les réutiliser à tout moment. Bien sûr, pouvez changer de couleur ou de typographie. Mais imaginez que accumulez tous les projets de cette bibliothèque. Ainsi, au fur et à mesure que avancez, pouvez revenir en arrière et construire rapidement de nouveaux projets, ce qui est très bien parce que êtes de retour à lrsquoidée de réduire, réutiliser, recycler, raccourcir le cycle de vie du projet, et travailler plus efficacement que plus intelligemment. Attendez. Non, crsquoest absolument faux. Tu veux travailler plus intelligemment, pas plus. Alors oui. Tout va bien. Drsquoaccord. Je voulais juste voir si tu avais remarqué. Alors merci drsquoêtre réveillé. Drsquoaccord. Par conséquent, lorsque nous conclurons notre discussion ici, je voudrais simplement partager quelques ressources que pouvez utiliser pour explorer davantage ce dont nous discutons aujourdrsquohui. Drsquoaccord. Par conséquent, mon premier point de liste ici est un tutoriel officiel sur la façon de créer des sections, des mises en page et des collections en utilisant le bloc Genesis. Crsquoest un document officiel. Le prochain point est le tutoriel que je ai montré dans le cours Rob Stinson. Je sais que jrsquoai beaucoup parlé de lui. Rob est responsable du marketing des produits du moteur WP
Jrsquoutilise des blocs Genesis et des blocs personnalisés Genesis. Nous remercions donc de vos excellentes ressources. Enfin, jrsquoai le Code sur github que jrsquoai utilisé pour le plug in de démonstration dans la deuxième démo que je ai montré. Nrsquooubliez pas qursquoil nrsquoest utilisé qursquoà des fins de démonstration et drsquoéducation. Je ne dirais pas qursquoil est prêt à être produit. Par conséquent, utilisez le avec prudence. Crsquoest à dire, je continuerai à remercier tous drsquoêtre venus à ma réunion. Je en suis reconnaissant. Salutations.
2021 Sommet sur les percées technologiques: comment utiliser les sites clients pour démarrer des modèles plus rapidement et plus rentable
