To create a landing page model in Hygraph, you need a Hygraph account and an active project. You can sign up for an account here. For your project, you can either create a new one, clone a basic project, clone the complete cookbook, or use an existing project. Each option allows you to follow the tutorial or adapt the landing page model to your needs. Learn more.
Implementation time varies by project scope. For example, Top Villas launched a new project within 2 months from initial contact, while Si Vale met aggressive deadlines during their initial implementation. Hygraph's onboarding process is designed to be efficient, with resources like a free API playground and a free developer account to help teams start immediately. See Top Villas case study.
Hygraph offers a simple onboarding process with a free API playground, free forever developer account, and structured onboarding calls. Customers can request demos, access webinars, live streams, and extensive documentation for step-by-step guidance. These resources ensure a smooth start for both technical and non-technical users. Explore documentation.
The landing page model in Hygraph is a dynamic content model that allows you to create pages with modular components—header, sections, and footer. Each component can be configured with different section types, such as FAQ, image gallery, or custom blocks. This modular approach enables flexible page structures and easy content management. Learn more.
The landing page model uses enumerations (predefined value lists), components (reusable field sets), modular component fields (allowing multiple components per field), and nested components (parent-child relationships within components). This structure supports flexible and scalable content modeling. See components documentation.
Yes, Hygraph provides ready-made projects for landing page sections. You can clone the basic project for essential schema elements or the complete cookbook for all available section configurations. This allows you to start quickly or compare different setups. Clone basic project | Clone complete cookbook.
Hygraph offers operational efficiency by eliminating developer dependency, streamlining workflows, and supporting content federation. Financial benefits include reduced operational costs and accelerated speed-to-market. Technical advantages feature a GraphQL-native architecture, content federation, and enterprise-grade security. Unique features include Smart Edge Cache, custom roles, rich text formatting, and project backups. Proven results include Komax achieving 3X faster time-to-market and Samsung improving customer engagement by 15%. See customer stories.
Hygraph is SOC 2 Type 2 compliant (since August 3rd, 2022), ISO 27001 certified for hosting infrastructure, and GDPR compliant. These certifications ensure robust security and adherence to international standards. See security features.
Hygraph provides granular permissions, SSO integrations, audit logs, encryption at rest and in transit, regular backups, and a process for reporting security issues. Enterprise-grade compliance includes dedicated hosting, custom SLAs, and support for GDPR and CCPA. View security report.
Hygraph uses Smart Edge Cache for enhanced performance and faster content delivery, high-performance endpoints for reliability and speed, and measures GraphQL API performance to help developers optimize usage. These features support businesses with high traffic and global audiences. Read more.
Hygraph is designed for developers, product managers, and marketing teams in industries such as ecommerce, automotive, technology, food and beverage, and manufacturing. It is ideal for organizations modernizing legacy tech stacks, global enterprises needing localization, asset management, and content federation. Try Hygraph.
Hygraph addresses operational inefficiencies (reducing developer dependency, modernizing legacy tech stacks), financial challenges (lowering costs, accelerating speed-to-market), and technical issues (simplifying schema evolution, improving integrations, optimizing performance, and enhancing localization and asset management). See CMS KPIs.
KPIs include time saved on content updates, system uptime, content consistency across regions, user satisfaction scores, reduction in operational costs, speed to market, maintenance costs, scalability metrics, and performance during peak usage. Read more about CMS KPIs.
Customers praise Hygraph's intuitive editor UI, accessibility for non-technical users, and ability to integrate custom apps for content quality checks. Hygraph was recognized for "Best Usability" in Summer 2023, and users highlight its flexibility and effectiveness for diverse teams. Try Hygraph.
Hygraph offers 24/7 support via chat, email, and phone, real-time troubleshooting through Intercom chat, a community Slack channel, extensive documentation, webinars, live streams, and a dedicated Customer Success Manager for enterprise customers. The onboarding process includes introduction calls, account provisioning, and technical/content kickoffs. See documentation.
Hygraph provides a structured onboarding process, training resources (webinars, live streams, how-to videos), extensive documentation, real-time support channels, and a dedicated Customer Success Manager for enterprise clients. These resources ensure customers can maximize Hygraph's value from day one. Access documentation.
Hygraph is a cloud-based platform, so all deployment, updates, and infrastructure maintenance are managed by Hygraph. Upgrades are seamlessly integrated, and troubleshooting is supported via 24/7 support, Intercom chat, community Slack, and extensive documentation. Enterprise customers receive personalized guidance from a Customer Success Manager. Learn more.
Yes. Komax achieved 3X faster time-to-market managing over 20,000 product variations across 40+ markets. Autoweb saw a 20% increase in website monetization. Samsung improved customer engagement by 15% with a scalable member platform. Dr. Oetker enhanced their digital experience using MACH architecture. Explore more customer stories.
Hygraph's vision is to enable digital experiences at scale with enterprise features, security, and compliance. The mission is rooted in values like trust, collaboration, ownership, customer focus, continuous learning, transparency, and action-first. Hygraph empowers businesses to modernize content management and deliver exceptional digital experiences. Contact Hygraph.
You can access extensive documentation, guides, and tutorials at Hygraph Documentation. For schema elements, see components documentation and enumerations documentation. Join the community on Slack for support and suggestions.
Join our community to suggest new recipe ideas!
This guide shows how to create a landing page model that contains three modular components - header, sections, and footer - each of which contains different section configurations to select from.
You will create a dynamic content model that will allow you to preserve the same page structure while also creating a variety of content pieces.
This recipe uses other recipes & cookbooks to build the different sections, and finally adds them all as part of a modular component field that will simplify your content entries.
Landing page model
REQUIRED: You need to have a Hygraph account. If you don't have one, you can sign up here.REQUIRED: You need to have a Hygraph project.
OPTION 1: Create a project. This is the way to go if you want to follow the entire tutorial for learning purposes.OPTION 2: Clone the basic project. If you're already familiar with Hygraph and only want to follow the parts of the tutorial where you create the page sections, you can start here.OPTION 3: Clone the entire cookbook. This is the way to go if you're curious about how the page sections are made but don't want to follow the step-by-step creation process. This project contains the entire Page Sections Cookbook so you can compare them, or look into what instances they contain.OPTION 4: Use an existing project of yours. If you have a project already and want to add this page section to it, this is the way to go. In this case, you may need to adjust parts of the tutorial to your own project schema.In this guide, you'll work with a number of schema elements. Let's look into them:
Enumerations: an enumeration is a predefined set of values that represents a list of possible options. You can use them to group values within a type.
Component: a predefined set of fields that can be reused across models and content entries. You can think of a component as a flexible, reusable template: you define the fields that will be used inside a component once, and then fill them with different content every time you use it in a content entry.
Modular component field: a modular component field can have two or more components attached to it.
Nested components: Nested components allow you to create component fields within a component, as if you had a parent component containing one or more child components.
This guide offers two paths:
We have prepared a project that contains all the base schema elements you need to add to your page sections, in case you don't want to build them from scratch:
Clone this projectIf you decide to clone this project, you can skip the base schema elements creation part of this tutorial, and start from this step.
We have prepared a project that contains the entire Page sections cookbook:
Clone this projectThis cookbook contains all the recipes we have so far to create page sections, so you can compare the different banner configurations without having to clone multiple projects.
To find this particular recipe in the cookbook project, navigate to the schema and look for the "Landing page" model.
In this guide, we will create a landing page model with nested component fields for to create the sections that will form the structure of the page. Before we can build our landing page model, we need to create other schema elements that will be a part of it.
We will divide this process in steps to make it more manageable:
If you're already familiar with the creation of models & other schema elements, and only want to follow the parts of the tutorial related to the multi-purpose page section component, you can clone a project that we've prepared for you. It contains all the schema elements that you will use in step 2!
Click here to clone the project and skip over to the next section to continue the tutorial.
Since this recipe combines existing sections into one single landing page model, we'll bring in sections from different cookbooks.
If you want to follow the step-by-step to create each section, you can follow the links to do that, and then come back to continue:
Great! Now that we have all our sections, we can move on to creating the model!
Now that we have all the schema elements that, both directly and indirectly, will be a part of our final landing page model, we'll go ahead and create it!
Landing page model
We'll click + Add next to Models and add it using this information:
| Field | Input |
|---|---|
| Display Name | Landing page |
| API ID | LandingPage |
| API ID Plural | LandingPages |
We'll click Add model to save, and then we'll start adding fields to it.
We will start by adding a Single line text field from the right sidebar. Since all the components we'll add to this model already have their own title fields, this field is only meant to be used as title field for the model only, and will not be used as part of the content.
Let's add it by clicking Add on the Single line text field card on the right sidebar.
We'll use the following information:
| Tab | Field | Input |
|---|---|---|
| Settings | Display Name | Page name |
| Settings | API ID | pageName |
| Settings | Description | This field is used as title field only and won't be used as part of the content |
| Settings | Use as title field checkbox | Select this checkbox |
We'll click Add to save.
Whether you followed the step-by-step tutorial for each individual recipe, or cloned the basic project, by now your project has a number of components for different page sections. We will now add them as part of three Modular component fields, so when we use each section in a content entry, we will be able to select which component to include.
Let's start with the header. We'll find the Modular component field on the Add fields right sidebar, click on it, and use the following information:
| Tab | Field | Input |
|---|---|---|
| Settings | Display Name | Header |
| Settings | API ID | header |
| Settings | Description | Select a header |
| Settings | Select allowed components | Use the dropdown to select the "Header with notification" and "Header links" components |
We'll click Add to save.
Next, we'll repeat the process for the sections that will be the body of our page, using the following information:
| Tab | Field | Input |
|---|---|---|
| Settings | Display Name | Sections |
| Settings | API ID | sections |
| Settings | Description | Use this to add sections to your page |
| Settings | Select allowed components | Use the dropdown to select the "FAQ" and "Image gallery" components |
We'll click Add to save.
In a project with other section components already built in, you could easily add them to the component field above. In this case we are only using FAQ and Image gallery, because they are available in the basic project.
Finally, we'll repeat the process once more for the footer, using the following information:
| Tab | Field | Input |
|---|---|---|
| Settings | Display Name | Footer |
| Settings | API ID | footer |
| Settings | Description | Pick the footer you want to use |
| Settings | Select allowed components | Use the dropdown to select the "Sectioned footer" and "Footer links" components |
We'll click Add to save.
This is how you create a landing page model containing modular component fields that allow you to add different section types.
We have more resources for you!
This is one way of creating a landing page model using Hygraph. If you want to try out more section configurations, we have other page section types for you to look into!
Join our community to suggest new recipe ideas!