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. Select the page you want to build

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

7. Click "Custom Code" and drag it to the desired location

8. A pop-up will appear with an option to insert your HTML code

9. Insert your code into the text box

10. Click "Save" to save the code you added

11. The code will then be added to the website

12. Click on the element to edit it specifically

13. Click "Customize" to customize the element

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

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

16. 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

17. 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

18. Click the "Text here" field under "ID" to add an ID which is a unique name given to the element so it can be targeted with code (like for styling or linking) which will be used internally

19. Click the "Text here" field under "Title" to add a title which is a short description that may show up as a tooltip when users hover over the element.

20. Click this text field to insert a SRC which is the source link or file path, usually used to load content like an image, video, or embed.

21. 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

22. 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

23. Copy: Create a copy of the section

24. Delete: Remove the section entirely

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