1. Navigate to https://app.podup.com/home

There are 2 ways to access the Page Builder

2. 1. Click "Page Builder" in the "Favorite Modules" on the Dashboard

3. 2. Click "My Site"

4. Click "Page Builder"

5. Click "Build" on the page you want to build

6. Click "Add" to add a "Quick Add" element

7. Click "Image" and drag it to the desired location

8. A pop- up will appear of the PodUp file manager where you can select an image that is already in PodUp or upload one from your computer

9. The image will appear on the page. You can adjust the image by grabbing one of the boxes on the image and dragging it to the desired size

10. Click the customization icon to customize the element

11. See "How to format a design element" for the Design section since this is the same for every element

12. Click "Settings" to view the settings for this specific element

13. State: The different ways an element looks or acts depending on how someone interacts with it

• Hover: This allows you to define a special set of styles that apply only when a user's mouse cursor is hovering over an element that has this class. It adds interactivity and visual feedback
• Click: This allows you to define a special set of styles that apply when an element is being actively clicked or pressed down by the user. It provides immediate visual feedback that the user's action is being registered
• Even/Odd: This allows you to apply different styles to elements based on their position in a sequence (even or odd number) within a common parent. This is incredibly useful for creating visual patterns, like "zebra striping" in lists or tables

14. Classes: A reusable set of styles that you can apply to multiple elements across your website. You can add specific elements that you have already programmed or they will be automatically added when you edit the menu

• Tip: If this is your first website, leave this blank and let the software fill this in unless you have experience website building

15. Click the " Text here" field under Alt (short for "alternative text") to enter short description of the image that helps with accessibility and SEO.

• If the image can’t load, the alt text shows in its place. It’s also used by screen readers to describe the image to users who can’t see it.

16. Click "x" to dismiss the menu

17. Clicking this icon tells the element to “move to the next bigger container,” which shifts it from a smaller box (like a text block or section) into the larger layout it's part of—helping you place it more accurately on the page.

18. Move: Reposition the section to where you want. Click and hold this icon while you drag it to the desired location. A green line will indicate where it is being placed

19. Copy: Create a copy of the section

20. Delete: Remove the section entirely

• Note: If you have a duplicate, it will only delete one of the two