How to Make Click-to-Edit Templates
Scot's Blogger Click-to-Edit template creation help.
last updated April 13, 2020
If you want your blog authors to create landing pages that don't break while being edited, this click to edit system is for you.
Scot's Blogger templates make it easy for the store admin to create page formats that can't be broken by editing. Only areas designated for click-to-edit can be edited. This makes it easy to create unique landing pages and other content that would be difficult to support in the wysiwyg editor.
This is a brand new feature so we are relying on you to ask us questions about anything you don't understand to help us make these docs as clear as possible.
Step 1
Go to the module admin and click on the TEMPLATES tab, then click on the icon to create a new template.
Step 2 - note as of April 13 we have not updated the WOW template for 3.211
Start coding your html template. This is where it gets a little tricky and somewhat time consuming. The easiest way to go about this is to find html code for a template you like and copy/paste it into the editor.
Tip: Create or copy/import your template HTML and other coding before doing any click-to-edit work. Once the template looks good as-is, then go through the process of creating click-to-edit areas.
For this example we are going to use very simple code based on the WOW bootstrap 4 landing page template.
This one has been modified for click to edit:
This is the original:
Create/Import a Template
1. In the Scot's Blogger module admin, click the "templates" dropdown and create a new template.
2. Give the template a code and a name and save.
3. Open the template you want to convert to click to edit and copy/paste the template html code into the coding area and then save.
4. After saving, find the resources that come with the template and upload them (drag and drop into the resource upload box.) For the WOW template that has already been modified for click-to-edit, go into the "resources/" directory and drag all the js and css and other files into the resources upload box.
5. Save the template and then click on the above the resources upload box to show the resources and their paths/html code. Copy this text to notepad or something so it's easy to reference because the next step is to go through the template and update all the resources to match the paths of the files you just uplaoded.
Now when you preview the template it should look like the template you downloaded. If it doesn't, fix resources and anything else that needs fixing until the template looks exactly like it should.
Creating Click to Edit Areas
Click to edit areas are set up by using simple "template" style code.
For example, we can create a click-to-edit H1 heading like this:
{sbt name="heading_1" element="H1" class="text-danger" placeholder="This is a big red heading."}
Rules:
1. Click to edit (CTE) areas are surrounded by {sbt } which tells the system what kind of CTE element to create.
2. Each CTE has a name, element, optional class, and a placeholder.
Name: The name is required and must be unique in the template. If you have three headings, you could name then heading_one, heading_two, and heading_three. Element: This tells the system what kind of html element it is. Use exactly what you would use when doing html by hand. It could be P or H1 or DIV or whatever. Class: Adding a class is optional but often useful when creating click to edit buttons and links. Placeholder: The placeholder simply tells the author that it's a CTE area. It is required for all text CTE areas. IMG elements do not need it.
Examples
A P tag:
{sbt name="paragraph_one" element="p" class="bold" placeholder="Click to edit this paragraph."}
A button link (using Bootstrap css):
{sbt name="button_link1" class="btn btn-default" element="a" url="/" placeholder="Click here to edit link text."} Click to edit list Ul/LI style list: For this the element is the "parent" element, the UL, and the placeholder contains the children, LI, elements.
{sbt name="list_one" element="ul" placeholder="<li>list item one</li>"} Basic link:
{sbt name="link_scots_scripts" element="a" placeholder="edit link text" url="https://wwww.scotsscripts.com"} Image: Images can be a bit touchy but they do work. The example below works with Elements/Shadows/Colossus css:
{sbt name="image_one" class="o-layout__item u-width-6 u-border-red" element="img" src="https://via.placeholder.com/150x240"}