Cosmic Landing – A Template Made With Cosmic JS, Bootstrap and PHP

Published on: Nov 14 2017 by Anli

Cosmic JS Landing Page Template Bootstrap PHP

Today I’m going to present you a new premium landing page template I’ve released lately that you can use to quickly present and promote a service, product, application. It’s made with Cosmic JS (more on this later), Bootstrap, PHP and, of course, HTML + CSS + Javascript (jQuery).

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:

  • Buckets,
  • Object Types,
  • Objects,
  • Metafields.

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”:

Cosmic JS Buckets

Object Types

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”.

Cosmic JS Object Types


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”:

Cosmic JS Objects

By clicking on the “Top content” object we an see its content and metafields like “Title”, “Text”, “Background”, and modify them:

Cosmic JS Modify Object

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


Image preview

Cosmic JS Landing Page Template


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.

Filed under: Templates

Leave a Reply

To learn how we use your data when you comment, read our Privacy Policy here.