Artikel-Block mit Bild und figcaption

[UweHarwardt]

Ich bitte vorab schon mal um Entschuldigung, wenn ich hier im falschen Forum gelandet sein sollte.

Ich suche einen Block wie "Artikel", also ein Bild mit einem daneben stehenden Text. Jedoch würde ich gern unter das Bild einen kurzen Text wie beispielsweise einen Urheberhinweis setzen.

Ich benötige also ein figure-Element mit figcaption-Tag.

Nach langer Suche in diversen Themen nach einem geeigneten Block, der sich für meine Bedürfnisse anpassen ließe, hab's ich aufgegeben. Entweder gibt es in Mobirise 6.1.9 keinen derartigen Block oder ich habe es übersehen.

Kleiner Hinweis: Ein wenig html und css kann ich durchaus, jedoch mit Bootstrap habe ich mich noch nie beschäftigt.
Mit dem Code-Editor bekomme ich das also hin, jedoch ist es dann nichts, was man als wiederverwendbaren User-Block speichern könnte, der dann ohne den Editor im WYSIWYG-Modus zu bearbeiten wäre.

Wenn mir jemand auf die Sprünge helfen würde... Entweder mit einem Hinweis, wo ein derartiger Block zu finden wäre oder vielleicht sogar selbst ein html- und css-Grundgerüst dafür gebastelt hätte...

Ich sag schon mal vorab artig "Danke"

[Volker]

Hallo,

kannst Du z.B. so machen :

Code: Alles auswählen

<section data-bs-version="5.1" class="content5" group="Content">
    <mbr-parameters>
        <header>Size</header>
        <input type="checkbox" title="Full Width" name="fullWidth">
        <input type="range" inline title="Top" name="paddingTop" min="0" max="10" step="1" value="9">
        <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="10" step="1" value="5">
        <input type="range" name="textWidth" title="Width" min="4" max="12" value="12" step="1">
        <header>Show/Hide</header>
        <input type="checkbox" title="Title" name="showTitle">
        <input type="checkbox" title="Subtitle" name="showSubtitle" checked>
        <header>Background</header>
        <input type="color" title="Color" name="bgColor" value="#ffffff">
    </mbr-parameters>
    <div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
    <div class="row justify-content-center align-items-center">

        <!-- Links: Bild -->
        <div class="col-md-12 col-lg-6">
            <figure>
                <img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-12-07_092812/assets/images/a1-584x438.jpg" alt="Eine Landschaft mit Bergen" class="img-fluid">
                <figcaption>Hier der Text unter dem Bild</figcaption>
            </figure>
        </div>

        <!-- Rexchts: TEXT -->
        <div class="col-md-12 col-lg-6">
            <h3 class="mbr-section-title mbr-fonts-style mb-4" mbr-if="showTitle" data-app-selector=".mbr-section-title" mbr-theme-style="display-2">
                <b>Article Title</b>
            </h3>

            <h4 class="mbr-section-subtitle mbr-fonts-style mb-4" mbr-if="showSubtitle" data-app-selector=".mbr-section-subtitle" mbr-theme-style="display-5">
                Enter your subtitle here
            </h4>

            <p class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
                You can use content blocks to arrange your articles, large texts, instructions. Combine these blocks with media blocks to add illustrations and video tutorials. You can use various content blocks to work with your text. Add quotations, lists, buttons. Select your text to change its formatting or add links. Mobirise is a simple website builder that helps you create amazing web pages without knowing any code.
            </p>
        </div>

    </div>
</div>

</section>

Oder einfach einen vorhandenen Block nehmen und den Tag einbauen.

Code: Alles auswählen

 <figure>
                                <img class="large-radius" src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/info_0040sound_002ddj_002ede/addons/standm5/components/_images/stand/image15.jpg"
                                     alt="Mobirise Website Builder"/>
                                    <figcaption>Aussicht auf die Alpen bei Sonnenaufgang.</figcaption>
                                    </figure>

Hier der ganze Block im original: Da den Tag dann einbauen wie oben beschrieben

Code: Alles auswählen

<section data-bs-version="5.1"
        class="article03 standm5"
        group="Article"
        mbr-class="{
    'mbr-fullscreen': fullScreen,
    'mbr-parallax-background': bg.parallax}"
>
    <mbr-parameters>
        <header>Size</header>
        <input type="checkbox" title="Full Width" name="fullWidth"/>
        <input
                type="range"
                inline
                title="Top"
                name="paddingTop"
                min="0"
                max="12"
                step="1"
                value="5"
        />
        <input
                type="range"
                inline
                title="Bottom"
                name="paddingBottom"
                min="0"
                max="12"
                step="1"
                value="5"
        />
        <input type="checkbox" title="Reverse" name="reverseContent"/>
        <header>Show/Hide</header>
        <input type="checkbox" title="Label" name="showLabel" checked/>
        <input type="checkbox" title="Title" name="showTitle" checked/>
        <input type="checkbox" title="Text" name="showText" checked/>
        <input type="checkbox" title="Buttons" name="showButtons" checked/>
        <header>Background</header>
        <fieldset type="background" name="bg" parallax>
            <input type="image" title="Image" value="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/info_0040sound_002ddj_002ede/addons/standm5/components/_images/background1.jpg"/>
            <input type="color" title="Color" value="#ffffff" selected/>
        </fieldset>
        <header condition="bg.type === 'video'">Fallback Image</header>
        <input
                type="image"
                title="Fallback Image"
                value="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/info_0040sound_002ddj_002ede/addons/standm5/components/_images/background1.jpg"
                name="fallBackImage"
                condition="bg.type === 'video'"
        />
        <input type="checkbox" title="Overlay" name="overlay" condition="bg.type !== 'color'"/>
        <input
                type="color"
                title="Overlay Color"
                name="overlayColor"
                value="#ffffff"
                condition="overlay && bg.type !== 'color'"
        />
        <input
                type="range"
                inline
                title="Opacity"
                name="overlayOpacity"
                min="0"
                max="1"
                step="0.1"
                value="0.8"
                condition="overlay && bg.type !== 'color'"
        />
    </mbr-parameters>

    <div class="mbr-fallback-image disabled" mbr-if="bg.type == 'video'"></div>
    <div
            class="mbr-overlay"
            mbr-if="overlay && bg.type !== 'color'"
            opacity="{{overlayOpacity}}"
            bg-color="{{overlayColor}}"
    ></div>

    <div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-10">
                <div class="content-wrapper">
                    <div class="row justify-content-between" mbr-class="{'flex-row-reverse' : reverseContent}">
                        <div class="col-12 col-lg-5">
                            <div class="title-wrapper">
                                <p class="mbr-label mbr-fonts-style" mbr-theme-style="display-4"
                                   mbr-if="showLabel" data-app-selector=".mbr-label">
                                    OUR GROWTH JOURNEY
                                </p>
                                <h2 class="mbr-section-title mbr-fonts-style"
                                    data-app-selector=".mbr-section-title, .mbr-section-btn"
                                    mbr-theme-style="display-2" mbr-if="showTitle">
                                    How Our Fashion Blog Evolved Into a Style Destination
                                </h2>
                                <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7"
                                   mbr-if="showText" data-app-selector=".mbr-text">
                                    What started as a small passion project has grown into a trusted source of fashion
                                    insights, trend analysis, and style inspiration.
                                </p>
                                <div class="mbr-section-btn" mbr-if="showButtons" data-toolbar="-mbrBtnMove,-iconFont"
                                     mbr-buttons mbr-theme-style="display-4">
                                    <a class="btn btn-black" href="https://mobiri.se" data-app-placeholder="Type Text">
                                        Get Started
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <div class="image-wrapper">
                              
                                <img class="large-radius" src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/info_0040sound_002ddj_002ede/addons/standm5/components/_images/stand/image15.jpg"
                                     alt="Mobirise Website Builder"/>
                                 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

article03-6 Stand M5

standm5.png (25.03 KiB) 385 mal betrachtet

Hier mit eingebauten <figcaption>Aussicht auf die Alpen bei Sonnenaufgang.</figcaption>

Wenn der Text mittig unter dem Bild stehen soll, dann so:

Code: Alles auswählen

 <figure class="text-center">

[UweHarwardt]

Hallo Volker,

verbindlichsten Dank!

Ich werde es morgen ausprobieren.

[Tommy Herrmann]

Moin Uwe,

und willkommen bei uns im Forum

Ich verstehe die Frage jetzt nicht wirklich.

Mobirise bietet doch an fast allen Bilderblöcken eine Beschreibung (Description) unter dem Bild an, die man in den Blockwerkzeugen einfach mittels Schalter ein- oder ausschalten kann.

Hier als Beispiel Screenshots vom Standard-Thema "Mobirise5" - unter jedem der Blöcke steht das Caption:

… oder soll es unbedingt das <figure> Tag sein - es ist eventuell wichtig für SEO, weil es die semantische Struktur verbessert und Suchmaschinen hilft. Ich bin mir nicht sicher, aber ich glaube Mobirise verwendet dieses Tag gar nicht.

[UweHarwardt]

Hallo Tommy,

auch Dir gilt mein Dank!

Ich lese ja seit einigen Tagen hier still mit, denn ich bin vor etwa drei Wochen erst mit Mobirise in Berührung gekommen und habe nun seit einer Woche eine Lizenz. Die Community hier ist hilfreich und vor allem schnell. Ich bin beeindruckt! Danke und weiter so

Nun, zu meiner Frage: Ja, es ging mir tatsächlich um das <figure>-Element, da ich die Semantik eines ordentlich aufgebauten html-Dokumentes durchaus zu schätzen weiß. Immerhin code ich html und css seit vielen Jahren komplett von Hand. Naja, mein Projekt ist ein wenig in die Jahre gekommen und man sieht im das Alter an. Es wirkt schon recht altbacken. Ich habe es in den letzten beiden Dekaden zweimal komplett umgestrickt - aber nun bin ich auch zu alt, es noch einmal von Grund auf neu zu coden. Die css-Datei hat sich bei den beiden Umstrukturierungen des html-Codes auch nicht unerheblich aufgebläht und Teile davon verstehe ich nun selbst auch nicht mehr. Da erschien mir Mobirise eine prima Alternative - denn mit Bootstrap wollte ich mich auch nicht mehr auseinandersetzen.

Ich hatte gehofft, es gäbe eine Möglichkeit, in MBR lang etablierte html-Elemente irgendwo "anmelden" zu können um sie anschließend im Visual Editor nutzen zu können, aber da war der Wunsch wohl Vater des Gedanken.

Mit dem Code-Editor kann ich das <figure>-Element und auch das <figcaption> zwar in den html-Quellcode einbauen und in der css-Datei auch die Funktion einschalten, <figcaption> sichtbar oder unsichtbar zu machen, editieren läßt sich das Element jedoch nicht - es sei denn, ich bastel nun ein <p>-Element in das <imgcapture>

Zwei Ergänzungen in html:

Code: Alles auswählen

<mbr-parameters>
        <input type="checkbox" title="Figcaption" name="showFigcaption" checked>
</mbr-parameters>        
.
.
.
<figure>
  <img class="large-radius" src="file:///H:/projekt-1/grafik.jpeg" alt="Das Bild">
       <figcaption mbr-if="showFigcaption">
             <p class="mbr-label mbr-fonts-style my-caption" mbr-theme-style="display-4">
                Der Text unter dem Bild
             </p>
       </figcaption>
</figure>

Eine Ergänzung in css:

Code: Alles auswählen

.my-caption {
  text-align: center;
  color: #000000;
}

Dann läßt sich die Sichtbarkeit (Darstellung) von <figcaption> über das blaue Zahnrad aus- bzw einschalten und der Text unter dem Bild nach Mausklick ändern, denn es ist ein <p>-Element.

Aber Du hast mich ja darauf hingewiesen, daß es fertige Blöcke gibt, bei denen ich diese Klimmzüge nicht machen muß. Denn ich bezweifle, daß ein <p>-Element innerhalb eines <figcaption> die "reine Lehre" ist und der beabsichtigte Zweck der semantischen Bedeutung noch erfüllt wird. Dann wird es eben mit den mitgelieferten Blöcken gehen müssen. Naja, ist eben kein Wunschkonzert

Es wird sicher noch weitere Herausforderungen geben, bei denen ich auf Eure Erfahrungen zurückgreifen muß. Bis dahin also