Share
Dans ce didacticiel, vous apprendrez à prendre un fichier Photoshop et à le convertir en un site Web intégré Pagelime CMS valide, activé pour jQuery, prêt à être transmis à vos clients sans code, à l’aide de Photoshop, SiteGrinder 3 et Pagelime..
SiteGrinder 3 est un logiciel fantastique, riche en fonctionnalités, conçu par Media Lab, qui vous permet de créer un site Web maquillé dans Adobe Photoshop et de l'exporter en quelques minutes sans coder vers un site Web entièrement valide et fonctionnel. connaissances nécessaires. Pagelime est un simple CMS, conçu pour vos clients, qui permet une intégration immédiate dans un site Web sans aucune compétence en matière de codage. Pagelime permet à votre client de modifier simplement et facilement le contenu, de modifier les images, d’ajouter et de supprimer des pages et de gérer son propre site Web de manière compréhensible, le tout dans une application Web propre et personnalisable.
Le didacticiel dure environ 10 à 15 minutes et suppose une connaissance pratique générale de SiteGrinder 3. Si vous n'êtes pas prêt à vous défouler de vos compétences sur SiteGrinder, visitez le site TV SiteGrinder 3 de Media Lab pour une excellente série de didacticiels vidéo plus que de vous mettre au courant de la façon de mettre en œuvre votre site. Globalement, le système est vraiment cool et possède une tonne de fonctionnalités. Nous recommandons vivement de commencer par Essentials 1 - Workflow, j'ai personnellement apprécié les boutons et animations, qui expliquent comment ajouter sans douleur des effets jQuery et des menus déroulants vraiment sympas, ainsi que Essentials 2 - Content. Si vous n'en avez que le temps, regardez Essentials 1 - Workflow pour vous mettre à niveau..
Je vous guiderai dans des instructions générales, étape par étape, avec des informations plus détaillées dans chaque étape..
Aujourd'hui, nous allons utiliser un modèle "Compani" que l'équipe de SiteGrinder nous a généreusement prêté. Toutefois, presque tous les sites Web créés dans Photoshop peuvent devenir "prêts pour SiteGrinder", en ajoutant des astuces SiteGrinder et en formatant correctement vos calques. Encore une fois, ce didacticiel suppose que vous connaissez le balisage SiteGrider et que vous utilisiez des astuces. Si vous ne le faites pas, nous vous recommandons de visiter SiteGrinder 3 TV et de vous familiariser avec les deux premières parties des éléments essentiels de SiteGrinder. Pour télécharger ce modèle ou un grand nombre d'autres modèles, vous pouvez visiter leur page wiki avec les téléchargements de modèles..
Étant donné que SiteGrinder ne rend pas les classes CSS d'image accessibles à l'utilisateur par défaut, en ajoutant l'indicateur "-content", nous pouvons forcer SiteGrinder à restituer la balise image (IMG) au sein d'une DIV. Cette DIV sera ensuite disponible ultérieurement dans SiteGrinder Design Manager pour y ajouter une classe CSS. Ceci est important car, pour que Pagelime fonctionne correctement, toutes les régions modifiables ou "tout ce que vous voulez que le client puisse modifier" doivent être marquées avec la même classe CSS spéciale. Nous y reviendrons plus en détail à l'étape suivante. 4.
Si le moteur SiteGrinder 3 n'est pas déjà ouvert, le moteur SiteGrinder 3 sera lancé. Une fois le moteur lancé, SiteGrinder générera un rapport sur les erreurs ou les avertissements éventuellement détectés dans le modèle. Passez en revue les erreurs et corrigez les erreurs graves qui s'appliquent * (vous pouvez également choisir de les ignorer, le site doit quand même être créé). Une fois les erreurs résolues, passez à la page Générer et déployer. Ici, vous devriez cocher les pages que vous voulez avoir construites par SiteGrinder. Dans ce tutoriel, nous ne construirons que la page d'accueil. Une fois les pages souhaitées sélectionnées, cliquez sur "Générer"..
* Remarque: Si vous utilisez le modèle de test SiteGrinder 3 avec une version de démonstration ou une version de base de SiteGrinder 3, il est possible que vous rencontriez un rapport contenant 2 erreurs "graves". Regardez attentivement les erreurs. Il est fort probable que les erreurs se produisent parce que vous faites référence à des balises telles que - $ ou -blog dans le modèle qui nécessitent des plug-ins supplémentaires. Les modules Commerce Add-On pour - $ et Control Add On pour -blog. Si tel est le cas, vous pouvez continuer quand même. Dans ce tutoriel, nous ne construisons pas la page "magasin" ou "blog", ces erreurs sont donc sans importance..
Le Gestionnaire de conception est l'endroit où vous pouvez apporter des modifications supplémentaires et des déclarations de style à la conception et à la mise en œuvre de la classe CSS. La plupart de vos effets de texte et de bordure doivent être effectués ici et non dans le PSD. En outre, vous pourrez également personnaliser vos fonctions d’animation / jQuery à partir de cet écran. Encore une fois, pour plus de détails, consultez Site Grinder TV.
Pour ce tutoriel, nous ne créerons pas de vrais styles CSS avec des attributs. Au lieu de cela, nous ajoutons simplement un nom de classe à quelques balises sur le site pour que Pagelime puisse l’utiliser. Dans le Gestionnaire de conception, accédez au menu déroulant "Styles de bordure et d'arrière-plan". À l'aide des menus déroulants situés à côté des éléments, ajoutez un nouveau style appelé "éditable" sans attributs supplémentaires. Cliquez sur Appliquer. Après avoir appliqué le style une fois, il sera accessible dans tous les autres menus déroulants. Sélectionnez chaque autre région que vous souhaitez pouvoir éditer par Pagelime, puis appliquez-la à ces éléments..
Lorsque le site sera implémenté dans Pagelime à l'étape 13, nous définirons cette classe css "éditable" comme classe de signal pour Pagelime afin de rendre les régions modifiables par l'utilisateur. Pour l’essentiel, cette balise peut s’appeler comme vous le souhaitez, à condition qu’elle soit unique. Nous vous suggérons toutefois de la rendre compréhensible pour faciliter la consultation..
Dans la zone de déploiement, sélectionnez les pages nouvellement créées. Une fois que vous avez vérifié les pages à déployer, sélectionnez le site que vous souhaitez déployer dans la liste déroulante inférieure appelée "Déployer vers". Vous devrez peut-être créer un nouveau site si vous ne possédez aucun site précédent. Donnez-lui simplement un nom, sélectionnez uniquement local et cliquez sur OK.
Ce "site" fait simplement référence à la manière dont le répertoire de votre ordinateur local sera référencé. Ne vous inquiétez pas trop de comment ça s'appelle; il vous suffit de pouvoir l'identifier plus tard. Le nom ne peut pas non plus avoir d'espaces ou de caractères spéciaux.
À ce stade, le site HTML et le balisage sont déjà en concurrence, cela a été accompli à l'étape "Construire". Sitegrinder est maintenant en train de recompiler et d'enregistrer ces fichiers .html et les fichiers associés dans votre répertoire dans le répertoire que vous avez sélectionné..
Il ressemble au gestionnaire de conception et aura une adresse locale. Vous devez définir quelle page sera la page de chargement par défaut sur votre site ou "Index". Cochez la case "index" à côté de la page désirée, cela obligera SiteGrinder à renommer ce fichier en "index.html" lors du téléchargement FTP sur votre serveur..
Une fois tout cela entré, cliquez sur OK..
L’adresse du serveur débutera probablement avec ftp. Lors de la définition du chemin d'accès distant, il est vivement recommandé d'utiliser la fonction "Parcourir" pour obtenir le répertoire le plus précis. "L'adresse HTTP" correspond à l'emplacement que SiteGrinder vous dirigera après le téléchargement. Il est donc probablement préférable de choisir le domaine ou le sous-répertoire dans lequel vous effectuez le téléchargement..
Lors du premier téléchargement, l'une ou l'autre option de téléchargement fera exactement la même chose, car il n'y a pratiquement aucun fichier sur votre serveur. Cependant, pour plus de sécurité, lors du téléchargement d'un nouveau déploiement pour la première fois, je choisis toujours l'option Télécharger tout pour m'assurer d'obtenir une nouvelle copie vierge sur mon serveur..
>
Cela affichera votre page (ou tout ce que vous avez entré comme adresse HTTP). Vous pouvez voir que votre page est maintenant en ligne. C’est à peu près tout pour la partie SiteGrinder. Nous allons maintenant passer à l’implémentation du site dans Pagelime pour une édition facile..
Si vous êtes nouveau sur Pagelime, vous pouvez visiter la page d'inscription pour obtenir un compte gratuit à utiliser avec SiteGrinder. Pagelime est un système de gestion de contenu simple et génial qui réduira considérablement le temps de mise en œuvre et donnera à votre client quelque chose qu'il peut comprendre..
Lorsque vous vous inscrivez pour un compte PRO ou professionnel, en plus de toutes les fonctionnalités et plug-ins standard de Pagelime, vous aurez la possibilité de personnaliser et de personnaliser complètement le backend. Pagelime vous donne la possibilité d'attribuer une marque blanche au CMS, de l'URL au logo et au jeu de couleurs. Cela vous permettra d'offrir à votre client une expérience cohérente et personnalisée tout en travaillant avec vous et sur son site. Cela vous permettra également de baliser le service et d'ajouter des flux de trésorerie à votre flux de revenus. Vous pouvez configurer des clients sur des cycles de facturation récurrents automatiques pour utiliser votre CMS, également appelé Pagelime, directement à partir de Pagelime Account / Billing Manager..
Si vous avez besoin d’aide supplémentaire sur cette page, Pagelime propose des astuces extrêmement utiles qui s'affichent à droite lorsque chaque champ est sélectionné. Utilisez-les comme référence pour savoir quoi entrer et comment le formater. Vous pouvez également tester votre connexion en bas de la page. Il est recommandé d’utiliser la fonction "Parcourir" lors de la sélection du chemin du fichier afin d’assurer une précision optimale. Assurez-vous également de modifier vos paramètres avancés (étape suivante) avant de cliquer sur "Enregistrer les paramètres du site".
Ceci peut être changé en n'importe quelle classe spéciale que vous avez nommée dans SiteGrinder Design Manager à l'étape 4.
C’est ainsi que Pagelime identifiera les régions à éditer. Si ce nom de classe ne correspond pas à la classe que vous avez ajoutée à l'étape 4 ou si les classes que vous avez ajoutées à l'étape 4 ne correspondent pas à ce "Nom de classe CSS modifiable" sur vos pages, vous ne pourrez pas modifier ces régions dans Pagelime. Editeur de site. Toutefois, si vous avez oublié d’ajouter la classe à une région, ne vous inquiétez pas, et si vous n’avez pas peur d’un petit code HTML, vous n’aurez même pas à revenir à l’étape 4. même avoir à utiliser un éditeur externe comme Dreamweaver non plus. Lorsque vous avez sélectionné une page à modifier dans l'éditeur de site Pagelime, utilisez plutôt le menu déroulant de droite et sélectionnez Modifier le code. Cela ouvrira une vue syntaxique riche et surlignée du code brut de vos sites qui vous permettra d’ajouter manuellement des classes CSS. Pour plus de détails sur ce processus, consultez un didacticiel intitulé Ajouter manuellement des classes CSS via Pagelime Site Editor.
Si le moteur SiteGrinder 3 n'est pas déjà ouvert, le moteur SiteGrinder 3 sera lancé. Une fois le moteur lancé, SiteGrinder générera un rapport sur les erreurs ou les avertissements éventuellement détectés dans le modèle. Passez en revue les erreurs et corrigez les erreurs graves qui s'appliquent * (vous pouvez également choisir de les ignorer, le site doit quand même être créé). Une fois les erreurs résolues, passez à la page Générer et déployer. Ici, vous devriez cocher les pages que vous voulez avoir construites par SiteGrinder. Dans ce tutoriel, nous ne construirons que la page d'accueil. Une fois les pages souhaitées sélectionnées, cliquez sur "Générer"..
* Remarque: Si vous utilisez le modèle de test SiteGrinder 3 avec une version de démonstration ou une version de base de SiteGrinder 3, il est possible que vous rencontriez un rapport contenant 2 erreurs "graves". Regardez attentivement les erreurs. Il est fort probable que les erreurs se produisent parce que vous faites référence à des balises telles que - $ ou -blog dans le modèle qui nécessitent des plug-ins supplémentaires. Les modules Commerce Add-On pour - $ et Control Add On pour -blog. Si tel est le cas, vous pouvez continuer quand même. Dans ce tutoriel, nous ne construisons pas la page "magasin" ou "blog", ces erreurs sont donc sans importance..
L'enregistrement des paramètres du site confirmera et enregistrera les paramètres FTP et Pagelime que vous venez d'entrer. Cela provoquera également un rechargement de Pagelime. Ensuite, vous pouvez revenir au tableau de bord du site..
Ce plugin vous permettra de télécharger et de gérer des images via Pagelime. Il est nécessaire que ce plugin soit mis à jour pour gérer TOUTES les images sur un site activé par Pagelime. Si vous souhaitez ajouter de la fantaisie à vos images, nous vous recommandons également d'activer l'optimisation d'image, ce qui vous permettra de contrôler la qualité de l'image et d'ajouter des effets photo à partir de Pagelime..
Dans le menu Fonctionnalités du site, vous pouvez également activer un certain nombre de fonctionnalités supplémentaires telles que les modèles de page et l'historique du contenu. L’historique du contenu peut s’avérer extrêmement utile lors de modifications continues sur un site, car il enregistre toutes les modifications précédentes d’une session et vous permet de rétablir le contenu si une erreur ou une modification incorrecte est apportée..
Il suffit de cliquer sur une image ou un texte, soit dans la zone principale, soit dans la petite bulle d'édition noire. Cela ouvrira un éditeur WYSIWYG (qui possède également une vue HTML) ou le navigateur ZoomCrop pour les images. À partir de là, vous modifiez simplement le contenu, enregistrez, puis lorsque vous avez terminé toutes les modifications apportées à une page, cliquez sur le bouton de publication situé sous "Actions de page". Cela poussera toutes vos modifications en direct sur votre site public.
Pour le transmettre à votre client, vous créeriez un nouvel utilisateur sous votre gestionnaire de compte et lui donneriez des autorisations sur le site. Cet utilisateur se connecterait ensuite via votre URL personnalisée ou cms.pagelime.com - c'est aussi simple que cela. Le montage actuel est couvert dans la vidéo ci-dessous, ou nous avons également une vidéo plus courte de 5 minutes qui passe directement au montage si vous avez besoin d'un rappel..
Notez que lorsque vous éditez les images à l'intérieur de ces DIV, vous devez survoler le centre de l'image et rechercher la petite icône d'image. Cliquez sur cette zone pour accéder au navigateur ZoomCrop. N'oubliez pas que le plugin Galerie d'images doit être activé. Si vous cliquez sur la balise DIV, vous activez l'image dans un éditeur WYSIWYG qui, bien que pouvant fonctionner, n'est pas ce que nous voulons et ne nous donnera pas le meilleur contrôle de montage pour nos images. Cette situation est créée car SiteGrinder a créé une DIV autour de l'image. Si vous souhaitez résoudre ce problème manuellement, vous pouvez modifier le code et supprimer la balise modifiable du div environnant et déplacer la classe vers la balise IMG. Là encore, cela peut être fait facilement dans Pagelime, voir notre article de blog / tutoriel. à ce sujet appelé ajouter manuellement des classes CSS via l'éditeur de site Pagelime
Pour publier, cliquez sur le menu déroulant "Actions de page", puis sur Publier, puis, BAM !, c'est terminé.!
Merci de suivre ce tutoriel. Si vous avez des questions, des commentaires, des conseils de dépannage, des souhaits, des espoirs ou des rêves sur Pagelime, vous pouvez visiter les forums de PageLime ou le wiki de la documentation..
Accentsconagua