Mit dem Bild-Addon kannst du genau das tun: Bilder in eine Seite einfügen.
Das Bild-Addon ist dabei gedacht für einzelne Bilder, nicht für Galerien. In der Anleitung lernst du, wie du Bilder einfügst und diese mit einer Lightbox versehen kannst.
Falls du mit diesem Video in die Reihe einsteigst, beachte bitte unbedingt auch die folgenden Videos zu den Formatierungsgrundlagen:
- SP-Pagebuilder von Joomshaper Nr. 5: Zeilen, Spalten, Addons formatieren - die Grundlagen
- SP-Pagebuilder von Joomshaper Nr. 6: Zeilen formatieren im Detail
- SP-Pagebuilder von Joomshaper Nr. 7: Spalten formatieren und verschachteln
- SP-Pagebuilder von Joomshaper Nr. 8: Inhaltselemente (Addons) einfügen
Alle Tutorials zum Pagebuilder findest du unter dem Tag SP Pagebuilder auf web2use.ch.
Der Pagebuilder ist übrigens ein Produkt von www.joomshaper.com
Beim folgenden Text handelt es sich um eine unkorrigierte Transkription des Videos durch Youtube.
hallo und ganz herzlich willkommen zu diesem neuen tutorial von vector jungs punkt ch ich habe in den beiden letzten tutorials gezeigt wie man überschriften einfügt und wie man den textblock einfügt wie man den auch nutzen kann in diesem tutorial hier geht es jetzt um eine weitere um ein weiteres addon das sehr wichtig ist um seiten zu gestalten und zwar um das bild hat ich gehe hier ins backend ich bin hier bereits in der seite drin und du siehst ich habe dir ein wenig umgebaut im vergleich zum letzten tutorial ich habe hier die überschrift jones das ist dieser titel hier dann habe ich hier das text element gelassen habe hier jetzt aber ein zweistelliges template genommen nämlich dieses auch zu viel und habe recht jetzt eine lehre sparte und ich klicke hier jetzt auf erden und wähle dann das bild
ich speichere das jetzt einfach mal wenn ich die seite im frontend neue lautet dann siehst du ist hier einfach mal ein bild drin und dieses bild das kommt standardmäßig meter ist immer schon ein bild eingefügt jetzt natürlich normalerweise wähle ich da nicht mein bild nicht dieses bild haben sondern mein eigenes bild darum lösche ich das und gehe hier in die bildverwaltung und du siehst jetzt auch gleich gegen jetzt etwas schneller choose the image es gibt hier einen ordner für bilder und wenn ich bilder hochladen dann fügt es einfach alle bildet da hinein im hintergrund sieht es dann etwas verschachtelte aus da gibt es einen jahrgang zu wort 20 21 tagen einen monat zuordnet und dann einen tagesordnung und hier drin ist jetzt die letzte datei aber wenn ich hier auf mit whisky dann sind die am selben ort wenn ich jetzt auf upload file ski und dann auf den desktop und ihre irgendein anderes bild wähle dann fügt es mir das hier ein wenn ich wieder die verzeichnisse brause dann komme ich wieder auf diesen jahrgangs wort nimmt dann auf den monat sorgte und jetzt ist hier aber ein neuer worden 12 heute ist der zwölfte april und hier drinnen ist diese datei das heißt ich kann auch hier selber ordner erstellen ich kann die auch im router stellen dann muss ich hier aber wieder durch diese etwas handgestrickte navigation nach oben gehen ein neuer ordner stellen und die bildet dahin einladen das system dahinter ansonsten habe ich alle beauty wir in diesem feld und jetzt habe ich das bild ja hochgeladen da kann ich es anklicken es setzt mit ihrer serien und dann kann ich einfach auf insert klicken und jetzt ist das bild eingefügt da muss ich gar nicht viel mehr machen ich speichere und das bild ist da und sieht gut aus das an sich ist jetzt aber natürlich noch relativ langweilig denn das add on kann sehr viel mehr zum einen habe ich hier die möglichkeit einen titel einzufügen und wie bei den anderen inhaltselemente wenn ich einen titel einfüge dies ist ein beispiel
siehst du sofort runter kommen weitere optionen zur formatierung dieses titels ich lass das jetzt mal mit h3 das passt mir schriftgröße ist das template vorgegeben auch die anderen style sind alle so vorgegeben ich lasse das jetzt alles einfach mal zu stehen und dann kommen wir hier zu den bild optionen und hier ist es so dass wir zu meinen mal das bild an sich haben dann können wir definieren wie breit das bild ist das ist normalerweise einfach 100 prozent bereit also so breit wie diese spalte ist ich kann das aber natürlich auch eingrenzen und sagen ich hätte hier gerne und 20 pixel wenn ich das speichere und die seite neu laden wird das dann
so sehr viel kleiner also du siehst ich kann damit wirklich die breite definieren das will ich habe nicht der in der regel passt es wirklich dann auf die breite der sparte darum nehme ich das hier jetzt einfach wieder raus also das habe auch mit der höhe und ich habe auch die möglichkeit hier einen radios festzulegen für die ecken also wenn ich das jetzt speichere diesmal die seite gleich von beginn weg dann siehst du wunder dass mir die ecken ab so also auch das ist an sich noch nicht sehr spektakulär aber eine funktion die je nach template funktionieren kann ein ganz wichtiger punkt ist der alternative text wenn du nicht weißt was diese alternative text ist dann empfehle ich dir unbedingt das zugehörige tutorial zu schauen ich werde das unten noch verlinken der alternative text ist der text den wir dem bild mit mitgeben für die suche roboter und in denen wir indem wir beschreiben worum es in dem in dem bild geht oder auf dem bild eine schale eine schwarze schale mit goldener vertiefung sei ohne punkt dann habe ich die möglichkeit hier zu sagen ich will das ausrichten links zentriert oder rechts standard mäßiges zentriert was wichtig ist diese ausrichtung hat auch eine wirkung auf den titel denn du siehst hier ist der titel ebenfalls zentriert jetzt habe ich ganz links ausgerichtet da wird auch der titel links ausgerichtet wir gehen noch mal zurück und jetzt kommt eine sehr spannende funktion denn wir haben die möglichkeit das bild in einer light box zu öffnen wenn ich das hier aktivieren dann kommt ihr eine überlappung farbe diese farbe ich zeig dir schoss die bewirkt diese farbe die liegt über dem bild wenn ich mit der maus darüber fahre und jetzt siehst du da kommt dann auch dieses plus und wenn ich drauf klicken dann öffnet es mir dieses bild in der glasbox soll und diese überlegung farbe titan nicht definieren ich kann hier hingehen und sagen ich hätte jetzt gerne etwas ganz klassisches nämlich einfach ein schwarz oder so ein grau und was jetzt ganz spannend ist ich kann hier ganz auf die farbe schwarz gehen also ganz unten rechts und hier die transparenz eingeben wenn ich hier ganz schwach diese überlappung nur haben möchte dann gehe ich hier weit nach links wenn ich die stärke haben möchte weiter nach rechts aber ich hätte die ganze dezent sauer das einfach so hin und dann muss ich das nur noch bestätigen abzuspeichern und aktualisieren du siehst jetzt ganz dezent auch wie es der hintergrund etwas dunkler wird und dann die lightbox sich öffnet und was ich dir schon früher gezeigt habe natürlich ist es möglich auch mehrere bilder so einzufügen ich klicke der dupliziere jetzt einfach mal diese bilder speichere nochmal und lade das auch noch mal und dann siehst du ist jedes bild einzeln auch jetzt mit titel natürlich eingefügt was nicht möglich ist mit dem bilder ton ist eine galerie zu machen das heißt ein bild zur eröffnung dann hier irgendwie links oder rechts weiter zu klicken damit die anderen bekommen das geht nicht weil es gibt ein ganz spezifisches galerie werden und das werde ich dann im nächsten tutorial zeigen hier also diese version die ist wirklich für einzelne bilder und ich lösche jetzt hier die überzähligen wieder damit wir nur noch eines drin haben und diese seine eltern haben wir damit ausgereizt was wir haben einen titel gesetzt wird können den formatieren wir können ein bild einfügen wir können übrigens den titel auch nach dem bild setzen das habe ich vorhin übersprungen also wenn ich hier bot umsätze und die seite aktualisieren dann kommt der titel nach dem bild so dann haben wir das bild selber eingefügt wir haben gesehen dass wir höhe breite und radio definieren können wir haben den alternativen text eingefügt wir haben die bild position angepasst und auch ein lightbox gebaut und gleich wie bei den anderen atoms gibt es hier natürlich noch die styles die aber grundsätzlich für das addon gelten darum gehe ich hier nicht näher darauf ein genauso auch die attraktionen die sind die gleichen wie bei allen anderen fans auf damit weist du alles was du über das bild dann wissen muss noch einmal wenn du mehrere bilder hast und dadurch klicken können wo möchtest dann musst du das galeria tom nehmen das werde ich dann in meinem nächsten tutorial erklären ich hoffe die hat gefallen du konntest etwas lernen ich wünsche dir viel spaß beim ausprobieren und bis zum nächsten tutorial bis bald