I’m wonder if anyone has been successful placing a dropzone within a dropzone? Here’s what I’m trying to do:
I would like to have just one template (full width). Then I have grid elements, like left sidebar, right side bar, two equal columns, etc. Those grids would then have dropzones for each column.
Doing it that way, I could have a row that was two columns, and then add another full width element below it so the whole page isn’t stuck to one format. I was successful in getting elements to drop within other elements, but once it was two layers in, the options link no longer works. Am I doing something wrong, or am I just hoping for too much?
Yes I have done this with great success! I LOVE this ability with Fred, however it did offer some challenges. First, how I did it, and this was all designed to be used with Bootstrap 4:
First Element - a SECTION that can have content dropped in:
<div class="{%if isfluid %}container-fluid{%else%}container{%endif%} align-items-center {%if isfluidNoPadding %}pt-{{paddingTop}} pb-{{paddingBottom}} pl-{{paddingLeft}} pr-{{paddingRight}}{%endif%}">
<div data-fred-dropzone="section" data-fred-min-width="100%" data-fred-min-height="100px">
</div>
</div>
</section>
There is a TON of configurable options on this section via Fred - many you will see below are included by fred-import and not included here so you’ll have to use your imagination for those 
Element options:
{
"remote": true,
"settings": [
{
"name": "isfluid",
"label": "Full width content?",
"type": "toggle",
"value": false
},
{
"name": "isfluidNoPadding",
"label": "Remove padding on full width?",
"type": "toggle",
"value": false
},
{
"name": "pixelHeight",
"label": "Set section height in px:",
"type": "text",
"value": "0"
},
{
"name": "pixelAspectRatio",
"label": "Height Aspect Ratio - 0 for none",
"type": "slider",
"min": 0,
"max": 99,
"step": 1,
"value": 0
},
{
"fred-import": "group_section-border"
},
{
"fred-import": "group_visibility"
},
{
"fred-import": "group_margins-bootstrap-section"
},
{
"fred-import": "group_paddings-bootstrap-section"
},
{
"fred-import": "group_aos-animation"
},
{
"fred-import": "group_fg-image"
},
{
"fred-import": "group_bg-image"
},
{
"fred-import": "group_bg-gradient"
}
]
}
Second element that can be dragged into the above - a rich text, general purpose element:
<div class="fredNested {%if marginTop%}mt-{{marginTop}} {%endif%}{%if marginBottom%}mb-{{marginBottom}} {%endif%}{%if marginLeft%}ml-{{marginLeft}} {%endif%}{%if marginRight%}mr-{{marginRight}} {%endif%}{%if paddingTop%}pt-{{paddingTop}} {%endif%}{%if paddingBottom%}pb-{{paddingBottom}} {%endif%}{%if paddingLeft%}pl-{{paddingLeft}} {%endif%}{%if paddingRight%}pr-{{paddingRight}} {%endif%}{%if stickyTop%}sticky-top {%endif%}" data-fred-name="richtextarea" data-fred-rte="true" data-fred-rte-config="basic" data-fred-block-class="w-100 h-100" style="{%if zIndex%}z-index:{{zIndex}}; {%endif%}{%if stickyOffset%}top:{{stickyOffset}}px; {%endif%}">
<p>Tackle clipper red ensign Spanish Main square-rigged hulk mutiny Admiral of the Black driver careen stern clap of thunder loaded to the gunwalls parley schooner lass weigh anchor squiffy bilge nipperkin barkadeer reef me hang the jib Brethren of the Coast. Nipperkin yardarm long boat plunder chandler rigging Shiver me timbers sheet jib shrouds doubloon league barque careen gangway brig sloop fathom Jolly Roger starboard log Sink me prow fire in the hole snow. Arr spanker tackle flogging schooner clipper strike colors parley coffer fire ship chase guns scallywag killick sheet pinnace case shot salmagundi execution dock man-of-war maroon scuttle Davy Jones' Locker log league barkadeer.</p>
</div>
and this element’s options:
{
"settings": [
{
"fred-import": "group_margins-bootstrap"
},
{
"fred-import": "group_paddings-bootstrap"
},
{
"name": "stickyTop",
"label": "Sticky Top?",
"type": "toggle",
"value": false
},
{
"name": "stickyOffset",
"label": "Offset from page top",
"type": "slider",
"min": 0,
"max": 500,
"step": 1,
"value": 0
},
{
"name": "zIndex",
"label": "Set Z Index (number only):",
"type": "text",
"value": "0"
}
]
}
The caveats… when trying to select elements inside other elements, the fred UI can be squirrely and downright near impossible to be able to use. I have mostly offset these by adding some CSS while in Fred mode to add some aids… red dashed lines to highlight fred elements… padding or margins to separate the nested from parent on hover to allow the fred handles to be distinguised. It mostly works.
Some screenshots:
First one shows the rich text inside the section that while hovered, highlights the element and controls:
Next one shows the section highlighted and it’s controls visible on hover:
Lastly - side note - the danger striped area in both is a secondary fred content drop area that I designated for specific end of page elements. I was able to visually distinguish this for clarity - again using fred-mode css hints to add the s triping
Some of this CSS below - again, only applied while in fred mode (and may not be perfect. Don’t judge me! ):
<style>
.mce-content-body {
line-height: inherit !important; /** Prevents TinyMCE messing with your line-height **/
}
.fredNested {
margin-bottom:0px !important; /* margin-bottom:15px !important; */
padding-bottom:0px !important;
}
.fredNested iframe {
margin-bottom:15px !important;
padding-bottom:20px !important;
}
.fredNested:hover {
outline: 1px dashed rgba(247, 77, 77, 0.65);
}
.fred--block:hover{
margin-bottom:15px !important;
padding-bottom:20px !important;
}
.fredNested:hover :nth-child(1):not(p,h1,h2,h3,h4,h5,h6) {
margin-bottom:0px !important;
}
.fred--block_content:hover{
margin-bottom:0px;
}
[data-fred-dropzone$="section"]:hover{
padding-bottom:15px;
margin-bottom:0px;
margin-top:0px;
}
[data-fred-dropzone$="row"]:hover{
padding-bottom:15px;
margin-bottom:0px;
margin-top:0px;
}
[data-fred-dropzone$="column"]:hover{
padding-bottom:15px;
margin-bottom:0px;
margin-top:0px;
}
div[data-fred-dropzone="modals-area"]{
/*outline:1px dashed red;*/
outline: 1px solid rgba(247, 77, 77, 0.75);
background:url('/content/images/fred/modals-zone-bg.png');
}
div[data-fred-dropzone="modals-area"]:hover{
/*outline:1px dashed green;*/
outline: 1px solid rgba(247, 77, 77, 0.50);*/
}
.fred--active .row {
/*margin:5px;*/
}
.carousel-inner{
z-index:1;
margin-bottom:20px;
}
.carousel{
z-index:0;
}
.carousel-control-prev, .carousel-control-next{
margin-bottom:300px;
}
.fred--active .stretched-link::after {
position: relative !important;
display:none;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
pointer-events: auto;
content: "";
background-color: rgba(0, 0, 0, 0);
}
[data-fred-render="false"] {
color: #dedede;
letter-spacing: 2px;
font-family: monospace;
font-size: 16px;
}
*[data-fred-name] {
outline: 2px solid rgba(247, 77, 77, 0.18);
}
</style>