1

I try to get a hang of how to design a custom homepage design. I tried the samples I found here Creating a custom homepage template in Magento2 and have build a basic custom layout as pointed out. Resulting in a white home-page?

Now what I would like to achieve is a layout which looks like this:

cms homepage layout

The header can stay as it is on the Luma page. Than I want two equal columns. In which per example can be (in the left one) text from the cms editor and in the left one a block or widget or also text from the cms editor. Than a block showing 4 or 5 latest products And the footer as on the luma page.

Now I have:

app/design/frontend//mytheme/Magento_Theme/Page_layout/custom_home.xml app/design/frontend//mytheme/Magento_Theme app/design/frontend//mytheme/Magento_Theme/layouts.xml

So how to achieve this? :)

this is my custom_theme structure: custom_theme structure

Improve this question

1 Answer 1

Reset to default
0

You can achieve all of above without creating a new page layout which is preferable in my opinion. I will only create a custom layout if a very complex layout structure is required which is not achievable through already available layout pages. Magento's layout instructions let you re-use, modify and change layout by using layout instructions.

In your case you can use 1 column page layout and add layout instructions in app/design/frontend/<Vendor>/<theme>/Magento_Cms/layout/cms_index_index.xml file to achieve what you require. Let's say you have two cms static blocks with id "cms_block_1" and "cms_block_2", you can use below code:

<?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">
<body>         
<referenceContainer name="content">
        <block name="cms.block1" before="-" class="Magento\Cms\Block\Block" cacheable="true">
            <arguments>
                <argument name="block_id" xsi:type="string">cms_block_1</argument>
            </arguments>
        </block>

      <block name="cms.block2" after="cms.block1" class="Magento\Cms\Block\Block" cacheable="true">
            <arguments>
                <argument name="block_id" xsi:type="string">cms_block_2</argument>
            </arguments>
        </block>
    </referenceContainer>
    </body>
</page>

Similarly you can create another CMS static block and show it after cms.block2 which will position it at the bottom. You can use css to position block one and block 2 parallel to each other.

Improve this answer
25
  • Ok that sounds good. For the "user - customer" this means that only the blocks will be edited and not the homepage_cms, right? I will give it a try and see how this works out for me. Thanks. Maybe a dumb question but, If I want this applied for an other (new created) cms page can I just create the cms_newpage_newpage.xml ?
    – mr_typo3
    Oct 31, 2016 at 15:56
  • Yes user can edit the concerned blocks, you should name them so they're easy to recognize. You can create new page layout under Magento_Theme/page_layout and select it in the admin panel. You can use existing 1 column code and make edits if you need to. If helpful please accept the answer and upvote so answer doesn't get littered and someone else can also benefit from it :)
    – Devtype
    Oct 31, 2016 at 16:15
  • Hi, its sure use-full but I can not get it to work. I created the blocks as mentioned. Also the have the cms_index_index.xml in place as above. And cleared all cache. Not getting this in the home_page? The old text and widget are still there? What Am I missing here? How would I get this only for the "custom layout applied than?
    – mr_typo3
    Oct 31, 2016 at 16:28
  • Are you using correct page layout file "1 column", you can confirm in admin for home page under Design. Secondly, are you using all required xml tags etc in cms_index_index.xml file that include <page> and <body> tags! If followed all steps correctly it should work as normal.
    – Devtype
    Oct 31, 2016 at 16:35
  • 1
    Glad it's finally working for you. You can add divs to the content block in CMS page/block then add css to position them as required !
    – Devtype
    Nov 2, 2016 at 13:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.