Combine Text, Foto and Design in one area

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
heynen
 
 
Posts: 14
Joined: Sun Dec 31, 2017 4:27 pm

Combine Text, Foto and Design in one area

Post by heynen » Tue Jan 02, 2018 12:58 am

I would like to implement an advanced design and have no idea how to do this:

Image


This contains three elements: 1) An image as background (with slightly rounded edges), 2) Text written on that image, 3) Text indicating the category ("Wirtschaft"), including a designed coloured background.

This would be the final element that I need for my page now. All the rest is working well (adaptive Layout etc)

Thank you in advance!

Malte

User avatar
Pablo
 
Posts: 16864
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Combine Text, Foto and Design in one area

Post by Pablo » Tue Jan 02, 2018 8:03 am

You can use a use a layer, flex container or layout grid.

Examples:
http://www.wysiwygwebbuilder.com/templates0.html

heynem

Re: Combine Text, Foto and Design in one area

Post by heynem » Fri Jan 05, 2018 4:16 am

Thank you very much for the reply. I am advancing!
But there is still a problem which I could not solve. I have tried everything...

I come close to what I need:

Image

The two objects with the fotos are fine: Inside them, everything stays in its place (text, photo, logo). To achieve this, I have used a layer, and activated the switch "position children - absolute."

But the rest does work only partially:

a) The two objects should be floating inside the big frame (the one with the shadow). Basically, this works. (For example, when I use an anchored layer for the frame).

b) The frame itself should be centered (like the top of the page). At the screenshot above, it is too far to the left.

c) The frame itself should adapt its size to the browser window.

d) Ideally (this is just optional, but would be great), the frame will never leave a big blank space at the inside. So when the first object starts floating to the next row, the frame would (ideally) be reduced in size. In the screenshot above, there is a "bad big white space" inside at the right.

I have tried any possible combination (layer on layer, layer on layout grid, etc). Nothing works.

I would really appreciate any help, because this is the layout that I will use on many pages of my website!

Thank you

Malte

User avatar
Pablo
 
Posts: 16864
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Combine Text, Foto and Design in one area

Post by Pablo » Fri Jan 05, 2018 8:15 am

To able to help you I need your project file, so I can see what you have done.

Note that layers are used for 'fixed' layout (absolute positioning)
Layout grids and flexbox container are used for flexible layouts.
You cannot place a fixed layer inside a flexible container (and vise versa).

heynem.

Re: Combine Text, Foto and Design in one area

Post by heynem. » Fri Jan 05, 2018 11:48 am

Here is the link

https://drive.google.com/open?id=1hUMIh ... smBBbbl8Dt

Everything INSIDE the photo area should be fixed (the logo that is already there, and text that I will add later).
The photo area itself should be floating (so that on a narrow creen, the two photo areas are not next to each other, but one above the other).
The frame (with the shadow) should adjust its size so that the photo areas fit in perfectly (in the end I will have 50 of these photos in this frame, so the frame should always adjust in size).


Thank you very much in advance!

I am still in the evaluation period, but will buy the program once I can solve this last layout problem.
I would be even willing to pay an extra if this can be solved.

User avatar
Pablo
 
Posts: 16864
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Combine Text, Foto and Design in one area

Post by Pablo » Fri Jan 05, 2018 12:17 pm

I do not think this is is the right approach.
If you want to create a floating layout then you should use layout grids.
Layers were designed for fixed layout.

Note that you did not include the images so I still cannot see what you layout looks like.

heynem.

Re: Combine Text, Foto and Design in one area

Post by heynem. » Fri Jan 05, 2018 12:49 pm

Thank you!

When I use a layout grid: How I can achieve that the three elements placed on the photo stay in their place?
So the whole object (photo, plus superimposed logo, plus superimposed text) should be floating, whereas on the inside, the three objects should stay fixed.

How is that possible within a layout grid? Can I place an object (with fixed layout inside) in a layout grid?
I have just tried a bit more, and I did not find a solution myself. So any help would be appreciated.
I would also like to keep that cool look of the blurred shadow. That seems to be not possible in a layout grid (but in all the versions of layers)


This should be the right link (including a folder with the photos)
https://drive.google.com/open?id=1hUMIh ... smBBbbl8Dt

User avatar
Pablo
 
Posts: 16864
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Combine Text, Foto and Design in one area

Post by Pablo » Fri Jan 05, 2018 1:20 pm

So the whole object (photo, plus superimposed logo, plus superimposed text) should be floating, whereas on the inside, the three objects should stay fixed.
That is not possible, because then the layout is no longer flexible and items would overlap when the grid column gets to small.
If you wish to keep text and an image together then you can also try the article/blog object:
http://wysiwygwebbuilder.com/blog.html

heynem.

Re: Combine Text, Foto and Design in one area

Post by heynem. » Fri Jan 05, 2018 1:46 pm

Thank you again for the quick answer.

What a pity, that this does not work. I was very close to it with the two layers combined. I set the inner layer to "position children fixed" and the outer layer to "position children floating".

Is this due to limitations in the CSS / HTML, or is there a way to implement this in a future update of your program?
I would be even willing to pay extra for that addition (could be good for other users as well, if it is doable at all in websites).

The blogging feature is great, and I can use it in other parts of my page. But on the front page, I would like to have this exact design (text and logo superimposed on the foto). And, also important: The text should be searchable (so i cannot produce the whole object first as a photo). I could go with fixed layout and breakpoints, maybe? (On any screen size though, the elements should be centered).

Would be really great if there is any solution for this.

Your program is by far the best I have found! I have tried many others before, and they all had too many limitations (Wordpress, Webflow, Resposive Site Designer, Adobe, etc etc)

All the best

Malte

heynem.

Re: Combine Text, Foto and Design in one area

Post by heynem. » Fri Jan 05, 2018 1:57 pm

P.S.: There might be a way to implement this. I have done the first design steps with "Webflow", until I abandoned the program, because it had too many things that were preset and could not be changed. That was like walking through a landscape with half the areas fenced off...

But apart from that, Webflow seems to have produced a page with floating / fixed combined. I will post the screenshot of the project. I will also try to post the code. (I have no clue at all... I have just done some html years ago).

heynem.

Re: Combine Text, Foto and Design in one area

Post by heynem. » Fri Jan 05, 2018 2:07 pm

here is the screenshot

https://s14.postimg.org/wn7ufz6kh/Neue_Bitmap.png

The four objects in the center (photos combined with text) are fixed on the inside (text and logo always stay inside and keep their position relative to the foto), but floating on the outside: If the screen size is narrowed down, the four objects are first squeezed. If it gets even narrower, the four objects switch into a single column.

User avatar
Pablo
 
Posts: 16864
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Combine Text, Foto and Design in one area

Post by Pablo » Fri Jan 05, 2018 2:08 pm

Is this due to limitations in the CSS / HTML
No, it is logic. Objects or containers are either fixed or flexible.
You can combine fixed and floating but not in the same object.
The four objects in the center (photos combined with text) are fixed on the inside (text and logo always stay inside and keep their position relative to the foto).
Are you sure the text/image are fixed? Maybe they are flexible but limited by max-width, so they appear fixed?

pajadt
 
 
Posts: 475
Joined: Sat Mar 16, 2013 11:23 am
Location: Europe
Contact:

Re: Combine Text, Foto and Design in one area

Post by pajadt » Fri Jan 05, 2018 2:32 pm

HI Malte,
Give Your E-mail or Facebook. i send you example doing in grid, that what is you need
Best Regards

heynem.

Re: Combine Text, Foto and Design in one area

Post by heynem. » Fri Jan 05, 2018 2:47 pm

thank you!

You can mail to

heynen (at-sign.) heynen (dot.) tv

Looking forward to receiving your idea.

heynem.

Re: Combine Text, Foto and Design in one area

Post by heynem. » Fri Jan 05, 2018 3:02 pm

Dear Pablo,

because I have very limited HTML knowledge, I need a longer explanation. So could you explain further:

a) What means "either fixed or floating"? In the layer setting, I can define that the layers childrens are fixed (so inside the layer, everything would stay at its place). This is what I have done. At the same time, I can define that same layer as a floating layer (and also put it into another layer that contains floating elements). So I make these settings, but maybe they do not make sense in the final HTML/CSS?

This would be really the thing I need: Fixed layout inside one small area (only fixed relative to the area's borders). But the whole area is floating (relative to the whole page).

b) Yes, that could be the explanation: That Webflow did not make the objects inside the area really fixed. When I have a narrower screen size, the area first gets squeezed a bit (it also gets narrower. At the same time, the text will change its line breaks. But text and logo will still remain at the same position relative to the photo that they are mounted upon). If this is the trick that Webflow has used: How can I do this in Web Builder?

Thank you

Malte

Post Reply

Who is online

Users browsing this forum: No registered users and 12 guests