Confused about modular pages

Hi!

I came to the point, where I want to use modular pages. Well, I have no idea how they are working … The documentation is not very helpful on this, I tried everything in the doc, but there was only text-output.

Then I tried to copy the 01.home-page from the agency-skeleton to my site with no success, I alway get weird error-messages when opening the page.

Isn’t there some kind of “step-by-step-guide” for dummies for modular pages???

Have you already read the new documentation here on Modular Pages ? (I just added it a couple of days ago).

After that I would recommend checking out the one-page-skeleton package from the downloads. Examine the /user/pages folder and you will see how that page is built from 4 modular pages.

Thanks for you reply, I have had a closer look at the document and also the skeleton. But non of them made me understand this. There have to be some other files than that stored in the /user/pages folder, 'cause when I just copy the page to my project, it doesn’t work.
Where can I - for example - set the option, to have 3 news-blocks in a row?

Have a look at how the features modular page works in the one-page-skeleton. Basically you have an entire row that is output by the features modular page.

In the 01.home/01._features/features.md file you will see there are a bunch of features in the page header. This is the data that the twig file will iterate over. You could have 3 news items for example.

title: Homepage Features
class: small
features:
    - header: Markdown Syntax
      icon: text-height
    - header: Twig Templating
      icon: code
    - header: Smart Caching
      icon: rocket
    - header: Flexible Taxonomies
      icon: tags
    - header: Simple Install
      icon: cloud-download
    - header: Powerful Plugins
      icon: cogs
    - header: Intuitive UI
      icon: dashboard 
    - header: File-Based
      icon: file-text
    - header: Documentation
      icon: bookmark
    - header: On Github
      icon: github
    - header: Responsive Design
      icon: html5
    - header: Awesomazing
      icon: heart

Then look at the templates/modular/features.html.twig file in the Antimatter theme. This is what outputs the row. You will see the Twig iterating over the features and displaying that in a grid format.

div class="modular-row features {{ page.header.class}}">
    {{ content }}
    <div class="feature-items">
    {% for feature in page.header.features %}
           <div class="feature">
            {% if feature.icon %}
            <i class="fa fa-fw fa-{{ feature.icon }}"></i>
            <div class="feature-content icon-offset">
            {% else %}
            <div class="feature-content">
            {% endif %}
            {% if feature.header %}
            <h4>{{ feature.header }}</h4>
            {% endif %}
            {% if feature.text %}
            <p>{{ feature.text }}</p>
            {% endif %}
            </div>
        </div>
    {% endfor %}
    </div>
</div>

That’s really all there is to it.

Ok, I tried the last days to get this working - without success. Please tell me, WHAT files from the “agency-skeleton” do I have to copy WHERE in the “antimatter-skeleton” to have the option, to use the “about (chain)” feature?

If you want to have the ‘about’ functionality from Agency theme in Antimatter theme you will need to copy several parts.

First you will need to use the user/pages/01.home/_about/about.md file as a sample for your content, just copy it as-is.

Second, you will need to copy/adapt the user/pages/themes/agency/templates/modular/about.html.twig file into the Antimatter user/pages/themes/antimatter/templates/modular folder as this is what renders the content.

Thirdly, you may need to track down any css that is used in Agency to render the content in the appropriate style and adapt that to work with the Antimatter theme.

Moving part of a design from one theme to another is not trivial. It can be done of course, i’ve just outlined the steps, but it requires some knowledge and skill. Those skills are generally acquired by trial and error.