Zitat von
MacPix
H2 ist extra nicht aus dem Text Element..
Und warum nicht?
Ich denke du verschachtelst dich in deinen Gedanken. Wenn man dein PDF aus dem ersten Beitrag nimmt, dann würde ich das im Backend so aufbauen:
Code:
1 - Für die Seite ganz normal einen Artikel anlegen der dann zwischen Header und Footer ist
2 - In diesem Artikel dann einen Elementtyp "Text" einbetten:
> Die Überschrift h2 eintragen
> Den Text eintragen
> Als CSS-Klassen "rte-h2 rte-h2-top" eintragen
3 - Darunter dann einen Elementtyp ""Elementgruppe einbetten:
> Zur Übericht im Backend als Titel "Grid Container" eintragen
> Als CSS-Klasse "grid__container" eintragen
4 - Nun bei der soeben angelegten Elementgruppe auf das Icon für "Kindelemente ... anlegen" klicken
> Hier kannst du nun deine Schachteln anlegen indem du in der Kindelementeansicht nun
4.1 - Für jede deiner Gruppierungen (Bild, Überschrift, Link) einen Elementtyp ""Elementgruppe einbetten z.B. 3 Stück
(Alternativ nur eines anlegen, bearbeiten und anschließend kopieren und entsprechend nachbearbeiten)
> Zur Übericht im Backend als Titel "Grid Item" eintragen
> Als CSS-Klasse "grid__item" eintragen
4.2 - Nun in eines der soeben angelegten "Gruppen"-Elementgruppe auf das Icon für "Kindelemente ... anlegen" klicken
> Hier kannst du nun deine Gruppierung anlegen indem du in der Kindelementeansicht nun
4.2.1 - Einen Elementtyp "Bild", einen Elementtyp Überschrift und einen Elementtyp "Hyperlink" einbetten, was ja deine Gruppierung ist
Wenn das alles gemacht hast müsste ja dann etwas in der Art herauskommen:
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="generator" content="Contao Open Source CMS" />
<title>Titel</title>
<meta name="robots" content="noindex,nofollow" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,shrink-to-fit=no" />
<link rel="stylesheet" href="layout_default.css" />
</head>
<body>
<main>
<div id="article-3" class="mod_article block">
<div class="rte-h2 rte-h2-top content-text">
<h2>Lassen Sie den Alltag hinter sich...</h2>
<div class="rte">
<p>Und geniessen Sie eine entspannende Zeit beim Wellness- & Beautycenter.</p>
<p>
Erleben Sie neue und innovative Pflegekonzepte, kombiniert mit hochwirksamen und bestens verträglichen Produkten,
optimal abgestimmt auf den Hauttyp und Hautzustand jeden Alters.
</p>
<p>
Hier eine kurze Beschreibung zu den einzelnen Angeboten, genaue Informationen über die speziellen Körper- und
Gesichtsbehandlungen sowie die Zeitangaben.
</p>
</div>
</div>
<div class="grid__container content-element-group">
<div class="grid__item content-element-group">
<div class="content-image">
<figure>
<img src="/images/gesichtsbehandlung_02-ymr4gh1bswdf8d6.webp" alt="" width="362" height="163" />
</figure>
</div>
<h2 class="content-headline">Kosmetik</h2>
<div class="content-hyperlink">
<a href="/macpix" title="mehr ...">mehr ...</a>
</div>
</div>
<div class="grid__item content-element-group">
<div class="content-image">
<figure>
<img src="/images/opi-h-18pd4y8hkgz1v5g.webp" alt="" width="362" height="163" />
</figure>
</div>
<h2 class="content-headline">Kosmetik</h2>
<div class="content-hyperlink">
<a href="/macpix" title="mehr ...">mehr ...</a>
</div>
</div>
<div class="grid__item content-element-group">
<div class="content-image">
<figure>
<img src="/images/gesichtsbehandlung_02-ymr4gh1bswdf8d6.webp" alt="" width="362" height="163" />
</figure>
</div>
<h2 class="content-headline">Kosmetik</h2>
<div class="content-hyperlink">
<a href="/macpix" title="mehr ...">mehr ...</a>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
Nun noch mit passendem CSS (grob so) designen und dann sollte es doch gehen und du kannst jede Gruppierung ein-/ausblenden usw.:
HTML-Code:
.rte-h2 {
margin: 0;
padding: 0;
}
.rte-h2 h2 {
font-family: "beauty_mountains";
margin: 0 auto;
}
.rte-h2 p {
margin-bottom: 16px;
}
.rte-h2-top {
max-width: 875px;
margin: 0 auto;
}
.rte-h2-top h2 {
margin-bottom: 30px;
}
.grid__container {
max-width: 1475px;
margin: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
gap: 1em;
}
.grid__item {
color: hsl(0, 0%, 95%);
background-color: hsl(0, 0%, 26%);
border-radius: 7px;
display: flex;
flex-direction: column;
flex-wrap: inherit;
justify-content: space-evenly;
align-items: center;
padding: 30px;
}
.grid__item img {
max-width: 100%;
height: auto;
}
Zitieren
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
