Les 3. Menu instellen

Vergelijkbare documenten
Les 2 Inhoud toevoegen

Les 2 Inhoud toevoegen en weergeven

Het thema waarin de site getoond wordt aan de bezoeker Het thema waarin de admin achter de schermen werkt.

2. Download via onderstaande link de nodige plugins/third party-bestanden voor de modules, deze zullen we later samen op de server plaatsen

Kies voor Structuur - Overzichten - Een nieuw overzicht toevoegen

Les 11. Herhalingsoefening (Deel 2)

Les 14. Eenvoudig contactformulier

Leuk idee: de menubalk blijft zichtbaar ookal scroll je naar beneden

Les 13. Voorbereiding

Les 7. Instap. CSS en views: schilderijen. Pas even de header aan van het thema en zorg ervoor dat er geen websitenaam en slogan te zien is.

Op het einde van deze les moeten we een werkende site op Drupal 8 hebben en een opgekuiste versie van onze Drupal 7 site.

Les 10. Paragraph + Bootstrap

5. Klik vervolgens op het tandwiel voor de instellingen van Image Field Zoom. We bespreken deze klassikaal.

Les Webform INLEIDING VOORBEREIDING

Les 4. Webform Inleiding. Voorbereiding

Drupal Basis sem. 1 Lander Carrijn

Les 3. Inleiding. Voorbereidend werk. Views vervolmaking. Voorbereiding

inleiding... 2 wordpress nog een keer installeren... 3 wordpress de-installeren... 5 van een afbeelding een link maken naar een website...

Handleiding Wordpress CMS

Workshop Office365-basis: opdracht Word-bestanden plaatsen en delen

Handleiding om uw website/webshop aan te passen

Publiceren met WordPress

CVO Crescendo. Ga hiervoor naar Structuur > Inhoudstype > Manage Display en selecteer de gewenste View mode.

HANDLEIDING. WordPress LAATSTE VERSIE: RODER!CKVS WEBDESIGN & WEBHOSTING

23. Standaardbrieven (MailMerge)

Wordpress.com. Een site/blog aanmaken

U logt in op huizenmarkt.nl en gaat naar Mijn Huizenmarkt waar u het tabblad Mijn afbeeldingen kiest.

Handleiding voor het gebruik van uw nieuwe CMS

Digitale vormgeving Wordpress deel 1

Na het inloggen met de gegevens die je hebt gekregen, verschijnt het overzichtsscherm zoals hieronder:

Handleiding Fotopagina

Inhoud van de website invoeren met de ContentPublisher

2 december 2013 Eindgebruikershandleiding Weblicity CMS

Deze website zal worden gebruikt als begeleiding bij de lessen. Straks krijgen jullie van de leerkracht een domein om op te oefenen.

CMS Made Simple eenvoudig uitgelegd CMS MADE SIMPLE- Eenvoudig uitgelegd

Hoe kunt u bestanden en mappen delen tussen Windows en Linux Mint.

Inhoud. Handleiding Dododent. Beste tandarts of praktijkmanager,

Studieobjecten bewerken Marnix academie. Laatst bijgewerkt op dinsdag 2 juni 2015

OneDrive voor bedrijven en scholen

Je ziet het ontwerpscherm voor je. Ontwerpen is actief en dat zie je aan de linkeronderkant van je scherm net boven de taakbalk.

In dit hoofdstuk organiseren we de lay-out van de website. We doen dit aan de hand van blokken, en menu s.

Een eerste kennismaking

Handleiding Mijneigenweb.nl

1.Inloggen. Wat is WordPress?

Mach3Framework 5.0 / Website

Klik op het menu inhoud om te starten met inhoud toe te voegen. Klik daarna op de knop Inhoud toevoegen.

Wat je moet weten over jouw website. Berichten

2. Blokjes maken op de voorpagina, over ons en commissies. 5. Rechtstreeks een link maken voor, mail, nieuwsbrief, verslag of fotoalbum

Wordpress Handleiding Woocommerce Extra

Handleiding Joomla CMS

Handleiding. HetSchoolvoorbeeld.nl. Versie juni Websites voor het onderwijs. Meest recente uitgave: www. hetschoolvoorbeeld.

Inloggen blz 3. Artikel invoeren blz 4. Werkbalk Tekst blz 6. Afbeelding invoeren blz 6 - uit beeldbank Vrouwen van Nu. Externe link invoeren blz 9

Illustration 1. Handleiding Uploaden van foto's in Phoca Gallery

Een quiz plaatsen op je website

SPECIALE VERSIE VOOR LEERKRACHTEN. Inhoud van de website invoeren met de ContentPublisher. 1. Inloggen. 2. Overzicht

Handleiding adviescommissies gemeente Oegstgeest

Beginnerstrainin TYPO3 Stap voor stap de website beheren

DE MODULE FOTOGALERIJ

Intranet. Handleiding voor redacteurs, nieuwsberichten.

Windows Movie maker. Inhoud. 1. Installeren van Windows Movie Maker. FILM

C o n t e n t M a n a g e m e n t S y s t e e m. G e b r u i k s a a n w i j z i n g

ZÉLF JE WORDPRESS WEBSITE MAKEN?

1. Links invoeren, wijzigen en verwijderen

Tekstverwerking. Wat gaan we leren? Opdracht: Geavanceerde opmaak. Jen Kegels, Eveline De Wilde, Inge Platteaux, Tamara Van Marcke

Hippo-handleiding Homepage Inhoudsopgave

Waar pas je een WordPress menu aan?

Bijsnijden. In Faststone image viewer Bijsnijden in Faststone image viewer 1

Extra informatie Picasa

Inhoud. Werkinstructie bijhouden website Koor swing. Inhoud en inhoudstypes. Enkelvoudige of samengestelde pagina s

2. Dia's Maken. 2.1 Een nieuwe dia invoegen. Allereerst gaan we kijken hoe u een nieuwe dia aan uw presentatie toevoegt. Dia's Maken Module 2

werken met picasa kort overzicht van de mogelijkheden

Handleiding voor Leden

4.1 Het creëren van inhoudselementen

Nieuwsbrieven versturen met MailPoet

myshop De homepage van Bouwshopper aanpassen deel 2

Transcriptie:

Les 3 Menu instellen In de vorige les hebben we reeds menu-linken voorzien voor al onze schilders en schilderijen. We merken op dat het menu zonder aanpassingen een beetje druk begint te worden. We kunnen dit oplossen door uitklapbare menu's te creëren. Ga naar Structuur - Menu's - Hoofdnavigatie Je ziet een lijst met alle reeds ingestelde menulinken. Merk ook de kruisjes op. Met deze kruisjes kan je de volgorde aanpassen. Zorg ervoor dat 'Home' op de eerste plaats staat.

Plaats nu de schilders en schilderijen zoals hierboven. Dit wil concreet zeggen dat we de schilder bij zijn schilderij gaan plaatsen. Met hetzelfde kruisje kan je nu de schilderijen laten inspringen onder de schilder: Door op te slaan kan je het resultaat gaan bekijken. Dit zal tegenvallen. De schilderijen klappen niet uit. We keren terug naar de instellingen van het hoofdmenu. Naast elke schilder dien je op Bewerken te klikken en een vink te zetten bij Uitgeklapt Weergeven: Resultaat:

Opmerking: Blijkbaar lukt het niet om ook de parent (bovenliggend menuonderdeel) te laten werken nadat je een submenu gaat maken. Na onderzoek op het net en het bevragen bij collega's blijkt dit niet aan een instelling te liggen, wel aan het thema zelf. Er zou hiervoor een oplossing bestaan maar dat is me tot op dit moment van schrijven niet gelukt. Waarschijnlijk zullen we in een volgende les van thema wisselen. PathAuto instellen Als laatste onderdeel van de vorige les hebben we PathAuto geïnstalleerd en geactiveerd. Wat ons rest is het instellen van deze module. Open op de reeds gekende manier de instellingen van deze module Standaard is er geen patroon ingesteld voor een bepaalde URL automatisch te generen. We stellen dit in door te klikken op +Add Pathauto pattern

Hieronder het resultaat. Om ook het Path pattern in te stellen kijk je even verder onder deze afbeelding: Klik bij het Path pattern op Door beschikbare tokens bladeren. Deze tokens zijn eigenlijk variabelen. We stellen hier in dat de URL telkens de titel van de node moet bevatten. Klik op het grijze pijltje voor 'Node' en klik vervolgens op het blauwe 'node:title' Homepage instellen

Wanneer je de website niet voorziet van een eigen ingestelde Homepage of Frontpage dan zal Drupal automatisch teasers tonen van als jouw toegevoegde inhoud. Dit is handig voor een blog, niet meteen voor ons. In de eerste les hebben we reeds een soort welkomst-pagina gemaakt van het type Eenvoudige pagina. We openen deze even: Klik op Inhoud in het beheersmenu Klik bij Welkom op Bewerken Kijk nu bij de URL-instellingen, bepaal zelf de URL: /welkom Sla dit even op Ga nu naar Instellingen - Systeem - Basis site-instellingen Pas de standaardvoorpagina aan door de jou gekozen URL in te geven:

Herhalingsoefening In de vorige les hebben we inhoud toegevoegd in inhoudstypes. We doen dit vandaag opnieuw ter herhaling. Download de nodige bestanden 1. Voeg een nieuw inhoudstype toe: Musea 2. Vergeet niet om 'Auteur en datum' uit te vinken 3. Voeg een nieuw veld toe: 1. Veldtype: Tekst (plat) 2. Label: Adres 3. In de volgende vensters mogen de instellingen gewoon blijven zoals ze zijn 4. Voeg opnieuw een veld toe: 1. Bestaand veld: Afbeelding 2. In de volgende vensters mogen de instellingen blijven staan zoals ze zijn 5. Voeg nu de 5 musea toe, gebruik hiervoor de gedownloade bestanden. Let op: een menulink is hier voorlopig niet nodig 6. Aangezien we gebruik maken van PathAuto hoef je je ook niet druk te maken over de URL. Nieuw veld: lijst Bij de musea willen we graag de mogelijk om in een lijstje te kiezen in welk land de verschillende musea zich bevinden. Open het veldenbeheer van het inhoudstype Musea

Voeg een nieuw veld toe: Voeg nu handmatig een lijstje in met mogelijke landen. We kiezen hier logischerwijs de landen van onze musea: Sla dit op en in het volgende veld kan je ook gewoon opslaan. Bewerk nu telkens de inhoud van de musea. Je zal merken dat er een veld is bijgekomen en dat je het land kan selecteren:

Pathauto BIS Wanneer we naar de URL van één van de musea kijken dan zien we dat we daar weer te maken hebben met.../node/4. Raar want zonet hebben we dat patroon bij PathAuto ingesteld. Nu is het zo dat dit niet automatisch met terugwerkende kracht werkt. Gelukkig bestaat er een eenvoudige oplossing. Open de instellingen van PathAuto Kies bovenaan het tabblad Bulk Generate Vink inhoud aan, zo weet Drupal wat je wil gaan bijwerken Klik Bijwerken Na een aantal seconden en een vooruitgangsbalk verschijnt er een groene melding met het aantal bijgewerkte URL's. Controleer maar door een museum naar keuze te bekijken en de URL te checken. Weergave beheren Je hebt het misschien gemerkt maar de afbeeldingen van onze musea zijn ofwel heel erg groot ofwel aan de kleine kant. Het is voor een bezoeker veel aangenamer om deze allemaal in dezelfde grootte te zien verschijnen. Ga naar Structuur - Inhoudstypen - Musea - Weergave beheren

Merk naast het afbeeldingsveld het kleine grijze tandwieltje op. Klik daar even op en je krijgt volgend instellingsveld: Afbeeldingsstijl: o Geen: hier kies je gewoon de originele foto o Groot: een stijl die de afbeelding gaat bijsnijden op 480x480 pixels o Gemiddeld: idem maar dan 220x220 o Miniatuur (Thumbnail): idem maar dan 100x100

Link afbeelding naar: o Niets: wanneer de bezoeker op de foto klikt gebeurt er niets o Inhoud: de inhoud van de foto zal getoond worden, in dit geval gebeurt er dus niets want je kijkt al naar de inhoud o Bestand: de foto wordt groot getoond in een nieuw venster Test de verschillende mogelijkheden uit. Kies uiteindelijk voor Groot en Bestand Vergeet niet om telkens op Bijwerken te klikken gevolgd door Opslaan Colorbox Colorbox is een leuke module voor het weergeven van foto's. Helaas dis deze module third party, dit wil zeggen dat we handmatig een plugin moeten installeren op onze server in de juiste map. Voorlopig hoeven jullie zich daar niet druk over te maken. Ik heb dit reeds klaargezet voor jullie. Wat wel met gebeuren is het installeren van de colorbox module. Gebruik eventueel de link hieronder: Colorbox Voor colorbox iets van nut kan hebben moeten we er eerst voor zorgen dat we wat meer afbeeldingen hebben bij onze schilders: Download deze bestanden Bewerk nu een schilder naar keuze en probeer eens om een foto toe te voegen. Dit gaat helaas niet. Open het veldenbeheer van het inhoudstype schilder

Klik op Bewerken bij het veld afbeelding Klik in het verschenen venster op het tabblad veldinstellingen, we negeren de rode melding Onderaan zie je dat de toegestane waardes op 1 staan, we veranderen dit even naar Onbeperkt Vergeet niet op te slaan Bewerk nu de inhoud van alle eerder toegevoegde schilders, gebruik vervolgens de inhoud van de gedownloade bestanden om bij elke schilder twee foto's toe te voegen

Na dit werk open je de weergave van het inhoudstype schilder Pas nu het formaat aan van het afbeeldingsveld naar colorbox

Klik nu op het grijze tandwiel ter hoogte van het afbeeldingsveld We overlopen volgende instellingen klassikaal: Klik zeker op Bijwerken gevolgd door opslaan Bekijk het resultaat Mogelijk opmerkingen / problemen: o De afbeeldingen blijken niet allemaal even groot te zijn o De afbeeldingen staan niet mooi naast elkaar als je naar de node kijkt --> problemen om op te lossen in de volgende les