How to make basic edits on WordPress

So keeping your site up to date is essential to keeping your PageRank and SEO score high, thus keeping your website near the top of the SERPs (better known as Search Engine Results Pages).

But doing it yourself can be quite intimidating, a Content Management System (CMS) like WordPress can seem quite complex, but it’s actually quite simple once you get to grips with it and this blog post will show you how.

WordPress Dashboard

Once you’ve logged in the first thing you’ll see is the WordPress Dashboard. It’s a largely a very basic page with a couple of boxes on it that give you some basic information about your website. But nothing about pages or where your content lives.

This all lives on the left hand side of the page in the main WordPress menu. You can see from the screenshot of our website dashboard that the first couple of options includes:

• Posts
• Media
• Pages

On WordPress, posts are your blog or news, this will likely be the most updated part of your website. The media section is pretty obviously for your pictures and videos, but will also be where you upload any PDFs and some other documents to your website. Then pages (which are actually a type of Post, yes the internet is weird) will be the most constant content on your website, probably not changing that frequently.

The methods we’ll be exploring in this blog post will be applicable to both your Posts and Pages.

Loading Icons

When you go to a new website or even change pages on a website you’re already on, sometimes the information won’t load immediately, and this can be masked a little by using loading animations.

Often the animation is a pre-set amount of time rather than the actual loading status of the page, and companies will often use them to keep the user engaged. But a well thought through and implemented loading animation will keep a user engaged, even though most web loading times in 2022 are under 1.5 seconds. Some companies will artificially increase loading time between pages to actually post internal adverts for their services.

The loading icon shown here is animated to show a ripple effect across the bars which also change colour from transparent with a black background to red and back again.

Parallax Scrolling

The parallax effect in web design is where the background image moves at a different speed to the foreground. You can see an example of the effect if you’re looking through a window and seeing how your perception of the view changes as you move around in front of the window.

The effect can be used in different ways too, on the Supreme Freight website it’s used as a static image in the testimonials section as the background appears to stay static. Or it can be applied to individual images within a section, like the spirit bottles on the Urchin Spirits product pages.

It’s employed in a really dramatic way on some BBC articles, the piece Now You See Her is a mini-biography about Mary Phillip, England’s first black international football captain.

Gif Animations

You’ll may have used a gif yourself, many memes sent via text messages and on social media are animated gifs. Quite often these are purely for entertainment purposes, but they can be used on the web and email to enhance your site and give the products life.

We’ve used them on the Urchin Spirits website to enhance the sections, specifically on the portfolio section of the home page behind the bottle images. It just changes how you view the site and maybe even encourages you to explore further.

SVG Animations

This is the newest form of animation, an SVG is actually code rather than an image. It’s a series of mathematical points that your web browser translates into an image and is frequently used in web development for scalable items like logos and icons. The code and image will be approximately physical size on your website, but the SVG can be made as big as needed without any loss of quality.

Sites like Duolingo have taken this even further by creating a series of characters that animate when you click the submit button for each exercise. These animations are incredibly flexible as they can be triggered by events, but also utilised equally effectively on desktops, laptops, tablet and mobile without any loss of quality or performance.