Tutorial: Changing the Background of Your Showit Website Template

Changing the background of your Showit website can completely transform the look and feel of your site. Whether you want a solid color, an image, or a video background, Showit makes it easy to update the background of your website template.

Step 1: Select the Canvas to Edit

1. In the Showit App, navigate to the Canvas view.
2. Select the canvas or section of the page where you want to change the background (e.g., the homepage, about section, or footer).

Step 2: Change the Background Color

1. With the canvas selected, go to the Design section in the right-hand panel.
2. Scroll down to the Background settings.
3. Click on the Color Picker and choose your desired color, or enter the hex code for a custom color.

Tip: You can also set a background color for individual sections or entire canvases.

Step 3: Add a Background Image

1. In the Background settings, click on Image and then click Upload to select an image from your computer.
2. Once the image is uploaded, adjust the Position (e.g., center, top left) and Size (e.g., cover, contain) to fit the background to your needs.
3. Use the Opacity slider to adjust the transparency of the image if you want a subtle effect.

Tip: Ensure that the image is high-quality and optimized for web use (i.e., not too large in file size).

Step 4: Add a Video Background

1. To add a video background, go to the Background settings in the Design panel.
2. Click on Video, then either upload your video file or add a video URL (e.g., YouTube or Vimeo).
3. Adjust the video settings to set it to loop, mute, or adjust the opacity for a more subtle effect.

Tip: Choose videos that are short and relevant to your website’s theme for the best user experience.

Step 5: Mobile Optimization

1. After changing the background, switch to the Mobile View to ensure the background looks good on smaller screens.
2. Adjust the size or position of the background for mobile optimization if necessary. For example, you may want to crop or zoom in on certain areas of the background image.

Tip: You can also hide the background image or video on mobile devices if it doesn’t look great on smaller screens.

Final Notes

Changing the background of your Showit website is a powerful way to enhance its visual appeal. Whether you choose a solid color, an image, or a video, updating your background is quick and easy. Be sure to optimize your backgrounds for mobile devices to ensure a seamless experience for all visitors.