To read documentation on Flexible Layouts, visit: Tumult Hype Documentation
Hello @Daniel,
I am trying to make a webpage, and there are several rows, and each row with image background and text content on that rows, I am quite confused by HYPE flexible layout setting.
According to your Keynote tutorial: http://prntscr.com/gnv3ss
you suggest set that image as text content background?
and there is great example, here is the screenshot:
Where I can download that example please?
Alex
Hi @alexlii, here’s that document: https://cl.ly/1I0S3N3U110j
The scaling is set on the group, and the group is separated from the text in many cases. You can see how that works in the P1-Hero group, which has a single image within the group in the Desktop 960-max layout.
Here’s more info on how groups + overflow works: Masking Elements by using Content Overflow & Groups
1 Like
Great design, and great thanks.
but after studying, I still can not understand the setting principle of Flexible Layout.
I can understand why Grouping a image itself, maybe for Mask usage, right?
but what is THE OBJECT OF REFERENCE for the borders in PINs & Sizing setting? the document edge? or specific Element group borders, or the borders of the upwards or downward element to a special element which is just setting?
Why we already did pins&sizing setting for a group element of a image, but still need do that again individually for the image inside a group?
Alex
Hi @Daniel,
For the webpage composing,
For non coding background person, we think if I put something there, I MEAN IT, YES, I REALLY WANT IT THERE. but for Hype, whether the frontend style is same with that in HYPE, it is not sure.
Here are two example for LIVE composer:
It would be great if HYPE support that.
Thanks.
Alex
The pin sets an absolute distance from the edge. If only the left pin is set, the current distance from the left edge will be static. If you set left and right pins, the relative distance will be retained. Check out the 'skyline' scene in this document: https://tumult.com/hype/documentation/3.0/documents/FlexibleLayouts/FlexibleLayoutExample.hype.zip
If you want an image to be the background of an expandable section, setting overflow:hidden on that group will give you a cool effect, like you saw in the Africa document. You can't do this by just setting flexible layout + pins on the image itself. The group handles overflow + position, and the image grows based on the space it fit into.
I understand, thanks, I check the Africa example very carefully, let us take this example to discuss.
I believe, What make most people confused, is that re-pins on an image before and after grouping that image, this is what I care.
what about if grouping an image itself and set pins to this group, then set pins to the image within that group again?
what is THE OBJECT OF REFERENCE of the edge to that image in this situation?
Before I tried on Africa example again, I guess there might be three possibilities:
1# it is still the edge of scene or document, if yes, why allow person set pins again to that image just after setting pins to that group?
2# at that time, THE OBJECT OF REFERENCE of that image will be the border lines of that group. if this one is right, I can understand and I think it is reasonable. but there is no explanation in tutorials.
3# No matter grouping an image or not, once grouping it and set pins, the edge of THE OBJECT OF REFERENCE to that image is always the edge of scene or document.
so if grouping a image itself, the image showed up at frontend page, will be exactly limited within the group borders area with the proportions of that image? if I am wrong, please correct me.
Thanks.
Alex
Thanks, I think I can handle it anyway. and I understand it is something with “ABSOLUTE” OR “RELATIVE” 
and I am just thinking whether it would be good by adding a “Simple mode” for flexible layout setting, since I found there are lots of question on it.
If possible, please let me know, if not, that is fine.
Alex
Hello @Daniel,
Is it possible to make those images Paralleled view when scrolled down the page in Africa Responsive example?
Thanks.
Alex
Not sure what you mean by that? Do you mean fixed to a position relative to the browser window so they don't move when scrolling?
Sorry for my poor english
and I find a example at http://theme.crumina.net/polo/corporate-v3/
Please check the following parallax section:
I can do it easy in wordpress with Visual composer, but not sure whether it need CSS or Javascript to do that in HYPE.
Thanks.
Alex
Do a search for ‘Parallax’ in these forums and you’ll see a lot of examples of how to play with relative motion & perspective.
In Africa Responsive example, there is a 960 width layout, I am just wonder why you do so, it is not 1200, and not 1024, why you choose 960 width please?
Alex