At Top and Left, Hidden Initially
Toolbars
Global Toolbar
- At the left side of the screen.
- Manage global settings.
- Apply to the current page, or all pages.
- Hide all section tools.
- Hide itself.
Section Toolbar
- At the top of each section.
- Manage current section.
- Apply to current section.
- Turn app on and off.
- Toggle edit mode.
- Toggle global toolbar.
Context Toolbar
- Available in some sections.
- Toggle on to edit.
- Toggle off when done.
Hover or tap to show the toolbars.
Change Settings with Few Clicks
Finding Buttons on Global Toolbar
Site Settings
- Settings affecting all pages, for example brand colors.
- Data shared by all pages, for example menu items.
- Storage of global sections to use on pages.
- Exporting and importing site settings data.
- Switching to a different site with different settings.
- Site setting can be overwritten by pages.
Page Settings
- Settings applying to all sections of this page only.
- Exporting and importing page data.
- Exporting to a separate web page without editor.
- Deleting page data and restoring to default.
- Loading a different set of data into the current page, with the same URL.
Use in Blocks
Defining a Primary Color with HSL Model
Hue
- A value between 0-360
- 0 = red
- 120 = green
- 240 = blue
Saturation
- A value between 0-100 (%)
- 100 = most vivid
- 0 = least vidid
- Low saturation recommended for web pages.
Light
- A value between 0-100 (%)
- 50 = normal
- 100 = brightest
- 0 = least light
Same Hue and Saturation, Different Lightness
Defining Shades of a Primary Color with HSL Model
Lighter
Subtle background
Light
Gentle background
Primary Color
Background and title
Dark
Background for images
Dark 90
Semi-transparent Background
Good Difference
Colors for Hightlight or Contrast
Accent Color
- use in small doses, eg background of buttons
- use in background for contrast.
Accent Color Light
- use in small doses,
- same hue as accent, or different hue
- use in background for contrast
Define with color name, RGB, hex, or hsl.
Exercise
Apply Brand Colors
- Find the global toolbar at the left side of the screen. You may need to tap on the left edge to show the toolbar on mobil devices.
- Click on the file icon to open the page setting window. You should be on Appearance tab.
- Drag the sliders to change the hue, saturation, light, and watch how the changes affect the background and the page.
- Optionally save the changes you have made to the page. The Save button is located on the toolbar at the top edge of the screen. If you are on mobile, you may need to tap on the top edge to show the toolbar.
- Reset the sliders to 0 in order to use global color settings.
Custom Logo
Site Wide Logo
- Menu location: site setting / appearance
- SVG, PNG or JPEG
- Ideally SVG or PNG with transparent background
- Link from a location on your server
- or import a local file from your computer
- maximum 500 KB in size if importing a local file.
Page Logo
- Menu location: page setting / appearance
- Default to site wide logo
- Use a different logo when necessary, for example a logo with inverse colors.
Exercise
Apply a Custom Logo
- Hover to show the global toolbar at the left edge of the screen. You may need to tap on the left edge to show the toolbar on mobil devices.
- If you have hidden the global toolbar, you can show it by clicking on the global toolbar icon on any section toolbar.
- Click on the globe icon to open the global settings window.
- Hover on the top edge of the screen to show the app toolbar, and click on Edit button.
- On Appearance tab, click on the logo image to display a small popup window.
- Enter the URL to your logo if it is already on the internet.
- Click on “Choose File” button to import from a local file.
- If the operation is successful, you should see the new logo at the top of the dialog, and the page.
- Hover to show the global app toolbar, and click on the “Editing” button to exit editing mode.
What People Say About It
Simply Amazing!
I created stunning landing pages with Go and Talk, without writing any code. This is simply amazing!
Tina
Web Designer
Creating More With Less
Customizing Brand Colors and Logo
This tutorial provides a step to step guide on how to apply custom brand colors, link to a custom logo, or import the logo from a local file.
If you have completed all the exercises in this tutorial, you should have made the following achievements:
- know where to find section toolbar and global toolbar.
- understand how to define primary colors and accent colors.
- understand how to define shades.
- enter and exit editing mode of global app.
- link to a custom logo, or import logo from a local file.
Well done. You will acquire new skills and explore new features in other tutorials. Stay tuned.
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.