Follow this tutorial to see how you can make any HTML website easily editable with Pinegrow CMS for static HTML websites.
CMS mode requires in Pinegrow 2.93+.
Mr. Pine Cone is a simple one-page HTML website.
In this tutorial we’ll make the website editable with Pinegrow in CMS mode, so that end-users can edit it by themselves, even if they know nothing about HTML. All we need to do is define editable areas on elements that end-user will be allowed to change.
Download the project files
If you wish you can follow the tutorial with sample projects:
- Mr. Pine Cone starting point without editable areas
- Mr. Pine Cone finished Pinegrow CMS enabled project
BTW. you can freely use the Mr. Pine Cone theme to build your own personal or commercial websites.
What should be editable?
First, let’s take a look at what parts of the website should be editable. Then we’ll go through those elements one by one and define them as editable areas.
Title and subtitle
Select the H1 heading and in ACT panel add Define editable area action.
Each editable area needs an id (name) and we have to specify which parts of the element should be editable. Here we select Inner content (checked by default) because we want to make everything inside the H1 element editable.
And we do the same for the H2 subtitle:
The button will be more interesting because we want to make a couple of its properties editable: the icon, the label, button type (color) and the url of the link.
Notice that we wrapped the label (Let’s plant Pines!) into a <span>, so that we can make the span an editable area for the button label. If we would do the whole content of the button editable, the content would also include the icon. Editing the label “<i class=”fa fa-tree”></i> Let’s plant Pines!” would not be very friendly and could lead to end-user accidentally breaking the icon code or removing the space between the icon and the text.
Let’s do the label first. Select the span element and Define editable area:
Then the icon. Select the Font Awesome icon and Define editable area. Notice that we unchecked the Inner content because the icon element has no editable inner content. Rather the class that controls the icon is editable. Instead of listing all 100s of Font Awesome classes in Classes setting we check the Icon setting, an editable area extension implemented by the Font Awesome Pinegrow plugin (the plugin needs to be activated on the page for this to work).
Making button link and color editable is next. Select the button element and Define editable area. Inner content must be off because we defined individual editable areas to handle the button content: icon on the i element and label on the span element. Make the href attribute editable so that the end-user will be able to change the url of the button link. And check Button type, an extension implemented by the Bootstrap plugin.
Let’s quickly switch to Test CMS mode (Components -> Test CMS mode) to try how things will work in the CMS mode:
In CMS mode editable areas become properties in the PROP panel. Select the button and check out the PROP panel:
Nice! But wouldn’t it be even better if we could have all button’s editable properties displayed at the same time? We can do that by defining button as a component. Switch out of the Test CMS mode and add Define component action from the ACT panel to the button and update components (Components -> Quick update):
Back in the CMS mode we now see all button’s editable properties at the same time. Components are useful to group editable areas like this. And more, as we’ll soon see…
Making the main textual content of the page editable is easy. We select the wrapping section and make it into an editable area with editable inner content. The end-user will be able to double-click on the text and edit it inline (can do the same for the button label, headings and all other editable inner content).
Skills are listed in an unstyled inline list:
We’ll define the list as an editable collection of skill item components. Not sure what that means? Take a look.
First we have to define Skill type component. To do that, select the first skill (list item) and add Define component action:
We also need to make the text of the skill item editable, so that different instances of the Skill item component can hold different values. To do that, we’ll add Define editable area action to the selected skill (list item). Do Components -> Update. By that we defined a simple Skill item component that has editable content.
But notice that only the first list item is marked as Skill item. Let’s make the other four list items into instances of the Skill item component. Select them one by one and in LIB panel, right-click on the Skill Item component and do Make selected an instance of Skill Item. This will convert the list item into a Skill Item.
The end result should be:
Why did we had to do that? Because we’ll now select the list and Define editable area that holds collection of Skill Item component instances. That means that the end-user will be able to add, remove and rearrange Skill Items within this list.
In the CMS mode a handy Add Skill Item button will appear on the list. It will insert a new skill item to the list. End-user can also delete the items (except the first one that is the definition of Skill Item) and rearrange them in the tree.
Work and experience
We’ll make Work and Experience sections into editable collections as well. First, we define the Work Item component:
Make the content of the Work Item editable by adding Define editable area with editable Inner content on the item (like we did for the Skill Item above).
Do Components -> Update.
And then we define the list as an editable collection of Work Items:
We do the same for the Experience section:
- Use the first list item to define Experience Item component with editable content.
- Update components.
- Select the second list item and in LIB panel right-click on the Experience item -> Make selected an instance of Experience item.
- Define the list as editable collection of Experience Items.
Social buttons will also be fun. We’ll define a Social button component with editable icon and link:
Select the first social button and define a Social button component:
Make the href attribute editable (inner content should not be editable because that would destroy the icon inside the button).
Select the icon and make it editable:
Run Components -> Update.
We transform the other two social buttons into Social Button component instances:
Now we can select the social buttons section and define it as an editable collection of Social buttons:
With that we created a editable section where end-user can add / delete / rearrange fully configurable social buttons!
The poster image
Making the poster image editable is super easy. Select the div.poster that contains the background image and define an editable area with editable background image:
Now, we or the end-user can conveniently change the poster image through the PROP panel:
We defined all visible content of the page as editable areas. We can do the same for the page title in the head element. The inner content is editable because the title text goes inside the title tag: <title>the title</title>.
And we do the same for the page description meta tag. Only here, we make the content attribute editable because the page description is stored there:
And we’re done!
In just a couple of minutes we made this website editable by anyone. All they need is an affordable license of Pinegrow CMS Client installed on their computer.
The summary of the process: define editable areas on changeable content and define components where collections are required.
Last updated on February 14, 2017 at 8:30 pm