Ich vermute mal,das unter Zeilenstil mit einer Bildleiste und Farbübergängen gearbeitet wurde.

Richtig!  mit der Bildliste ist es gemacht worden in der ersten Reihe und zusätzlich die Farbübergänge aktiviert worden.

Und der Text?

So ähnlich habe ich alles hinbekommen, aber bei kleinen Auflösungen (responsiv) sieht das komisch aus.

Der Text passt sich nicht an und die Bilderliste auch nicht.

Hat jemand einen Tipp oder gibt es einen Code?

Für den Slider hatte ich mal diesen Code

<style>

@media (max-width: 1249px) {

.swiper-slide .slide-description { font-size: 3.0vw!important; }

.imContentDataContainer { padding:0 0!important; } }

</style>

Das ist kein genereller Code für alle Bildergalerien, sondern nur für das eine Widget (ich glaube den Grid Slider)

Genauso gibt es keinen generellen Code, damit sich Text anpasst. Das ist alles individuell. Der Text passt sich auch nicht an im Musterlink. Wenn dann musst du ein Titel-Objekt nehmen und das Häkchen setzen.

Und hast du einen Code für die Bildergalerie mit Text

Habe es mal Testweise hoch geladen

www.schalmeien-voigtstedt.de/test

Für Deine Testseite geht folgender Code ins Eigenschaftenfenster der Seite "vor dem </HEAD> TAG. Die Font-Größe dann bei Bedarf anpassen.

<style>
    /* Klein aber fein */
    @media ( max-width: 479px ) {
 #imTextObject_82_tab0 .fs48lh1-5 { font-size: 12pt; }
    }
    @media ( min-width: 480px ) {
 #imTextObject_82_tab0 .fs48lh1-5 { font-size: 14pt; }
    }
    @media screen and ( min-width: 1150px )  {
 #imTextObject_82_tab0 .fs48lh1-5 { font-size: 16pt; }
    }
    /* Lauftext */
    @media ( max-width: 479px ) {
 #imTextObject_82_tab0 .fs26lh1-5 { font-size: 11pt; }
    }
    @media ( min-width: 480px ) {
 #imTextObject_82_tab0 .fs26lh1-5 { font-size: 12pt; }
    }
    @media screen and ( min-width: 1150px )  {
 #imTextObject_82_tab0 .fs26lh1-5 { font-size: 14pt; }
    }
</style>

Ok danke, aber wie kann man das Bild auch kleiner machen, bei den kleineren Einstellungen bleibt die Höhe und die Seiten werden abgeschnitten

Wenn Du nur mit einem Bild und aktivierten Farbübergängen arbeitest, kannst Du unter <Anordnung> An Fenster anpassen und <Ausrichtung> zentriert einstellen. Dann funktioniert es auch responsiv. Bei der Bildliste gibt es diese Optionen nicht.

So ein Mist..bei einem Bild ist ja Farbübergang sinnlos

(It > De) ... ... hallo, ... vielleicht habe ich die Google-Übersetzung nicht verstanden, aber möglicherweise und in EXTRA können Sie einen von mir erfundenen Code verwenden, um das Größenverhältnis der Zeile im Verhältnis zu den Abmessungen der Diashowbilder zu erhalten ...
... bekannt, dass Sie keine kongruenten Bilder mit Verhältnissen von 3: 2 und 16: 9 verwendet haben.
.... also, wenn Sie ein Experte für das Programm sind, und wenn Sie die Panels für EXPERT verwenden können,
... Sie könnten versuchen, meinen Code zu verwenden, ... wenn Sie sich in diesen Bedingungen befinden und wenn Sie interessiert sind, lassen Sie es mich wissen ...
... Anmerkung: ich ohne PC und ohne Programm ...
... ansonsten, wenn Sie die Übersetzung meiner Worte nicht verstanden haben, ignorieren Sie meinen Beitrag und das, was ich gesagt habe...
Hallo - ciao

*

Dein Code war nur für den Slider und der hat funktioniert.

Aber der Code geht nicht bei der Bildleiste

(It > De) ...!... auf Ihrer Seite wird mein Code nicht angezeigt, und leider erinnere ich mich nicht, welchen Code ich bereitgestellt hatte ...!...
... falls Sie das Textobjekt in geeigneter Weise verwenden sollten, anders als in der aktuellen, möglicherweise in einer größeren Zelle verteilt ...
... provisorisch, verglichen mit dem aktuellen Link und mit angewendetem Code für die Zeilenanpassung, versuchen Sie, den Code in </HEAD> einzufügen, um auch den Zeilentext anzupassen:
<!-- resize ratio row by KolAsim -->
<style> #imCell_82 * {font-size:5.5vw !important; line-height:100% !important; padding:5px !important;} </style>
<script> function h_iframeK(){
var ww =16; // larghezza immagini;
var hh = 9; // altezza immagini;
var wdiviframe = document.getElementById('imPageRow_2').offsetWidth;
var hiframe=Math.round(wdiviframe*hh/ww);
document.getElementById('imPageRow_2').style.height=hiframe -50 +"px";}
window.onload = function () {h_iframeK();}
window.onresize = function () {h_iframeK();} </script>
<!-- ======= K ======= -->

.

ciao 

*

Vielen Dank.

Die Bildgröße passt soweit, aber jetzt passt der Text wieder nicht. Der Text ist zu groß bei der Desktopansicht.

Das Klein aber fein soll eine andere größe haben wie der text darunter

Dann nimm halt statt  font-size:5.5vw eben 4.5vw oder nur 4.0vw !

Habe ich probiert aber dann passiert folgendes:

- Bild wird in der Höhe bei voller Desktopansicht auch kleiner (soll nicht sein, nur bei kleineren Ansichten)

- Schrift "Klein aber fein" und "so präsentiert....." ist gleich groß (Klein aber fein, soll aber immer größer sein, als der Text darunter)

Dann musst du einen Rand oben und unten geben (100px) !

Verschiedene Größe im Text-Objekt ist es nicht so einfach, da müsste man schon den Code individuelle ergänzen. Am einfacheren wäre es 2 Text-Objekte zu machen mit jeweils dem Text, aber den Code dafür soll die KolAsim dann machen.

Ich hoffe doch das es einen Code für sowas gibt.

Also sind 2 Textobjekte besser?

(It > De) ... der Text sollte, wie ich schon sagte, anders formatiert sein, vielleicht für die Breite der Zeile entwickelt; ... aber du musst sehen ...
...!... Sie haben die Struktur geändert...!...
... correct  >>  imPageRow_2 >> imPageRow_1
... ersetzen Sie das STYLE-Tag durch Folgendes:

<style>#imCell_82 * {font-size:5.5vw !important; line-height:100% !important; padding:2px !important;top:25% !important;}
#imCell_82 { grid-column: 2 / 146 !important; }</style>

.

Ich weiß nicht wie ich den Text formatieren soll.

Ich habe jetzt 2 Textobjekte eingefügt mit unterschiedlicher Schriftgröße.

Da muss der Code neu werden oder?

www.schalmeien-voigtstedt.de/test

... no! >> imPageRow_2  ...↑↑↑...

... OK >> imPageRow_1

.

hm jetzt habe ich wieder 1 Textobjekt gemacht aber es sieht nicht schön aus :-(

Wäre es dann nicht einfacher zwei Header Objekte [A] zu nehmen, da sich dort die Schriftgröse responsiv ändert und kein Code dafür eingefügt werden muss?

Immer wenn ein Textobjekt gelöscht wird und neu hinzukommt ändert sich der Objektindex und dann muss der Code neu angepasst werden.

Wenn Du jetzt noch meinen Code von oben zwischen den <STYLE> </STYLE> Tags nach dem Code der imgCell_82 einfügst, sollte es klappen.

Habe es hoch geladen. Aber irgendwas mache ich noch falsch. Das geht irgendwie nicht.

Zusätzlich ist das Bild in der größten Ansicht sehr sehr groß, bei den kleineren Ansichten geht es dann besser

Hast du dir die Seite noch mal angeschaut ?

Hmm, ich sehe den Code immer noch nicht, nur den ImageResize Code von KolAsim.

An gleicher Stelle folgendes für den TextResize zwischen den <style></style> TAGS:

    /* Klein aber fein */
    @media ( max-width: 479px ) {
 #imTextObject_82_tab0 .fs48lh1-5 { font-size: 12pt; }
    }
    @media ( min-width: 480px ) {
 #imTextObject_82_tab0 .fs48lh1-5 { font-size: 14pt; }
    }
    @media screen and ( min-width: 1150px )  {
 #imTextObject_82_tab0 .fs48lh1-5 { font-size: 16pt; }
    }
    /* Lauftext */
    @media ( max-width: 479px ) {
 #imTextObject_82_tab0 .fs26lh1-5 { font-size: 11pt; }
    }
    @media ( min-width: 480px ) {
 #imTextObject_82_tab0 .fs26lh1-5 { font-size: 12pt; }
    }
    @media screen and ( min-width: 1150px )  {
 #imTextObject_82_tab0 .fs26lh1-5 { font-size: 14pt; }
    }

Der "Klein aber Fein" Text funktioniert responsiv. Hast Du den als HeaderObjekt eingefügt? Dann den ersten Teil im Code weglassen.

hm, ich habe aber alles neu hochgeladen.

Nein das ist alles nicht im Header sondern auf der Seite

Das scheint ein wirkliches Problem zu sein.

Ich glaube ich werde das neu machen müssen

...!... Sie waren mit den Vorschlägen nicht vorsichtig und haben keine Korrekturen vorgenommen...!...
... gerade jetzt, für das, was Sie im Beispiel in .../test/ sehen, Ersetzen Sie den gesamten EXTRA-Code durch Folgendes:

<!-- resize ratio row by KolAsim -->
<style> #imCell_89, #imCell_89 *, #imCell_82, #imCell_82 * {font-size:6vw !important; line-height:100% !important; padding:0px !important;}
#imCell_82 , #imCell_89 { grid-column: 2 / 146 !important; }
#imCell_89 { grid-row: 1 /1 !important; top:160% !important;}
#imCell_82 { grid-row: 1 /1 !important; top:80% !important;}
#imCell_83 , #imCell_90 { display:none; } </style>
<script> function h_iframeK(){
var ww =16; // larghezza immagini;
var hh = 9; // altezza immagini;
var wdiviframe = document.getElementById('imPageRow_1').offsetWidth;
var hiframe=Math.round(wdiviframe*hh/ww);
//document.getElementById('imPageRow_1').style.height=hiframe -50 +"px";}
document.getElementById('imPageRow_1').style.height=hiframe +"px";}
window.onload = function () {h_iframeK();}
window.onresize = function () {h_iframeK();} </script>
<!-- ======= K ======= -->

.

.

So ich habe jetzt den neuen Code genommen aber 

- das die Bilder auf der größten Ansicht sind zu groß

- die Schrift "Klein aber fein"...... ist auf einmal weg

... Sie haben die Struktur weiter modifiziert ...
... versuche diesen letzten EXTRA-Code:

<!-- resize ratio row by KolAsim -->
<style> #imCell_89, #imCell_89 *, #imCell_82, #imCell_82 * {font-size:6vw !important; line-height:100% !important; padding:0px !important;}
#imCell_82 , #imCell_89 { grid-column: 2 / 146 !important; }
#imCell_89 { grid-row: 1 / 1 !important; top:70% !important;}
#imCell_82 { grid-row: 1 / 1 !important; top:30% !important;}
#imCell_83 , #imCell_90 { display:none; } </style>
<script> function h_iframeK(){
var ww =16; // larghezza immagini;
var hh = 9; // altezza immagini;
var wdiviframe = document.getElementById('imPageRow_1').offsetWidth;
var hiframe=Math.round(wdiviframe*hh/ww);
document.getElementById('imPageRow_1').style.height= hiframe +"px";}
window.onload = function () {h_iframeK();}
window.onresize = function () {h_iframeK();} </script>
<!-- ======= K ======= -->

.

Ich habe keine Struktur geändert.

Habe nun den neuen Code eingefügt, die Schrift ist wieder da aber:

- Schrift an anderer Stelle

- Schriften sind wieder gleich groß, das soll so nicht sein

... ich habe den LINK aktualisiert, ... aber! ... Ich sehe nicht den zuletzt angewendeten Code ...

Den letzten Code vondir habe ich aber eingefügt und hoch geladen

... nein! ...  no!  ... non! ...

Das verstehe ich nicht.

Naja ich habe jetzt alle Daten vom Server gelöscht und noch mal neu hoch geladen auf

die www.schalmeien-voigtstedt.de/test

Der Code kommt doch auf die Seite wo die Bilder sind oder unter 1 Eigenschaften SEO?

... jetzt ja, es ist ok; ...code ersetzt   und das ist gut... ...ciao......

.

Das sieht nicht gut aus.

- Bild und Schrift bei der größten Ansicht viel zu groß

- Schrift soll NICHT gleich groß sein, sondern das "Klein aber fein" soll größer sein wie der andere Text

... Sie haben immer noch die Struktur des Textes geändert, wobei die vorherigen Referenzen fehlschlagen ...
... siehe den >> CLONE ... (limitiert !! - temporär !!)
... Wenn es Ihnen recht ist, kopieren Sie den Code von Zeile 60 bis Zeile 75 ... ( Strg+U )  (Ctrl+U)...

.

Ich habe gar nichts geändert!!!!sondern nur den Code eingefügt und mehr nicht.

Was meinst du damit?

... siehe den >> CLONE ... (limitiert !! - temporär !!)
... Wenn es Ihnen recht ist, kopieren Sie den Code von Zeile 60 bis Zeile 75 ... ( Strg+U )  (Ctrl+U)...

<!-- resize ratio row by KolAsim -->
<style> @media (max-width: 1149px) {
#imCell_82 .fs48lh1-5 {font-size:6vw !important; line-height:150% !important;}
#imCell_82 .fs26lh1-5 {font-size:4vw !important; line-height:100% !important;}
#imCell_82 { grid-column: 2 / 146 !important; padding:0px !important;grid-row: 1 / 1 !important;} }</style>
<script> function h_iframeK(){
var ww =5; // ratio width;
var hh = 2; // ratio height;
var wdiviframe = document.getElementById('imPageRow_1').offsetWidth;
var hiframe=Math.round(wdiviframe*hh/ww);
if( wdiviframe < 1150 && hiframe < 356){
document.getElementById('imPageRow_1').style.height= hiframe +"px";
} else { document.getElementById('imPageRow_1').style.height= 356 +"px";}}
window.onload = function () {h_iframeK();}
window.onresize = function () {h_iframeK();} </script>
<!-- ======= K ======= -->