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 edit

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

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

8. Click the text and type the desired words to link to another website

9. Click the customization menu to customize the element

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

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

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

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

14. Click the href field to insert the link that tells the website where to go when it's clicked, like a website address or a file.

15. Click the dropdown menu to choose "This window" or "New window" indicating whether the link will open in the current window or a new window

16. Select "Toggles" to indicate what action you want to happen when the link is selected

• None: The link does nothing special when clicked—it's a regular link that goes to another page or section
• Self: The link opens or expands its own content (like a submenu or more info)
• Collapse: Clicking the link closes a section (often one that was previously expanded)
• Dropdown: Clicking the link opens a dropdown menu with more links or content underneath

17. Click "Default" under Text color to choose from 1 of 10 text color options. This will change the color of the text itself

• Default: The standard text color used by the website theme
• Primary: A bold color used to highlight main actions or important text
• Secondary: A softer color used for less important or supporting text
• Success: A green-like color often used to show something positive, like a success message
• Info: A blue-like color used to show helpful or informational text
• Warning: An orange or yellow color used to alert users without being too alarming
• Danger: A red-like color used to show errors or serious warnings
• Light: A very light or gray color, usually used on dark backgrounds
• Dark: A dark gray or near-black color, used on light backgrounds for strong contrast
• White: Pure white text, best used on dark or colored backgrounds for readability

18. Click "Default" under background color to choose from 1 of 10 background color options which will change the color behind the text

• Default: The standard background color set by the theme
• Primary: A main brand color used to highlight key areas or buttons
• Secondary: A supporting color that complements the primary color
• Success: A green-toned background often used to show success messages or positive status
• Info: A blue-toned background used to display helpful or informational content
• Warning: A yellow or orange background used to show caution or warning messages
• Danger: A red-toned background used to alert users to errors or serious issues
• Light: A very light background, often gray or off-white, for a clean, subtle look
• Dark: A dark gray or black background, used for bold sections or contrast
• White: A pure white background, often used for clean and simple sections

19. Click "Default" under border width to choose from 1 of 7 different options to clarify where you want the border

• Default: Uses the standard border size set by the website theme
• Full: Adds a border to all four sides of the element
• No Top: Removes the border from the top side only
• No Right: Removes the border from the right side only
• No Bottom: Removes the border from the bottom side only
• No Left: Removes the border from the left side only
• None: Removes the border from all sides of the element

20. Click "Default" under border color to choose from 1 of 10 different preset color options

• Default: The standard border color based on the website’s theme
• Primary: A bold color used to highlight or emphasize the border
• Secondary: A softer, supporting color for a more subtle border look
• Success: A green-toned border often used to show something positive or approved
• Info: A blue-toned border used for helpful or informational content
• Warning: A yellow or orange border to draw attention or show a caution
• Danger: A red-toned border used to show an error or alert
• Light: A pale or gray border for a minimal, clean design
• Dark: A deep gray or black border for strong contrast or bold sections
• White: A white border, best used on dark backgrounds for visibility

21. Click "Default" under border radius to choose from 1 of 8 options to adjust how rounded the corners of the element is

• Default: Uses the standard corner style set by the website theme
• Rounded: Softens all four corners of the element for a smooth, curved look
• Rounded Top: Only the top-left and top-right corners are rounded
• Rounded Right: Only the top-right and bottom-right corners are rounded
• Rounded Bottom: Only the bottom-left and bottom-right corners are rounded
• Rounded Left: Only the top-left and bottom-left corners are rounded
• Circle: Makes the element fully circular (works best on square elements)
• Square: Removes all rounding for sharp, straight corners on all sides

22. Click the "Text here" field under "ID" to add an ID which is a unique name for one element that lets you style it specifically, keep changes organized, and target it in code or links without affecting other elements.

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

24. Click the "x" to dismiss the menu

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

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

27. Copy: Create a copy of the section

28. Delete: Remove the section entirely

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