Create pages

This part of the documentation relates to premium templates built with Cruip CSS framework only. If the template you are using is built on the top of Tailwind CSS, please refer to the last part of the documentation.

Every template comes with a set of ready-made pages that you can use to create other pages (e.g. Home, Secondary, Login, Sign up). You can build a SPA (single-page application) or create more pages accordingly with your needs. Let's see how to do that.

All pages (or "views") are stored into the src/views/ directory.

Create a new page

To add a new page, create a new file (for example, About.js). Now import React and all required components, for example 👇

import React from 'react';
import GenericSection from '../components/sections/GenericSection';
import SectionHeader from '../components/sections/partials/SectionHeader';
import Cta from '../components/sections/Cta';
class About extends React.Component {
render() {
const sectionHeader = {
title: 'About us'
}
return (
<React.Fragment>
<GenericSection>
<SectionHeader data={sectionHeader} className="center-content" />
<p>Your content</p>
</GenericSection>
<Cta topDivider split />
</React.Fragment>
);
}
}
export default About;

Set a Route

Now you need to add a new route for the about page. Open the src/App.js file to add a route 👇

render() {
return (
<ScrollReveal
ref="scrollReveal"
children={() => (
<Switch>
<AppRoute exact path="/" component={Home} layout={LayoutDefault} />
<AppRoute exact path="/about" component={About} layout={LayoutDefault} />
</Switch>
)} />
);
}

Choose a page layout

As you may noticed, every <AppRoute> has a layout prop. That prop defines the layout to be used.

We have included 3 different page layouts, and they can be found in src/layouts 👇

  • LayoutDefault.js is the default page layout, and it is made of a header, a main section that is supposed to include the "view" content and a footer.

  • LayoutAlternative.js is looks much like the previous one. In this layout we are including a different footer configuration (i.e. Footer - Config. 2).

  • LayoutSignin.js is the layout we are using for Login and Sign up pages. It doesn't include a footer and header links are hidden.

You can create how many page layouts you want by duplicating the existing ones.