KiJu-Camps-Sandbox

KiJu-Camps-Sandbox

 

Hier könnt ihr euch ein paar Entwürfe für die neue KiJu-Camps-Startseite angucken.

Auch für die Musterseite zu einzelnen Camp-Formaten kommt in den nächsten Tagen noch eine Sandbox. Im “realen Leben” sind dann auch die Galerie-Elemente auf dieser Seite klickbar, in der Sandbox spare ich mir dafür mal die Mühe. Ihr findet die Sandbox mit Entwürfen für Bildergalerien stattdessen hier.

Elementtyp “Flip Box”

Hiervon würden dann mehrere untereinander gebaut, für jedes Campformat eine. Schrift- und Hintergrundfarben sind nahezu beliebig variabel. Den Kurztext schreibt man hier direkt rein.

Ist, im Gegensatz zu den anderen Elementtypen, nicht wirklich mobilgerätegeeignet.

Mensa Kids & Juniors Camps

Die Mensa in Deutschland Stiftung bietet jedes Jahr ein vielfältiges Angebot an Feriencamps für unterschiedliche Altersklassen an. Auf dieser Website finden Sie allgemeine Informationen zu den verschiedenen Veranstaltungsreihen sowie die Ausschreibungen konkreter Camps mit den entsprechenden Anmeldeunterlagen.

Elementtyp “Feature Section”

Funktioniert ähnlich wie die Flip Box, nur ohne Flip. Farben sind ebenfalls variabel – man könnte z.B. für den Hintergrund der Kurztexte auch die Farbe des Camp-Icons benutzen. Bild und Kurztext stehen hier nebeneinander, das Bild kann auch rechts vom Text stehen. Für dieses Element müssten die Bildmarken in dem Seitenformat vorliegen, was auch der Kasten rechts hat (das scheint nicht verstellbar zu sein).

Alleine einzigartig – gemeinsam stark.

Die Mensa Clever Children Camps stehen unter diesem Motto. 30 Kinder treffen in einer einwöchigen Ferienfreizeit aufeinander. Sie erleben gemeinsam wie es sein kann, so gesehen zu werden wie man ist und so sein zu können wie man ist.

 

Elementtyp “Side Post Grid”

Dieses Element listet Posts bzw. Seiten aus einer bestimmten Kategorie auf. Ich habe zur Veranschaulichung mal die bestehenden eingebunden. Im realen Leben würde dann eine neue Post-Kategorie “Campformate” geschaffen und deren Posts hier eingebunden. Hier und bei allen folgenden wird der Kurztext nicht direkt reingeschrieben, sondern aus dem eingebundenen Post übernommen. Farben sind verstellbar, die Anzeige von Datum und Autor kann abgestellt werden.

[vcv_posts_grid source=”%7B%22tag%22%3A%22postsGridDataSourcePost%22%2C%22value%22%3A%22post_type%3Dpost%26amp%3Bpost_status%3Dpublish%26amp%3Bposts_per_page%3D5%26amp%3Btax_query%5B0%5D%5Btaxonomy%5D%3Dcategory%26amp%3Btax_query%5B0%5D%5Bfield%5D%3Did%26amp%3Btax_query%5B0%5D%5Bterms%5D%3D126%22%7D” unique_id=”d53afba9″ pagination=”0″ pagination_color=”#ffce00″ pagination_per_page=”10″]PGRpdiBjbGFzcz0idmNlLXBvc3RzLWdyaWQtaXRlbSI%2BPGFydGljbGUgY2xhc3M9InZjZS1wb3N0cy1ncmlkLWl0ZW0taW5uZXJ7e2N1c3RvbV9mZWF0dXJlZF9pbWFnZV9oYXNpbWFnZV9jbGFzc19zaWRlX3Bvc3RfZ3JpZF9pdGVtfX0iIGl0ZW1zY29wZT0iIiBpdGVtdHlwZT0iaHR0cDovL3NjaGVtYS5vcmcvQXJ0aWNsZSI%2BPGRpdiBjbGFzcz0idmNlLXBvc3QtZGVzY3JpcHRpb24gdmNlLXBvc3QtZGVzY3JpcHRpb24tLWltYWdlLWFsaWdubWVudC1sZWZ0IHZjZS1wb3N0LWRlc2NyaXB0aW9uLS10aXRsZS1jb2xvci0wMDMyNTQgdmNlLXBvc3QtZGVzY3JpcHRpb24tLWV4Y2VycHQtY29sb3ItNGU0ZTRlIHZjZS1wb3N0LWRlc2NyaXB0aW9uLS1hdXRob3ItY29sb3ItZmZjZTAwIHZjZS1wb3N0LWRlc2NyaXB0aW9uLS1tZXRhLWNvbG9yLWQ3ZGZlNCI%2BPGRpdiBjbGFzcz0idmNlLXBvc3QtZGVzY3JpcHRpb24tLWltYWdlIiBzdHlsZT0iYmFja2dyb3VuZC1pbWFnZTp1cmwoe3tmZWF0dXJlZF9pbWFnZV91cmx9fSkiPjxhIGhyZWY9Int7cG9zdF9wZXJtYWxpbmt9fSIgaXRlbXByb3A9InNhbWVBcyI%2BPC9hPjwvZGl2PjxkaXYgY2xhc3M9InZjZS1wb3N0LWRlc2NyaXB0aW9uLS1jb250ZW50Ij48cCBjbGFzcz0idmNlLXBvc3QtZGVzY3JpcHRpb24tLW1ldGEiPjxzcGFuPlBvc3RlZCA8L3NwYW4%2BPHNwYW4gY2xhc3M9InZjZS1wb3N0LWRlc2NyaXB0aW9uLS1tZXRhLWRhdGUiPm9uIDx0aW1lIGRhdGV0aW1lPSJ7e3Bvc3RfZGF0ZV9nbXR9fSI%2Be3twb3N0X2RhdGV9fSA8L3RpbWU%2BPC9zcGFuPjxzcGFuIGNsYXNzPSJ2Y2UtcG9zdC1kZXNjcmlwdGlvbi0tbWV0YS1hdXRob3IiPmJ5IDxhIGNsYXNzPSJ2Y2UtcG9zdC1kZXNjcmlwdGlvbi0tYXV0aG9yIiBocmVmPSJ7e3Bvc3RfYXV0aG9yX3VybH19IiB0aXRsZT0ie3twb3N0X2F1dGhvcn19IiB0YXJnZXQ9Il9ibGFuayI%2Be3twb3N0X2F1dGhvcn19PC9hPjwvc3Bhbj48L3A%2BPGgzIGNsYXNzPSJ2Y2UtcG9zdC1kZXNjcmlwdGlvbi0tdGl0bGUiPjxhIGhyZWY9Int7cG9zdF9wZXJtYWxpbmt9fSIgaXRlbXByb3A9InNhbWVBcyI%2Be3twb3N0X3RpdGxlfX08L2E%2BPC9oMz57e3NpbXBsZV9wb3N0X2Rlc2NyaXB0aW9uX2V4Y2VycHR9fTxhIGhyZWY9Int7cG9zdF9wZXJtYWxpbmt9fSIgY2xhc3M9InZjZS1wb3N0LWxpbmsiIGl0ZW1wcm9wPSJzYW1lQXMiPjxkaXYgY2xhc3M9InZjZS1idXR0b24tLXN0eWxlLWdyb3ctc2hhZG93LWNvbnRhaW5lciB2Y2UtYnV0dG9uLS1zdHlsZS1ncm93LXNoYWRvdy1jb250YWluZXItLWFsaWduLWxlZnQiPjxzcGFuIGNsYXNzPSJ2Y2UtYnV0dG9uLS1zdHlsZS1ncm93LXNoYWRvdy13cmFwcGVyIHZjZSIgaWQ9ImVsLWFhZmY1Y2JiIiBkYXRhLXZjZS1kby1hcHBseT0ibWFyZ2luIGVsLWFhZmY1Y2JiIj48YnV0dG9uIGNsYXNzPSJ2Y2UtYnV0dG9uLS1zdHlsZS1ncm93LXNoYWRvdyB2Y2UtYnV0dG9uLS1zdHlsZS1ncm93LXNoYWRvdy0tYm9yZGVyLXJvdW5kIHZjZS1idXR0b24tLXN0eWxlLWdyb3ctc2hhZG93LS1zaXplLW1lZGl1bSB2Y2UtYnV0dG9uLS1zdHlsZS1ncm93LXNoYWRvdy0tY29sb3ItRkZDRTAwLS0wMDMyNTQtLWU2YjkwMC0tMDAzMjU0IiBkYXRhLXZjZS1kby1hcHBseT0icGFkZGluZyBib3JkZXIgYmFja2dyb3VuZCAgZWwtYWFmZjVjYmIiPlJlYWQgbW9yZTwvYnV0dG9uPjwvc3Bhbj48L2Rpdj48L2E%2BPC9kaXY%2BPC9kaXY%2BPC9hcnRpY2xlPjwvZGl2Pg%3D%3D[/vcv_posts_grid]

Elementtyp “Centered Post Grid”

Ähnlich wie Side Post Grid, es ist aber auch möglich, alle Inhalte nebeneinander oder im Raster anzuordnen. Ich würde ein Raster 2×2 empfehlen, da wir 4 Formate haben.

[vcv_posts_grid source=”%7B%22tag%22%3A%22postsGridDataSourcePost%22%2C%22value%22%3A%22post_type%3Dpost%26amp%3Bpost_status%3Dpublish%26amp%3Bposts_per_page%3D5%26amp%3Btax_query%5B0%5D%5Btaxonomy%5D%3Dcategory%26amp%3Btax_query%5B0%5D%5Bfield%5D%3Did%26amp%3Btax_query%5B0%5D%5Bterms%5D%3D124%22%7D” unique_id=”59865c34″ pagination=”0″ pagination_color=”#ececec” pagination_per_page=”10″]PGFydGljbGUgY2xhc3M9InZjZS1wb3N0cy1ncmlkLWl0ZW0iIGl0ZW1zY29wZT0iIiBpdGVtVHlwZT0iaHR0cDovL3NjaGVtYS5vcmcvQXJ0aWNsZSI%2BPGRpdiBjbGFzcz0idmNlLXBvc3QtZGVzY3JpcHRpb24gdmNlLXBvc3QtZGVzY3JpcHRpb24tLWZ1bGwgdmNlLXBvc3QtZGVzY3JpcHRpb24tLXRpdGxlLWNvbG9yLTRBNEE0QSB2Y2UtcG9zdC1kZXNjcmlwdGlvbi0tY2F0ZWdvcnktY29sb3ItRTJFMkUyIHZjZS1wb3N0LWRlc2NyaXB0aW9uLS1zZXBhcmF0b3ItY29sb3ItRTFFMUUxIHZjZS1wb3N0LWRlc2NyaXB0aW9uLS1leGNlcnB0LWNvbG9yLTc1NzM3MyI%2BPGEgaHJlZj0ie3twb3N0X3Blcm1hbGlua319IiBjbGFzcz0idmNlLXBvc3QtZGVzY3JpcHRpb24tbGluayIgaXRlbVByb3A9InNhbWVBcyI%2BPC9hPjxkaXYgY2xhc3M9InZjZS1wb3N0LWRlc2NyaXB0aW9uLS1jb250ZW50Ij57e2N1c3RvbV9wb3N0X2Rlc2NyaXB0aW9uX2ZlYXR1cmVkX2ltYWdlfX08c3BhbiBjbGFzcz0idmNlLXBvc3QtZGVzY3JpcHRpb24tLWNhdGVnb3J5Ij57e3Bvc3RfY2F0ZWdvcnl9fTwvc3Bhbj48aDMgY2xhc3M9InZjZS1wb3N0LWRlc2NyaXB0aW9uLS10aXRsZSI%2Be3twb3N0X3RpdGxlfX08L2gzPnt7c2ltcGxlX3Bvc3RfZGVzY3JpcHRpb25fZXhjZXJwdH19PC9kaXY%2BPC9kaXY%2BPC9hcnRpY2xlPg%3D%3D[/vcv_posts_grid]

Elementtyp “Posts Grid”

Wie Centered Post Grid, nur anderes Layout.

[vcv_posts_grid source=”%7B%22tag%22%3A%22postsGridDataSourcePost%22%2C%22value%22%3A%22post_type%3Dpost%26amp%3Bpost_status%3Dpublish%26amp%3Bposts_per_page%3D4%26amp%3Btax_query%5B0%5D%5Btaxonomy%5D%3Dcategory%26amp%3Btax_query%5B0%5D%5Bfield%5D%3Did%26amp%3Btax_query%5B0%5D%5Bterms%5D%3D124%22%7D” unique_id=”1d08071c” pagination=”0″ pagination_color=”#EEE” pagination_per_page=”10″]PGFydGljbGUgY2xhc3M9InZjZS1wb3N0cy1ncmlkLWl0ZW0iIGl0ZW1zY29wZT0iIiBpdGVtVHlwZT0iaHR0cDovL3NjaGVtYS5vcmcvQXJ0aWNsZSI%2BPGRpdiBjbGFzcz0idmNlLXBvc3QtZGVzY3JpcHRpb24gdmNlLXBvc3QtZGVzY3JpcHRpb24tLWFuaW1hdGlvbiI%2BPGEgaHJlZj0ie3twb3N0X3Blcm1hbGlua319IiBjbGFzcz0idmNlLXBvc3QtZGVzY3JpcHRpb24tbGluayIgaXRlbVByb3A9InNhbWVBcyI%2BPC9hPnt7Y3VzdG9tX3Bvc3RfZGVzY3JpcHRpb25fZmVhdHVyZWRfaW1hZ2V9fXt7Y3VzdG9tX3Bvc3RfZGVzY3JpcHRpb25fY29udGVudH19PC9kaXY%2BPC9hcnRpY2xlPg%3D%3D[/vcv_posts_grid]

Elementtyp “Posts Slider”

Ein einfacher Slider. Kann leider keine Kurztexte anzeigen (sondern nur den Namen des Campformates und ein Bild). Es kann zwischen verschiedenen Seitenformaten gewählt werden, ich würde aber dieses (16:9) empfehlen.

[vcv_posts_slider_grid source=”%7B%22tag%22%3A%22postsGridDataSourcePost%22%2C%22value%22%3A%22post_type%3Dpost%26amp%3Bpost_status%3Dpublish%26amp%3Bposts_per_page%3D5%26amp%3Btax_query%5B0%5D%5Btaxonomy%5D%3Dcategory%26amp%3Btax_query%5B0%5D%5Bfield%5D%3Did%26amp%3Btax_query%5B0%5D%5Bterms%5D%3D123%22%7D” unique_id=”3d26a708″ arrows=”0″ pointers=”1″]PGRpdiBjbGFzcz0idmNlLXBvc3RzLXNsaWRlci1pdGVtIHZjLXNsaWNrLWl0ZW0gdmNlLXBvc3RzLXNsaWRlci1pdGVtLS1jb2xvci1mZmZmZmYtLTQ1LS01QzAwRkYtLUZGNzIwMCB2Y2UtcG9zdHMtc2xpZGVyLWl0ZW0tLWJhY2tncm91bmQtY29sb3ItZGFkYWRhIHZjZS1wb3N0cy1zbGlkZXItaXRlbS0tYmFja2dyb3VuZC1ob3Zlci1jb2xvci1iYS0wLTAtMC0zIHZjZS1wb3N0cy1zbGlkZXItaXRlbS0tZm9udC1mYW1pbHktTW9udHNlcnJhdCB2Y2UtcG9zdHMtc2xpZGVyLWl0ZW0tYmFja2dyb3VuZC1wb3NpdGlvbi0tY2VudGVyLWNlbnRlciI%2BPGRpdiBjbGFzcz0idmNlLXBvc3RzLXNsaWRlci1pdGVtLWlubmVyIHZjZS1wb3N0cy1zbGlkZXItaXRlbS1hc3BlY3QtcmF0aW8tLTE2LTkiPjxhIGhyZWY9Int7cG9zdF9wZXJtYWxpbmt9fSIgY2xhc3M9InZjZS1wb3N0cy1zbGlkZXItaXRlbS1saW5rIj48L2E%2BPGRpdiBjbGFzcz0idmNlLXBvc3RzLXNsaWRlci1pdGVtLWNvbnRlbnR7e2N1c3RvbV9mZWF0dXJlZF9pbWFnZV9oYXNpbWFnZV9jbGFzc19wb3N0c19zbGlkZXJ9fSIgc3R5bGU9ImJhY2tncm91bmQtaW1hZ2U6dXJsKHt7ZmVhdHVyZWRfaW1hZ2VfdXJsfX0pIj48aDMgY2xhc3M9InZjZS1wb3N0cy1zbGlkZXItaXRlbS10aXRsZSIgc3R5bGU9ImZvbnQtc2l6ZTozMHB4O2ZvbnQtd2VpZ2h0OjYwMCI%2Be3twb3N0X3RpdGxlfX08L2gzPjwvZGl2PjwvZGl2PjwvZGl2Pg%3D%3D[/vcv_posts_slider_grid]

Elementtyp “Simple Image Slider”

Wie der Posts Slider, nur ohne Text auf dem Bild.

Elementtyp “Pageable Container”

Noch ein Slider. Kommt noch, ich habe noch nicht ganz rausgefunden, wie der funktioniert…