-
ben2944
Hello,
Is there a way to have a custom shape divider ? In the example provided, the site was made with Elementor. I would like to have this same cool shape divider (the one named “landscape” with the hill, some people and a vehicle)
-
Hi there,
yes, with GenerateBlocks Pro you can add your own SVG Shapes in Dashboard > GenerateBlocks -> Asset Library.
You will need an SVG for the shape eg.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4080 400" preserveAspectRatio="none"> <g> <path d="M1949.3,247.3c0.5,1.3,1.8,2.2,3.1,2.2l15.3-3.1c1.3-0.5,2.2-1.8,2.2-3.1s-1.8-2.6-3.1-2.2l-15.3,3.1 C1950.1,244.7,1949.3,246,1949.3,247.3z"></path> <path d="M1961,260.4c0.4,2.2,2.6,3.5,4.8,3.1l22.7-4.8c2.2-0.4,3.5-2.6,3.1-4.8c-0.4-2.2-2.6-3.5-4.8-3.1l-22.7,4.8 C1961.9,256,1960.6,258.2,1961,260.4z"></path> <path d="M1976.3,271.3c0.4,2.2,2.6,3.5,4.8,3.1l5.7-1.3c2.2-0.4,3.5-2.6,3.1-4.8c-0.4-1.8-2.6-3.5-4.8-3.1l-5.7,1.3 C1977.2,266.9,1975.9,269.1,1976.3,271.3z"></path> <circle cx="2421.2" cy="266.1" r="10.9"></circle> <path d="M4080,29.3V0H2798.6h-182.7h-406.6H0v20.1c-0.6,39.5,14.3,123.6,146,132.5c-0.2,0.6-0.3,1.2-0.3,1.8V188l-1.5-1.4 c-0.8-0.7-2-1.1-3.1-1.1c-1.3,0-2.6,0.5-3.4,1.5c-1.7,1.9-1.7,5,0.4,6.7l35.5,32.4c1.9,1.7,4.6,1.7,6.5,0l35.1-32.4 c1.9-1.7,2.1-4.8,0.2-6.7c-1.7-1.9-4.8-2.1-6.7-0.2l-2.1,1.9v-34.3c0.1-1-0.1-1.9-0.4-2.7c25.9-2.2,55-6.6,87.8-13.8 c120.2-26.4,209.5-38.1,305.6-39l0.7,25.2c0,0.5-0.4,0.9-0.9,1c-7.9,1.4-13.1,8.5-14.6,17.1c-4.7,24.8,12,103.6,17.3,103.6 s22.6-67.9,17.3-103.6c-1.3-8.6-6.6-15.8-14.6-17.1c-0.5-0.1-0.9-0.5-0.9-1l0.7-25.2c17.2-0.1,34.7,0.1,52.6,0.7l0.7,24.7 c0,0.5-0.3,0.9-0.8,1c-6.5,1.1-11.1,7-11.9,13.8c-3.1,25.6,8.6,84.1,13.9,84.1c5.3,0,17.5-62.1,13.9-84.1 c-1.3-6.9-5.5-12.7-11.9-13.8c-0.5-0.1-0.8-0.5-0.8-1l0.7-24.6c158,5.2,352.5,34.7,729.3,72.6c70.7,7.1,136.3,10.8,197.2,11.7v21.5 c-19.1,3.3-32.7,25.5-32.7,76.8c0,55.8,26.2,107.3,38,107.3s38-51.5,38-107.3c0-51.3-13.6-73.5-32.7-76.8v-21.4 c26.4,0.2,52-0.1,76.6-0.8c2.8,0.2,5.7,0.3,8.5,0.4v18.5c-11.5,1.9-19.6,15.1-19.6,46c0,33.6,15.7,64.6,22.7,64.6 s22.7-31,22.7-64.6c0-30.5-7.9-43.7-19.2-45.9v-18.4c44.5,1.3,93.8-2,148.3-11.6c2.4-0.4,4.7-0.8,7-1.2 c-10.1,5.5-16.6,16.3-16.2,27.8c0.2,13.5,8.3,24.1,19.1,28.8c0.7,3.2,1.4,6.5,1.8,8.6l-5.2,1l0.9,4.8l7.8-1.6l13.6,31.6l-4.4,0.9 v0.9c0.9,4.4,4.8,7,9.2,5.7l48.4-11.3c4-0.9,6.1-4.4,5.7-8.3l-4.8,1l4.1-38l16.1-3.3l3.2,15.4l-1.6,0.3l0.6,3.5l9-1.9l-0.6-3.5 l-1.9,0.4l-3.2-15.4l21.8-4.4c5.6-1.3,8.3-7.9,5.2-13.1l-10.4-21.1c0.7-2.1,1.1-4.2,1.2-6.4c0.3-10.1-5.9-18.3-14.2-21.7 c284.8-54.1,346.7-79.5,518.1-14c0.5,0.2,1.1,0.4,1.7,0.6v19.3c-11.3,2.1-19.2,15.4-19.2,45.9c-0.4,33.6,15.7,64.6,22.7,64.6 s22.7-31,22.7-64.6c0-30.9-8.1-44.1-19.6-46v-16.9c141.9,48.2,172.6-93.9,390.4-40.8c30.8,7.5,61.9,14.1,93,20.2l159.1,39.2 c20.1,3.9,42.2,0.6,64.6-3.5c6.2,12.2,18,41.4,35.2,87.7l0.3-0.1c0,0.1,0,0.1,0,0.1c9.6-2.2,19.8-3,30.6-2.3 c10.8,0.7,24.8,2.4,42,5.1v0.2l0.8-0.9c20.9-24.3,57.7-53,79.7-67.8c0.4,0.1,0.8,0.2,1.3,0.3l-15.4,65.5c0.4,0.1,0.2,0.1,0.1,0.1 c-1,0.1-2.1,1.1-2.4,1.8c0,0.2,0.6,0.5,1.6,0.7c0,0,0,0,0.1,0s0,0,0,0l-9.1,38.4l-8.8-1.2l-0.7,2.1l0.6,0.2l-0.6,2.6 c-0.1,0.6,0.2,1.2,0.8,1.3l16.9,4c0.6,0.1,1.2-0.2,1.3-0.8l0.5-2.3l0.9,0.2l0.7-1.2l-3.3-3.7l-6.9-0.9l0.1-0.1l9-38.1 c0.6,0.1,1.3,0.1,1.6,0c1.2,0.2,2.1,0.3,2.3,0.3c0.1,0,0.1,0,0.1,0c5.8,2.2,18.6,14.6,22.4,27.3c0,0.2,0.1,0.3,0.1,0.4 s0.1,0.1,0.1,0.1c0.8,0.7,4.3,1.4,7.1,1.7c1.8,1.7,2.3,4.3,2.4,5.5c-1.6-1-3.5-1-3.9-0.7c-0.6,0.5,0.2,5.2,0.6,5.4c0,0,0.1,0,0.2,0 c0.2,1.3,0.5,2.6,0.9,3.9c-0.2,0-0.3,0-0.3,0c-0.4-0.1-0.9,0.7-0.9,0.7l0.1,0.1c-0.7,0.4-1.4,1.1-0.7,1.9c0.8,1,1.5,0.1,2.1,0 c0.2-0.1,0.5-0.1,0.7-0.1c0.2,0.3,0.3,0.6,0.5,0.8c-0.2,0.3-0.3,0.6-0.2,0.9c0.5,1.5,6.3,2,8-0.7c0,0,0,0.1,0.1,0.1 c0.3,0.1,0.7,0.3,1,0.2c0.4,0.5,1.4,1.9,1.7,1.6c0.3-0.3,1.3-2.1,0.9-2.7c-0.4-0.5-1.9-0.4-2.3-0.3c-0.2-0.2-0.4-0.3-0.7-0.3h-0.1 v-0.1c5.3-1.4,10.5-5.4,12.3-10.3c0,0.4,0,0.7,0,1.1c-0.1,1.2,2.8-5.6,2.8-5.6l-2.3-7.4l-7.9-7.2l-5-0.5c-1.3-8.2-2-17.3-1.9-19.6 c0-0.1-0.1-0.1-0.2-0.2c1.6-16.3,6.7-46.5,9.3-60.1c7.7,0.6,16.1,1.1,25.4,1.4c0.1,0.2,0.2,0.5,0.5,0.6l2.8,1.5l5.6,27.4 c0,0,1.4,16.7,3.9,21.8c0,0,0,1.5-0.1,3.5c-0.2-0.2-0.5-0.5-0.9-0.7c-0.1,0-0.2,0-0.3,0l-0.9,0.5l-0.6,0.8l-0.2-0.3l-9.6,8.3 c-1,0.9-1.2,2.5-0.6,3.7l6.8,12c0.7,1.3,2.1,2.1,3.6,2.1h0.6c0.1,0.2,0.1,0.3,0.1,0.4l2,10.7c0.3,3.6,3,6.2,6.2,6.2s6-2.6,6.2-6.2 l1.9-10.5c0.1-0.6,0.1-1.3,0.1-1.9c1.8-0.6,2.8-2.3,2.7-4.1c-0.3-4.1-0.8-10.8-1.5-12.5c-0.9-2.5-0.9-2.5-0.9-2.5s0.9-4.3,2.1-6.5 c0,0,2.5-6,1.6-9.8c-0.8-3.8-5.2-42.4-5.2-42.4v-1.8c20.2,0,43.7-0.7,71.6-2.2c173-9.3,302.3-41.1,394.7-75.7l0.5,17.3 c0,0.5-0.4,0.9-0.9,1c-7.9,1.4-13.1,8.5-14.6,17.1c-4.7,24.8,12,103.6,17.3,103.6s22.6-67.9,17.3-103.6 c-1.3-8.6-6.6-15.8-14.6-17.1c-0.5-0.1-0.9-0.5-0.9-1l0.6-19C4002.2,78.4,4050.4,50.3,4080,29.3z M3448.4,240.7 c-0.2,2.8-0.6,6.2-1.3,8.5c-1.4,4.8-2.5,9.8-2.5,9.8l-5.5-8.4l7.7-9l-0.1-0.1l0.8-0.2L3448.4,240.7z M1952.8,206.7l9.6-1.7 c0.1,0,0.3,0,0.4,0c1,0,1.9,0.8,2.1,1.8c0.2,1.2-0.5,2.3-1.7,2.5l-9.6,1.7c-1.2,0.2-2.3-0.5-2.5-1.7S1951.7,207,1952.8,206.7z M186.5,152.8v22.6c0,1.5-1.2,2.7-2.7,2.7h-14.9c-1.5,0-2.7-1.2-2.7-2.7v-22.2c6.5,0,13.3-0.1,20.4-0.4H186.5z M1857.1,239.7 l10.7-2.1c2-0.4,4-1,5.9-1.7l-2,12.6c0,0.9,0.8,1.8,1.7,2.2c1.3,0.5,2.2-0.4,2.6-1.7l2.9-15.5c1.5-0.8,3-1.7,4.4-2.7 c1.6,4.4,3.7,10.2,5,12.8c3.5,6.6,8.7,7,8.7,7l0,0l2.1,2.7c-0.3,0.2-2.5,2.3-1.7,5.6c0.9,5.3,7.9,3.1,7.9,3.1 c2.6,0.8,5.2-1.4,3.9-3.1c-0.2-0.4-0.8-0.5-1.5-0.5c0.2-0.4,0.3-1,0.2-1.6c-0.1-0.8-0.3-1.8-0.5-2.8l0.5-1.1c0,0,0-0.4-0.4-0.4l0,0 l-0.4-1.3l-0.5,0.1c-0.5-0.9-1-1.6-1.7-1.4c-0.8,0.2-1.4,0.5-1.9,0.7l-0.1-0.1c0.1,0,0.2-0.1,0.2-0.1l-0.9-1.3l-0.1,0.2l-2.1-3.4 c1-2.2,0-7.6-1.3-12.6l8.7-1.7l-0.1-1.6l1.4-0.1c0.4,0.3,0.8,0.4,1.3,0.4c1.4,0,2.5-1.1,2.6-2.4l5.7,3.3c0.4,0.5,0.8,0,1.3-0.4 s0-0.9-0.4-1.3l-3.9-2.2l3.2-5.5l3.3,2h0.1l-4,37.5c0,0.1-0.1,0.3-0.1,0.4l-47.1,9.7c-0.2-0.2-0.3-0.4-0.4-0.6L1857.1,239.7z M1905.7,214l11.3,6.9l-3.3,5.5l-3.8-2.1c-0.5,0-0.9,0-0.9,0c-0.4,0-0.4,0-0.4,0.4c-0.3,0.3-0.2,0.5,0,0.8c-0.1,0-0.2,0.1-0.3,0.2 c0-0.1-0.1-0.1-0.1-0.2c0,0.1,0,0.1,0,0.2c-0.3,0.2-0.5,0.4-0.6,0.7l-0.6,0.1l-0.1-1.5l-10.1,1.6c-0.1-0.2-0.1-0.4-0.2-0.6l5.1-1 C1906.9,224.2,1908.6,217.8,1905.7,214z M1907.4,252.5l-0.5,0.1l0,0C1907.2,252.6,1907.4,252.5,1907.4,252.5z M1872.9,198.4 c0,4.8-3,9.6-7.4,11.3c-7.8,3.5-17-2.6-17-11.3c0-4.8,3-9.6,7.4-11.3C1863.8,183.6,1872.9,189.7,1872.9,198.4z M1926,156.4 c-4.2,4.2-6.9,10-7.2,15.8c-0.1,2.6,0.2,5,0.9,7.2l-30.4,6.3c-4.4-9.8-13.4-16.5-23.6-18.2C1886.8,163.7,1906.9,160,1926,156.4z M1950.6,173.5c0,3.1-1.7,6.2-5.2,7.9c-6.6,2.6-13.5-1.7-13.1-8.7c0.4-3.5,2.1-6.6,5.2-7.9C1944,162.2,1951,166.6,1950.6,173.5z M3278,150.3c0.6,2.5,1.2,5.3,1.9,8.4c-2.9-1.4-5.8-3-8.8-4.7c-32.7-5.1-58.5,0.9-77.9,8.5c4.5,11.9,9.1,23.7,13.7,35.6 c4.2,10.8,8.1,24.4,11.7,40.6c-16.2-43.3-27.3-71-33.4-82.9c26.1-4.9,52.4-10.8,76-8C3267.3,148.5,3272.9,149.4,3278,150.3z M3371.3,177.7c-20.8,14.1-54.8,40-73.4,61c14.3-19.2,38.2-44.1,55.4-59.8c-6.8-0.8-15.6-1.5-29.7-8.9l-6.6,11.1 c-6.3,11.2-10.7,20.2-13.2,26.7c-2.8,7.6-6.5,19.7-10.8,36.3c0-0.5-0.1-0.9-0.1-1.3c4.9-33.3,13.3-61.3,21.1-77.1 c-9.5-1.1-20.8-7.8-32.9-6.4c-0.7-3.3-1.3-6.2-2-8.8C3319.7,157.8,3334.4,169.9,3371.3,177.7z M3398.9,275.7c1.4-0.6,3-1.1,4.3-1.4 c4,2.2,5.8,4.6,6.2,7c-0.2-0.3-4.3,2.9-7.7,5.7c-1.1-1.6-2.4-2.7-3.2-3.1c0-0.1,0-0.1,0,0C3397.5,280.9,3397.3,278.1,3398.9,275.7z M3385.1,180.1c-0.3,7.3,0.1,55.1,1.9,63.2c0,0.1,0.1,0.1,0.3,0.2c-0.5,1.5-1,6.4-1.3,11.8l-0.3-1l-5.3-6.3l-16.3-3.5 c0,0-0.6,0.4-1.1,0.8c-0.8-0.5-2-1-3-1.3l15.5-65.6C3378.6,179,3381.8,179.6,3385.1,180.1z M3407.9,182.8 c-3.2,7.5-8.9,22.1-13.6,36c-3.2-15.5-6.6-33.4-7.6-38.5C3393.1,181.3,3400.2,182.1,3407.9,182.8z M3459.3,186.5l-2.4,42.3 l-15.6-42.3v-2c4.7,0.1,9.6,0.2,14.8,0.2c0.1,0.1,0.2,0.2,0.3,0.3L3459.3,186.5z"></path> <circle cx="2300.8" cy="179.3" r="15.3"></circle> <circle cx="1769.9" cy="321.5" r="10.9"></circle> <circle cx="1525.1" cy="337.7" r="15.3"></circle> </g> </svg>
-
ben2944
Wow ! Thanks a lot David, great feature ! How did you find the SVG’s code ? I miss it in the console…
If I want the form at the bottom of a section, I’ve just have to add, for example, “transform=”rotate(180, 2040, 200)” into the <g> tag, that’s it ?
And another question : is it possible to add a mask on an image with the Asset library too ? I’ve attached an example for showing you the result I would like
-
I inspected that site and searched for the SVG in the elements panel then just copied the HTML.
If I want the form at the bottom of a section,
What form ?
is it possible to add a mask on an image with the Asset library
No not at this time.
We will be adding masks and clipping options soon. -
ben2944
What form ?
Sorry, I mean the shape, not the form ^^;
Thanks for the information about the mask, it will be a great feature !
And last question : in the example provided, I would like the same effect when hover the cards.
I suceed to have the gradient hover effect but my problem is the transition. I can’t suceed to have a smooth transition. It seems I choose the wrong target for the transition but I can’t find the good one. Do I set a custom selector ?
-
Make sure the animation is added to the element, not the hover state element.
Can I see your site with the section?
-
ben2944
Hi Ying, yes I’ve provided the link. These are the cards after the title “Les derniers articles sur l’éco au quotidien”. When you hover them, there is the background image effect which is ok but the “green color” appears not smoothly. I don’t find the right setting for having both “smoothy”
-
Hi there,
you can’t easily transition between one gradient and another.
You may want to consider use the same gradient for both normal and hover states
And then use Opacity to show hide the gradient element. -
ben2944
Hi David,
Thanks for the information, I will try this. But I have a little problem : I’m using Imagify and so, there are <picture> tags which are used
For avoiding broken design, usually I’m using this css
`picture {
display: flex;
}picture img {
object-fit: cover;
}But for those cards, it does not work . Normally, the BG’s image is covererd and there is a smooth effect for scaling the image when hovering.
What could be the problem ?
-
I think the issue is related to WP Rocket’s lazy loading function, if you add
/?nowprocket
at the end of the URL, the issue is gone.So can you try adding
no-lazy
class to the containers to test? -
ben2944
Hi Ying,
Thanks for the advice, it works !
-
Glad to hear that 🙂
- You must be logged in to reply to this topic.