Aujourd'hui, nous allons apprendre à configurer un site Web pouvant être facilement modifié via votre iPhone et l'application mobile Pagelime. Si vous n'êtes pas familier avec Pagelime, c'est un système de gestion de contenu incroyablement simple à utiliser qui simplifie au maximum la procédure de modification d'un site Web..
Bases de Pagelime
Pagelime est unique en ce sens qu’il vous permet de concevoir et de coder votre site Web en HTML brut au préalable, puis d’ajouter les balises CSS modifiables de Pagelime à la dernière étape du processus. Une fois votre site terminé, vous pouvez le parcourir et ajouter "classe = cms-editable"et un identifiant unique pour tous les éléments de votre code HTML que vous souhaitez modifier. Pagelime se charge du reste.
Un exemple de situation
Pour cet article, je suis toi? et vous êtes peut-être un concepteur de sites Web qui crée des sites Web pour des entreprises locales, des cabinets d’avocats, des restaurants, etc. Je crée donc beaucoup de sites de brochures bien conçus de 6 à 7 pages..
Donc, je présentais un restaurant pour leur entreprise Web et j'ai téléchargé un beau modèle de ThemeForest avec le titre étonnamment descriptif de "Restaurant Website 01". Il se trouve que tout ce que notre client cherchait.
J'ai décidé d'utiliser Pagelime parce que mon client n'effectue pas beaucoup de changements radicaux, mais quand il le fera (appelons-le Chef Tony), il veut pouvoir le faire lui-même. Supposons que je suis en concurrence avec quelques autres développeurs pour le contrat et que je vends à Tony la possibilité de mettre à jour sa recette du mois, son employé du mois et une photo quotidienne du plat Paella à partir de son iPhone. Inutile de dire que Tony était impressionné. Tony est rarement impressionné. alors maintenant nous devons tenir nos promesses de mise à jour de la Paella!
Creuser dans!
Sur la page d'accueil de notre modèle, nous pouvons voir qu'il y a pas mal de zones sur la page que je devrai rendre modifiables. Parce que rendre les choses modifiables avec l'application mobile Pagelime n'est pas différent de celui avec l'application Web Pagelime, nous allons ajouter les classes modifiables aux différentes parties qui nous intéressent..
Voici le balisage pour le message de bienvenue.
Bienvenue sur notre site
Lorem ipsum dolor sit?
Nous allons faire le p tag modifiable avec Pagelime. Puisque nous utilisons l'application mobile, nous allons également lui donner un titre descriptif..
Lorem ipsum dolor sit?
Voici la section suivante:
Employé du mois - Jenny Smith
Savoureux et complet,?
Je veux que le titre, l'image promotionnelle et le contenu principal soient modifiables.
Employé du mois - Jenny Smith
Savoureux et complet,?
La section Recette du mois reflète exactement le format ci-dessus. Nous apportons donc les mêmes modifications à ce bloc HTML..
Enfin, nous rendons l'image dans le coin supérieur gauche modifiable:
Cela n'affecte en aucun cas la mise en page du site, et seulement quelques instants pour coder. Assez doux jusqu'ici! Si nous ouvrons le site dans l'application Web Pagelime, nous voyons maintenant que tous nos éléments sont modifiables..
Maintenant, j'ai livré la première version du site au chef Tony, qui peut télécharger l'application mobile Pagelime ici:
Il peut se connecter avec son email et son mot de passe, et il verra son site sur le tableau de bord:
À ce stade, il peut modifier le site, gérer les images, afficher des documents, utiliser Google Analytics et même créer de nouvelles pages et de nouveaux modèles. Pour les besoins de cet article, nous ne traiterons que de la modification du site et des images..
En cliquant sur Modifier le site vous amène à la Sélectionner une page écran où Tony peut choisir la page d'accueil pour l'édition:
L'écran suivant vous fournit une liste des zones modifiables que nous avons définies précédemment..
En cliquant sur "Titre de la MOE", nous pourrons modifier le texte de l'employé du mois. Tony en fait le chef Tony, car il vient de faire cuire une méchante Paella aujourd'hui. Nous tapotons sur "Terminé", basculons sur "Aperçu" et voyons maintenant que la section "Employé du mois" a été mise à jour pour devenir "Chef Tony".
Nous allons maintenant mettre à jour le Changer l'image. Pour ce faire, nous allons utiliser la vue "Modifier". Nous tapotons le bouton dans le subnav qui ouvre un aperçu du site avec des superpositions vertes. Les incrustations vous montrent ce qui est éditable et peuvent être exploitées pour ouvrir cette région - comme pour l'édition en direct dans l'application Web Pagelime..
Cela nous donne un aperçu de l'image que nous modifions. Nous avons maintenant la possibilité de prendre une photo en direct à la volée, de choisir une image de notre téléphone ou de choisir une image stockée dans le gestionnaire d'images Pagelime. Pour ce tutoriel, je vais prendre une photo d'une paella, puis utiliser l'outil de rognage automatique, ce qui nous permet de redimensionner et rogner notre image proportionnellement aux dimensions de l'image modifiable sur le site..
Nous pouvons maintenant vérifier l'aperçu et voir à quoi il ressemble avant de cliquer sur publier.?
Quand on vérifie le site actuel?
? nous voyons que tout a été mis à jour - tout depuis notre téléphone! Aucune connaissance technique réelle n'est nécessaire, et vous disposez d'une quantité incroyable de bonbons pour aider vos clients à augmenter leurs ventes et à gagner plus d'argent. (Nous ne dirons pas à Tony qu'il a oublié de mettre à jour la photo de son employé du mois.)
Voilà donc: un site Web intégré à un système de gestion de contenu avec l'avantage supplémentaire d'un iPhone - à la volée - en cours de mise à jour! Allez faire un verre de Limeade, profitez de l'air printanier et de l'odeur de tout ce vert que vous allez faire..
Share
Accentsconagua
