you see – if i inspect the demo-link from above and add (virtually) in the dev tools the css :
(click to enlarge)

use on that the quick css input field.

if you mean this “Gallery with Preview” on https://kriesi.at/themes/enfold/shortcodes/gallery/
try:

#top .image-overlay .image-overlay-inside::before {
  content: "\e80f" !important;
  font-size: 50px;
  color: #fff !important;
}

#top div .avia-gallery .avia-gallery-big {
  padding: 0px;
  border-style: none;
}

#top div .avia-gallery img {
  border-style: none;
  /*** padding: 0px; *** - if you like ***/
}

no quick css – this is a snippet for functions.php.
Most layouters want to change the heading tag for SEO reasons; you can adjust the headings so e.g. the h3 to the h4 appearance via css of course, but that would be a bad solution from my point of view.

You can insert that in your parent theme as well, either the way of your link in the magazine.php file – or you put that snippet into your parent theme functions.php. But on the parent functions.php there are good and bad places to insert such code.
I guess one of the good places is just before the end of it:
( click to enlarge the images )

Next But you always have to do the edit – everytime you update your theme – this is really not a practical solution
( with magazine.php the same)

Maybe a plugin is a good solution for you: https://wordpress.org/plugins/code-snippets/
I did not test it – but it seems to be very popular with over 600.000 installations. Then those snippets comes to the plugin dialog
Edit : tested right now – and it works !

• This reply was modified 3 years, 7 months ago by Guenni007.

on my Mac here (Firefox Developer, Chrome and Safari) both shows (left and right) start automatically!
When you click to go to the next slide – the show stops after one pass ( no loop ) – but this is normal behavior I’m afraid.

on your page you use that ( by the way deprecated window.load is involved too ) script:

jQuery(window).load(function(){
	jQuery('a').removeAttr('title');
	jQuery('img').removeAttr('title');
});

without the titles – the lightbox got no info what to show!
The question now is when you inserted the script, because even in the earlier version of enfold this could not work.

Have a look into the alb you set – maybe there is the option not to use the title but f.e. description.
Or just not to remove the title – but save it to another attribut and save back on click or on mouseout:

can you try this instead :

function temporary_removal_title_tags(){
?>
<script>
  window.onload = function() {
      var links = document.querySelectorAll('a, img');
      for (var i = 0; i < links.length; i++) {
          var link = links[i];
          link.onmouseover = function() {
              this.setAttribute("data-tooltip", this.title);
              this.title = "";
          };
          link.onmouseout = function() {
              this.title = this.getAttribute("data-tooltip");
          };
          link.onmousedown = function() {
              this.title = this.getAttribute("data-tooltip");
          };
      }
  };
</script>
<?php
}
add_action('wp_footer', 'temporary_removal_title_tags');

btw: maybe you decide to darken the lightbox background a bit more – because the png files with the transparency will then be better seen:

.mfp-zoom-in.mfp-ready.mfp-bg, 
.mfp-zoom-in.mfp-ready .mfp-preloader {
  opacity: 0.9 !important;
}

on your landing page – on the other page it still exists.

Edit : my suggestion is that your inserted script has some linebreaks that causes the automatic p-tag insertion in the text-widget – in a child-theme functions.php it does not matter if there are linebreaks – but in a text-widget it might be different.

– so try first to insert this pure one-liner:

<script type="text/javascript">(function(e,t,o,n,p,r,i){e.visitorGlobalObjectAlias=n;e[e.visitorGlobalObjectAlias]=e[e.visitorGlobalObjectAlias]||function(){(e[e.visitorGlobalObjectAlias].q=e[e.visitorGlobalObjectAlias].q||[]).push(arguments)};e[e.visitorGlobalObjectAlias].l=(new Date).getTime();r=t.createElement("script");r.src=o;r.async=true;i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)})(window,document,"https://diffuser-cdn.app-us1.com/diffuser/diffuser.js","vgo"); vgo('setAccount', '611343716'); vgo('setTrackByDefault', true); vgo('process');</script>

__________

Or like Rikards advice:
Remove that text-widget and embed that script via child-theme functions.php.

function ronmann_footer_script(){
?>
  <script type="text/javascript">
    (function(e,t,o,n,p,r,i){e.visitorGlobalObjectAlias=n;e[e.visitorGlobalObjectAlias]=e[e.visitorGlobalObjectAlias]||function(){(e[e.visitorGlobalObjectAlias].q=e[e.visitorGlobalObjectAlias].q||[]).push(arguments)};e[e.visitorGlobalObjectAlias].l=(new Date).getTime();r=t.createElement("script");r.src=o;r.async=true;i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)})(window,document,"https://diffuser-cdn.app-us1.com/diffuser/diffuser.js","vgo"); vgo('setAccount', '611343716'); vgo('setTrackByDefault', true); vgo('process');
  </script>
<?php
}
add_action('wp_footer', 'ronmann_footer_script', 999);

my suggestion is ( i do as participant not see the private content) that the background-image is set to attachment fixed ! ;)

this is a known bug on safari and with iOs devices. Link
A trick to solve this problem is to bypass the attachment fixed property by passing the image to a pseudo-container ( you can take before aswell ) as a background image, but then fixing the pseudo-container. This works much better with an iPhone.

https://kriesi.at/support/topic/theme-is-shaking-a-lot-in-safari/#post-1207474

so what to do :

• give to the color-section a custom-class: bg-fixed
• set the behavior to scroll
• put this to your quick css:

.avia-section.bg-fixed {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  background-size: 0 !important;
  overflow: hidden;
  position: relative;
  top: 0;
}

.avia-section.bg-fixed::after {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: inherit !important;
  background-repeat: no-repeat !important;
  background-size: cover;
  background-position: inherit;
  pointer-events: none;
  will-change: transform;
  z-index: -1;
  visibility: visible !important;
}

on my installations and here on one enfold demo – all external links got that attribut:

PS : i don’t like the new outlook of Layerslider 7 – the old slider was much more intuitive to set.

Edit : 10 days ago your last posting – i remove now the example page ( due to copyright )

nearly one month ago : hm – I think actually very detailed – speak noob safe solutions to offer; obviously, however, some fellow here on board are lazy to read. Probably only ways in summary mode are accepted, which present a solution if possible without learning curve.

the https://simonehirsch.de/wp-content/uploads/slider-3.jpg is even not a real portrait photo.
And it is to small – you have it on 300dpi – but if you go and set the the dpi to 72 without recalculating the photo it only got 768px width:

Nevertheless – you could use for the smaller screens that image and the fullwidth image slider – and you can stretch it – but go to the alb and open the tab: Styling and choose under : “Slideshow Image and Video Size” no scaling.

If you use a portrait it will show the way you like:

f.e. here with two fullwidth easy sliders: The image detail is not good now due to lack of source material, but it is sufficient for demonstration purposes.
https://enfold.webers-webdesign.de/simone-hirsch/

When you have seen the example page i remove that page again.

i think this comes from using gtranslate :
i only read about multiple widgets in conjuction with gtranslate.

PS: bitte dringend um DSGVO kümmern. Da wird alles zu Google gefunkt bevor irgendetwas abgefragt und zugestimmt wird.
Click the link

PPS: ist das die Enfold Suchfunktion, die du einblendest? Weil normalerweise bei Enfold die img’s nicht mit in Suchergebnisse mit aufgenommen werden.

Where did you get a social media widget. Or do you mean the social buttons alb element?

if you choose on content tab of the image alb the caption – another Option Toggle will be shown on Styling Tab: “Image Caption”.
Font and weight had to be styled via css. Selector is:

.av-image-caption-overlay-center {
  font-weight: bold;
}

background on hovering is styled by:

.av-overlay-hover-deactivate .avia-image-overlay-wrap:hover .av-caption-image-overlay-bg {
  opacity: 0 !important;
}

and if you like to change the font on hovering:

.av-overlay-hover-deactivate .avia-image-overlay-wrap:hover .av-image-caption-overlay-center {
  color: #FFF !important
}