Vandaag gaan we leren hoe je een website kunt opzetten die eenvoudig kan worden bewerkt via je iPhone en de mobiele app van Pagelime. Als u niet bekend bent met Pagelime, is het een ongelooflijk eenvoudig te gebruiken CMS waarmee u het bewerken van een website zo eenvoudig mogelijk maakt.
Pagelime Basics
Pagelime is uniek omdat het u toestaat om uw website eerst in platte HTML te ontwerpen en te coderen en de Pagelime bewerkbare CSS-tags toe te voegen als de laatste stap in het proces. Zodra uw site is voltooid, kunt u de site doorlopen en toevoegen "class = cms-bewerkbareen een unieke ID voor alle elementen in uw HTML die u bewerkbaar wilt maken. Pagelime zorgt voor de rest.
Een voorbeeldsituatie
Voor dit artikel ben ik jou? en je bent misschien een webontwerper die websites maakt voor lokale bedrijven, advocatenkantoren, restaurants, enzovoort. Dus maak ik veel goed ontworpen 6-7 pagina-brochuresites.
Dus gooide ik een restaurant voor hun webbedrijf en ik downloadde een mooie sjabloon van ThemeForest met de verbazingwekkend beschrijvende titel "Restaurant Website 01". Het had zojuist alles waar onze klant naar op zoek was.
Ik heb besloten om Pagelime te gebruiken omdat mijn cliënt niet veel drastische veranderingen doorvoert, maar wanneer hij dat doet (laten we hem Chef-kok Tony noemen) wil hij ze zelf kunnen doen. Laten we zeggen dat ik met een paar andere ontwikkelaars streed voor het contract, en ik verkocht Tony omdat hij zijn recept van de maand, zijn medewerker van de maand en een dagelijkse Paella-schotelfoto van zijn iPhone kon bijwerken. Onnodig te zeggen dat Tony onder de indruk was. Tony is zelden onder de indruk; dus nu moeten we onze paella-updatingbeloften nakomen!
Naar binnen graven!
Op de startpagina van onze sjabloon kunnen we zien dat er nogal wat gebieden op de pagina zijn die ik moet bewerken. Omdat het bewerken van dingen met de Pagelime mobiele app niet anders is dan met de Pagelime webapp, gaan we over het toevoegen van de bewerkbare klassen aan de verschillende delen waarin we geïnteresseerd zijn.
Dit is de opmaak voor het welkomstbericht.
Welkom op onze website
Lorem ipsum dolor zit?
We gaan het maken p tag bewerkbaar met Pagelime. Omdat we de mobiele app gebruiken, geven we deze ook een beschrijvende titel.
Lorem ipsum dolor zit?
Dit is het volgende gedeelte:
Werknemer van de maand - Jenny Smith
Lekker en vol,?
Ik wil de kop, het promo-beeld en de hoofdinhoud zelf bewerkbaar maken.
Werknemer van de maand - Jenny Smith
Lekker en vol,?
Het gedeelte Recept van de maand weerspiegelt precies het bovenstaande formaat, dus we maken dezelfde wijzigingen in dat HTML-blok.
Eindelijk maken we de afbeelding in de linkerbovenhoek bewerkbaar:
Dit heeft op geen enkele manier invloed op de sitelay-out en slechts een paar momenten om te coderen. Vrij zoet tot nu toe! Als we de site openen in de Pagelime-webapp, zien we nu dat al onze elementen kunnen worden bewerkt.
Nu heb ik de eerste versie van de site aan Chef Tony geleverd en hij kan de Pagelime Mobile-app hier downloaden:
Hij kan inloggen met zijn e-mailadres en wachtwoord en hij zal zijn site op het dashboard zien:
Op dit moment heeft hij de mogelijkheid om de site te bewerken, afbeeldingen te beheren, documenten te bekijken, Google Analytics te gebruiken en zelfs nieuwe pagina's en sjablonen te maken. Voor de doeleinden van dit artikel gaan we alleen over het bewerken van de site en afbeeldingen.
Klik op Bewerk site brengt je naar de Selecteer pagina scherm waar Tony de startpagina kan kiezen om te bewerken:
Het volgende scherm biedt u een lijst met de bewerkbare gebieden die we eerder hebben gedefinieerd.
Als u op "EOM Headline" klikt, kunnen we de medewerker van de maandtekst wijzigen. Tony maakt het Chef-kok Tony, omdat hij zojuist toevallig een gemene Paella kookte. We tikken op 'Gereed', schakelen over naar 'Voorbeeld' en kunnen nu zien dat de sectie 'medewerker van de maand' nu inderdaad is bijgewerkt naar 'Chef Tony'.
We gaan nu het Afbeelding wisselaar. Om dit te doen, gaan we de weergave "Bewerken" gebruiken. We tikken op de knop in de subnav die een voorbeeld van de website met groene overlays weergeeft. De overlays laten zien wat u kunt bewerken en kunnen worden getikt om die regio te openen - vergelijkbaar met de live bewerking in de Pagelime-webapp.
Dit geeft ons een voorbeeld van de afbeelding die we veranderen. We hebben nu de mogelijkheid om direct een live-foto te nemen, een afbeelding van onze telefoon te kiezen of een afbeelding te kiezen die is opgeslagen in de Pagelime-beeldmanager. Voor deze zelfstudie maak ik een foto van een Paella en gebruik vervolgens het automatische bijsnijdgereedschap, waarmee we onze afbeelding proportioneel kunnen schalen en bijsnijden zodat deze overeenkomt met de afmetingen van de bewerkbare afbeelding op de site.
We kunnen nu het voorbeeld bekijken en zien hoe het eruit ziet voordat we op publiceren klikken?
Wanneer we de eigenlijke website controleren?
? we zien dat alles is bijgewerkt - allemaal via onze telefoon! Er is geen echte technische kennis voor nodig, en je hebt een geweldige hoeveelheid klantenkoekjes om je klanten te helpen op te bouwen en meer geld te verdienen. (We zullen Tony niet vertellen dat hij vergat zijn Employee of the Month-foto bij te werken.)
Dus daar heb je het: een website geïntegreerd met een CMS met het extra voordeel van de iPhone - on the fly - bijwerken! Ga een glas Limeade maken, geniet van de lentelucht en de geur van al het extra groen dat je gaat maken.
Share
Accentsconagua
