Skip to main content

Layout Page

You can create a page of the layout type that includes several pre-built components without the need to manually create these components. This approach allows you to quickly build complex layouts using a variety of elements such as buttons, images, videos, and more. This guide will walk you through setting up a layout page with these components.

Available Components​

The following components are available for use in your layout page:

  • ButtonComponent: Adds a clickable button to your layout.
  • DividerComponent: Inserts a divider line to separate sections.
  • GridComponent: Allows the creation of grid-based layouts.
  • HeadingComponent: Adds a heading (H1, H2, H3, etc.) to your page.
  • HtmlComponent: Enables the inclusion of custom HTML.
  • ImageComponent: Displays an image within your layout.
  • LinkComponent: Adds hyperlinks to your page.
  • MarkdownComponent: Allows content to be written in Markdown and displayed as HTML.
  • RichtextComponent: Provides a WYSIWYG editor for rich text content.
  • RowComponent: Organizes content into rows.
  • SectionComponent: Defines a section or block of content.
  • SpacerComponent: Adds space between components.
  • VideoComponent: Embeds video content.

Creating a Layout Page​

Step 1: Create a New Page​

  1. Login to Cockpit CMS:

    • Access the Cockpit CMS admin panel using your credentials.

  2. Navigate to Pages:

    • Go to the "Pages" section from the main menu.

  3. Create a New Page:

    • Click on "Add Page" to create a new page.

  4. Select Layout Type:

    • Choose the "Layout" type from the available page types. This allows you to use the pre-built components.

Step 2: Configure Layout Components​

  1. Add Components to the Layout:

    • After selecting the layout type, you can start adding components by clicking the "Add Component" button.

  2. Select and Configure Components:

    • Choose from the available components like ButtonComponent, ImageComponent, VideoComponent, etc.
    • Configure each component by filling in the necessary details, such as text for buttons, URLs for images, and content for rich text.

  3. Arrange Components:

    • Drag and drop components to arrange them in the desired order within your layout.

  4. Customize Styles (Optional):

    • If needed, apply custom styles or classes to components for further customization.

Step 3: Save and Preview​

  1. Save the Layout:

    • Once you’ve added and arranged your components, click "Save" to store your changes.

  2. Preview the Page:

    • Use the preview option to see how your layout page will appear on the front end.

Step 4: Publish the Page​

  1. Publish the Page:
    • After finalizing the layout, you can publish the page by clicking the "Publish" button. This will make the page live on your website.

Example Use Cases​

  • Landing Page: Use the HeadingComponent, ImageComponent, and ButtonComponent to create an engaging landing page.
  • About Us Section: Combine SectionComponent, RichtextComponent, and ImageComponent to build an informative "About Us" section.
  • Product Gallery: Utilize GridComponent and ImageComponent to display a gallery of products.

Conclusion​

By leveraging the pre-built components in Cockpit CMS v2, you can efficiently create and manage layout pages that are both flexible and powerful. These components cover a wide range of use cases, allowing you to build dynamic pages with minimal effort.