Home

Content Guidelines.

A website is nothing without good content. The time and effort you spend on your content will determine how effectively your site achieves its goals.

Images.

Images play a critical role on your website, but they can be tricky to manage without some foundational tips.

Photography and stock images.

If you are serious about getting a good result, you need your own photography; the same website can be average or amazing depending on the choice and use of images.
If custom photography is not practical or possible, you can use stock photography or AI imagery instead. These should be used sparingly and selectively, because fake-looking images can damage the credibility of your site.
We have a Shutterstock account if you would like to purchase stock images. Alternatively there are free sources of stock imagery such as Unsplash, though you may be required to credit the photographer somewhere on your site.
Patterns, textures, geometric shapes and icons can be used to add visual interest and reduce the reliance on photography.
Don’t source images from other sites or search results, unless you’re sure you are allowed to use them.

Preparing your images for the web.

Ideally you should start with high-resolution images, such as those from a digital camera. Make copies of the ones you want to use on the website and keep the originals safe somewhere (eg Google Drive).
Crop your web images to a standard shape (also called an ‘aspect ratio‘). Choosing a consistent shape means the images will naturally line up neatly when used in grids, carousels or anywhere you have more than one image side by side.
Resize to no more than 2000px width. This is large enough to cover a standard 1920px desktop monitor without stretching, and avoids wasting storage space or bandwidth by being much larger than needed.
Most cropping tools let you crop to a fixed shape, so you can easily resize and move the cropping area to get the best shot in the right shape.
You may be able to upscale slightly-too-small images using a tool like Photoshop or Canva, but ultimately they won’t look great.

How WordPress handles images.

When you upload any image to WordPress, it will automatically generate smaller versions in a set of pre-defined sizes.

Some of these will be hard cropped – for example, a 150x150px square thumbnail.

Others will just be downsized to fit within certain dimensions – for example, within 1024x1024px. This means the generated image will be the same shape as the original, just smaller.

The idea behind these generated versions of your images is they will be much smaller in file size, and therefore faster to load.

If an image is only being used in a small space on your page – for example, as a thumbnail in a grid or a small photo inside an article – then we don’t want visitors to have to download the original 2000px wide file.

Instead, we set the page template up so WordPress will serve one of the smaller versions that’s much closer to the actual display size.

Why don't my images line up?

There’s a common catch when you don’t size or crop images before uploading them.

If a page is using a certain preset size – for example 800x600px – and you upload an image smaller than that, your image will be displayed as-is.

This isn’t such a problem if the smaller image is still the same shape as the others (eg 600x450px is the same shape as 800x600px), but if it’s both too small and also a different shape, you’ll get an inconsistent result.

Long story short – make sure your original images are either large enough to exceed the preset size, or at least the same shape as the preset size.

Background vs foreground images in Elementor.

There are two main kinds of image you will encounter in Elementor.

Regular or ‘foreground’ images using the Image Widget
Background images, one of the available types of background usually used on Containers with other content on top.

What’s the difference?

Regular images just get bigger and smaller with screen size., always staying the same shape. Aside from the one complication of the WordPress presets discussed above, regular images are pretty straightforward.

Background images are more complex, as they generally need to cover an area which is a different shape to the image itself.

Choosing suitable background images.

Background images are intended to be just that – backgrounds, more for texture and ‘feel’ than to show something specific.

A background (usually) must cover its container no matter the shape of the container – short and wide or tall and thin – so try to choose an image which can be cropped without missing anything important.

Good choices are scenery, drone photography or zoomed-out ‘context’ shots, with plenty of room around any important subjects which won’t matter if it’s cropped out.

Problematic choices include group photographs and closely-cropped photos of people or key subjects, where losing 20%-30% of the image from its edges might be unacceptable – like losing part of someone’s face.

There are some tools available to help you keep certain parts of a background visible at different screen sizes.

You can reposition the image for laptop, tablet or mobile, or even swap it out for an entirely different background image at any or all of these sizes. However, it’s best to choose an image which is fit for purpose.

Image formats.

Different image formats are designed for different kinds of image.

If you use the right format for the job, you can avoid images being larger – sometimes hundreds of percent larger – than necessary.

This will result in faster website load speeds and less hosting bandwidth use.

Photograph formats

Ideal: webp
Fine: jpg / jpeg
Avoid: png, gif, avif

Logos / Illustrations / Diagrams

Ideal: svg
Fine: png
Avoid: jpg, gif, avif

Notes on SVGs

When using images in SVG (scalable vector graphics) format, make sure any text is converted to outlines / paths, so it does not rely on an external font.

For SVG icons, use the currentColor keyword instead of hard-coding a colour into the SVG.

This will allow the icon to inherit its colour from the Icon elementor widget, giving you more flexibility and allowing you to set a separate hover colour too.

If you don’t know what any of that means – don’t worry, we can help.

Content writing.

“The most valuable of all talents is that of never using two words when one will do.” – Thomas Jefferson

Tips for writing good web content

Keep a consistent tone – decide whether your brand voice is formal, friendly, playful, or authoritative, and make sure all content matches it.
Write for the reader, not yourself – focus on what the visitor needs to know to take action, which is often a lot less than what you might want to include.
Be concise and impactful – shorter sentences and tighter paragraphs help readers scan and absorb information quickly. A wall of text is off-putting.
Clarity over detail – give the essentials first, then move into a little more detail if it’s needed. Extra context can be layered in with links or expandable sections if needed.
Structure is important – use plenty of headings, subheadings, bullet points and bold key phrases, so readers can grasp the message at a glance and read more if they want to. This also has the benefit of being good for SEO.
Refine before publishing – don’t settle for a first draft; cut repetition and sharpen the phrasing to increase impact.
Leverage tools wisely – using ChatGPT or similar tools can be great for brainstorming, tightening phrasing or reframing content, but don’t just cut and paste. Some readers find obviously LLM-generated content very unappealing (if you couldn’t be bothered to write it, why should I be bothered to read it?)

Video.

Video can be a powerful way to engage visitors and explain ideas quickly, but it does come with trade-offs.

Tips for using video on websites:

Videos can have a significant impact on the loading speed of a page, especially if they are high-definition. Platforms like Youtube and Vimeo can help, as they have fancy technology to deliver videos efficiently on different devices and connections.
If a video will play behind text (like a homepage banner), it should be approached in a similar way to a background image. Make sure the action leaves space for the text content – for a really professional result, the video should keep most of the action on one side of the frame and leave the other side relatively free for text overlays.
Similarly, a background video should be just that – a background to the text content in front of it. Keep it short and decorative, so it doesn’t compete with the message in front.
Background videos cannot have sound if you want them to auto-play (which you generally do). This is enforced by web browsers, it’s not something we can ignore.
If you have a video which needs sound and needs to convey a specific message, give it its own space on the page. Make sure it has a good ‘cover’ image or thumbnail to entice the visitor to watch it.