Custom HTML and CSS give you more control over your Sitebuilder website. In this guide, we explain how to add custom code safely and effectively.

When to Use Custom Code

Custom HTML

• Embed third-party widgets
• Add special functionality
• Include tracking codes
• Custom structured data

Custom CSS

• Change colors not in theme
• Adjust spacing and sizes
• Custom hover effects
• Override default styles

Adding Custom HTML

HTML Element

1. Add HTML or Embed element
2. Click to edit
3. Paste your code
4. Preview result

Header/Footer Code

For site-wide code:

1. Go to Settings > Custom Code
2. Add to Header or Footer
3. Save changes

Where to Put Code

Header (before closing head tag):

• Analytics codes
• Meta tags
• CSS files
• Schema markup

Footer (before closing body tag):

• JavaScript
• Tracking pixels
• Chat widgets
• Performance scripts

Adding Custom CSS

Global CSS

1. Go to Settings > Custom CSS
2. Enter your CSS code
3. Changes apply site-wide
4. Save and preview

Page-Specific CSS

Some builders allow:

1. Edit page settings
2. Find custom CSS section
3. Add page-only styles

CSS Basics

Selectors

Target elements:

/* By class*/
.my-button { color: red; }

/* By ID*/
#header { background: blue; }

/* By element*/
h1 { font-size: 36px; }

Common Properties

Text:

• color: Text color
• font-size: Text size
• font-weight: Bold/normal
• line-height: Line spacing

Box Model:

• margin: Outside spacing
• padding: Inside spacing
• border: Element border
• width/height: Dimensions

Background:

• background-color: Fill color
• background-image: Image
• background-size: Size

Important Rule

Override default styles:

.element {
    color: red !important;
}

Use sparingly - indicates specificity issues.

Common CSS Customizations

Change Button Color

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

Adjust Spacing

.section {
    padding-top: 80px;
    padding-bottom: 80px;
}

.container {
    max-width: 1200px;
}

Custom Fonts

@import url(\"https://fonts.googleapis.com/css2?family=Open+Sans&display=swap\");

body {
    font-family: \"Open Sans\", sans-serif;
}

Hide Elements

.unwanted-element {
    display: none;
}

Mobile-Only Styles

@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }

    h1 {
        font-size: 24px;
    }
}

Common HTML Embeds

Google Maps

<iframe
    src=\"https://www.google.com/maps/embed?pb=...\"
    width=\"600\"
    height=\"450\"
    style=\"border:0;\"
    loading=\"lazy\">
</iframe>

YouTube Video

<iframe
    width=\"560\"
    height=\"315\"
    src=\"https://www.youtube.com/embed/VIDEO_ID\"
    frameborder=\"0\"
    allowfullscreen>
</iframe>

Social Media Follow

<a href=\"https://twitter.com/youraccount\"
   class=\"twitter-follow-button\"
   data-show-count=\"false\">
   Follow @youraccount
</a>
<script async src=\"https://platform.twitter.com/widgets.js\"></script>

Schema Markup

<script type=\"application/ld+json\">
{
    \"@context\": \"https://schema.org\",
    \"@type\": \"LocalBusiness\",
    \"name\": \"Your Business\",
    \"address\": {
        \"@type\": \"PostalAddress\",
        \"streetAddress\": \"123 Main St\",
        \"addressLocality\": \"City\"
    }
}
</script>

Finding Element Names

Browser Inspector

1. Right-click element
2. Select Inspect or Inspect Element
3. Find class or ID in HTML
4. Use in your CSS

Common Sitebuilder Classes

Classes vary by builder, but common patterns:

• .header, .footer, .nav
• .btn, .button
• .section, .container
• .text, .heading

Best Practices

Code Quality

• Comment your code
• Organize logically
• Use meaningful names
• Keep it simple

Testing

• Test all pages
• Check mobile view
• Different browsers
• Clear cache when testing

Backup

• Save code externally
• Document changes
• Version control if possible

Performance

• Minimize code
• Load scripts efficiently
• Avoid inline styles
• Optimize images in HTML

Troubleshooting

CSS Not Working

1. Check selector specificity
2. Clear browser cache
3. Try !important (last resort)
4. Verify code syntax

HTML Not Displaying

1. Check for syntax errors
2. Verify closing tags
3. Check for blocked content
4. Test code elsewhere first

Breaking the Layout

1. Remove code section by section
2. Find problematic code
3. Check for missing closing tags
4. Verify CSS values

Security Considerations

Safe Code

• Only add trusted code
• Avoid unknown scripts
• Do not include passwords
• Verify third-party sources

What to Avoid

• Suspicious scripts
• Unknown tracking codes
• Obfuscated code
• Untrusted iframes

Need Help?

We are here for you! If you run into any issues or have questions, our support team is happy to help you personally. Send us a message through the ticket system - we usually respond within a few hours and are happy to assist you.