END-to-end tutorials
building a landing page
extracting and plotting shapes and data from pdfs
monitoring social media collections, extracting and plotting recent events
simulating source + sink dynamics
building a dynamic, multi-layer interactive atlas
automatically publish a weekly summary newsletter
a simple two-player game
Building a Landing Page
In this tutorial we'll show you how to build and host a simple landing page.
Now that you have a more-or-less complete overview of the Horizon system you can begin to dig into examples of varying complexity for getting Horizon to do what you want to do.
First, a landing page.
Landing pages are often your users' first impression of your company, organization, or product. You can often make landing pages with website building tools without too much issue.
Well, you can make one with Horizon too. It might require a little more complexity than your average site builder but the payoff is the ability to integrate this page later down the line to more complex activities.
Most of the features relevant for this project start with the "Site Editor" project.
Step 1: Start with the front page copy and elements.
The front page probably will have your organization name, a navbar up top with a few options, an image, and a few taglines.
You can set up a front page in Horizon by clicking 'edit' and adding a 'container' component. Within the container, you might want to set a container component and the name to represent a navbar. Then, you'll want to create an 'img' component. Once you've populated these, you can set any and all copy to a container of its own, and an image to another container.
Step 2: Style the Front Page and Add Links
Once you have a general structure in place, you need to set styles and add links. First you'll need to use tailwind classes to set the navbar to 'flex'. Then you'll want to set the container with the text you want in front of the image to 'absolute', to allow it to be positioned above the main image.
For each link you've listed as 'paragraphs' in the navbar, highlight and click the link icon. You can now set the url to whatever you want.
Step 3: Add pages for each nav link and organize them.
The location of the additional pages you add is very important. Subpaths let you specify which pages are visible under which url. However if you want certain components and elements to be visible across different pages, they'll have to exist in a 'parent page' to the sub-content.
This means, first, you'll want to place a page and put your front page in there. Title it, tag it. You can see the hierarchy with the pages tab.
Second, you'll want to set the subpage for links as additional pages. Go ahead and lay out those pages now.
Step 4: Make the site public, and set a custom domain
With a few pages in place you can set the website public! Share with your people. The public toggle is up top. At the moment only space-connected sites can be assigned a custom domain through the 'portal' functionality, but this is bound to change.
Step 5 (optional): Submit your work to the Horizon gallery
Add a title, a brief description, and submit your site to our gallery to share it with other people on the Horizon platform!
horizon.tech
A low-code platform for data collection, schema management, data visualization, and publishing.
© 2024 - 2025 Yrbia LLC, Delaware. All rights reserved.