Hello @imagendemi8edd,
It can be majorly used when you want to add any custom CSS and JS to your custom CMS page.
Magento provides us the following layout:
-> Empty
-> 1 column
-> 2 columns with left bar
-> 2 columns with right bar
-> 3 columns
If you want to create your own customized layout for the cms pages or some specific pages then you need to focus on the following steps:
Steps to Create a Custom Layout with Custom CSS and JS in Magento 2
Step 1: Define a New Layout
First, we’ll create the layouts.xml file to define a custom layout.
File: app/code/Milople/CustomLayout/view/frontend/layouts.xml
<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
<layout id="customlayout">
<label translate="true">Custom CMS Page Layout</label>
</layout>
</page_layouts>
Step 2: Create a Layout File
The layout file specifies the structure and containers.
File: app/code/Milople/CustomLayout/view/frontend/page_layout/customlayout.xml
<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
<update handle="3columns"/>
<referenceContainer name="page.wrapper">
<container name="footer-custom" as="footer-custom" after="footer" label="Custom Footer"
htmlTag="footer" htmlClass="custom-footer-section">
<container name="footer-content" as="footer-content" htmlTag="div" htmlClass="custom-footer-content">
<block class="Magento\Framework\View\Element\Template"
name="footer.bugs" template="Magento_Theme::html/bugreport.phtml"/>
</container>
</container>
</referenceContainer>
</layout>
Step 3: Define a Custom Route
Now, let’s add a route for the custom module.
File: app/code/Milople/CustomLayout/etc/frontend/routes.xml
<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="standard">
<route id="customlayout" frontName="customlayout">
<module name="Milople_CustomLayout"/>
</route>
</router>
</config>
Step 4: Controller for the Custom Page
We need to create an action to render the layout.
File: app/code/Milople/CustomLayout/Controller/Index/Index.php
<?php
namespace Milople\CustomLayout\Controller\Index;
use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;
class Index extends Action
{
protected $resultPageFactory;
public function __construct(
Context $context,
PageFactory $resultPageFactory
) {
parent::__construct($context);
$this->resultPageFactory = $resultPageFactory;
}
public function execute()
{
return $this->resultPageFactory->create();
}
}
Step 5: Add CSS and JS to the Layout
This file adds the custom JS and CSS for the layout.
File: app/code/Milople/CustomLayout/view/frontend/layout/customlayout_index_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Milople_CustomLayout::css/custom_layout.css"/>
<script src="Milople_CustomLayout::js/custom_layout.js"/>
</head>
</page>
Step 6: Create CSS and JS Files
Add your custom CSS and JS.
CSS File: app/code/Milople/CustomLayout/view/frontend/web/css/custom_layout.css
.custom-footer-section {
background-color: #f4f4f4;
text-align: center;
padding: 20px;
}
.custom-footer-content {
font-size: 14px;
color: #333;
}JS File: app/code/Milople/CustomLayout/view/frontend/web/js/custom_layout.js
require(['jquery'], function ($) {
'use strict';
$(document).ready(function () {
console.log("Custom Layout JS loaded!");
});
});Step 7: Add Event Observer
Now, add an observer to conditionally load the layout handle.
File: app/code/Milople/CustomLayout/etc/events.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
<event name="layout_load_before">
<observer name="milople_custom_layout" instance="Milople\CustomLayout\Observer\LayoutHandler"/>
</event>
</config>
Step 8: Create the Observer
This observer checks the page layout and adds the correct handle.
File: app/code/Milople/CustomLayout/Observer/LayoutHandler.php
<?php
namespace Milople\CustomLayout\Observer;
use Magento\Framework\Event\ObserverInterface;
use Magento\Framework\Event\Observer;
class LayoutHandler implements ObserverInterface
{
public function execute(Observer $observer)
{
$layout = $observer->getData('layout');
$update = $layout->getUpdate();
$handles = $update->getHandles();
if (in_array('customlayout_index_index', $handles)) {
$update->addHandle('customlayout_index_index');
}
}
}Now your custom layout page is ready with CSS and JS integrated!
If the issue is resolved, click Kudos and accept it as a solution.
