WordPress Technical Center

How to Add Images to Your WordPress Webpage

Editing Background Image of a Column or Row

Go to the Backend Editor of the page you wish to edit.

Select the pencil icon of the column or row you want to change.

Go to the design options tab and click the + or select a background color.

Add an existing image or upload a new one. You will see this appear where the + previously was. Below the new image, in the same tab, use the drop-down menu to choose how you want the image to appear. (We usually select cover).

Save changes and Update/Publish.

Make sure your photos are appropriate dimensions (most background images should be at least 1920 pixels wide) and small in size (at the largest around 200-300 KB). You can use Photoshop or another editor to compress the photo. If you are using Photoshop, go to File > Export > Save for Web and save as a JPG at ~60-70% quality. If your image has transparency, choose PNG-24.

Editing Background Image of a Page Section

Once in the Backend, select the pencil icon of the page section you wish to edit.

In these settings upload a background image. Below the background image is the option to add a background image (Portrait). Upload an image here that is mobile-friendly or has a 2:3 ratio. (We usually crop our background image and center it correctly so it looks good on mobile).

Save changes and Update/Publish.

Adding a Single Image

Click + in the area you would like the photo to appear. Add an image from the elements list.

You will be prompted to change settings and upload a photo.

Save changes and Update/Publish.

Adding an Image Gallery

Click + in the area you would like the photo to appear. Add an image gallery from the elements list.

You will be prompted to change settings and upload photos.

Save changes and Update/Publish

Tips & Tricks

You can choose if you would like elements visible on specific devices. Go to the element and its settings. Find the width & responsiveness tab. Check devices where you want to hide the element.

Lion Tree Social

Recent Posts

March Google Algorithm Update News

Now that we are over a week into the latest update, we have more information,…

2 months ago

Adobe Illustrator: How to Convert Text to Vector Using AI

Text-to-vector graphics is a game changer in vector illustration. AI (artificial intelligence) generates endless images…

6 months ago

How to use Photoshop AI

Tips on how to use the new Photoshop beta, how to use generative fill, resize,…

9 months ago

Twitter Rebrand – The Iconic Bird Is Now X

Twitter Rebrand Unveiled: Say Hello to X! Discover the captivating transformation of the iconic bird…

9 months ago

How to Fix: Outlook Links Opening in Edge vs. Chrome

Did your Outlook suddenly change where the links clicked inside your email message open? They're…

10 months ago