6.1. WordPress - Mark-van-B/IT-Landscape-UCLL- GitHub Wiki

Introduction

In this page, I'll give a small tutorial on how to get started on building your own website with WordPress.

Dashboard

• The most important aspect of the tool is the Dashboard, accessible by clicking the WordPress logo in the top left:

• From there, you can hover over "Pages" and click on "Add Page" to immediately get going:

Example: making a resume (template)

Once you created a new page, you'll be greeted by a list of templates, but I'm clicking the little X on the top right of that window to start with a clean sheet.

1. Enter a title:

Underneath, you can either type a slash "/" and continue typing to narrow down the list of options, or press the little + icon to get a nice overview.

2. I'm choosing a Heading, as a title for the first section: "About Me". When I hover over it, a number of layout options already appear, but that's for later.

3. Then, a list:

4. I then select the entire list by clicking to the left of the little index dots, hover underneath until the blue line appears, and add an image.

5. Next, I select both list and image (after some resizing if need be), and grouped them together into a "row" by clicking the little icon in the hovering menu above my selection.

6. I now add some more headers and lists, by using the "Type / to choose a block".

7. Layout! On the top right are a number of buttons, the one next to "Publish" will open the layout settings menu if it somehow ends up closed.

• First off, I'd like a nice border around my lists, and not a square one so I'm going to include a "border-radius" as well.
• (NOTE: you can set defaults for all the various elements, but I'm going the manual route for this demonstration.)
  1. Select a list block (click left of the list indices).
  2. Go to the menu on the right-hand side, it will list "border" near the bottom. If it doesn't, make sure you're in the Styles tab

3. Click on the little plus, toggle them both, and play with the values until you're satisfied.
4. Repeat this for all the list elements.

• Now, the text gets a bit too close to the border, so next step: padding and margin!

• (NOTE: "Padding" is the space inside an element's border, margin is the space outside the border)

  1. Go to "Dimensions" in the list on the right, toggle "margin" and "padding".
  2. Play around with the values until both list and image look nice.

• Then, it's time to add some colour.

  1. My lists are going to be some sort of beige.
  2. Select them, click on Colour: Background on the right, and try things out until you're satisfied.
  3. Since the first list and image were grouped into a row, I tweaked that one as well, as well as border-rounding the image to make it less square!

• As a final step: a background colour. For this, we need the Dashboard to the left, so save your progress first!
• Go Appearance -> Editor

• From there I'm going Styles -> Colours -> Elements: Background -> Gradient.

• With the little wheel, you can set the angle in which the colours will flow into the other, and with the bar you can set where they "meet", and what colours to begin with.
• When done, press "Review Change" and use the Dashboard to return to our Resume page.

• I now notice that the Headings are a bit difficult to read, so I'll just quickly fix that, et voila!