Layering pieces of content into page flow

[SamC]

Ok, so I tried to give the title a descriptive name to attempt to describe what I'm talking about. I've read quite a few posts, like this:

Some call them snippets, or blocks, or chunks. This is the final piece I need really in order to get my site up and running in a way where fields/groups of fields are generic as possible in order to re-use them in different places. I'll try an example. As it stands, I have a template 'about.php':

So I have:

1) $title - used for the page title in the admin section
2) $menuLinkTitle - if this is populated, used for main menu, otherwise use $title field
3) $windowTitle - I like to manually create the actual page <title></title> (also, this is displayed in the browser window tabs)
4) $showInMenu - if checked, puts in main menu. Legacy field, not actually using this atm
5) $mainImage - big header image, adds class 'full-width-image' to div, if empty, a class of 'no-image' is used
6) $headerStyle - choose between full width and 70%/30% split header
7) $mainHeading - text overlayed onto $mainImage, ckeditor so I can use <h2>, <p> and <a> tags and output directly
8) $body - body text

Ok, so this is where things start to fall apart. The code for the template is something like this (added a bunch of comments and an extra row for clarity):

//about.php
<?php include('./includes/header.inc'); ?>

<div class='body-row'>
    <div class='container'>
        <div class='wrapper'>
			
            //outputs $body field from page, $content is defined in _init.php
            <?php
                if ($content) {
                    echo $content;
                }
            ?>

        </div>
    </div>
</div>

<!-- css color on colour-bg, generic-row is full width -->
<div class='colour-bg generic-row'>
    <!-- container, clears after in case floats used inside this - site wont stretch past $max-width in bourbon/neat settings -->
    <div class='container'>
      	<!-- wrapper contains content within the max boundaries -->
        <div class='wrapper'>

            <!-- THIS SECTION SHOULD COME FROM A BLOCK OR SOMETHING -->
       		<h3>Why choose me?</h3>
          	<p>This is the part that needs to come from a block</p>
            <!-- END BLOCK -->  
          
              <div class='button-wrapper'>
                <ul>
                    <li>
                        <a href='<?php echo $pages->get(1069)->url;?>'>Read about my services</a>
                    </li>
                </ul>   
            </div>

        </div>
    </div>
</div>

<div class='generic-row'>
    <div class='container'>
        <div class='wrapper'>

            <!-- THIS SECTION SHOULD COME FROM A BLOCK OR SOMETHING -->
       		<h3>My skills</h3>
          <img src='' alt='meme showing a funny animal photo or something with I got dat skills caption'>
          	<p>This is the part that needs to come from a block</p>
            <!-- END BLOCK -->  

        </div>
    </div>
</div>

I think this shows what I'm talking about. Pages aren't made up of header > middle bit (just output ckeditor) > footer. If they were, they'd be exceptionally boring!

The main bulk of the text comes from the $body field which is fine. However, after that I wanted to be able to add rows. I guess one way would be to use extra fields on the 'about.php' template:

9) $whyChooseMeTitle
10) $whyChooseMeBody
11) $mySkillsTitle
12) $mySkillsBody

However, they're way too specific can literally only be used for one thing, and IMO is quite a bad way to handle this. What about fields for each row:

9) $sectionTitle
10) $sectionTitleBody

...but then I can only have each of these only once on a template. So what about a repeater?

9) $sectionRepeater with fields '$sectionTitle' & '$sectionTitleBody'

...but I don't think it's really a good use case for a repeater either, not every row will have exactly the same fields. So what about child pages for sections?

About (about.php template)
  - Why choose me (alternative template 1)
  - My skills (alternative template 2)

...and then pull the content into the about page via $page->children(). So I can define different fields for each page, but it doesn't seem very intuitive to me although it would work. These sub-pages would not need to have their own url though (I presume if they don't have an associated file, you get a 404 if going to these pages directly in the address bar). Bearing in mind, I'll know how to do it because it's my site, however, I'm thinking of the future, it must be as easy as possible for a client for similar situations.

Or a new page in the admin like:

Content blocks (where I can create sub-pages of every small piece of content for various pages)
  - Why choose me
  - My skills

...but this will be somewhere else in the tree hierarchy. An editor will be editing the 'about' page and saying to themselves "how do I edit the 'my skills' section? I just saw it on the page, went to 'about > edit', but it's not here?"

I'm after some insight from the members here on how they handle what I refer to as 'blocks of content' and how an inexperienced user will be able to edit them easily. Thanks in advance. Apologies for the huge essay but I think this may be a useful thread for newer members too.

-- EDIT- just read this ---

This touches on what I'm talking about. Although I don't have $130 right now for profields.

[SamC]

Just as a follow up, this is what I did to get content blocks (each a page with no template) into a set area (in my case the footer) of my site.

1) Created two templates, content-block-index (advanced tab = icon cubes) and content-block (advanced tab = icon cube)
2) Added 'title' (type = text) and 'body' (type = textarea) fields to content-block template
3) Created a page (called Content blocks) using the content-block-index template
4) Created a few subpages of this using the content-block template plus populated title/body fields (title only used to label in admin, not output anywhere)
5) Created a field 'insertContentBlock' (type = Page), details = single page or boolean false when none selected,  input = parent of selectable pages, chose 'Content blocks' page
6) Added insertContentBlock field to any pages where I want to choose a custom block in the footer
7) Edit a page which includes the field created in (5), choose one of the content-block pages, save

To output, I just put this in the footer (which itself is an include from main.php)

// ./includes/footer.inc

// if page is not 404 page
<?php if ($page->id !== 27): ?>
    <div class='row'>
        <div class='column-l colour-bg'>
            <?php
                if ($page->insertContentBlock) {
                    $block = $page->insertContentBlock;
                }
                // if no selection, default block
                else {
                    $block = $pages->get("/content-blocks/my-services/");
                }
                echo $block->body;
            ?>
        </div>
      
        <div class='column-r'>
            <?php
                // this block doesnt change
                $block = $pages->get('/content-blocks/contact-me/');
                echo $block->body;
            ?>
        </div>
    </div>
<?php endif; ?>

Maybe not the most elegant but it suits my requirements and gave me a good idea what the Page field does. Anyway, might help someone.