A quick look at the files and directories you'll focus on
.
├── config
| - Google Fonts
| - Local Fonts
| - Manifest
| - Metadata
| - Scripts
| - Styles
| - Theme
├── content
| - Header
| - Navigation
| - Hero
| - Callout 1
| - Callout 2
| - Callout 3
| - Callout 4
| - Conversion
| - Footer
| - Success
├── src ** Danger Zone **
├── static
| - Fav Icon
| - Images
| - Fonts
| - Videos
└── ...
This directory contains site-wide configuration.
Add Google Fonts here and use them in theme.css
Define @font-face
definitions here that reference font files stored in /static/fonts/
and use them in theme.css
For native-app-like behavior (Progress Web App), similarly to SEO, customize this to affect how your landing page behaves on some mobile devices when using "Add to Homescreen".
For SEO, set the landing page title, description, and more.
Add custom styles here
Add custom javascript here
Apply colors, fonts, sizing, and more for the landing page. This uses CSS Variables to apply styles across the landing page.
This directory contains content for the blocks on the page. The content is formated in Markdown and accepts some HTML as well.
- Hide / Show the Header Block
- Add / Remove Navigation Links
- Hide / Show Navigation inside Header Block
- Hide / Show Hero Block
- Hide / Show Callout Block
- Hide / Show Callout Block
- Hide / Show Callout Block
- Hide / Show Callout Block
- Hide / Show Conversion Block
- This is the Mailchimp Form
- Replace the built-in form with anything else
- Hide / Show Footer Block
- Hide / Show Logo
- Set Logo Image File
- Content for Success Page
- Set Redirect Behavior
Danger Zone. This directory contains all of the code for pulling in your content and applying functionality to it. src
is a convention for “source code”. Make advanced changes in here or no changes at all!
This directory contains images, videos, fonts, and the fav icon. Replace any "starter kit" assets with your own. Make sure they have the same case-sensitive file names!
These landing pages are built using the Gatsby framework. For a deeper dive into the source code and underlying framework, find full documentation for Gatsby here, on the website. Here are some places to start:
-
For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.
-
To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.