Designing the Header

The editing interface

So the editing interface pretty much looks like this:

It's a sidebar on the left where you can control some things about different elements on your page. It's here where you upload assets into blocks that are pre-defined. As you can see, I need a logo and a site icon (favicon) which will be displayed on the navigation bar and on the page tab respectively.

So thanks to the assets collected previously, I can simply insert those into here and Wordpress will show me how they look. What's neat is that I can customise the size of the logo displayed on the page using the slider - and in this case I've chosen 96px (for now) as its a nice power of 2 and sits cleanly on my header.

Moreover, what's even nicer is that Wordpress lets you customise according to screen size, so there's some in-built media queries checking how you're accessing the website; whether you're on desktop or mobile meaning you can customise how the site appears to support different devices.

This means I can adjust the logo size for mobile devices, or even use a different variant of the logo. Moreover, the layout changes to suit for touch and scrolling using your hands, designing a better experience for different users.

Last updated