Unlike the majority of landing page templates available here on AZMIND which are simple HTML, this one is a bit different: it’s based on Cosmic JS which serves as a CMS (content management system) and stores all your content that will be shown in the landing page, just like WordPress but with some differences (more on this later).
As we’ll see below, this new template comes with various sections which can be activated / deactivated and sorted as you like on the page.
Let’s first explain what Cosmic JS is and, after that, we can see the new template and it’s features.
What is Cosmic JS?
We can think of Cosmic JS as a CMS (content management system), just like WordPress, but a bit different.
Cosmic JS is cloud-based and API-first. With it you can access content from wherever you want and from whatever platform or programming language. And it supports many platforms and programming languages! In this template I’ve used PHP to access the content, for example.
Here is the official definition of Cosmic JS from their site:
Cosmic JS offers an intuitive API that can deliver content to any website or application. This gives you the freedom to build your application using any programming language and allows for easier scaling within your development team.
The Cosmic JS dashboard
The Cosmic JS dashboard is organized in:
- Object Types,
These let you create your own data structure where you can store your content, which is delivered via an API endpoint and can be accessed from any programming language or device.
To learn more about these “abstract” concepts, check out the “getting started” page.
An example of a data structure using Buckets, Objects, etc. is this:
Bucket: Your website
Object Type: The blog posts on your website
Object: A blog post
Metafield: A picture on your blog post
Metafield: The author of your blog post
And here is a video tutorial that explains how to get started with Cosmic JS. On the official website you can find more documentation and resources.
An example of the dashboard
Here is how my dashboard looks like for this template.
I have only one bucket called “Landing Page 178”:
There are various object types. Each section of the page is an object of a certain type, called “Section 1”, “Section 2” and so on. We can have more than one object of the same type, hence the names in plural, “Section 1s”, “Section 2s”.
As we said above, the page is composed of objects of different types. For example, the top of the page is created using an object called “Top content”, which is of the type “Section 1”:
By clicking on the “Top content” object we an see its content and metafields like “Title”, “Text”, “Background”, and modify them:
The Cosmic Landing Page Template
Now let’s take a look at the landing page template, or landing page App as they call it in the Cosmic JS’ website.
Demo and purchase
That’s all. I enjoyed very much working with Cosmic JS and hope you like it too, if you decide to give it a try. Let me know if you have any question or suggestion in the comments below.