Archived topic
Adding svg shape to bottom of header and top of footer
5 replies · Started by Jochem on November 3, 2022
I am rebuilding this website (https://borstvoedingmiddennederland.nl/) which is currently build with elementor to a faster website with generatepress (preferably even without extra blocks). We are slowly getting there (https://staging-borstvoedingmiddennederland.kinsta.cloud/) but I got stuck on adding a svg shape (wave) to the bottom of the header and top of the footer. Should this shape be added to the header element or should it be added as seperate css in another way?
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
<path class="elementor-shape-fill" d="M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7
c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4
c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z"></path>
</svg> Hi there,
if you used a Block Element instead of the Header Element, then you could build it with GenerateBlocks, its Container Block has some shapes you can add ( and in GB Pro you can add your own shapes )
https://docs.generatepress.com/article/block-element-page-hero/
Does that work for you?
That might work for the header, does that also work with the sticky nav? Like I have on the examples I send?
And how should that work for the footer with widget areas?
That might work for the header, does that also work with the sticky nav?
I don't see a shape attached to the sticky nav on the example site.
No, it won't work with sticky navigation as your sticky navigation is not created using blocks.
For the footer, with GP premium and Generateblocks plugin, you should be able to build custom footer using blocks:
https://docs.generatepress.com/article/block-element-site-footer/
I find it hard to build the same header and footer with generateblocks as I have now on https://borstvoedingmiddennederland.nl/. I am already thinking about creating a child theme and build this directly in the theme to avoid using generateblocks, as the options for a shape are limited in the free version and I don't need it on other blocks in the website. Would be great if the premium plugin had more options to add styling to the header and footer because these are used on every page.
You can do this instead:
1. copy your SVG code.
2. edit the Header Element, and after the H1 title paste in the SVG Code.
3. set the bottom padding of the header element to a minimum height to match your SVGs height.
4. Save those changes
5. Now add this CSS to size, position, rotate, scale and set the fill color of the SVG:
.page-hero {
position: relative;
}
.page-hero svg {
position: absolute;
letf: 0;
right: 0;
bottom: 0;
transform: rotateX(180deg);
fill: #fff;
height: 100px;
width: 100%;
}Adjust the fill color and height to what you require.
