-
Posts
-
Hello Support,
I have 2 questions again, but for the sake of simplicity I’ll make 2 posts out of them.
As in the picture, I have always built such a swing arm under the header images. I did this with overlaying images. Is it also possible to realise this with SVG dividers or something similar? I had already had a rough look in the forum, but didn’t find anything really suitable. I’m not really interested in the blue curve, just that it looks something like this.
Is that possible, or is there a way to realise this more easily? It’s a bit unsightly with the superimposed images, also with regard to the mobile display. Perhaps I have also created something wrong.
The website is: http://wordpress-202405060859.p120044.webspaceconfig.de/ or bewegungshelden-werne.de
Thank you very much … and keep up the great theme you’re building!
MatthiasHey klick-design-rbh,
Thank you for the inquiry.
The closest option would be the bottom Curve Asymmetrical divider. Enable the “Flip” and “Invert” options, then set the divider height to around 200px.
Another option is to add another color section below the first section, apply the curved image with a transparent background as the color section’s background, then use css to pull the color section upwards until it covers the first section.
Best regards,
IsmaelIf you are familiar with creating svg files – you can have your own custom svg dividers as well.
see your svg file here in action: https://webers-testseite.de/reha-bad-hamm-2/Many of the Enfold svg files are designed so that you can set a height and the width adapts to the viewport.
This property within the svg is responsible for it:
preserveAspectRatio="none"But this is not good for other svg. See the example page with the silhouette of Bonn at the bottom – that is a svg divider too.
On your svg too i would say it is better to preserve the aspect ratio by:
xml:space="preserve" preserveAspectRatio="xMidYMin meet"(see svg code on that page)
For your svg, this is a special case too. These standard dividers work with paths that are not explicitly filled and are displayed as black in svg by default. The black is then coloured by the setting in the element itself. This is usually the colour that takes over the connection to the other section. So it is not transparent. – You now have a colour that is actually fixed (with the blue). Look at the source code on the example page, and the svg as I created it.
Just copy out the svg code, then you have your svg.
PS: becaue i gave a custom class to the bow itself – you can fill it by external css code ( as you can see on the example page as bottom divider)
How can I now integrate a custom svg divider:
The default storage location for Enfold is: /wp-content/uploads/dynamic_avia/avia_custom_shapes/ if you put your custom files there (via ftp) then they would at least be in the right place. ( if that folder isn’t present – create it )
here is the code as you now tell Enfold that there is a custom divider:
( put this to your child-theme functions.php)function custom_avf_custom_svg_shapes( array $custom_shapes ) { $custom_shapes = array( 'reha-bad-hamm' => array( 'key' => 'reha-bad-hamm', 'title' => __( 'Reha Bad Hamm Trenner', 'avia_framework' ), 'has_width' => true, 'has_flip' => true, 'filename' => 'reha-bad-hamm' ), ); return $custom_shapes; } add_filter( 'avf_custom_svg_shapes', 'custom_avf_custom_svg_shapes', 10, 1 );Hello Guenni007,
that’s exactly what I had in mind. I will try to implement it like this. (PS: Creating SVGs is no problem for me)
Thank you very much – once again!
Matthiasby the way: here it is that page with the other svg inside option: preserveAspectRatio=”none”
shrink your screen-width to see the difference.
https://webers-testseite.de/rbh/PS: On the pages where I don’t have the media library sorted by month, I sometimes move this location of the custom svg divider to the uploads folder. Then I can upload them via the media library:
function my_svg_path(){ $path = get_site_url().'/wp-content/uploads'; return $path; } add_filter( 'avf_custom_svg_shapes_files_directory', 'my_svg_path', 10, 1 );again btw:
sometimes it is neccessary to have such a divider over a slider – because there is no option on having dividers on fullwidth-sliders – you can use the top-divider option of the next section and transform it over the slider:
- You must be logged in to reply to this topic.