Master frame objects and place holders

[ZombyWoof]

I am trying to use a Master Frame page to hold common header+menu, content place holder and footer. All of my content is RWD.

(Just to be clear for the following descriptions - I use UNDER when some text is overwritten by something else; and BELOW and down/up when I mean vertical position on the page)

The first thing I noticed is that the master_frame footer is positioned at something like 7500 points down the master_frame - and if I try to drag anything into it, this action just pushes the footer further down the page. I can't find a way to drag/drop to it and/or to move it back up. Also, the Content Place Holder appears to be 'free-positioned' and doesn't 'attach' itself to (for example) bottom of the header - is this expected behaviour?
So, when I test the output from a single text block page linked to the master frame, the footer is rendered about 5 screens of scrolling below a load of white space below the text.

Plus, another critical issue: the input text block content starts UNDER the header menu, not BELOW it. I can sort of fix this by entering blank lines above the input text (but that seems really clugey), but I cant find anything to place on the master frame that will move the start position of the input content to BELOW the menu. Any additional object i use to try to fix this (like an invisible divider or a flex container for example) is rendered BELOW the frame filled with the input content. Even if I position the Content Place Holder right down to the footer, the divider is still rendered below it on the output. How can I insert additional objects on the master that appear above the content place holder?
I have renamed EVERY object in the master frame to be prepended with 'master_' so they don't appear anywhere else (eg master_header, master_ThemableMenu1, master_Divider1, master_DividerLine1, master_ContentPlaceHolder1, master_pageFooter1 etc).
I have also used the 'affix header' HTML to fix the header when scrolling and have changed the references in it to reflect the master_ naming of the master frame header as above.

Hope that all makes sense.

(Ah, was going to attach screen shots of the problems, but it seems they need to be URLs, not attachments?)

Please advise...?
Thanks!

(Screen caps NOT(!) attached:
Capture1 is the master_frame design for the upper part of the page
Capture2 shows the master_frame with the footer way down the page
Capture3 shows the top of the output page - note the position of the divider and the size of the scroll bar
Capture4 shows the bottom of the output page with whitespace above the footer - again note the position of the scroll bar)

[Pablo]

To be able to help you, I need your project file so I can see what your exact settings are.

Note that I do not need the complete project, only one page and the master page.

Please see this related FAQ:
viewtopic.php?f=10&t=82134

[ZombyWoof]

OK. I have created a stripped down project from my design.
https://www.dropbox.com/s/cxifk5dh6luiw ... t.wbs?dl=0 You can see the published web site at www.wifiwiz.co.uk

There are 2 breakpoints and I have adapted some of the content for the breaks.

1. master_frame: see the inserted footer is at location (0, 8086) on default and (0, 4202) on breaks 800 and 480. If I try to drag something like a flex container to the foooter, the footer just gets pushed further down. I want to insert (eg) navigation, image and legal statements in the footer, but I can't find a way to do it. I did manage to insert an image, but even that is now in the wrong place on default view since the footer was pushed further down, and it's not visible or removable but IS renders on the output.
2. I have used the affix.header HTML from one of your templates on the master so the menu is kept in place when the page is scrolled. However, it's not working as it should - the header stays transparent, despite the HTML specifying a new colour when 'affixed'. Plus I think the menu is supposed to do something different for the current selected page and that's not happening.

3. Index page: The content is made up from a layout grid containing header and a flex grid containing text. However, although I have modified the properties of the flex to try to get 2 auto columns, the changes are not reflected on the editor screen and although the text IS displayed on the editor screen it can't be selected or edited, and it doesn't show on the index output screen on preview or when published - although the header text (Text4) does - BUT ABOVE the other objects on the master_frame, although the CPH is BELOW those objects on the master_frame.

4. Test1 page renders all of the content ABOVE the objects on the master_frame - and overwrites the menu

5. Test2 page is same as Test1 but with the text inside one single layout grid - the result is the same as 4.

6. Test3 is a flexcontainer contining a heading with a LayoutGrid below it containing 2 colums of text. All of this content displays (unlike index), but still ABOVE all the other objects on the master_frame, and overwrites the menu again, like 4. & 5. above.

7. Test4 is pure text only. Now this one renders (sort of) as it ahould, in the same place as the CPH on the master.

It seems that if the content page for a CPH is any more complex than simple text, then it is rendered at the TOP of the output? This behaviour effectively means that the use of master_frames is pretty limited - unless I am missing something?

Basically, I just want the same header and footer applied across all pages of my site, with a 'sticky' header contining the menu and a footer containing layout grid with links, text and image in it, with all the inserted content starting below the menu bar (before it is scrolled, obviously!).

Ther are many other scenarios where you seem to 'lose control' of content or objects, and have to back up and attempt to do things a different way, but the problems above are what I need to solve now...

[Pablo]

If I try to drag something like a flex container to the foooter, the footer just gets pushed further down0

You cannot drag a flex container inside a footer. A footer is an absolute container. it does not support flexible content.

I want to insert (eg) navigation, image and legal statements in the footer, but I can't find a way to do it.

Just drag the individual elements in the footer, then you can position them any way you like (using absolute positions).
Or or move (arrange) the flex container with the elements to the bottom of the page. I have done it like this in almost all the available templates.
http://wysiwygwebbuilder.com/templates8.html

I did manage to insert an image, but even that is now in the wrong place on default view since the footer was pushed further down, and it's not visible or removable but IS renders on the output.

When using absolute mode. you will have to adjust the position of the elements in each breakpoint. And because the positions in a footer are absolute it is possible that the element is outside the viewport in another breakpoint.
In that case use 'reset position' in the Object Manager.
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817

2. I have used the affix.header HTML from one of your templates on the master so the menu is kept in place when the page is scrolled. However, it's not working as it should - the header stays transparent, despite the HTML specifying a new colour when 'affixed'.
Plus I think the menu is supposed to do something different for the current selected page and that's not happening.

You have copied the code, but forgot to include jQuery, the affix script (= bootstrap) does not work without jQuery.
To include jQuery either add an object that uses jQuery (like in the template) or manually add the jQuery reference to the HTML resources.

3. Index page: The content is made up from a layout grid containing header and a flex grid containing text. However, although I have modified the properties of the flex to try to get 2 auto columns, the changes are not reflected on the editor screen and although the text IS displayed on the editor screen it can't be selected or edited, and it doesn't show on the index output screen on preview or when published - although the header text (Text4) does - BUT ABOVE the other objects on the master_frame, although the CPH is BELOW those objects on the master_frame.

I do not recommend to mix layout grids (=- bootstrap) with flex grids (= CSS grid). This may cause conflicts or result in other undefined behavior.
Please choose to one layout mode. Also, I do not think flex grids can be nested.

4. Test1 page renders all of the content ABOVE the objects on the master_frame - and overwrites the menu

In a flexible/floating layout, the content place holder should also be floating.
See the tutorial:
http://wysiwygwebbuilder.com/master_frame.html

Also, because the header is fixed, it will not float. Other objects will either be on top or below it depending on the z-index.

5. Test2 page is same as Test1 but with the text inside one single layout grid - the result is the same as 4.

In a flexible/floating layout, the content place holder should also be floating.

6. Test3 is a flexcontainer contining a heading with a LayoutGrid below it containing 2 colums of text. All of this content displays (unlike index), but still ABOVE all the other objects on the master_frame, and overwrites the menu again, like 4. & 5. above.

In a flexible/floating layout, the content place holder should also be floating.

Important note:
WYSIWYG Web Builder is a toolbox with thousands of options and several different layout modes (absolute, layout grid, flex box etc). Each layout mode has its own behavior.
However, just because the software supports all these different options does not mean you should use them all together on the same page.

Related tutorial:
http://www.wysiwygwebbuilder.com/layout_modes.html

[ZombyWoof]

OK. I have simplified the project (I think) such that I have a master page with header and footer that now seems to work nicely.
It's worth noting that the 'color' parameter in the first header.affix section of the header HTML also turns off the hover color change. What parameter would be used to pass a hover color for the affixed menu to the affix code?

What I'n now struggling with is breakpoints. I get the idea of hiding parts on different breaks, but I don't see how to re-use the same text on different layouts. Obviously, I can copy and hide - but then when I come to change some text, the change has to be made on all of the breakpoints for the same words to be displayed on the different breaks. Editing the text ID to be the same on all breaks does not seem to be the answer either.

I am using a single FlexContainer containing 4 LayoutGrids on each of the BPs. I copy the FlexContainer and hide the instances not required on the various BPs. This does achieve the desired result, but the text then becomes duplicated - requiring multiple edits to keep it all up to date.

Can the text be referenced once only?

[Pablo]

If you do not hide the object then you can re-use the same text in different all breakpoints.
You can even use different font sizes.

Related tutorial:
http://wysiwygwebbuilder.com/responsive_text.html

I am using a single FlexContainer containing 4 LayoutGrids on each of the BPs.

Why are you using different layout grids in breakpoints?
It sounds like you are making it yourself more difficult then it needs to be.

Also please do not use layout grids inside a flexible container or vise versa. These are different layout methods and should not be mixed.
They can be used on the same page but they cannot nested.