Target Audience of This Tutorial
- creative and entrepreneurial
- keen to explore and learn
- already familiar with Go and Talk page builder. If you are new, the other tutorials will help you to get up and running quickly.
- willing to create and share themes with others
- some knowledge of HTML and CSS, or the courage to read the documentation and explore web design
Clarification of Terms in Tutorials
Themes vs Templates
Themes for Designing
- themes refer to the artistic arrangement of contents and space for particular use cases or industry, for example, a theme for coffee shop
- all themes share the same basic templates and data structure, so that website owners can switch theme to change the website appearance
Templates for Programming
- templates refer to block(section) templates and page export templates
- templates are compiled into functions to generate HTML code for the webpage
- theme data is rendered with templates
- templates contain programming logic, and are populated with data
Present content with a theme, and deliver content with templates.
Theme Structure
- a demo site featuring the theme
- for example a demo site hosting with Github Pages, or Gitlab Pages
- an organization on Github to collaborate with others, using the theme name, or a public Gitlab Group.
- a repository named with pattern [theme-name].github.io, or [theme-name].gitlab.io
- Github Pages automatically enables hosting for a repository named this way. please replace [theme-name] with the actual theme name.
- Gitlab Pages are enabled after running the first default pipeline. If the term pipeline sounds strange to you, you can publish to Gitlab Pages by clicking three buttons. See this tutorial Building a Business Website with Gitlab Pages from A to Z for details
- placeholder images
- a separate repository for theme data
- site settings in config.toml file of the theme
- sample pages in content folder
- see Toffee and Coffee theme as a reference
An overview of
Creating a New Theme
- think of a theme name, and create an organization on Github.com (or a group on Gitlab.com) with this name
- create a repository for theme demo site under this organization, and name it [theme-name].github.io, (or [theme-name].gitlab.io)
- create a new site with Go and Talk page builder
- alternatively, if you plan to bundle your theme with the page builder, fork/import this repository, toffee and coffee demo site. It has an editable page index.goandmake.html under every folder to load sample data and the page builder. It is easier to navigate sample pages while you edit them.
- assign a unique theme id as site id. this is especially useful if you will create more than one theme.
- create sample pages as usual, use neutral images and language for placeholder
- create another repository on github.com or gitlab.com for theme data
- export site setting data and save as config.toml file
- export data of sample pages and save under content folder
- export sample pages and publish to the demo site, and let the world know
Repository for Theme Demo
- a repository for web pages, images, CSS and JavaScript files to show your work
- the theme name is also the organization name
- organization name on Github.com must be unique. The same is true for group name on gitlab.com.
- If it is not available, you may try names with more words separated with a dash, for example toffee-and-coffee.
- create a repository for demo site, under this organization
- fork from this repository Golden, or toffee and coffee demo site for a bundled theme. It has all the folder structure and static files
- rename the repository to [theme-name].github.io, or [theme-name].gitlab.io
- select a license for your work
- give meaningful names to images so you may search and select in the media library when you edit pages
- make sure the images are resized properly
- upload images to the repository
Repository for Theme Data
- source data for backup, and further editing
- site settings (config.toml file)
- theme author and license information
- primary color and shades, and accent colors
- placeholder menu items
- custom styles
- inline CSS declaration
- external stylesheets or custom fonts
- optional custom block and export templates
- data of sample pages in content folder
- one file for each sample page containing meta data of sections on the page
- data can be exported in toml, yaml or json format
Images and Copyright
- assume all images on the internet are copyrighted unless explicitly stated otherwise
- check the copyright statement before using any images. “Free” images may have restrictions on how the images can be used.
- look for creative commons zero licensed images if possible. These images are copyrighted but have very few restrictions.
- avoid images featuring products or trademarks.
- portraits of people are subject to additional legal requirements, even if the photographer gives permission to use the image.
- source of images unsplash, pixabay, or your favorite sources
- you can request and link to custom resized images on Unsplash. this could be useful when you are trying out an image during design.
Navigating Sample Pages for Another Domain Name
- when editing a page with the page builder for another domain name, always navigate to the page by opening the file in file setting window.
- custom navigation links on your sample page will only work on your demo site when published.
Navigating Sample Pages on a Theme Bundled with Page Builder
- a bundled theme has two files under each folder
- index.html for the public
- index.goandmake.html for the page builder and sample data
- when editing a page of a theme bundled with Go and Talk page builder, you may add the page to the menu and click to open the sample page.
- look for the edit link at the bottom of the page. It is below the copyright statement.
- click on the edit link to open the editable page.
- you may create new sample pages by creating a new folder in the repository for demo site, and upload index.html and index.goandmake.html files from a similar page.
Licensing Your Theme
- Creative Commons Attribution-NonCommercial 4.0 International (CC-BY-NC-4.0) license recommended
- there are good folks out there working on noble causes for the benefits of others. Allowing them to use your theme for free is an encouragement and support to them.
- Go and Talk page builder is free for non-commercial use. They can create beautiful websites to raise awareness, get support and make positive impact.
- you deserve to be paid by people using your theme for commercial activities.
- fill in your website address in Theme Author tab of site setting, and your website will be included in the credit link automatically.
- sample credit link at the bottom of the web page
- theme-name by theme-author, CC-BY-NC-4.0 license, powered by goandmake.app
Creating Websites for Clients with Go and Talk Page Builder
- Go and Talk page builder is free for non-commercial use (free as in free beer). A license is required for commercial use.
- if you volunteer to create websites for non-profit organizations, feel free to use the page builder.
- “Freely you have received; freely give.” Matthew 10:8 New International Version (NIV).
- you will be amazed how much faster you can create a theme or website. Just try defining custom styles in site setting, and watching it taking effect immediately. You are applying styles on the real thing. When you are happy about the result, everything is automatically saved and ready for publishing. Simply export and upload. No more conversions or coding.
- if you charge money from clients, you will need a license to use the page builder. In addition to the client side page builder, thanks to the power of Hugo, Go and Talk premium theme for Hugo makes it possible to batch process data files, and help you to be more productive. Please contact us for details.
Bundling with Page Builder and Selling Your Themes
- potential benefits of selling your theme instead of providing web design service
- reach different market segments and geographical locations
- increase revenue
- make better use of your idle designs
- get leads for your professional web design service
- benefits of bundling with Go and Talk page builder
- empower beginners to use your theme. Go and Talk page builder has been built with absolute beginners in mind. The editors have been revised time and again after consulting with people who have never built a website before.
- add value to your theme, as it saves time for users. Editing HTML code is no fun, and is daunting to some people.
- contact us for more details of customization and bundling.
What People Say About It
Love It
I know code and web technology. I have used a few page builders and editors. Go and Talk has helped me to create and format content at a speed I could never achieve with other tools, without touching code again. That’s why we have built this tool, for designers and content creators. I love it, and I believe you will find it helpful too.
hopeful2
Fullstack developer, lead developer of Go and Talk
Designing a Custom Theme
Go and Talk page builder helps creative and entrepreneurial people to be more productive in delivering web design service, or providing a user friendly theme product. When the data files grow in volume, Go and Talk premium theme for Hugo can turn texts into beautiful web pages in batch.
Go and Talk page builder supports inline style declaration and external CSS files. The inline styles written in the site settings window take effect immediately, and are saved automatically. Professional designers may find this feature useful in creating custom animations as you can watch the animation taking place while you change the parameters. When you are happy about the result, the parameters are already included in the site setting ready for production.
The external CSS URLs can load custom CSS files, external CSS library, or custom fonts such as Google fonts.
Go and Talk makes it much easier and faster to design a custom theme. Each theme may have a demo site to show sample pages, and a repository for source data. This tutorial shows the steps to create a repository for hosting demo site with Github Pages, or Gitlab Pages.
If you are new to Github Pages , you may create an organization there, fork a repository from Toffee and Coffee theme, rename the repository and get familiar with the hosting process.
Alternatively you can get familiar with Gitlab dashboard by creating a public group, forking Toffee and Coffee theme on Gitlab and publishing a sample website.
About Go and Talk Page Builders
Go and Talk page builder is a lightweight web design tool running in the browser. It empowers designers and marketers to create presentable pages quickly without coding. It is optimized for running on mobile devices such as tablets. The generated web pages are responsive, lightweight and optimized for search engines.
Copyright Goandmake SEO Marketing 2019. All rights reserved.