1. Click "My Site"

2. Click "Post Page Builder"

Post Page: Refers to the secondary page that opens up when you click a blog post, video post or podcast post. It is a page that shows one full piece of content. It includes the title, the main content, and a description. Each post on your site gets its own page so visitors can view or listen to it in full.

3. You will enter the Post Page Builder page

A list of all the post pages will be listed here

4. Click "Add Blog Detail" to add a new post page

5. Click "Title" and enter the name of the post page like blog template

6. Click from the options, for which you are creating a post page

• Blog: This page will be used for a blog post
• Video: This page will be used for a video post
• Podcast: This page will be used for a podcast post
• Episode: This page will be used for a episode post

7. Check "Default Blog Detail" if you want to make this the default post type that will be used meaning that this is the template that will be pulled from

8. Click "Submit" to save the details

9. Click "Build" to customize the post page

10. The "Post Page Builder" opens in a new tab

You can change the sections/elements of the page from here

11. Each section of the page can be customized individually

12. Click on the section of the page you want to customize

• Add your custom style: Will provide you with many customizable options
  • See steps 13-48
• Move to Parent Container: 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
• Move: Will let you to reposition the section. Click and hold this icon while you drag it to the desired location. A green line will indicate where it is being placed
• Copy: Will create a copy the section
• Delete: Will help you to remove the section. Note- if you have duplicated an element, it will only delete one of the two

13. If you click "Design" you will get eight custimizable options (Similar to Page Builder)

• General: Basic settings like name, visibility, or position of the element on the page.
• Dimensions: The width and height of the element.
• Margin: The space outside the element, creating distance from other elements.
• Padding: The space inside the element, between the content and the border.
• Background: The color, image, or gradient behind the content of the element.
• Border: The line around the element’s edge — can be styled, colored, or sized.
• Border Radius: The roundness of the element’s corners.
• Typography: The style of the text, including font, size, color, line spacing, and alignment.

14. If you click "General" you can customize the Float and Display

• Float: Controls how an element lines up next to other elements
  • None: The selected element will stay as it was originally placed
  • Left: The selected element will be placed on the left with the surrounding material on the right
  • Right: The selected element will be placed on the right with the surrounding material on the left
• Display: Controls how an element behaves on the page — whether it appears as a block, inline, flex, grid, or is hidden. It affects layout and spacing.
  • Block: Takes full width and starts on a new line, good for sections and containers.
  • Inline: Takes only the space needed and stays in line with other elements, good for text and small items.
  • Inline-Block: Like inline but can have width and height set, useful for small boxes inside text.
  • Flex: Arranges elements in a row or column with easy alignment, great for menus and buttons.
  • None: Completely hides the element and removes it from the layout, so it doesn’t take up any space—useful to temporarily or permanently hide content.

15. Click "Dimension" to adjust the dimensions as per your needs

• Width: To set the horizontal size of an element on a web page
• Height: To set the vertical size of an element on a web page
• Max. width: To set an upper limit for an element's width. The element will never be wider than this value, but it can be narrower
• Min height: To set a lower limit for an element's height. The element will never be shorter than this value, but it can be taller

Next to each of these elements, you can change the number and the unit of the feature. See below for an explanation of the units

• px (pixels): Like little dots on the screen. 200px means 200 dots wide or tall.
• % (percent): A part of something else. 50% means half the size of the box it’s in.
• em: Grows with the text around it. 2em is 2 times bigger than the normal text.
• rem: Like em, but always starts from the main page size. 1rem is usually normal-size text.
• vh (viewport height): How tall the screen is. 100vh means the whole height of the screen.
• vw (viewport width): How wide the screen is. 100vw means the whole width of the screen

16. Click "Margin" to set the margin of the section

Margin is the space outside an element (like a box, image, or text block) on a webpage.

• Margin All: This is a shorthand property that allows you to set the margin for all four sides (top, right, bottom, and left) of an element simultaneously
• Margin top: Controls the space above an element. It pushes the element down from whatever is directly above it (e.g., another element, the browser window edge, or its parent container's top edge)
• Margin right: Controls the space to the right of an element. It pushes the element to the left from whatever is directly to its right
• Margin bottom: Controls the space below an element. It pushes the element up from whatever is directly below it
• Margin left: Controls the space to the left of an element. It pushes the element to the right from whatever is directly to its left

You can change the value (number) and the unit of the feature. See below for an explanation of the units

• px (pixels): Like little dots on the screen. 200px means 200 dots wide or tall.
• % (percent): A part of something else. 50% means half the size of the box it’s in.
• em: Grows with the text around it. 2em is 2 times bigger than the normal text.
• rem: Like em, but always starts from the main page size. 1rem is usually normal-size text.
• vh (viewport height): How tall the screen is. 100vh means the whole height of the screen.
• vw (viewport width): How wide the screen is. 100vw means the whole width of the screen.

17. Click "Padding" to set the padding for the section

Padding: Padding creates inner space within an element. It pushes the element's content away from its own borders (and therefore away from its own edges)

• Padding: Padding creates inner space within an element. It pushes the element's content away from its own borders (and therefore away from its own edges)
• Padding all: his is a shorthand property that allows you to set the padding for all four sides (top, right, bottom, and left) of an element simultaneously.
• Padding top: Controls the inner space above an element's content. It pushes the content down from the element's top border
• Padding bottom: Controls the inner space below an element's content. It pushes the content up from the element's bottom border
• Padding right: Controls the inner space to the right of an element's content. It pushes the content to the left from the element's right border
• Padding left: Controls the inner space to the left of an element's content. It pushes the content to the right from the element's left border

18. Click "Background" to change the background color

• Background image: Allows you to place an image behind the content and padding of an element. This is powerful for creating visual interest, setting a mood, or conveying branding
  • Click the plus arrow to add the image
  • See steps 20 - 28 for more details on editing that image
• Background color: Sets a solid color behind the content and padding of an element

19. The first page will display the option for you to upload an image to the background

• Click "Images" to open a pop-up of the file manager where the image can be selected from the files already in PodUp or uploaded from the computer

20. - Background repeat

• Repeat: The image repeats both side to side and top to bottom to fill the whole area.
• Repeat-x: The image only repeats horizontally (left to right).
• Repeat-y: The image only repeats vertically (top to bottom).
• No-repeat: The image shows only once and does not repeat at all.
• Space: The image repeats with extra space between each copy so they spread out evenly.
• Round: The image repeats and stretches or shrinks slightly so the copies fit perfectly across the space.

21. - Background position

• left top: The image is placed in the top-left corner of the element.
• left center: The image is placed on the left side, centered vertically.
• left bottom: The image is placed in the bottom-left corner.
• right top: The image is placed in the top-right corner.
• right center: The image is placed on the right side, centered vertically.
• right bottom: The image is placed in the bottom-right corner.
• center top: The image is centered horizontally and placed at the top.
• center center: The image is exactly in the middle of the element.
• center bottom: The image is centered horizontally and placed at the bottom.

22. - Background attachment

• scroll: The background image moves when you scroll the page
• fixed: The background image stays fixed in place while the content scrolls over it
• local: The background image moves when you scroll the content inside the element (like if the element has a scrollbar)

23. - Background size

• Auto: The background image displays at its original size without resizing
• Cover: The background image scales to cover the entire element, cropping if necessary to fill all space
• Contain: The background image scales to fit entirely inside the element without cropping, leaving empty space if needed

24. Click "Color" to select a specific color for the background or add a specific hex color

25. Select the point on the color bar to change the depth of the gradient.

• The closer the points the less drastic the color blend
• The further the points, the more drastic the color blend
• Click the colored dots at the bottom of the color spectrum to change the color of the gradient
• For example, here the points are on opposite ends, so the blend goes all the way from black to white

26. - Direction that the gradient is flowing

• Right: The gradient flows horizontally from left to right across the element
• Bottom: The gradient flows vertically from top to bottom across the element
• Left: The gradient flows horizontally from right to left across the element
• Top: The gradient flows vertically from bottom to top across the element

27. - Type: Chooses the style of gradient for the background of an element. It controls how the colors blend and flow.

• Linear Gradient: Blends colors in a straight line; useful for smooth transitions from one side to another.
• Radial Gradient: Blends colors outward in a circular or oval shape from the center; good for spotlight or ripple effects.
• Repeating-Linear Gradient: Repeats a linear gradient pattern; great for creating striped or repeated effects.
• Repeating-Radial Gradient: Repeats a radial gradient pattern in rings; useful for layered or ripple-style backgrounds.

28. Background color: Sets a solid color behind the content and padding of an element

29. Click "Border" to set a shorthand property that allows you to set the border-width, border-style, and border-color for all four sides of an element simultaneously in a single input field

• Border Width: Controls the thickness of the border line. Change the size (number) and unit by adding a number and clicking 1 of the 5 following units
  • px (pixels): Like little dots on the screen. 200px means 200 dots wide or tall.
  • em: Grows with the text around it. 2em is 2 times bigger than the normal text.
  • rem: Like em, but always starts from the main page size. 1rem is usually normal-size text.
  • vh (viewport height): How tall the screen is. 100vh means the whole height of the screen.
  • vw (viewport width): How wide the screen is. 100vw means the whole width of the screen.
• Border Color: Defines the color of the border line
  • Can be selected from a color spectrum or through a hex code
• Border Style: Determines the visual pattern or type of the border line. This is crucial for how the border actually looks
  • None: No border will be shown around the element — the element will have no visible edge, line, or outline.
  • Solid: a single, unbroken line as the border
  • Dotted: a border made of evenly spaced round dots
  • Dashed: a border made of short, straight dashes
  • Double: two solid lines with space between them
  • Groove: a carved or pressed-in effect that makes the border look like it's grooved
  • Ridge: the opposite of groove; a raised, 3D effect that looks like the border sticks out
  • Inset: makes the border appear pushed into the page, giving a sunken effect
  • Outset: makes the border appear to pop out from the page, creating a raised look

30. Click "Border Radius"which allows you to round the corners of an element. Instead of sharp, 90-degree angles, the corners become smooth curves. When set as a single value, it applies uniformly to all four corners

• Top Left: Rounds the top-left corner of the element.

• Top Right: Rounds the top-right corner of the element.

• Bottom Right: Rounds the bottom-right corner of the element.

• Bottom Left: Rounds the bottom-left corner of the element.

• Box Shadow: Adds a shadow effect around the border-box of an element. This creates a visual depth, making the element appear as if it's lifted off the page

  • Click the plus arrow to add the shadow

  • It will give you these options

    • X (horizontal offset): moves the shadow left or right; positive values move it right, negative values move it left

    • Y (vertical offset): moves the shadow up or down; positive values move it down, negative values move it up

    • Blur: controls how soft or sharp the shadow is; 0 means a sharp edge, higher numbers make the shadow more blurred and spread out

    • Spread: Controls how big the shadow looks. A higher number makes the shadow wider and more noticeable.

    • Color: Click the colored dot to pick the color from the color spectrum or to insert your hex code

      • Hex Code: A six-digit code used in web design to represent a specific color. It starts with a # symbol followed by numbers and letters (like #FF5733). This can help you stay consistent with your colors

    • Type (Inside or Outside):

      • Inside: The shadow shows up inside the letters.

      • Outside: The shadow shows up around the letters.

  • Change the unit of X, Y, and blur by selecting the "px" next to the number

Next to each of these elements, you can change the number and the unit of the feature. See below for an explanation of the units

• px (pixels): Like little dots on the screen. 200px means 200 dots wide or tall.
• % (percent): A part of something else. 50% means half the size of the box it’s in.
• em: Grows with the text around it. 2em is 2 times bigger than the normal text.
• rem: Like em, but always starts from the main page size. 1rem is usually normal-size text.
• vh (viewport height): How tall the screen is. 100vh means the whole height of the screen.
• vw (viewport width): How wide the screen is. 100vw means the whole width of the screen.

31. Click "Settings" to customize Text color, Background color, Border width, Border color, Border radius, ID and Title

• Classes: Is essentially a reusable set of styles that you can apply to multiple elements across your website. Instead of setting the font-size, color, padding, margin, etc., individually for every button, you create a "Button" class and apply it to all your buttons. If you later decide to change the button color, you only change it once in the "Button" class definition, and all buttons with that class update automatically
  • 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

32. Click "Typography" to change the font, size, color, alingment etc. of the text

• Font family: elects the typeface (the specific design of the letters) to be used for the text

33. - Font Size: Controls the height of the characters in your text

• The bigger the number the bigger the character
• The unit can be changed to adjust to the specific project you are working in. Generally px is easiest
  • px (pixels): Like little dots on the screen. 200px means 200 dots wide or tall.
  • % (percent): A part of something else. 50% means half the size of the box it’s in.
  • em: Grows with the text around it. 2em is 2 times bigger than the normal text.
  • rem: Like em, but always starts from the main page size. 1rem is usually normal-size text.
  • vh (viewport height): How tall the screen is. 100vh means the whole height of the screen.
  • vw (viewport width): How wide the screen is. 100vw means the whole width of the screen.

34. - Font Weight: Controls the boldness or thickness of the text characters

35. - Letter Spacing: Controls the horizontal space between individual characters (letters) within a word. Also known as "tracking" in traditional typography

• The bigger the number the more space between the characters
• Change the unit by clicking the blue dash next to the number
  • px (pixels): Like little dots on the screen. 200px means 200 dots wide or tall.
  • % (percent): A part of something else. 50% means half the size of the box it’s in.
  • em: Grows with the text around it. 2em is 2 times bigger than the normal text.
  • rem: Like em, but always starts from the main page size. 1rem is usually normal-size text.
  • vh (viewport height): How tall the screen is. 100vh means the whole height of the screen.
  • vw (viewport width): How wide the screen is. 100vw means the whole width of the screen.

36. - Color: Sets the color of the text characters themselves

• Click the colored dot to pick the color from the color spectrum or to insert your hex code
  • Hex Code: A six-digit code used in web design to represent a specific color. It starts with a # symbol followed by numbers and letters (like #FF5733). This can help you stay consistent with your colors

37. - Line Height: Controls the vertical space between lines of text within a paragraph or text block. Also known as "leading" in traditional typography

• 1 is the standard spacing size
• Change the units by selecting the dash next to the number
  • px (pixels): Like little dots on the screen. 200px means 200 dots wide or tall.
  • % (percent): A part of something else. 50% means half the size of the box it’s in.
  • em: Grows with the text around it. 2em is 2 times bigger than the normal text.
  • rem: Like em, but always starts from the main page size. 1rem is usually normal-size text.
  • vh (viewport height): How tall the screen is. 100vh means the whole height of the screen.
  • vw (viewport width): How wide the screen is. 100vw means the whole width of the screen.

38. - Text align: Controls the horizontal alignment of text and inline content within its containing element (e.g., a paragraph, heading, button, or column). It dictates where the text begins and ends horizontally within the available space of its parent

• Text Align left: Align the text to the left edge of its container. The right edge of the text will appear "ragged" or uneven
• Text Align center: Centers the text horizontally within its container. Both the left and right edges of the text will appear ragged
• Text Align right: Aligns the text to the right edge of its container. The left edge of the text will appear ragged
• Text Align justify: When you apply "justify" to a block of text, the browser will stretch the text lines so that both the left and right edges are flush (aligned) with the container's boundaries. This creates a very neat, block-like appearance for the paragraph, similar to how text is often formatted in newspapers, books, and magazines

39. - Text Shadow: Adds a shadow effect directly behind the text characters. This can be used to make text stand out, improve readability against busy backgrounds, or add a decorative touch

• Click the plus arrow to add the shadow
• It will give you these options
  • X (horizontal offset): moves the shadow left or right; positive values move it right, negative values move it left
  • Y (vertical offset): moves the shadow up or down; positive values move it down, negative values move it up
  • Blur: controls how soft or sharp the shadow is; 0 means a sharp edge, higher numbers make the shadow more blurred and spread out
  • Color: Click the colored dot to pick the color from the color spectrum or to insert your hex code
    • Hex Code: A six-digit code used in web design to represent a specific color. It starts with a # symbol followed by numbers and letters (like #FF5733). This can help you stay consistent with your colors
• Change the unit of X, Y, and blur by selecting the "px" next to the number
  • px (pixels): Like little dots on the screen. 200px means 200 dots wide or tall.
  • em: Grows with the text around it. 2em is 2 times bigger than the normal text.
  • rem: Like em, but always starts from the main page size. 1rem is usually normal-size text.
  • vh (viewport height): How tall the screen is. 100vh means the whole height of the screen.
  • vw (viewport width): How wide the screen is. 100vw means the whole width of the screen.

40. Click "Settings" to customize Text color, Background color, Border width, Border color, Border radius, ID and Title

• Classes: Is essentially a reusable set of styles that you can apply to multiple elements across your website. Instead of setting the font-size, color, padding, margin, etc., individually for every button, you create a "Button" class and apply it to all your buttons. If you later decide to change the button color, you only change it once in the "Button" class definition, and all buttons with that class update automatically
  • 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

41. Options under "Settings"

• Lead?: A class you can add to a paragraph to make the text look bigger and easier to read. It's often used for the first line or intro text on a page so it stands out more.
  • Select "Yes" or "No"

42. - Text Color: This property directly changes the color of the text characters within an element

• 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

43. - Background Color: Sets a solid color that fills the background area of an element. This color sits behind the element's content and its padding, but inside its border

• 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

44. - Border Width: Controls the thickness of the line that forms the border around an element

• 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

45. - Border Color: Defines the color of the border line

• 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

46. - Border Radius: This property rounds the corners of an element's border (and its background and content area). Instead of sharp 90-degree corners, you get smooth, curved ones

• 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

47. - ID: An "ID" (short for Identifier) is a unique label you give to an element so you can style it, link to it, or control it separately from everything else on the page.

• Customize it in the text field

48. - Title: The "Title" attribute provides additional, non-critical information or a brief description about an element

49. Click "Components" to add, move, delete, or rearrange components without affecting other parts of the page

Components (sometimes also called "blocks," "widgets," "modules," or "elements") are essentially pre-built, reusable building blocks that you drag and drop onto your webpage to construct its layout and add content. They are the fundamental units that make up your website, allowing you to create a complex site without needing to write code from scratch

Think of components like LEGO bricks. Each brick has a specific shape and function, and you combine them in various ways to build a complete structure

50. Choose from over 50 sections "About, Ad Registration, ect."

51. Each section has many different components, so you can choose the style that best fits with your website and brand

• Click on the desired component to add it to your website, where you can then select if you want the default style or the global style
  • Global Style: These are settings that apply to many elements across your entire website. When you change a global style (like font, color, or spacing), it updates everywhere that style is used, keeping your design consistent.
  • Default Style: This is the basic style an element uses if you don't change anything. It's often set by your website’s theme or global styles. You can leave it as-is or customize it for specific elements.

52. Search for specific components using the search bar

53. Click "Global Style Setting"

Global Style Settings are a centralized control panel where you define the default visual appearance of your entire website. Instead of styling each individual element on every single page, global styles allow you to set foundational design rules that apply universally across your site

54. Click "Favicon" to add your favorite icon

A Favicon (short for "favorite icon") is a small, square, iconic image that represents your website

Click "Attach file" to add the image then click "Save" once you have chosen your favicon

55. Click "Logo" to add logo

"Logo" refers to the graphical mark or emblem that represents your brand, company, or personal identity on your website

Click "Attach file" to add the logo then click "Save" to apply the changes

56. Click "Footer Logo" to add a logo at the footer section of your website

The Footer Logo is an instance of your brand's logo that is specifically placed within the footer section of your website. The footer is the bottommost section that appears consistently across all or most pages of your site, typically containing copyright information, navigation links, contact details, and sometimes social media links

Click "Attach file" to add the logo then click "Save" to apply the changes

57. Click "Color"

When you manage "Color" in the Global Design section, you're not just setting the color for one specific piece of text or one background. Instead, you're defining the entire color palette and scheme for your entire website. These are your brand's official colors that will be available and applied across all pages and elements by default

• Pick theme colors or add your own colors by clicking "+ Add new color"

• To change the color

  • Click the colored box where you can select the color from the color spectrum or insert a specific number using Hex, rgb, or hsl

    • Hex: A 6-digit code that starts with # (like #FF5733). It defines color using combinations of red, green, and blue in hexadecimal format. Common in web design.

    • rgb: Stands for Red, Green, Blue. It defines color using three numbers (like rgb(255, 87, 51)), where each number ranges from 0 to 255 to mix the right shade.

    • hsl: Stands for Hue, Saturation, Lightness. It defines color based on:

      • Hue (0–360 degrees on a color wheel),

      • Saturation (intensity of the color), and

      • Lightness (brightness from black to white). Example: hsl(12, 100%, 60%).

Each method produces the same result—a specific color—just in different formats.

Click "Save"

58. Click "Fonts"

"Fonts" in your Global Design settings means you are defining the default typefaces, sizes, and styles for all text elements across your entire website

Click "Save"

59. Click "Button" under Global Design settings

"Button" settings in the Global Design section, you are defining the default visual appearance for all (or specific types of) buttons across your entire website. This ensures that every time you add a new button, it automatically adopts a consistent, on-brand look and feel without you having to manually style it each time

• Primary: Used for the main action on a page, like "Submit" or "Save." It usually has a bold or standout color to draw attention.
  • Default shows how the button looks sitting on the website
  • Hover shows how the button looks when the cursor is over the button
    • This can look the same as the default, or it can be different to add an interactive element to your site
  • A preview of the button will appear to demonstrate how the button will appear on the main page
  • This can be customized like editing a main element
    • See steps 14-47
• Secondary: Used for less important actions, like "Cancel" or "Learn More." It typically has a lighter color or an outlined style to appear less prominent.
  • Default shows how the button looks sitting on the website
  • Hover shows how the button looks when the cursor is over the button
    • This can look the same as the default, or it can be different to add an interactive element to your site
  • A preview of the button will appear to demonstrate how the button will appear on the main page
  • This can be customized like editing a main element
    • See steps 14-47

60. Click "Undo"

Undo function allows you to reverse the last action (or series of actions) you performed

61. Click "Redo"

Redo function allows you to re-apply an action that you have just undone. If you undo something and then realize you actually did want that change, "Redo" brings it back without you having to re-do the action manually.

62. Click "Open Code"

"Open Code" feature is an advanced functionality within a website builder that allows users to directly view (HTML, CSS, and sometimes JavaScript) that the builder generates for your website or specific elements within it

63. Click "Clear Page" to remove all content and layout elements from the current page you are working on, effectively returning it to a blank, empty canvas

64. Click "Edit Code"

"Edit Code" feature is an advanced functionality within a website builder that allows users to directly view and edit (HTML, CSS, and sometimes JavaScript) that the builder generates for your website or specific elements within it

65. Click "Preview" to view the page before saving

Click "Save" once you are done with the customization

66. Click "Post Detail" to change the page view through the drop-down menu

• You can navigate through different pages from this point here so you don't have to leave the post page builder to edit a different page

67. Click the display icons to change the display of the page. This helps you edit the website according to different screen sizes

• Computer icon: Switches the view to desktop mode. Lets you see and edit how your website looks on a full-sized screen.

• Tablet icon: Switches the view to tablet mode. Lets you adjust layout and styling for mid-sized screens like iPads or other tablets.

• Phone icon: Switches the view to mobile mode. Helps you fine-tune how your website looks and functions on smartphones.

• Square icon: Often represents a full-width or default view. It may reset the display or show the original layout without device-specific styling. (Exact function can vary depending on the builder.)