2021 Sommet sur les percées technologiques: comment utiliser les sites clients pour démarrer des modèles plus rapidement et plus rentable

Lorsque vous créez des sites Web pour vos clients, vous cherchez toujours des façons de simplifier votre vie et celle de vos clients. Dans la vidéo ci – dessous, vous 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 à l’essai et prêt à être converti pour un démarrage plus facile et plus rapide, en particulier pour les clients qui n’ont 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. L’idé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. Aujourd’hui, nous allons parler d’emplois plus rapides et plus rentables. Qui d’autre pense que ça n’a pas l’air bon. Justification Donc, si vous êtes un pigiste ou un agent et que vous construisez un site Web pour vos clients, vous savez qu’il y aura des activités répétitives pour chaque projet.
Chaque fois que vous 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. C’est ce dont nous allons discuter aujourd’hui. Maintenant, je n’ai 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. Aujourd’hui, que vous utilisiez un éditeur classique ou que vous utilisiez déjà un éditeur de bloc, vous ê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. L’édition complète du site introduit ensuite un ensemble complet de nouveaux blocs que vous pouvez utiliser pour construire d’autres éléments du site: en – tête, pied de page et barre latérale. Par exemple, un titre de site Web, un bloc d’icô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 l’ai dit, cela peut être un bloc de navigation ou aussi simple qu’un bloc de paragraphe.
Puis vient le concept de blocs réutilisables. Disons que vous 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 l’utiliser pour un projet ou un sujet particulier et vous voulez pouvoir le réutiliser sur plusieurs pages. Ensuite, vous pouvez enregistrer le bloc ou la configuration du bloc en tant que bloc réutilisable, puis le libérer et l’utiliser 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 vous pouvez insérer et utiliser comme contenu initial. En d’autres termes, si vous avez un modèle de bouton, vous pouvez l’insérer. À chaque fois, vous pouvez changer le texte ou la couleur et faire ce que vous devez faire. Compte tenu du bloc réutilisable, vous pouvez le changer en un emplacement qui met à jour toutes les instances du bloc réutilisable dans l’ensemble du site.
D’autre part, le modèle ressemble un peu à un modèle et est fabriqué. Ils sont uniques à chaque utilisation. C’est 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. Aujourd’hui, j’aimerais vous parler d’une chose, c’est la construction de la genèse. Maintenant, c’est un plugin wordpress gratuit. Organisation. Une mise à jour payante est également disponible. Mais aujourd’hui, tout ce que je vous ai montré, vous n’avez besoin que d’une version gratuite. Il est vraiment fort. Regardons quelques termes qui apparaissent dans le contexte du plug – in Genesis blocks.
D’abord, on a une partie. Pensez donc, si vous trouvez un modèle de thème vraiment intéressant, un beau modèle de page d’accueil, vous voulez diviser ce modèle en plusieurs parties. C’est la section. C’est un modèle de serrure conçu professionnellement. Beaucoup d’entre 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, vous 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 vous montrer une petite démonstration où j’a i créé une mise en page simple de trois pages en utilisant une collection existante dans le plug – in Genesis blocks. Si vous êtes prêt, portez votre casque de présentation.
D’accord. Donc ici, je viens de recevoir une installation WordPress vanille simple. Il se trouve que j’ai présidé le thème Astra. Mais vous pouvez utiliser n’importe quel sujet que vous jugez approprié. J’ai aussi installé un plugin, le plugin Genesis blocks. Désolé, c’est activé. D’accord. Créons donc une nouvelle page. À partir de là, je vais entrer dans l’inserteur de bloc. C’est là que vous 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 vous pouvez parcourir par catégorie. Puis nous avons la disposition. Encore une fois, il s’agit de versions mixtes ou de variantes de tous les Q
Les parties. Enfin, la collection.
C’est une collection de ardoises. Dans la version gratuite du plugin, il est disponible gratuitement. Si vous souhaitez en savoir plus sur ces collections, je vais vous montrer quelques documents. Je ne veux pas m’attarder sur ce point. Mais si nous ouvrons la collection, nous pouvons voir quelques sections séparées ici. Même si vous regardez très vite, vous pouvez voir une certaine continuité visuelle en termes de couleurs, de fond, de polices, etc. Je viens d’entrer la disposition de la page d’accueil. C’est une page complète. Cliquez pour le libérer. D’accord. Alors, continuons à le publier. Nous verrons à quoi ressemble l’avant. Ça a l’air complètement différent de ce que je veux vraiment. Nous devons donc faire quelques changements. D’abord, nous allons personnaliser. Maintenant, en particulier pour le thème ASTRA, je veux juste m’assurer 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 n’aime pas, c’est l’apparition de ce titre. Le thème Astra nous offre donc un moyen de nous en débarrasser. Si vous utilisez le cadre Genesis ou l’un 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. Si on y retourne, on verra que le titre a disparu. J’a I une très bonne page d’accueil 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 qu’on 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. C’est tout.
Oui, nous avons un bon bloc d’accordéon et une bonne page. Faisons – en un autre. Je sais qu’on court. Mais on n’a pas toute la journée. D’accord. Voici notre page d’information. Je suivrai le même processus que je vous ai montré. Ouvrez la mise en page et allez à la collection. Cette fois dans la collection d’ardoises, je vais sélectionner un modèle pour la page d’information. Prospérité C’est pour ça qu’il est là. Bien sûr, si vous le faites pour un vrai client, vous devrez peut – être échanger des couleurs, évidemment du texte et des photos. Donc, même s’il s’agit de parties et de mises en page préexistantes, il est intéressant que vous puissiez entrer et modifier l’une d’elles comme vous le feriez avec n’importe quel autre bloc. Par conséquent, continuons à désactiver le titre de la page. Retourne voir. D’accord. D’accord. 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 d’ajouter les pages que j’ai créées et de les publier. Dans le coin supérieur droit, vous pouvez voir le menu. Maintenant, une autre chose que je veux faire est d’aller aux paramètres de la page d’accueil et de voir la page d’accueil que j’ai créée par rapport au post précédent. D’accord. Bientôt, j’ai créé un site Web de trois pages. Évidemment, si c’était un vrai projet, vous auriez du travail supplémentaire à faire. Mais pour ne citer qu’un exemple, vous pouvez voir comment une collection peut vraiment vous aider à créer rapidement des prototypes de site Web, ou à faire sortir un site de la maison. C’est très bien pour les projets de niche ou les clients qui n’ont pas d’énormes budgets pour personnaliser les sujets. C’est pourquoi, en regardant vers l’avenir, comme nous l’avons vu dans la collection de ardoises, il s’agit d’un thème moderne pour enfants semblable à G.
Je suis dans l’éditeur et je veux juste vous montrer comment l’utiliser, puis revenir en arrière et créer votre propre plug – in. Par conséquent, j’ai divisé la page en toutes ces sections et composantes de page distinctes. D’accord. Pour revenir au Tutoriel de Rob, il montre la partie qu’il 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 vous 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. J’ai Genesis Brew, le plugin que j’ai créé. J’ai chaque dossier, puis Genesis Brew main, qui est le fichier principal du plug – in. Pour revenir au tutoriel ci – dessous, j’ai un titre. Ce n’est que le titre standard du plugin wordpress. Voyons voir. Si nous passons à l’étape 3 du tutoriel Rob, nous enregistrons la collection et ajouterons la disposition de la page d’accueil. Revenons en plein écran. Je n’ai pas l’intention de détailler le Code, car rob fait du bon travail dans ses tutoriels. Mais je veux juste vous montrer cette fonctionnalité, comment elle fonctionne, cette composante Genesis Block log Layout. Je mets du contenu dans ce fichier principal. Php. Voyons ça. C’est juste une balise PHP ouverte, un retour et un tas de balises de bloc. Laissez – moi vous montrer comment cela fonctionne, comment fonctionne le balisage, parce que je pense que c’est très intéressant. D’accord. Donc pour revenir ici, nous avons la mise en page de toute la page. Si j’ouvre ces points de pause et que je vais dans l’éditeur de code, il y a deux façons de le faire. Je peux tout sélectionner manuellement et l’ajouter à 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 vous montrer sa valeur
Facile à comprendre Ma balise PHP de départ, si je peux taper, renvoie la balise, puis j’ai téléchargé le contenu du presse – papiers, qui est toutes les balises du carnet. Le seul problème ici est que si vous avez des apostrophes dans votre copie, vous devez éviter de les utiliser. Alors fais – le. Sauvez – le. D’accord. Si on retourne sur notre site, on s’en va. J’ajoute une nouvelle page. Jette – le. Passons à notre disposition. C’est bon. Collection, Brew collection et tout ça. Maintenant, quand je clique sur cette mise en page, tout ce qu’elle fait est de télécharger toutes les balises de bloc de la page d’accueil. Php dans cette page. Je pense que c’est bien parce que vous n’avez pas à écrire tout le Code manuellement. Vous créez en fait dans l’éditeur de bloc, puis copiez et collez l’é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 vous montrer le héros. C’est la partie héroïque. Tout est en couverture. C’est une couverture avec des images dedans. Je ne sais pas à quel point c’est pratique de l’utiliser. Mais c’est ce que j’ai montré. Ensuite, je vais rouvrir l’é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 l’ai déjà fait pour chaque autre partie avant la présentation. Il s’agit maintenant de ce dossier de référence qui contient des captures d’écran des produits finis, si vous le souhaitez, pour chaque section et mise en page. Donc si j’y retourne. D’accord. Ouvrons la mise en page. D’accord. Les captures d’écran que nous voyons ici, dans chaque capture d’écran, sont des images qui vivent dans le dossier ressources, juste pour vous faire savoir d’où elles viennent. D’accord. 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 c’est fait. Comme vous pouvez le voir, j’ai vraiment besoin d’activer le plug – in que je viens de créer pour rendre la collection disponible. Il y a une autre note, je vais juste vous montrer un plug – in qui contient une collection. Mais vous pouvez également créer un plug – in qui contient une série de collections. D’accord. Je sais que ça avance vite. Mais tu peux le voir plus tard si tu veux. D’accord. Donc, en regardant vers l’avenir, chaque fois que vous 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 vous travaillez avec des clients d’une industrie ou d’un segment particulier, vous pouvez créer ces collections et les réutiliser à tout moment. Bien sûr, vous pouvez changer de couleur ou de typographie. Mais imaginez que vous accumulez tous les projets de cette bibliothèque. Ainsi, au fur et à mesure que vous avancez, vous pouvez revenir en arrière et construire rapidement de nouveaux projets, ce qui est très bien parce que vous êtes de retour à l’idée de réduire, réutiliser, recycler, raccourcir le cycle de vie du projet, et travailler plus efficacement que plus intelligemment. Attendez. Non, c’est absolument faux. Tu veux travailler plus intelligemment, pas plus. Alors oui. Tout va bien. D’accord. Je voulais juste voir si tu avais remarqué. Alors merci d’être réveillé. D’accord. Par conséquent, lorsque nous conclurons notre discussion ici, je voudrais simplement partager quelques ressources que vous pouvez utiliser pour explorer davantage ce dont nous discutons aujourd’hui. D’accord. 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. C’est un document officiel. Le prochain point est le tutoriel que je vous ai montré dans le cours Rob Stinson. Je sais que j’ai beaucoup parlé de lui. Rob est responsable du marketing des produits du moteur WP
J’utilise des blocs Genesis et des blocs personnalisés Genesis. Nous vous remercions donc de vos excellentes ressources. Enfin, j’ai le Code sur github que j’ai utilisé pour le plug – in de démonstration dans la deuxième démo que je vous ai montré. N’oubliez pas qu’il n’est utilisé qu’à des fins de démonstration et d’éducation. Je ne dirais pas qu’il est prêt à être produit. Par conséquent, utilisez – le avec prudence. C’est – à – dire, je continuerai à vous remercier tous d’être venus à ma réunion. Je vous en suis reconnaissant. Salutations.