Template Barrierefrei

[neuling321]

Hallo

Ich möchte das sich bei meinem Template, wenn es mit einem Handy geöffnet wird automatisch der grösse anpasst und
das sich das Menü, von Buttons in ein "Dropdown" Feld verwandelt.
Habe ein ähnliches Template gefunden (Nexus), leider verstehe ich nicht ganz, wie die Button in eine Dropbox geändert werden. Gibt es da irgendwo eine einfache Anleitung?

Gruss Sascha

[dbs]

Hallo, wenn du kein Webdesign beherrscht, dann such dir ein Template, dass alles das mitbringt was du brauchst.
In deinem Fall ist das Zauberwort "responsive". Das sollte aber heutzutage der Standard sein.
Du kannst gern Sachen verlinken um zu verdeutlichen was das Problem ist, damit man dich besser versteht.

[hgs]

Hier gibt es schöne Beispiele
https://template.WebsiteBaker.org/

[neuling321]

Hallo

@dbs
Was meinst Du damit? "wenn du kein Webdesign beherrscht"
Heisst das man darf hier nur Fragen wenn man es schon kann und versteht? Wenn ich es wüsste
müsste ich logischerweise nicht fragen oder?

Ich wollte halt kein "fertiges Template nehmen. und soweit geht ja auch alles, nur ist mein Template nicht "responsive" und ich suche ein einfaches Template vor man sich das mal einfach anschauen kann.

[dbs]

Es war nicht unfreundlich gemeint.
Das Thema ist komplex und wird einiges deiner Zeit beanspruchen. Wenn du die nicht hast, ist es einfacher ein Template zu nehmen, an dem nur kleine Änderungen gemacht werden müssen.

[neuling321]

Hallo

Ich bin in Kurzarbeit und habe Zeit ohne Ende. Ich denke auch an den PS im Kopf sollte es nicht liegen.

Also kurz gesagt gibt es kein Template oder FAQ wo das mal einigermassen erklärt ist?

[dbs]

FAQ's zu Responsive Webdesign, oder noch komplizierter Barrierefreies Webdesign, findest mit der Suchmaschine deiner Wahl.
Das Design deines Templates ist völlig unabhängig von WB. Du kannst mit WB ALLES machen, das ist das Schöne.

Fertige Templates findest du hier: https://template.WebsiteBaker.org/
Ein Tutorial, wie man ein WB Template macht, erübrigt sich damit eigentlich.

In der WB Hilfe sind noch alte Einträge dazu: https://help.WebsiteBaker.org/de/designerhandbuch/html-vorlage-konvertieren.php und folgende.
Dabei geht es nicht um responsive, weil man jedes Template für WB nutzen kann, also auch dein eigenes oder ein fremdes responsive Template.

[red]

Also kurz gesagt gibt es kein Template oder FAQ wo das mal einigermassen erklärt ist?

Mir haben die Informationen im index.php des Templates hortal https://wbce.at/tpls/template-hortal.html geholfen.

Der Autor des templates schreibt darin "Diese Kommentare helfen dir im folgenden, ein modernes Template zu verstehen."

Solche Kommentare stehen in vielen templates.

[LudwigSt]

Ich möchte das sich bei meinem Template, wenn es mit einem Handy geöffnet wird automatisch der grösse anpasst und
das sich das Menü, von Buttons in ein "Dropdown" Feld verwandelt.

Seiten, die sich am Handy von der Größe her anpassen, nennt man "responisve". Sicher ist es möglich, dein vorhandenes Termplate entsprechend zu ändern. Es ist aber ein nicht unerheblicher Aufwand. Was man da alles machen muss, ist hier ganz gut erklärt: https://www.edv-lehrgang.de/website-auf-responsive-design-umstellen/
Bei youtube gibt es auch wirklich viele Videos, die das erklären. Wenn du es unbedingt selber machen möchtest, dann acker dich da mal durch.

Habe ein ähnliches Template gefunden (Nexus), leider verstehe ich nicht ganz, wie die Button in eine Dropbox geändert werden. Gibt es da irgendwo eine einfache Anleitung?

Das macht man entweder nur mit CSS oder mit CSS und Javascript. Auch dazu findes du bei Youtube jede Menge Erklärvideos. Aber, wie @dbs schon schrieb, ist es einfacher, ein bereits vorhandenes WB-Template einzusetzen. Die sind schon responsive und haben ein entsprechendes Menü. Dieses "Nexus" Template ist von der "Konkurrenz" und für WB > 2.10 wohl nicht geeignet. Also nimm lieber eins von der von @dbs verlinkten WB-Template-Sammlung.

[hgs]

Alle Templates auf unserem Showcase
 https://template.WebsiteBaker.org/
 sind WB tauglich, Nexus gehört dazu
Wurden extra von uns angepasst.

[neuling321]

Hallo Zusammen

Wenn es einem richtig erklär wird ist es nicht mal so dramatisch, ich würde eher sagen aufwendig,
weil man sich wirklich im Vorfeld klar sein sollte was man möchte.

@LudwigSt
Danke für den Link, der ist wirklich Gold wert

Nun habe ich noch zwei fragen.

Gibt es irgendwo ein Kontaktformular als Modul? oder so was?
Oder kann man sich das im wysiwyg Editor selber zusammen bauen?
Auch sollte von Google die Karte mit eingebunden werden.

Und wie stelle ich es an, das die Fussleiste immer unten zum Schluss der Seite ist, auch dann
wenn der Body dynamisch wird. Es gibt da einige Tips im Internet, mein Problem ist aber,
das ich ein Hintergrund Bild habe das dann auch hinter der Fussleiste sein soll.

Gruss Sascha


Danke Gruss Sascha

[hgs]

WebsiteBaker liefert ein Modul "Form" mit aus, damit kann man sehr schnell ein Kontaktformular selber erstellen. Oder man nutzt die fertigen Vorlagen.
Erstelle eine neue Seite und wähle als Modul "Form" aus.

[neuling321]

Hallo

Wo gibt es die fertigen vorlagen, wollte mir das gerne mal anschauen

[LudwigSt]

Und wie stelle ich es an, das die Fussleiste immer unten zum Schluss der Seite ist, auch dann
wenn der Body dynamisch wird. Es gibt da einige Tips im Internet, mein Problem ist aber,
das ich ein Hintergrund Bild habe das dann auch hinter der Fussleiste sein soll.

Das macht man z. B. so:

Code: [Select]

       footer{
           position: absolute;
           bottom:0;
           left: 0;
           height: 40px;
           width: 100%;
}
Damit ist die Fußzeile (<footer>) immer unten und über die volle Fensterbreite. Wenn du das Hintergrundbild beim body eingebunden hast, dann liegt es auch hinter der Fußzeile. Wenn du dem footer mit opacity noch etwas Durchsichtigkeit hinzufügst, dann schimmert das Hintergrundbild dort noch etwas durch. Ohne opacity hat der footer die Hintergrundfarbe, die du ihm gegeben hast.

[hgs]

Wo gibt es die fertigen vorlagen, wollte mir das gerne mal anschauen

Im BackEnd auf der Seite wo das Modul Form angegeben ist, gehst du auf <Improtieren> und wählst unter "Datei Bitte auswähle" eine Vorlage aus und klickst auf <Importieren>
Fertig