Forum Replies Created
-
Posts
-
your color-section that you like to shift. Give it a min-height that concerns to your svg divider – in your case 230px.
What are your settings on the divider itself:
you can use a pseudo-container on that div.avia-divider-svg – have a look in your DOM what is the specific class for your divider.
On my testpage it is: avia-divider-svg-reha-bad-hammbecause the bottom dividers are transformed – we had to rotate back your “superman”
https://webers-testseite.de/rbh-bogen/
PS: there is a transparent background-color on the pseudo-container after – that you can see where it is positioned. You had to remove that declaration.
Edit: Sorry did not read carefully your post.
You try to have a divider on grid-row – lets see … brainstorming …if you use the attachment ID of that image you do not need to set a path ; and as far as I know, neither the key nor the name needs to be specified then in the snippet.
Upload your image – switch to list view – note the ID – use it in the snippet.
Not only is it better for the positioning of the button, but if you want to limit the length of the excerpt, for example, the button will not disappear.
i remove now that child-theme section part in my description – seems to work even with sliders and html5 selfhosted videos by that jQuery snippet only.
By the way, these downloaded files are located in:
/wp-content/uploads/dynamic_avia/avia_demo_files/so maybe the docu had to be corrected to this new path too. (with dynamic_avia subfolder)
your construction path is then:
/wp-content/uploads/dynamic_avia/avia_demo_files/constuction/ // and not /wp-content/uploads/avia_demo_files/constuction/On inserting this snippet to your child-theme functions.php:
add_theme_support( 'avia_demo_store_downloaded_files' );the Enfold Import Page will not show an install Button – but a download button.
After the Download – there will be a caption under the downloaded demos and on hovering again they got now a “click to import” button.
First, I would like to ask whether you can see these demos in the Enfold options and whether you see a download option when hovering over the images (or, if plugins are required for the demo, a note in red); and why you don’t want to go down this way.
I’m surprised that almost 1.5 years have passed since I posted that. A lot of changes have been made to the theme since then. That’s probably why I deleted the child theme’s section.php file at some point. Nevertheless, it still works on the demo page, even without the changes in section.php ?
As Rikard said – hover the image of the demo – then an info will show if you can import or not. Some of the demos need Plugins befor import – but Construction Demo is not that way.
Have you already created pages/posts?
Although Rikard has the jump mark in the link, you sometimes still have to scroll to the relevant places.
Only necessary if you have already made settings; in this case, you must first save your design settings, for example.
As described in the docu.
Export/ Import theme settings.- First, export the theme settings from Enfold > Import/Export tab.
- Import the demo theme of your choice.
- Overwrite the new settings with your old setting by importing back the settings file we saved in step 1.
you like to place a social share button on those pages?
– i can not confirm that the element from enfold : “Social Buttons”
only works on articles – on my test installation it works for pages too.or do you like to link to your social media pages only ?
ok – meine Bespielseite werde ich jetzt nur noch auf eine andere Seite verlegen , und mit einem anderen svg .
Demo Page now on: https://basis.webers-testseite.de/our-clinic/
you can have that with text and inline svg aswell:
add_action('ava_after_body_opening_tag', function() { if (is_page(array(2))){ // add your conditions here , for more pages : separate by commata echo '<div id="fullscreen-overlay"><div class="overlay-content"><svg title="QueensGym" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 340 85"><path fill="#fff" fill-rule="nonzero" d="M229.42 21.558c9.745 0 16.113 5.096 16.893 13.392h-6.068c-.708-4.887-4.594-7.663-10.824-7.663-7.088 0-10.988 4.076-10.988 11.477v7.358c0 7.4 3.9 11.478 10.988 11.478 9.08 0 10.987-4.944 10.987-9.09v-1.547h-9.929V41.54h15.967v6.97c0 9.004-6.683 14.82-17.025 14.82-10.501 0-17.026-6.594-17.026-17.208v-7.358c0-10.612 6.525-17.206 17.026-17.206m0-1.12c-10.79 0-18.144 6.619-18.144 18.326v7.358c0 11.707 7.354 18.327 18.144 18.327 10.972 0 18.144-6.252 18.144-15.939v-8.09H229.36v7.662h9.93v.428c0 5.152-3.065 7.97-9.87 7.97-6.435 0-9.868-3.556-9.868-10.358v-7.358c0-6.804 3.433-10.357 9.869-10.357 5.945 0 9.563 2.697 9.807 7.661h8.277c-.307-9.93-7.725-15.63-18.084-15.63m51.354 12.336-11.61 44.042h-6.04l2.91-9.942.072.297.714-2.989.413-1.404h-.075l.036-.153 7.15-29.851h6.43Zm-22.908 0 7.15 29.851.037.153h-5.866l-7.757-30.004h6.436Zm24.361-1.12h-8.767l-7.354 30.71-7.358-30.71h-8.764l8.336 32.244h7.418l-4.109 14.037h8.4l12.198-46.28Zm36.747.57c6.73 0 11.078 4.01 11.078 10.217v20.337h-5.423V44.036c0-4.193-2.663-6.697-7.126-6.697-4.03 0-6.636 2.63-6.636 6.697v18.742h-5.423V44.036c0-4.193-2.663-6.697-7.127-6.697-4.032 0-6.637 2.63-6.637 6.697v18.742h-5.423V32.774h5.423v2.815l1.806-1.394c1.26-.974 3.027-1.971 6.548-1.971 3.682 0 6.651 1.199 8.588 3.468l.824.964.854-.937c2.148-2.353 4.984-3.495 8.674-3.495m0-1.12c-5.456 0-8.214 2.45-9.5 3.862-2.146-2.516-5.457-3.862-9.44-3.862-3.924 0-5.885 1.163-7.234 2.206v-1.655h-7.663v32.243h7.663V44.036c0-3.248 1.961-5.577 5.517-5.577 4.597 0 6.008 2.76 6.008 5.577v19.862h7.662V44.036c0-3.248 1.96-5.577 5.516-5.577 4.599 0 6.006 2.76 6.006 5.577v19.862h7.663V42.44c0-7.17-5.272-11.337-12.198-11.337M70.866 31.6h7.662v20.963c0 7.174-5.09 11.832-13.608 11.832-8.52 0-13.609-4.658-13.609-11.832V31.6h7.663v20.107c0 4.045 2.39 5.639 5.946 5.639 3.556 0 5.946-1.594 5.946-5.639V31.6Zm11.941 19.433v-6.622c0-8.334 5.948-13.361 14.16-13.361 8.215 0 14.099 5.027 14.099 13.361v6.439h-20.78v.549c0 4.476 2.76 6.255 6.681 6.255 3.311 0 5.946-1.41 6.253-3.864h7.723c-.735 6.683-6.376 10.606-13.976 10.606-8.212 0-14.16-5.028-14.16-13.363m20.78-6.192v-1.165c0-3.309-2.696-5.7-6.62-5.7-3.922 0-6.681 2.084-6.681 5.7v1.165h13.302Zm11.453 6.192v-6.622c0-8.334 5.946-13.361 14.16-13.361s14.098 5.027 14.098 13.361v6.439h-20.781v.549c0 4.476 2.759 6.255 6.683 6.255 3.31 0 5.945-1.41 6.252-3.864h7.725c-.738 6.683-6.376 10.606-13.977 10.606-8.214 0-14.16-5.028-14.16-13.363m20.779-6.192v-1.165c0-3.309-2.696-5.7-6.62-5.7-3.923 0-6.682 2.084-6.682 5.7v1.165h13.302ZM148.007 31.6h7.663v1.655c1.346-1.04 3.618-2.206 7.54-2.206 6.925 0 12.258 4.168 12.258 11.341v21.454h-7.662v-19.86c0-2.82-1.531-5.58-6.129-5.58-3.679 0-6.007 2.33-6.007 5.58v19.86h-7.663V31.6Zm31.007 21.333h7.663c.06 2.084 1.655 4.23 6.008 4.23 4.107 0 5.821-1.535 5.821-2.944 0-1.226-.611-2.328-3.125-2.696l-6.376-.859c-4.78-.613-8.704-3.739-8.704-9.5 0-5.457 5.025-10.115 12.75-10.115 7.848 0 12.873 4.78 12.873 10.728h-7.662c-.063-2.146-2.268-3.679-5.21-3.679-2.82 0-4.72 1.348-4.72 2.882 0 1.225.858 2.267 2.759 2.512l6.741.92c6.743.918 8.827 5.456 8.827 9.44 0 5.393-4.966 10.545-13.974 10.545-7.602 0-13.547-3.986-13.67-11.464M46.283 38.71c0-11.706-7.355-18.327-18.142-18.327-10.79 0-18.146 6.62-18.146 18.328v7.356c0 11.709 7.356 18.328 18.146 18.328 4.351 0 8.214-1.105 11.155-3.187l6.987 5.885 4.245-5.325-6.575-5.71c1.473-2.696 2.33-6.068 2.33-9.99V38.71Zm-8.273 7.357c0 1.654-.185 3.125-.613 4.413l-.01-.007c-.802 2.546-2.363 4.33-4.545 5.327l.018.014c-.129.06-.272.101-.407.154l-.347.134c-.194.066-.392.129-.593.186a8.318 8.318 0 0 1-.503.128c-.177.04-.353.08-.535.114-.225.04-.461.069-.699.098-.142.017-.28.04-.428.053-.392.032-.793.053-1.207.053a14.9 14.9 0 0 1-1.21-.053c-.148-.014-.285-.036-.428-.053a13.43 13.43 0 0 1-.7-.098c-.181-.034-.356-.074-.533-.114a9.86 9.86 0 0 1-1.095-.314l-.35-.134c-.133-.053-.275-.094-.405-.154l.018-.014c-2.182-.996-3.745-2.781-4.546-5.327l-.007.007c-.431-1.288-.614-2.76-.614-4.413v-7.356c0-6.989 3.738-10.358 9.87-10.358 6.128 0 9.869 3.369 9.869 10.358v7.356Z"/></svg><br><h2 style="text-align: center; color: #FFF;">KAMPF- UND KRAFTSPORT IN</h2><h2 style="text-align: center; color: #FFF;">WIESBADEN - EXKLUSIV FÜR FRAUEN</h2></div></div>'; } });the other snippet is the same.
and :
#fullscreen-overlay { position: fixed; display: flex; justify-content: center; /* Zentriert horizontal */ align-items: center; /* Zentriert vertikal */ top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 9999; opacity: 1; transition: opacity 1s ease-in-out, visibility 0s linear 1s; } #fullscreen-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; /* Disable interaction when hidden */ } #top .overlay-content { padding: 20px; } #top .overlay-content h2 { font-size: min(max(24px, calc(1.5rem + (72 - 24) * ((100vw - 320px) / (1500 - 320)))), 72px); min-height: 0vw; line-height: 1.5em; }see my test page : https://basis.webers-testseite.de/
try with your current solution:
#fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; background-image: url('https://houseoffreedom.de/2025/wp-content/uploads/2025/08/QueensGym-Logo-2.svg'); background-repeat: no-repeat; background-size: contain; z-index: 9999; opacity: 1; transition: opacity 1s ease-in-out,visibility 0s linear 1s; background-position: center center; }can you post here please the path to your logo svg file?
it is best to have here your logo and the text part as text and img – and have a black background then.
first : i think the layerslider shortcodes will only work in different places – if you got the standalone layerslider registered.
but even if you got one – i wouldn’t do that on performance reasons.But you can insert f.e. the shortcode for easy slider. You know how to style this easy slider on a page and get the enfold shortcode for that?
Next idea is : use the enfold option to show a page as footer. Then you can style that page with all the enfold elements – and with sliders too.
f.e. – on my test page i do only have set it for front-page and impressum:
add_action('ava_after_body_opening_tag', function() { if (is_page(array(330,1128))){ echo '<div id="fullscreen-overlay"></div>'; } }); function timed_overlay_fullscreen_image(){ if (is_page(array(330,1128))){ ?> <script> document.addEventListener('DOMContentLoaded', function() { setTimeout(function() { var overlay = document.getElementById('fullscreen-overlay'); if (overlay) { overlay.classList.add('hidden'); } }, 5000); // 5000 milliseconds = 5 seconds }); </script> <?php } } add_action('wp_footer', 'timed_overlay_fullscreen_image');btw: if you like you can have page-title or different text included to that hook
replace f.e. to :
echo '<div id="fullscreen-overlay"><h1>'.get_the_title().'</h1></div>';see example page from above with get_the_title (and only 3 seconds)
#fullscreen-overlay { position: fixed; display: flex; justify-content: center; align-items: center; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; /* Example: black background */ background-image: url(/wp-content/uploads/2016/07/corporate-buildings-m.jpg); background-repeat: no-repeat; background-size: cover; z-index: 9999; opacity: 1; transition: opacity 1s ease-in-out, visibility 0s linear 1s; } #fullscreen-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; } #fullscreen-overlay h1 { font-size: 4em; color: #FFF; margin: 0; padding: 20px; text-shadow: 2px 3px 5px #000; }try inside your child-theme functions.php:
// Inject the HTML overlay into the body add_action('ava_after_body_opening_tag', function() { echo '<div id="fullscreen-overlay"></div>'; }); function timed_overlay_fullscreen_image(){ ?> <script> document.addEventListener('DOMContentLoaded', function() { setTimeout(function() { var overlay = document.getElementById('fullscreen-overlay'); if (overlay) { overlay.classList.add('hidden'); } }, 5000); // 5000 milliseconds = 5 seconds }); </script> <?php } add_action('wp_footer', 'timed_overlay_fullscreen_image');and in quick css:
#fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; background-image: url(/wp-content/uploads/2016/07/corporate-buildings-m.jpg); background-repeat: no-repeat; background-size: cover; z-index: 9999; opacity: 1; transition: opacity 1s ease-in-out, visibility 0s linear 1s; } #fullscreen-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; /* Disable interaction when hidden */ }see: https://basis.webers-testseite.de/
if you just want to have that on your front page – than we had to adjust those snippets.
what kind of image is it – like in your example – or could it be set to cover (but then it is maybe cropped) or should it be set to background-size : contain – with background-color around ?
Admittedly, this is a very specific replacement for the usual \e869 icon. But that is probably what is meant by a CSS (not CMS) solution. For a simpler replacement, \e80e does not look quite as complicated.
https://webers-testseite.de/popup-gallery/
but i think now these icons are svg ones – so the simple method to replace the font-icon by just doing:
#top .image-overlay .image-overlay-inside::before { content: "\E80E" !important; font-family: entypo-fontello; font-size: 42px; font-weight: 400; }you can use f.e. the filter: avf_logo_final_output
using the settings on bloginfo and the page-titlefunction use_text_logo_only($logo){ $link = apply_filters( 'avf_logo_link', home_url( '/' ) ); $logo_tag = "h1"; $logo_heading = "Your Text for Logo"; $alt = get_bloginfo( 'name' ); $title = get_bloginfo( 'name' ); $page_title = get_the_title(); if(is_front_page()){ $logo = '<a class="logo text-logo" href="'.$link.'" alt="'.$alt.'" title="'.$title.'"><'.$logo_tag.'>' .$logo_heading.'</'.$logo_tag.'></a>'; } else{ $logo = '<a class="logo text-logo" href="'.$link.'" alt="'.$alt.'" title="'.$page_title.'"><'.$logo_tag.'>' .$logo_heading.'<span class="page-title"> - '.$page_title.'</span></'.$logo_tag.'></a>'; } return $logo; } add_filter('avf_logo_final_output','use_text_logo_only');you see that here are some conditionals
here the front-page shows only the bloginfo – all other pages both blog-info and page-titlefit it to your needs .
Some css will finish the setting then – but it will be best to see the page it belongs to.
f.e.
#top .logo.text-logo { height: auto; display: block; margin: 0 !important; position: absolute !important; top: 50%; transform: translateY(-50%); } #top .logo.text-logo h1 { margin: 0 !important; font-size: 42px; }see here example: https://basis.webers-testseite.de/
there had to be some adjustments for responsive styling – because i will change it after you have seen the page – i do not want to do that.
you know the absolute url of your svgs – what if you do open it in your browser – can you see them?
e.g.
https://your-domain.com/wp-content/uploads/avia_custom_shapes/waves-in-motion.svgBy the way, I now always upload these SVG files through the media library. In list view, I determine the ID of the attachment and add it to the array. As far as I know, neither the key nor the name needs to be specified then in the snippet.
SVG files in WordPress and Enfold are not converted to other sizes when uploaded to the media library. There are no disadvantages in this regard.
function custom_avf_custom_svg_shapes( array $custom_shapes ) { $custom_shapes = array( 'waves-in-motion' => array( 'title' => __( 'Waves in motion', 'avia_framework' ), 'has_flip' => true, 'has_width' => false, 'attachment' => 1562, ), 'waves-in-motion-2' => array( 'title' => __( 'Waves in motion 2', 'avia_framework' ), 'has_flip' => true, 'has_width' => false, 'attachment' => 1565, ), ); return $custom_shapes; } add_filter( 'avf_custom_svg_shapes', 'custom_avf_custom_svg_shapes', 10, 1 );here on that page you can achieve this by:
(the old way – because using font-icons)#top .main_menu { right: 145px; /* === A correction value for the now broader social_bookmarks === */ padding-right: 10px; } #header_main .social_bookmarks { margin: 0; height: 40px; top: 50%; transform: translateY(-50%); } #top .social_bookmarks li { width: 36px; } #top .social_bookmarks li a { width: 40px; line-height: 40px; min-height: 40px; } #top .social_bookmarks li a:before { font-size: 24px }Perhaps it needs to be adapted for your website. As a participant, I cannot see any private content, so I’m afraid I can’t offer any better advice.
NEXT: now the bookmarks are svg icons – so the css had to be different.
But i do not find an example page to do so. I had to look on one of my installatons to have that different css.#top .avia-menu.av_menu_icon_beside { border-right: none; padding-right: 10px; margin-right: 10px; } #top nav .social_bookmarks { position: relative; transform: translateY(-50%); margin: 0 !important; height: 40px !important; } #top .social_bookmarks li { width: 40px; margin-left: 3px } #top .social_bookmarks li a { width: 40px !important; line-height: 40px; border-radius: 10px !important; min-height: 40px; } #top .social_bookmarks li.avia-svg-icon img[is-svg-img="true"], #top .social_bookmarks li.avia-svg-icon svg:first-child { height: 1.5em; width: auto; margin-top: 5px; }if you have started by using a demo installation. F.e. https://kriesi.at/themes/enfold-one-page-portfolio/
This homepage behaves as you described.This option of header you can choose to have on the page editor. Have a look to the layout and find: “Header visibility and transparency”
That dropdown :
Make your selection there.
how did you insert those full_sliders ? because they are twice on your site as your told us above.
some are out of wrap_all ? so your footer is there – but over these copied sliders!
see your footer here: https://eustasis.com/#footer
or without uploading – just with base 64 data uri:
#av-cookie-consent-badge:before { display: block; position: relative; content: ""; width: 100%; height: 100%; top: 10px; left: 10px; background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iQ29va2llcyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB2aWV3Qm94PSIwIDAgMzAwIDMwMCI+CiAgPGNpcmNsZSBjeD0iMTgzLjMiIGN5PSIyNC45IiByPSIxNy41Ii8+CiAgPGNpcmNsZSBjeD0iMjIzLjIiIGN5PSI3My41IiByPSIxMi4yIi8+CiAgPGNpcmNsZSBjeD0iMjU2LjUiIGN5PSIxMjUuMyIgcj0iMTAuNyIvPgogIDxjaXJjbGUgY3g9IjI2My44IiBjeT0iNTkuMyIgcj0iOC43Ii8+CiAgPHBhdGggZD0iTTI3OS4xIDE1Mi45Yy02LjcgNi4zLTE1LjcgMTAuMS0yNS42IDEwLjEtMjAuNyAwLTM3LjUtMTYuOC0zNy41LTM3LjUgMC02LjcgMS43LTEyLjkgNC44LTE4LjMtMTcuMy0yLjMtMzEuMi0xNS0zNS4zLTMxLjctMS4yLjEtMi40LjItMy43LjItMjMuMiAwLTQyLTE4LjctNDIuMi00MS44QzcyLjkgMzkuMyAyMC41IDk1IDIwLjUgMTYzLjFjMCA3MS41IDU4IDEyOS41IDEyOS41IDEyOS41czEyOS41LTU4IDEyOS41LTEyOS41YzAtMy41LS4xLTYuOC0uNC0xMC4yek02OS4yIDE3OS41Yy05LjcgMC0xNy41LTcuOC0xNy41LTE3LjVzNy44LTE3LjUgMTcuNS0xNy41IDE3LjUgNy44IDE3LjUgMTcuNS03LjkgMTcuNS0xNy41IDE3LjV6bTQ1LTk4LjhjOS43IDAgMTcuNSA3LjggMTcuNSAxNy41cy03LjggMTcuNS0xNy41IDE3LjUtMTcuNS03LjgtMTcuNS0xNy41IDcuOS0xNy41IDE3LjUtMTcuNXptMy4xIDE2OS4xYy05LjcgMC0xNy41LTcuOC0xNy41LTE3LjVzNy44LTE3LjUgMTcuNS0xNy41IDE3LjUgNy44IDE3LjUgMTcuNS03LjkgMTcuNS0xNy41IDE3LjV6bTU3LjktNzAuM2MtOS43IDAtMTcuNS03LjgtMTcuNS0xNy41czcuOC0xNy41IDE3LjUtMTcuNSAxNy41IDcuOCAxNy41IDE3LjUtNy44IDE3LjUtMTcuNSAxNy41em0zMy45IDcyLjNjLTkuNyAwLTE3LjUtNy44LTE3LjUtMTcuNXM3LjgtMTcuNSAxNy41LTE3LjUgMTcuNSA3LjggMTcuNSAxNy41LTcuOCAxNy41LTE3LjUgMTcuNXoiLz4KPC9zdmc+); background-size: 30px; background-repeat: no-repeat; }by the way – here is a huge amount of usefull path – with the option to get the base 64 data uri:
https://www.svgviewer.dev/svg-to-data-uriEnter f.e. cookie on search input field.
upload that svg to your media library: Cookie SVG
and put this to your quick css:
#av-cookie-consent-badge:before { display: block; position: relative; content: ""; width: 100%; height: 100%; top: 0; left:0; background-image: url("/wp-content/uploads/cookie.svg"); background-size: contain; background-repeat: no-repeat; }adjust the url with your path
