Inhoud van deze lange webpagina:

Deze webpagina bestaat uit deze onderdelen. Ze zijn aanklikbaar:

0. Intro + inloggen
1. Start: Wat zit waar bij WordPress.com + stappenplan
2. Instellen hoe jouw website start
3. Pagina en/of bericht vullen met tekst & beelden
4. Belangrijke uitleg + video’s
5. Instagram toevoegen
6. Tekst & foto’s voor nieuwe website
7. De 5 thema ‘s waarvan we met 1 gaan beginnen
8. Uitleg over de 5 thema’s

0. Intro WordPress.com

Het voordeel van WordPress.com is dat je bijna geen technische kennis nodig hebt om je eigen website te maken. De installatie is meteen gedaan door je aan te melden, Daarnaast worden zaken als hosting en technisch onderhoud allemaal door WordPress.com verzorgd. We kunnen dus meteen aan de slag.

Een nadeel van WordPress.com is dat je veel minder vrijheid hebt om je eigen themes te gebruiken of bepaalde plugins te installeren. En soms loop je tegen de beperkte mogelijkheden aan van de gratis website. Maar het is zeker mogelijk om een mooie website te bouwen met WordPress.com.

Aanmelden bij WordPress

Ga naar https://wordpress.com
Klik onderaan op ‘start with free’ om een gratis account aan te maken, met een bedrijfsnaam.wordpress.com subdomein.

Hier kan je bovenaan nog kiezen om het in het Nederlands te zien.
• Vul je emailadres in
• Kies een gebruikersnaam
• Kies een wachtwoord
Vul de gevraagde info in.
Daarna zal je een bevestigings-email krijgen in jouw inbox van het opgegeven emailadres, in deze email staat de blauwe “Klik hier om Nu te bevestigen” knop.
Als het goed is, krijg je daarna een welkoms-email.

Bewaar je login & wachtwoord goed!

Inloggen kan via: https://nl.wordpress.com/

De webpagina van WordPress.com ziet er zo uit & rechtsboven staan de 2 knoppen

Uitleg op WordPress.com

De Nederlandse website: www.nl.support.wordpress.com

Zie ook de video’s op: https://learn.wordpress.com/the-movie/
En hier alle video’s: https://www.youtube.com/playlist?list=PLQFhxUeNFfdKx9gO0a2mp9h8pKjb2y9la

Rechtstreeks inloggen:

Als jouw www-adres bijvoorbeeld dit is:  https://jouwbedrijfsnaam.wordpress.com/
Dan kun je hier inloggen bij WordPress met dit adres: https://jouwbedrijfsnaam.wordpress.com/wp-admin

1. Start: Wat zit waar bij WordPress.com? + stappenplan

WordPress bevat veel onderdelen en dus ook veel knoppen, om jou wegwijs te maken geven we een overzicht van de belangrijkste knoppen.
Zie hier de verschillende schermen:
(klik op een afbeelding voor een vergroting)

Stappenplan website

1. Instellingen instellen, loop alles door!
2. Maak een eerste pagina aan.  → pagina’s
3. Maak een eerste portfolio project aan.  → portfolio (jouw thema moet dat wel ondersteunen)
4. Maak een eerste bericht aan.  → berichten
5. Kies een thema (Zie punt 7)
6. Loop de weergave → aanpassen door: hoe start de website + kies kleuren + lettertype, instellen favicon + logo, evt. copyright info in de footer.
7. Eerste menu aanmaken: weergave → menu
8. Daarna vullen & maken van webpagina’s (plaats afbeelding + galerij aanmaken + tekst plaatsen)
9. Daarna vullen van portfolio projecten & berichten (uitgelichte afbeelding + werk met categorie)
10. Terug naar de weergave → aanpassen → Widgets (vullen sidebar + footer)

Loop als eerste door de “Instellingen/setting” onder de knop Manage
Vul dit zo netjes mogelijk in. Een aantal functies zijn niet te gebruiken omdat we de gratis versie willen blijven gebruiken.

Uitleg over de instellingen staan hier: www.wordpress.com/nl/support/instellingen/algemene-instellingen/
Het is mogelijk om jouw website wel te bouwen, maar (nog) niet aan iedereen te tonen op het internet.
Lees hier hoe dat moet: www.wordpress.com/nl/support/instellingen/privacyinstellingen/

Instellen Logo + slogan (zit o.a. hier: Customizer → Site-identiteit )

TIP!
Maak jouw logo hier: https://www.canva.com/

2. Instellen hoe jouw website start.

Maak eerst 2 nieuwe webpagina’s aan. Noem deze bijvoorbeeld: homepage & Berichten.
Maak eventueel ook een nieuw profolio project. Noem deze bijvoorbeeld: Eerste project.
Maak daarna een nieuw bericht. Noem deze bijvoorbeeld: Eerste bericht .
Dan.
Onder de knop Customizer, en dan naar Homepage-instellingen

Hier geef je onder andere aan waarmee jouw website gaat beginnen, en als jij niet met jouw berichten wilt beginnen, moet je aangeven op welke webpagina deze dan wel mogen komen.
Voorbeeld van website die start met een webpagina (dus met vaste info): www.ingridvanessen.nl + www.stylebyfabie.com
Voorbeeld van website die start met berichten (dus een blog of magazine): www.bydanie.nl + www.chapterfriday.com
(of starten met een portfolio: www.lichting98.nl  ).
De voorbeelden hierboven zijn allemaal websites gemaakt met WordPress.

2x Uitleg video’s 
1. Opzetten van website (dus deze start met een webpagina, deze moet wel bestaan)!

2. Opzetten van blog (dus deze start met een overzicht van jouw laatste berichten, zorg dat je minimaal al 1 bericht hebt gemaakt, ook al is dit bericht leeg)!

3. Pagina en/of bericht vullen met tekst & beelden

Zie hier de eigenschappen van een pagina en hoe je deze aanmaakt, zie uitleg op: https://wordpress.com/nl/support/paginas/
of bekijk de video:

En hier de eigenschappen van een bericht en hoe je deze aanmaakt, zie uitleg op: https://wordpress.com/nl/support/berichten/
of bekijk de video:

Let op!
Het vullen van een pagina, bericht of portfolio gaat niet meer met een tekst-veld, maar met de (Gutenberg) blokeditor. Als je WordPress.com-account na januari 2019 is aangemaakt, maak je waarschijnlijk gebruik van de WordPress-blokeditor. Elk element op je site, zoals afbeeldingen, tekst, video’s en kopteksten, worden toegevoegd via een blok. Elk blok heeft één aparte functie. Het is aan jullie om het juiste blok te gebruiken.

Uitleg Blok-editor

De blok-editor van WordPress bevat veel verschillende blokken, om jou wegwijs te maken geven we een overzicht van de belangrijkste blokken.
Zie hier de verschillende stappen:
(klik op een afbeelding voor een vergroting)

Hieronder een kort voorbeeld hoe dat werken met blokken er uit ziet:

Een blok toevoegen

Je hebt de keuze uit veel verschillende soorten blokken die gesorteerd zijn op categorie en recentste gebruik. Je kunt elk blok onafhankelijk van andere blokken bewerken en verplaatsen. Individuele blokken hebben soms hun eigen indelingsinstellingen, zodat je nog meer controle hebt over de lay-out en functie.

Hieronder een voorbeeld hoe je met verschillende blokken jouw inhoud op een pagina/bericht/portfolio neer zet.

Er zijn verschillende manieren om een blok toe te voegen en het type blok dat je nodig hebt te kiezen.

1. Klik op ⊕ aan de linkerkant van een leeg blok.
2. Klik op ⊕ linksboven in de editor.
3. Druk in een geselecteerd blok op Enter om eronder een nieuw blok te maken.
4. Klik op ⊕ in het midden boven een bestaand blok om er een blok boven te plaatsen.
5. Klik op de drie puntjes vlak boven een geselecteerd blok en kies om een blok boven of onder het huidige blok toe te voegen.

Het standaardtype blok is een paragraaf, die je zult gebruiken voor normale tekst, maar je kunt ook een ander soort blok kiezen met behulp van de ⊕-knoppen.

De verschillende blokken

Er zijn heel veel verschillende blokken, maar dit zijn de belangrijkste:

• Paragraaf = Met het paragraafblok kun je eenvoudig tekst toevoegen.
• Afbeelding = Voor 1 afbeelding
• Koptekst = Voor een kop H1 = groot H6 = klein
• Galerij = meerdere foto’s toe te voegen en ze automatisch op een aantrekkelijke manier te laten sorteren
• Lijst = tekst in de vorm van een lijst
• Citaat = een tekst die je inspireren duidelijk naar voren brengen.
• Omslag = is een grote afbeelding met daaroverheen een tekst
• Groep = meerdere blokken voorzien van een achtergrond kleur, door de groep een achtergrondkleur te geven.
• Kolom = meerdere blokken naast elkaar te zetten, door eerst een kolom te plaatsen.
• Onder Layout = vul-blok (lege ruimte) + scheidingslijn-blok (lijn) + knoppen-blok (een knop) + Media&Tekst-blok (beeld en tekst naast elkaar)
• Onder Insluiten = Youtube-blok + Instagram-blok

Meer uitleg op: www.wordpress.com/nl/support/wordpress-editor/

Hieronder een voorbeeld van het galerij-blok

Hieronder een voorbeeld van een omslag-blok

Hieronder een voorbeeld van een knoppen-blok

4. Belangrijke uitleg + video’s

Video: Menu v/d website aanpassen

Video: Verander thema

Widgets  voor in sidebar en/of footer, zie deze uitleg = www.wordpress.com/support/widgets/

Aanpassen v/d website, zie deze uitleg = www.wordpress.com/nl/support/aanpassen/

Social Media knoppen toevoegen, zie deze uitleg = www.wordpress.com/nl/support/widgets/socialmedia-pictogrammen-widget/
of bekijk de onderstaande video:

6. Tekst & foto’s voor nieuwe website

Wat moeten we gaan bouwen?

• Homepage
• About page
• Contact page
• Blog page (met 3 berichten)
• Portfolio page (met 10 – 15 beelden)

Onderdelen voor de demo website:

Hier staat de tekst voor op de website: RTF-bestand

De beelden die we gaan gebruiken staan in dit:  zip-bestand

(downloaden naar jouw computer en openen, het zip-bestand zal je even moeten uitpakken).

7. De 5 thema ’s waarvan we met 1 gaan beginnen

Alle thema’s zijn te vinden op: https://wordpress.com/themes.
Elk thema thema heeft gelukkig ook een eigen informatie webpagina met uitgebreide uitleg. Daarbij zit ook de knop: “Open Live Demo” waardoor je een werkende voorvertoning van de website krijgt in een nieuw venster.

TIP!
Lees de handleiding door + ga deze Live demo eens lekker uit te proberen om te helpen bij het uitkiezen van een thema.

We gaan er vanuit dat de meesten van de studenten beginnen met een gratis thema. De onderstaande 5 thema’s zijn gratis.
Die zijn allemaal te vinden met deze URL:www.wordpress.com/themes/free of filter het aanbod naar FREE
(Video met uitleg hoe te wisselen van thema: www.youtu.be/yOfAuOb68Hc)

1. ILLUSTRATR
   Informatie webpagina = https://wordpress.com/theme/illustratr  ⇒ Live Demo = https://illustratrdemo.wordpress.com/
2. SNAPS
   Informatie webpagina = https://wordpress.com/theme/snaps  ⇒ Live Demo = https://snapsdemo.wordpress.com/
3. MAYLAND
   Informatie webpagina = https://wordpress.com/theme/mayland ⇒ Live Demo =https://maylanddemo.wordpress.com/
4. ORVIS
   Informatie webpagina = https://wordpress.com/theme/orvis ⇒ Live Demo = https://orvisdemo.wordpress.com/
5. BLASK
   Informatie webpagina = https://wordpress.com/theme/blask ⇒ Live Demo = https://blaskdemo.wordpress.com/

Hieronder staat een korte beschrijving van elke thema.
Vergeet niet de webpagina met de handleiding van het thema te bezoeken om te lezen hoe je het thema moet gebruiken.

Thema 1: ILLUSTRATR

ILLUSTRATR = https://wordpress.com/theme/illustratr – Live Demo = https://illustratrdemo.wordpress.com/

Illustratr is a minimalist portfolio theme that helps you create a strong — yet beautiful — online presence. Primarily crafted for designers and photographers, it is a simple, powerful, and flexible theme.

Portfolio
Illustratr takes advantage of the Portfolio feature on WordPress.com, offering unique layouts and organization for your portfolio projects. With a dedicated Portfolio section in your dashboard, adding portfolio items is simple. Zie: Portfolio

People love full-size images of your work, so make sure the images you include are at least 1100px wide. Illustratr displays these images at full width on larger screens. Videos will automatically be displayed at full width on larger screens.

Quick Specs (all measurements in pixels)
The main column width is 840.
A widget in the widget area is 340.
Featured Images for posts and pages are 1100 wide by 500 high.
Featured Images for projects are 800 wide by unlimited high.

Alle info staat op de webpagina van dit thema (klik op de link of op de afbeelding).

Thema 2: SNAPS

2. SNAPS = https://wordpress.com/theme/snaps – Live Demo = https://snapsdemo.wordpress.com/

Snaps is a portfolio theme designed to showcase portrait-oriented photographs, illustrations, and other works of art. The simple, elegant design keeps the focus on your projects, and scales to fit any screen size.

Portfolio
Snaps takes advantage of the Portfolio options. Zie https://wordpress.com/nl/support/portfolios/

By default, the homepage will display your latest posts in a traditional blog format. To get the most out of this theme, you first need to create some portfolio projects. Then, to display those projects on the homepage (as shown in the theme demo), follow these steps:

• Create a new page to serve as the homepage
• Assign the Portfolio Page Template from the Page Attributes section
• Publish your page
• Go to Customizer→ Static Front Page, and choose the new page as your site’s static “Front page”
• The Snaps theme will now display your Portfolio projects on the homepage. Please note, that the page using Portfolio Page Template will not support the Infinite Scroll feature.

If you also want a blog on your site, publish a second blank page. You can title this page “Blog” or “News” or whatever you like. Then, go to Customizer→ Static Front Page, and choose this new page as your site’s “Posts page.”

The title and content of the Portfolio Page Template can be hidden to create the same look as the theme demo. To do this, navigate to Customizer → Portfolio and select “Hide title and content on Portfolio Page Template.”

Quick Specs (all measurements in pixels)
The main column width is 640.
A widget in the Footer Widget Area is 300.
Featured Images for posts should be at least 880 wide.

Alle info staat op de webpagina van dit thema (klik op de link of op de afbeelding).

Thema 3: MAYLAND

3. MAYLAND = https://wordpress.com/theme/mayland – Live Demo =https://maylanddemo.wordpress.com/

Make your online portfolio wonderfully uncluttered with Mayland. Gracefully highlight your photography and other projects. Mayland is versatile enough to be your personal site too. It’s our business to help you succeed online
We know starting from scratch can be daunting, so we included clear, step-by-step instructions and video tutorials to help you build an attractive website.
Zie: https://wordpress.com/theme/mayland/lichting98.wordpress.com

The demo site uses a static homepage. Follow these steps to achieve the same look:

1. Publish two pages and give them titles that are easy to remember, like “Home” and “News.” To publish a page, navigate to My Site → Pages → Add Page.
2. Next, go to Customize → Homepage Settings.
3. Select “A static page” and choose the two pages you published in Step #1 — “Home” and “News” — as your Homepage and Posts page, respectively.
4. You can give your site a more streamlined look by hiding the static homepage title. To do this, scroll down to the bottom, and check Hide Homepage Title.
5. Click the Publish button on top to save your changes.

Quick Specs (all measurements in pixels):
The main column width is 750px.
There is one widget area in the footer with a column width of 750px.

Alle info staat op de webpagina van dit thema (klik op de link of op de afbeelding).

Thema 4: ORVIS

4. ORVIS = https://wordpress.com/theme/orvis – Live Demo = https://orvisdemo.wordpress.com/

Orvis is a portfolio theme crafted with designers and photographers in mind. It’s a minimalist, powerful, and flexible theme that puts the focus on your projects.

Orvis takes advantage of the Portfolio feature on WordPress.com, offering unique layouts and organization for your portfolio projects. To get the most out of this theme, you need to have added Portfolio projects.

With a dedicated Portfolio section in your dashboard, adding portfolio items is simple. Check out our guide for full details on how to set up your portfolio.

People love full-size images of your work, so make sure any images you include are at least 924 px wide.

Orvis will extract your images, videos or galleries from the content and will display these at full width on larger screens on the single portfolio pages. Orvis will automatically place the text on the left hand side and any media on the right hand side of the single portfolio page. If you’d like to keep a line of text with the image on the right, simply add it before or after the image and do not include a line break between the two.

Featured Images
Featured Images are important in Orvis. They work best when they’re at least 924px wide and will appear in several places, including archive pages, the portfolio page template, and whenever you use portfolio shortcodes. Don’t forget to add one to all your Portfolio projects!

Quick Specs (all measurements in pixels)
The main column width is 924
The sidebar width is 276
Featured Images are 924 wide with unlimited height

Alle info staat op de webpagina van dit thema (klik op de link of op de afbeelding).

Thema 5: BLASK

5. BLASK = https://wordpress.com/theme/blask – Live Demo = https://blaskdemo.wordpress.com/

Blask is a modern portfolio theme that displays your work in a clean, minimal layout. The simple-yet-bold grid design keeps the spotlight on your projects, and scales to fit any screen size.

Blask takes advantage of the Portfolio feature, offering unique layouts and organization for your portfolio projects.
This page template will display all the projects in your portfolio as your site’s homepage, so it is the first thing that visitors to your site will see.

Blog Page Layout
In addition to the portfolio grid layout, Blask comes with a beautiful blog page, perfect for sharing your thoughts and sparking a conversation with your visitors. Whether you’re an illustrator, designer, or photographer, Blask is the perfect canvas to showcase your creativity.

Quick Specs (all measurements in pixels)
The main column width is 640.
A widget in the Footer Widget Area is 300.
Featured Images for posts should be at least 880 wide.

Alle info staat op de webpagina van dit thema (klik op de link of op de afbeelding).

Extra tip: online beeldbewerking:

PIXL foto-editor

Website: http://pixlr.com/editor/

Online editor voor het aanpassen van foto’s, werkt dus overal waar je internet hebt. Handig voor het op maat maken van beelden.