Adding images to your website is easy with widgets! You can choose to upload files from your device or you can search for a stock image to use on your website. Let's explore how to add and manage the images on your website!

One of the great things about creating websites with Looka is that images will already be added to the template! This makes it easy to simply replace the existing images with images more relevant to your business. You can also edit the design of the images to make your website look exactly the way you want it!

Note that there are different types of images on your website. Some images are added as the background for a section, while others are added to galleries, and others are added as standalone images. Let's explore how to replace each.

A standalone image is an image on your website that is not connected to any other elements on your website. An example of this is in the testimonials section of the default website template. Each person's stock image is a standalone image.

To replace a standalone image on your website, start by clicking on the image. An editing panel will open and you'll see the option to "Replace"

Clicking on the "Replace" button gives you the option to "Search for images", choose an image that is already on your website in the "Site Images", or "Upload" a new image.

If you'd like to add an image that you found after searching, or one that already exists on your website, click the "Select" button to add it. Images that you upload will be automatically added to your website.

You can also click the "Full View" button to open a larger window to see the images better. From the full view, you have the same options to "Search for images", choose an image that is already on your website in the "Site Images", or "Upload" a new image.

From the full view, you'll need to first click the "Select" button and then the "Done" button to add the image to your website.

An image gallery includes a selection of images that are automatically formatted based on the number of images you add to the gallery. Image galleries are a great way to showcase your products or services! Many of our website templates include an image gallery on the home page.

To edit the images in a photo gallery, start by clicking on any image in the gallery. This will open an editing panel. You will see the option to "+ Add Image", which will add an image at the beginning of the gallery. You will also see the option to "+ Image", which will add an image at the end of the gallery. You will also see the option to "Delete All Images". If you click the "X" at the top right of an image, you can also remove one image at a time. You will also see the option to "Connect to Instagram", which will let you sync your Instagram account so that photos you post to Instagram will be automatically added to your photo gallery. You can change the order of the images by clicking and dragging the image to the appropriate location.

When you click either the "+ Add Image" or "+ Image" button, an image picker panel will open. This is very similar to the editing panel for a standalone image, giving you the option to search for images, select an image that already exists on your website, upload an image with the "+" button, or open a full view.

For photo galleries, you are able to select multiple images, so instead of adding the image you selected immediately, you'll need to click the "Done" button once you've selected all the images that you want to add to the photo gallery.

A background image is an image that has been applied as the background to an entire row or column. Background images help to make your website look interactive and help to showcase the best images of your products or services! This is the most commonly used type of image on the website templates.

To replace a background image, start by clicking the row, or coluomn that contains the background image. Note that there may be other elements on the website within the row, column, or section. For example, in this row, there is a spacer (the inner box) and clicking on it will open the Spacer Design panel.

You'll know you selected the right element (the row or column) if you see a "Row Design" or "Column Design" panel open.

Within the row or column design editing panel, scroll down until you see the "Background section". From here, you have the option to "Replace" the image. You also have the option to "Create Background Slider" which lets you add multiple images, and each image will be shown for a predefined period of time before transitioning to the next image.

If you decide that in this section you would not like to have an image, you can also choose the "Color" or "Video" options. You also have the option to "Delete" the image, which returns the background of this section to a neutral color.

Clicking on the "Replace" button will open an editing panel that is very similar to that for a standalone image, giving you the option to search for images, select an image that already exists on your website, "Upload" an image, or open a full view.

Clicking on the "Create Background Slider" button will open an image selection panel that is similar to that for a photo gallery. You will see the option to "+ Add Image", which will add an image at the beginning of the gallery. You will also see the option to "+ Image", which will add an image at the end of the gallery. You will also see the option to "Delete All Images". If you click the "X" at the top right of an image, you can also remove one image at a time.

When you click either the "+ Add Image" or "+ Image" button, an image picker panel will open. This is very similar to the full view for a standalone image, giving you the option to search for images, select an image that already exists on your website, upload an image. Once you have selected the images that you'd like to use, click the "Done" button.

This will return you to the background gallery editing panel where you can change the order of the images by clicking and dragging the image to the appropriate location. You can also click on a specific image to replace that image. Once you're done adding images, click on the "X" in the top right of the background gallery window to return to the row design panel.

From here, you can choose the type of transition between images, and how long the images should be shown before transitioning to the next.

If you're looking to add images in places that don't already exist, you'll need to add an image widget. Similar to replacing existing images, there are different types of image widgets and different ways to add images to your website. Let's dig into each one!

Each type of image is added as a widget. To start, open the Website Editor for your website, and then click Widgets from the left panel.

To add a standalone image to your website, you'll need to add an Image widget. From the Widgets panel, search for "Image". Then, click and drag the Image widget to where you'd like it on your website.

Once you've added the widget to your website, the image editing panel will open, giving you the option to search for images, upload an image, selecting from existing images on your site. You can also open the full view to see the images better. See the section on replacing a standalone image for more information about selecting an image.

To add a photo gallery to your website, you'll need to add a Photo Gallery widget. From the Widgets panel, search for "Photo" or "Image". Then, click and drag the Photo Gallery widget to where you'd like it on your website.

Once you've added the widget to your website, the photo gallery content panel will open, giving you the option to add images, connect to your Instagram account, or delete images. You can also click and drag images to change the order. See the section on replacing images in a photo gallery for more information about adding, deleting and replacing images.

To add a background photo to a row or column, start by selecting the row or column where you'd like to add the background image. In the "Row Design" or "Column Design" editing panel, scroll down until you see the "Background" section. From here, click "Image"

Then click in the box where it says "+ Add multiple images for a background slider"

This will open the image picker, which will let you search for images, select an image that already exists on your website, or upload an image with the "+" button. You can select multiple images to create a background slider. See the section on replacing a background image for more information about adding, replacing, and deleting images.

An image slider lets you add multiple images within a section of your website, where the slider will rotate through the images at a specific time interval. This will act like the background image slider from this section.

To add an image slider to your website, you'll need to add an Image Slider widget. From the Widgets panel, search for "Image". Then, click and drag the Image Slider widget to where you'd like it on your website.

Once you've added the Image Slider widget to your website, the Image Slider Content window will open. This is very similar to the editing window for photo galleries, explained more in this section. You can add images, delete images, and click and drag images to the order in which you'd like them to appear, similar to photo galleries.

One major difference for image sliders is that you can add a title and caption to each image. To do this, click on an image, and you will see additional options appear on the right. You can edit the Slider Title, Slider Caption, and Button text. You can also click the eye icon to hide the element from this image. Note that this text is custom for each image in your slider, so it needs to be edited for each image.

A media slider is very similar to an image slider, but it also allows you to add video content to the slider.

To add a media slider to your website, you'll need to add a Media Slider widget. From the Widgets panel, search for "Media" or "Image". Then, click and drag the Media Slider widget to where you'd like it on your website.

Once you've added the Media Slider widget to your website, the Media Slider Content window will open. This is very similar to the editing window for photo galleries and image sliders. You can add a new image or video with the "+ Add Slide" button. You also have the option to "Delete All" slides. If you hover over a slide, you will also see the option to copy the slide or delete the slide. You can also click and drag slides to change the order.

When you click on a slide, on the right you will see the options to Replace the image or video, or Delete it. If you scroll down, you will also see options to edit the Text on slide, the Slide description, and the text on the Button. You will see an eye icon to hide the Button. If you'd like to remove the Slide Title or Slide description, remove all text from the text field. You can also click the "Clear All" button below the Slide description text field.

An icon is a simplistic representation of an object or action that your website visitor could take. For example, a very well known icon is a magnifying glass to represent search 🔎

To add an icon to your website, you'll need to add an Icon widget. From the Widgets panel, search for "Icon" or "Image". Then, click and drag the Icon widget to where you'd like it on your website.

Once you've added the Icon widget to your website, the Icon Content window will open. Click the "Choose Icon" button to open the Icons Library.

From the Icons Library, you can Search for icons for upload your own icon. Once you find an icon you like, hover over the icon and click the "Select" button to update the icon on your website.

You can also open the Full View to open a larger window to find an icon. You have similar options to Search Icons and Upload Icons, but need to both hover over the icon and click "Select" and then click the "Done" button at the bottom right of the window to finish updating the icon.

A Before & After Slider lets you show two images with a slider that lets your website visitors transition from the "Before" image to the "After" image. This is great for showing the results of your services, such as for makeup application or home renovation.

To add a before & after slider to your website, you'll need to add a Before & After widget. From the Widgets panel, search for "Image". Then, click and drag the Before & After widget to where you'd like it on your website.

Once you've added the Before & After widget to your website, the Before & After Content window will open. You will see the option to add a Before Image, and you have the option to adding a label to this image (but can hide it with the eye icon).

If you scroll down, you will see the option to add an After Image, and can also add a label here if you'd like.

In both cases, clicking on the "+ Image" button will open the image selector. This is very similar to the image selector for a standalone image. See the section on replacing a standalone image for more information about selecting an image.

After you have added an image, you will see the option to "Replace" or "Delete" the image

​

How to create a website

Getting started with the website editor