you never mentioned that the images have a link too. Do you need that besides the button inside?
i do not find any of my settings: neither those custom classes nor the hidden button.

Of course, this is also possible within a 1/1 column.
Therefore, I also assumed that the slider should be realized in a non 1/1 column. Because the fullwidth slider cannot be placed within another ALB element.

PS: although with a 1/1 container I don’t understand why you would want to use the Easy-Slider. I think it is easier to bring a full-width slider to content width and style the buttons of that “fullwidth-slider”

see the bottom slider at that example page: https://webers-testseite.de/easy-slider/

you then can use Ismaels code to style those button. See css code too on that example page.

PS: here you have that option that each button could have a different link/style etc. but if it should be allways the same button:
Create first one slide – style it as you like to have. – Then duplicate those slides – and replace the images afterwards. That will save time to edit. ;)

Lade es dir aber nochmal runter, ich habe die Farben noch einwenig verändert.
https://webers-webdesign.de/AB-SP.svg

Gemäß deren Logo : https://www.spitex.ch/img/spitex2022/ch.spitex2022/logo_de-hcB8186EFD.svg

yes the function comes to child-theme functions.php
( be carefull if you put something into child-theme functions.php – the leading first line ( <?php) had to be preserved )
the css code to quick css.

you see the layout under the example – and with some comments on how to set the custom classes.
the styling button is inside the same container as the easy-slider.

das letzte hochladen, und als logo einsetzen.

wenn ich sowas nachbauen muss, dann schaue ich zunächst auf deren Seiten ob da pdfs existieren. PDFs sind auch Container Formate. Und die Bilder etc. sind eigentlich meist als solche einzeln auswählbar ( im Acrobat ) bzw – wenn man denn die Sachen im Illustrator öffnet auch!!!
Wenn man Glück hat, war da mal jemand dran den es auch stört schlechte png/jpgs in Dateien einzubetten. Also sind meist die Logos als vektoren vorhanden. Das Glück hatten wir nun bei beiden Seiten, dort konnte ich pdfs ziehen, die eingebettete Logo in Vektorform hatten.

Leider setzt der Illustrator defaultmäßig für die Gruppen die Standard Klassen st0, st1 etc.
Da muss man also ran – damit es nachher auch via css gut ansprechbar bleibt, muss man sinnvolle Gruppen setzen.

Öffne doch mal das svg mit einem guten Editor. Oder schau dir das mit den Developer Tools mal an:

du siehst, ich habe die beiden logos in separaten Gruppen und du könntest nun die Sachen auch per quick css umfärben.

the svg is not a vector logo ( data image inside ).
That would probably be a painstaking task, with many elements being repeated, and the font will also have to be found.
https://webers-webdesign.de/AltBaum.svg
https://webers-webdesign.de/Spitex.svg
ich glaube übrigens nicht, dass in deinem original jpg – die Farben stimmen. Da hat einer beim cmyk nach rgb nicht aufgepasst. ;)

Den Rest könnte man jetzt auch noch machen.

Schrift ist : AkkuratStd
bei Spitex dürfte es eine DINPro sein.

PS : die Svg könnt ihr gut mit einem Texteditor ( ein guter – nicht word : also SublimeText oder notepad++) bearbeiten.
Die Klassen könnt ihr dann durch die richtigen Farbwerte ersetzen.

you now can see different demos under that example page with 2/3 – 1/3 columns and 3/4 – 1/4 columns.
1/3 x 1.25 = 0.416

This construction only works – if the text block needs less space than the image block !

Did you belong to my post or to the others?
Because my workaround is based on creating an enfold button on that page directly under the easy slider element. This button will be set to display none via quick css – but is the Source for the buttons inside the slider. It will be cloned. So every styling you do to the source button will be the styling of the slider button!

see an image of the layout under that example page: https://webers-testseite.de/easy-slider/

________

btw. if you do not append that cloned button to : av-slideshow-caption – but to : avia-slide-wrap
you can place that cloned button absolutely to every place you like in that slider.

hm – but i do not see it on your site?

by the way – if you had choosen to load jQuery in your footer – it might be necessary to set for the snippet a priority. Because it has to be loaded after jQuery has been loaded.

in this case the last line should look like this:

add_action('wp_footer', 'ava_custom_script_mod_social', 999);

this error log is typical to a function that needs jQuery but is running before jQuery is loaded:
(click to see)

your image has an aspect ratio of 5/4 = 1.25
the column on the left is 3 units wide – and the column on the right 2 units – so the height must be 2*1.25 = 2.5
above your 1310px ( keep the padding left/right of 50px in mind ) etc. …

see with css on : https://webers-testseite.de/gatehealing/

you see that below approx. 1000px, the height of the text determines the overall height – and the background-image on the right is cropped then.

Many of the suggested changes to the theme here on the board – are a lot easier to realize if you set up a child theme. That’s why I strongly recommend doing this.
However, there are probably also good plugins that can insert code snippets like the one above without a child theme.

i would layout four 1/4 columns inside a color section with a custom class f.e.: special-sixth-grid

and then place this to your quick css:
( fr is abreviation for fraction – means part – so if there are for 100% = 6fr : 1fr 2fr 1fr 2fr that is your setting of 1/6 2/6 1/6 2/6 )

#top .special-sixth-grid .entry-content-wrapper {
  display: grid;
  margin: 0;
  gap: 20px;
  grid-auto-flow: row;
  grid-template-columns: 1fr 2fr 1fr 2fr; 
  align-self: stretch
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
  .responsive #top .special-sixth-grid .entry-content-wrapper {
    gap: 20px;
    grid-template-columns: 1fr 2fr; 
  }
}

@media only screen and (max-width: 767px) {
  .responsive #top .special-sixth-grid .entry-content-wrapper {
    gap: 20px;
    grid-template-columns: 1fr; 
  }
}

#top .special-sixth-grid .entry-content-wrapper:before,
#top .special-sixth-grid .entry-content-wrapper:after {
  display: none;
}

#top .special-sixth-grid .entry-content-wrapper .flex_column {
  width: unset !important;
  margin: 0 !important;
}

see an example page ( only the top part – i added to an existing example page ): https://webers-testseite.de/4on1-flexbox-model/

and by the way – Enfold has a no compression level on those recalculated images – that will cause some unnecessary big file-sizes f.e. it might happen that the big sizes 1500×630 and 1500×430 are bigger in file-size than the uploaded original!

screenshot from enfold default setting:

so after erasing some image-sizes – and before recalculating the preserved image-sizes – put this snippet to your child-theme functions.php (change the 55 to what you like to have):

add_filter("avf_jpeg_quality", "avf_set_quality_mod", 9999, 1);
add_filter("avf_wp_editor_set_quality", "avf_set_quality_mod", 9999, 1);
function avf_set_quality_mod($quality) { $quality = 55; return $quality;}

see here a comparison of normal and italic font of montserrat ( just chaning it in developer tools to render the normal font as italic )

Yes – the small “a” is different !

some serif fonts do have more specific differences in comparison. On performance reasons – do not upload those italic font-styles.

can you test in your quick css:

@media only screen and (min-width: 480px) {
  .responsive #top #header .main_menu .social_bookmarks {
    z-index: 5;
    line-height: 90px;
    margin-left: -40px
  }
}

@media only screen and (max-width: 479px) {
  .responsive.av-burger-overlay-active #top #wrap_all #header .social_bookmarks, 
  .responsive.av-burger-overlay-active #top #wrap_all #main .av-logo-container .social_bookmarks {
    display:  block;
  }
  .responsive #top #header .main_menu .social_bookmarks {
    z-index: 5;
    line-height: 90px;
    margin-left: 20px;
  }
}

but i guess you had to think about a different position for those social bookmarks – maybe the header_meta is a good place for it. Because on screens smaller than 1400px your main menu overlaps your logo and the social bookmarks nav floats into a second line.

• This reply was modified 1 year, 10 months ago by Guenni007.

you can use a default text block element – and insert that media file to it:

(click to enlarge the screenshot)

1 – position the cursor to a place where you like to insert your image ( btw. you can later drag&drop the image to a different place)
2 – click that button “Add Media” – the media library opens and you can choose the file.
3 – you can adjust the dimension on pulling one edge of the image ( without pressing any key on your keyboard – it will preserve aspect ratio)
4 – click on the inserted image to see the option to set a floating ( or determine it already in step 2 )
5 – you can set additional settings to that image on clicking the edit button ( pencil )
5.1. … on that new popup ( without screenshot ) you can do different things ( like a class to the image, or to the link if it is set, …)
a custom class (e.g. alignright-margins) to the image could be very nice – to determine the margins arround a floating image f.e.

img.alignright-margins {
  margin: 0 0 20px 30px;
}

do not forget to save your settings.