Tutorial

add a phrase or your contact info here. Click on the image above to replace it with your own.

Before you start, Make sure your images are all 500 K or less. Upload them to the media library. Click the three dots (More) in the left menu. Choose media library and click on the folder with your name. Choose upload images. Replace to top image with one of your own.

Caption

This is a shape. with text over it. Change the color by clicking the shape for the then choosing the dot. Shapes can overlap.

Caption

Use more than one section. (this will make it easier to edit the phone view). Click the background to see section options. If you are not done with a section, you can hide it from the navigation using the eye symbol. When you come back you have to make the section visible again in order to work on them. You can duplicate a section, and move sections up and down on the page. Choose edit section for more. Always click the three dots for more. Click the arrows at the bottom right of the section to make it vertically smaller or larger.

Drag an image element to the page. Click on the placeholder and choose edit image. Replace it with your own from your media library folder. Enter alt text so it will appear when you rollover the image. Under Action, choose Open in full screen preview.

Click on the three dots and scroll to the bottom to reset the image orientation from horizontal to vertical.

When you click on the image, little icons appear at the corners, top, bottom and sides. Drag them around to change the shape of the image to what you want.

Click the phone icon at the top next to the computer icon. Edit the phone view to be the way you want. Don't change the text or other items as that will change it in the computer view.

Automatic Save is on, but you can click Save to be sure. Preview will show you the page as it would appear. Click Back to Editor at the left to go back.

Update the website will make your changes live. If you do this twice, you may have to refresh the page to see the new changes. Close the window and enter the url again.

This is a grid system. When you drag an item you will see the grid. Avoid placing items at the very edges. If you do, there will be no white space on the left and right in the browser window.

Your page has three sections that are grayed out. Click the section. Click on the eye and make the section visible to work on it. If you don't want it to appear on your page yet, go back and turn off the visibility.

Click around to see how the menus come up and what you can do with them

Drag a text block. Choose Edit text. Select the placeholder text and change it to Paragraph 1. For Head style change to one of the Heading choices. Make sure your name is Heading 1. Do not use return to create a new paragraph. Drag another text block to the page. You can select some text and change the color by clicking the dot on the left of the menu.

To create a caption, Drag a text element to the page and choose a Paragraph style. there is no way to attach a caption to a photo

If menus get in the way of what you need to do, click somewhere else first

Ask the AI

If you get stuck click on Ask AI at the top and ask your question. It can give a picture if things are not clear. The picture will be small in the AI window. Click on it to enlarge it. Minimize the AI window by clicking the down arrow at the upper right of the window. Click Ask AI to get it back.

Explore the vertical menu at the left:

Click the three dots in the menu to access the media library. You don't need any of the other things that come up.

When three dots appear in a menu, it means there are more menu items. The large dot on the left in a menu is the color, which you can change

Don't change setup, or styles. These are global. You can change things on your page using the menus available.

We don't have access to AI tools and we don't have a store.

SEO means search engine optimization. We will do that just before our previous website expires. I have done it for the home page. You will do it for your own page. If you are curious, ask the AI about it.

to LOG OUT exit the impersonator mode (upper right) and click the down arrow next to Website Builder in the upper left. Choose Hostinger Dashboard. Click the person icon in the upper right. Scroll down and click log out.