-
Posts
-
on many sites I see that images are being cut-out by a custom shape (a mask I belief), such as:
how do i achieve this with Enfold?also, how would I achieve a similar content block like this in Enfold? (background color, title, 2 colums left with title and text… column right with image? I tried several times but honestly I have no idea)
first – there is an enfold option to use some predefined forms on image element : Advanced Tab – Mask Overlay:
if you look what enfold does in your DOM :
so there is a mask-image definition and a svg file is used on that.
you see the path of those predefined svg files – so it might be possible to have custom mask-images too. Maybe there is a way via filter (f.e. avf_mask_overlay_images) to define custom images – similar to custom dividers.
I check that – or maybe a mod/dev can tell us how to have custom mask-images.or you can use a hidden clip-path on that page to have a similar result – this is than manually done by quick css:
See f.e.: https://webers-testseite.de/clippy/
The text can only be wrapped if the image and text are in the same container.
here you see how to use shape-outside: https://webers-testseite.de/clippy-2/
@guenni007 , many thanks, I found the website https://css-tricks.com/almanac/properties/c/clip-path/ and checked your website to find the right css to use this in enfold. works like a charm (clip paths). so that question is solved.
but, then there is the other question of how to realize a similar page set-up as the image in my first post above. What combination of the advanced page builder should i use to realize this? content section with background image and css path applied to it, whilst a background colour remains?
Then I’m struggling, as there is a title that covers half of the page, with two columns under it with two titles and text? I’m a bit stuck here.I tried applying css to a column with a background image, but then it doesn’t work. Is there a way to make this work? And how do I set the column to show the complete picture that I set as background?
https://fysiobreda.thedigitalmanager.nl/contact/
Ruben123! password to see the front endit’s the part right below the header with ‘Doorzoek de site Met deze handige zoekfunctie’. Image is 1000x1000px, but the column only takes up the height that it needs to show what is inside the column.
on image elements – this selector avia-image-container-inner is best for it but if you try to have it on columns – the selector might be better the flex_column itself:
.flex_column.polygonright { -webkit-clip-path: polygon(0% 0%,68% 0%,100% 50%,68% 100%,0% 100%); clip-path: polygon(0% 0%,68% 0%,100% 50%,68% 100%,0% 100%); }ps: do not forget to use both clip-path and webkit-clip-path
ps : you do not need to preserve the clip-path when you switch to responsive view:
@media only screen and (max-width:989px) { .polygonright .avia-image-container-inner { -webkit-clip-path: polygon(100% 50%, 100% 100%, 0% 100%, 0% 50%, 50% 0%); clip-path: polygon(100% 50%, 100% 100%, 0% 100%, 0% 50%, 50% 0%); } .polygonleft .avia-image-container-inner { -webkit-clip-path: polygon(100% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 0%); clip-path: polygon(100% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 0%); } }you must of course adapt this to the responsive behavior, e.g. if you change the order – i.e. have all images first and then the texts. In this case, all “arrows” must point downwards.
- You must be logged in to reply to this topic.