Forum Replies Created
-
Posts
-
if you are interested in this solution – it might be possible in a similar way: https://webers-testseite.de/cynthia/logo2-on-slider/
if you are activating the shortcodes for polylang via your functions.php of your child-theme:
function polylang_shortcode($atts, $content = null){ if (empty($content)) return ''; extract( shortcode_atts( array('lang' => ''), $atts ) ); if (empty($lang)) return "<h3>You must specify 'lang' using shortcode: polylang</h3>"; return ($lang == pll_current_language()) ? $content : ''; } add_shortcode('polylang', 'polylang_shortcode');you then can use this in all text fields – and a lot of enfold options input fields too (like footer copyright field) on this :
[polylang lang="en"]PhoneNumber for english sites [/polylang][polylang lang="de"]PhoneNumber for german sites[/polylang]etc. pp
:lol by the way – first i thought this might be a nice gimmick – but it is to complicated to make it real look beautiful:
well you can use your full-screen slider aswell and add your logo via jQuery function.
Here on my testpage i have given the slider the custom-class: place-logo
then i put into functions.php of my child-theme:
Test-page: https://webers-testseite.de/cynthia/logo-goes-to-slider/
function add_logo_to_slider() { ?> <script> (function($){ $('.place-logo .slideshow_caption').before('<img class="sliderlogo" src="https://webers-testseite.de/cynthia/wp-content/uploads/2018/07/full-logo.png" alt="Logo on Slider" />'); })(jQuery); </script> <?php } add_action('wp_footer', 'add_logo_to_slider');and make a setup for your added image for each slide number like:
/* rule for all slides in the slider */ .sliderlogo { position: relative !important; width: 40% !important; top: 35%; transform: translateY(-50%); -webkit-filter: drop-shadow(2px 2px 3px #ffffff); filter: drop-shadow(2px 2px 3px #ffffff); } /* if you like to have semitransparent background with padding for slide 1 */ .slide-1 .sliderlogo { background-color: rgba(255,255,255,0.2); padding: 40px; } /* if you like to shift in x direction for slide 2 */ .slide-2 .sliderlogo { margin-left: 10% !important; }but yes of course – but
I prefer it of course if it runs here over the forum, because I do not always have time to deal directly with the questions. Furthermore, the advantage of swarm intelligence should not be underestimated.
maybe this could help you – put it in your functions.php of your child-theme:
// Word replacement function replace_text($word){ $changings = array( // Word to replace => New text - comma separated 'Grundlagen' => 'Basis', 'dolor' => 'something else' ); $word = str_replace(array_keys($changings), $changings, $word); return $word; } // WP filter for the content and the Exerpt (content excerpt) add_filter('the_content', 'replace_text'); add_filter('the_excerpt', 'replace_text');you see how it works ?
this is what you like to replace:'Grundlagen' => 'Basis',
if you like to replace more these lines are separated by commata – the last instruction does not need a comma at the endby the way you can even replace with html expressions:
'Lorem' => '<abbr title="#">Lorem</abbr>',PS: this will work case-sensitve
by the way another question : why do you nearly always use png files – even if there was no transparency in use (except analytics – but it has here a white background – so a jpg could do the job too) ?
f.e. your water-cabana.png has a size of 1.6MB – the same jpg file with no quality loss : 143kb ( for transfer volumen – both have the same 2.56MB when they are opend)same with the other images. The five images on your landing page got on total with png : 4,5MB. with jpg : 500kb
don’t know if this is the reason for that behavior – I don’t believe it – but for performance reasons you should always prefer jpg – if you don’t need the transparent option.i’m shure that it will work with code in functions.php too – but for the “standard-enfold” user this might be a fine method to do it.
Same with responsive videobackground via adv. layoutbuilder even on mobile devices with autostart : https://webers-webdesign.de
Selfhosted Video and video as background-slidemy last test over the socket was successful.
you have to position the slider on the wanted page – then shift it with that DOM function on Slider Settings
see here between footer and socket with prependTo #socket : https://webers-testseite.de
in this case you can have alll those options to set : so i would input to that button – with iframe=true option
https://www.youtube-nocookie.com/embed/0f1fZgnhmJw?enablejsapi=1&ecver=2&cc_load_policy=1&rel=0&showinfo=0&autoplay=1&color=white&iv_load_policy=3&iframe=truesee here: https://webers-testseite.de/slider-with-video-button/
by the way you can see here : https://developers.google.com/youtube/youtube_player_demo – if you click “show player parameters” what the options are.
accept the ecver2 ( this is for not having video suggestions on pausing the video)by the way looping will not work with one video in the playlist! (only if you have the same video in the playlist)
ok – you can see here on my webdesign page https://webers-webdesign.de
that even a video ( this is a selfhosted video) works well on adv. layerslider – even on small screens (by the way on modern mobile advices too). So there must be some inconsistancies on your setting. Did you try a different image? Is it a reproduceable effect? Did you recognize that it is on a specific screen width range (f.e. between 768 and 990px )Edit: on slider settings / misc – there is an option : “Use srcset attribut” – which on default is enabled i guess.
sometimes not all images are present in the set. (some cleaning plugins looking for not used images maybe have erased those resolutions) – maybe that causes the fault on your page. Try to disable it – empty all caches and caching tools ( even the browser cache) – if that was the error – you can regenereate the all thumbnails for this image to have a complete srcset – and reactivate this option againEdit2: for what is the colorsection before the slider with that 1px hr in it?
Why don’t you use the full-width slider element (not the full-screen one) with your video as one slide.
you don’t have the need to have caption or buttons. and you can set up the video to loop. The only thing is that the controlelements can’t be completely hidden for vimeo videos. So the user could pause the video. After some time the control elements are hidden on default.
result see here: https://webers-testseite.de/video-tut/you have no content over your video – so no reason to have here a color-section.
for the burger menu – you can do this:
#av-burger-menu-ul { vertical-align: top !important; padding: 125px 0 !important; } .html_av-overlay-side #top #wrap_all .av-burger-overlay li a { line-height: 1.8em; }and you have to find a solution for ipad ( your menu is than not the hamburger ones) and some menu points float over the following content.
best could be to break the menu at 990px (Enfold Menu Options Dialog)
___________
for your logo on small screens :
@media only screen and (max-width: 767px) { .responsive #top #wrap_all .container { width: 95%; max-width: 95%; } .main_menu ul:first-child > li > a { padding: 0 8px !important; } }and a bit more elegant but not as mighty as the code above is to have on enfold options dialog under the favicon input field an apple touch icon input field ! : put this to your functions.php of your child-theme (all credits goes to the other Günter)
function my_avf_option_page_data_add_elements( array $avia_elements = array() ) { $slug = "avia"; $id = 'favicon'; $new_element = array( "slug" => "avia", "name" => __( "Apple Icon", 'avia_framework' ), "desc" => __("Specify an Apple Touch Icon for your site.", 'avia_framework')." <br/>".__("Accepted formats: .png", 'avia_framework')."<br/>".__("best format will be 158px in square", 'avia_framework'), "id" => "avia_appleicon", "type" => "upload", "label" => __( "Use Image as Apple Icon", 'avia_framework' ) ); $found = false; $index = 0; foreach( $avia_elements as $key => $element ) { $index++; if( isset( $element['id'] ) && ( $element['id'] == $id ) && isset( $element['slug'] ) && ( $element['slug'] == $slug ) ) { $found = true; break; } } if( ! $found ) { $avia_elements[] = $new_element; } else { $avia_elements = array_merge( array_slice( $avia_elements, 0, $index ), array( $new_element ), array_slice( $avia_elements, $index ) ); } return $avia_elements; } add_filter( 'avf_option_page_data_init', 'my_avf_option_page_data_add_elements', 10, 1 );why don’t you try the other sliders ( they have buttons options and headings options – and they are on default responsive)
fullwidth-slider and fullscreenslider – i think the first fits for you
see here: https://webers-testseite.de/video-tut/you always can add those icons like this (but i think this is yigits code – with more options):
add_action('wp_head', 'ava_add_icons'); function ava_add_icons() { ?> <link rel="shortcut icon" type="image/x-icon" href="/wp-content/uploads/icons/favicon.ico"> <link rel="icon" type="image/x-icon" href="/wp-content/uploads/icons/favicon.ico"> <link rel="icon" type="image/gif" href="/wp-content/uploads/icons/favicon.gif"> <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon.png"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon.png"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-57x57.png" sizes="57x57"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-60x60.png" sizes="60x60"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-72x72.png" sizes="72x72"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-76x76.png" sizes="76x76"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-114x114.png" sizes="114x114"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-120x120.png" sizes="120x120"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-128x128.png" sizes="128x128"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-144x144.png" sizes="144x144"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-152x152.png" sizes="152x152"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-180x180.png" sizes="180x180"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-precomposed.png"> <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-160x160.png" sizes="160x160"> <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-192x192.png" sizes="192x192"> <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-196x196.png" sizes="196x196"> <meta name="msapplication-TileImage" content="/wp-content/uploads/icons/win8-tile-144x144.png"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-navbutton-color" content="#ffffff"> <meta name="application-name" content="homeurl.de"/> <meta name="msapplication-tooltip" content="homeurl.de"/> <meta name="apple-mobile-web-app-title" content="homeurl.de"/> <meta name="msapplication-square70x70logo" content="/wp-content/uploads/icons/win8-tile-70x70.png"> <meta name="msapplication-square144x144logo" content="/wp-content/uploads/icons/win8-tile-144x144.png"> <meta name="msapplication-square150x150logo" content="/wp-content/uploads/icons/win8-tile-150x150.png"> <meta name="msapplication-wide310x150logo" content="/wp-content/uploads/icons/win8-tile-310x150.png"> <meta name="msapplication-square310x310logo" content="/wp-content/uploads/icons/win8-tile-310x310.png"> <?php }a nice but german page to create those different sizes is: web-stuebchen.de
so for a list of page you can use array or to exclude one page the is not
add_filter('avf_logo','av_change_logo'); function av_change_logo($logo){ if( is_page(21) ) { $logo = "http://www.domain.com/wp-content/uploads/logoforpage21.jpg"; } elseif ( is_page( array( 42, 54, 6 ) ) ) { $logo = "http://www.domain.com/wp-content/uploads/logoforpage22.jpg"; } elseif ( is_page() && !is_page(1307) ) { $logo = "http://www.domain.com/wp-content/uploads/logoforpage23.jpg"; } return $logo; }And one curly bracket is missing on your code above.
One closes the if clause – and the second closes the function ( after return logo – as mikes code above)ich kenne den Inhalt jetzt nicht – da wäre es schön der wäre schon platziert.
Ich würde der grauen Colorsection – wie Ismael sagt – eine custom-class geben zB: ueberstand
und vor allem kein padding festlegen noch eine mindesthöhe !!!
___
I don’t know the content now – it would be nice if it was already placed.
I would give the grey color section – as Ismael says – a custom-class e.g.: ueberstand
and especially no padding nor a minimum height !!!dann in das quick css:
then into the quick css:.ueberstand { height: 100px !important; } .ueberstand .container { position: relative; top: -50%; }du kannst das hier mal sehen mit einem bild in der color-section:
you can see this with an image in the color-section:
https://webers-testseite.de/buttons/wenn ein Slider direkt oberhalb liegt (oder ein advanced slider) denke ich müßte man auch noch einen z-index für diese “ueberstand”-Sektion hinzufügen
if a slider is directly above (or an advanced slider) I think you would have to add a z-index for this “ueberhang” section tooAs far as i see it does not work on my end.
the thing is that the p tag of e-mail input field is to high and lays over the div tags of your 2 columns.
First of all – if you use enfold settings you will be on a good way – follow Ismaels advice: https://kriesi.at/support/topic/getting-multi-columns-using-contact-form-7/#post-286490you can give the div surrounding the 2 columns a min-height of 50px
or you do not mix different tags here – stay using div tags .then we will see if this is solved:
or you simply use the modal window (lightbox) version of Google Maps – you even did not need any api key for that. – And big Advantage – if you place a notice to the privacy notices, it is probably best GDPR compliant.
See here : https://kriesi.at/support/topic/google-maps-gdpr-dsgvo/#post-981135
something like: Google Map
yes my test did it as Mike said:
<a href="https://goo.gl/67u9gx" target="_blank" rel="noopener">Youtube Channel</a>same shit different name. Must work without any extra css or code
Well i do not see that mixed content message. So maybe it is only a caching problem on your devices;
but I don’t see any instructions for loading the font either on your siteby the way if you like to support browser independent font usage you can transform your font into woff , woff2 etc on fontsquirell:
https://www.fontsquirrel.com/tools/webfont-generatorBy the way – i like the use of lightbox and gmaps.
The thing you put in on a code-block element is something like this:
<h3> Google Map </h3> <label> <a class="googlemap" href="https://maps.google.de/maps?q=1+Ludwig-Schopp-Straße+27,+53117+Bonn,+Deutschland&hl=de&iframe=true"><img src="https://webers-testseite.de/wp-content/uploads/maps.png" alt="Google Map" /></a> </label>the link in that code-block for your Address is concerning to Google: https://developers.google.com/maps/documentation/urls/guide
On German – with hl=de it will only work with :https://maps.google.de/maps?q=and + (plus) separated Adress data.the code above must then be added additionally.
function googlemap_script() { ?> <script> (function($){ $('<label><input class="google-privacy" type="checkbox" /> yes - I have read the <a href="/datenschutzerklaerung">privacy policy</a> regarding Google Maps</label>').insertBefore('.av_gmaps_confirm_link'); $('<label><input class="google-privacy" type="checkbox" /> yes - I have read the <a href="/datenschutzerklaerung">privacy policy</a> regarding Google Maps</label>').insertBefore('a.googlemap'); $('a.googlemap').css( 'display' , 'none' ); $('a.av_gmaps_confirm_link.av_text_confirm_link').css( 'display' , 'none' ); $('.google-privacy:checkbox').prop('checked', false); $('.google-privacy:checkbox').click(function() { $('a.googlemap').toggle($(':checkbox:checked').length > 0); $('a.av_gmaps_confirm_link.av_text_confirm_link').toggle($(':checkbox:checked').length > 0); }); })(jQuery); </script> <?php } add_action('wp_footer', 'googlemap_script');Big advantage – you wouldn’t even need a Google Api key for this – and bypasses the new payment method of Google as well
I simply added a text block and wrote the text in it
you did not wrote this to the text input field – my guess is that it is copy/pasted from a different html page and inserted into the text-block alb element.
this is no normal text – it is styled with different divs , spans etc pp.
how should a justify influence such a construction. these are all single sentences in different containers.this is normal input for a avia_textblock without any divs or spans:
Rent Lake Como SRL was created to provide high quality rental international services in the Lake Como area. From apartment or villa rent to particular requests you may have during your holiday, we cover them all. A young, experienced and creative team is responsible for your comfortable vacation. We believe that renting a villa or an apartment is a much better value than a hotel room, as it gives you more space for the same price or cheaper and you live like a local or as if you were home. Plus, you have the convenience of an experienced concierge like ours, who can give you any service you need. Enjoy your stay and feel free to contact us anytime.
The p-tags are set if you make a return on your keyboard (which you do not see even in text editor mode but in source-code they are set.)
this is what you have inserted i guess via copy/paste on the text:
so you need to edit that first<div class="template-page content av-content-full alpha units"> <div class="post-entry post-entry-type-page post-entry-460"> <div class="entry-content-wrapper clearfix"><section class="av_textblock_section "> <div class="avia_textblock av_inherit_color "> <div> <div class="WordSection1"> <div class=""><span class="" lang="EN-US">Rent Lake Como SRL was created to provide high quality rental international services in the Lake Como area.</span></div> <div class=""><span class="" lang="EN-US">From apartment or villa rent to particular requests you may have during your holiday, we cover them all.</span></div> <div class=""><span class="" lang="EN-US">A young, experienced and creative team is responsible for your comfortable vacation.</span></div> </div> </div> <div> <div class="WordSection1"> <div class=""><span class="" lang="EN-US">We believe that renting a villa or an apartment is a much better value than a hotel room, as it gives you more space for the same price or cheaper and you live like a local or as if you were home. Plus, you have the convenience of an experienced concierge like ours, who can give you any service you need. Enjoy your stay and feel free to contact us anytime.</span></div> </div> </div> </div> </section></div> </div> </div>try then :
#top.page-id-460 { text-align: justify !important; }Do you mean this text: Rent Lake Como SRL …
i guess you have inserted it by copy and paste from maybe a word doc ? there is no p tag in that pasted text. it is in a span tag.so if you don’t want to influence all avia_textblocks (team element etc) with:
#top.page-id-460 .avia_textblock { text-align: justify !important; }you have to edit this text-block and copy paste into the text not the visual editor mode, to have there p-tags.
by the way : justified text can be very ugly – to avoid this there is a nice multilingual plugin called hyphenator.
