Custom CSS Styling

creavio's visual editor handles most design needs. But if you want pixel-perfect control or a design element the editor does not support, custom CSS gives you direct access to your site's styling.

Where to Add Custom CSS

Go to Website > Settings > Custom Code. There are two places to add CSS:

• Global CSS: Applies to every page on your site. Use this for site-wide styling changes like fonts, colors, and spacing.
• Per-page CSS: Available in the page editor under Settings. Applies only to that specific page.

Wrap your CSS in <style> tags:

<style>
  .hero-section {
    padding: 120px 0;
  }
</style>

Common Customizations

Change heading font size and weight:

<style>
  h1 { font-size: 48px; font-weight: 300; letter-spacing: -0.02em; }
  h2 { font-size: 32px; font-weight: 600; }
</style>

Adjust portfolio grid spacing:

<style>
  .portfolio-grid { gap: 4px; }
  .portfolio-grid img { border-radius: 0; }
</style>

Custom button styles:

<style>
  .cta-button {
    background: transparent;
    border: 2px solid #333;
    color: #333;
    padding: 14px 32px;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 0.3s ease;
  }
  .cta-button:hover {
    background: #333;
    color: #fff;
  }
</style>

Hide the creavio badge (paid plans):

<style>
  .creavio-badge { display: none; }
</style>

Inspecting Elements

To figure out what CSS class to target, right-click any element on your live site and select Inspect (in Chrome or Firefox). The developer tools show you the HTML structure and existing CSS. Note the class name and write your override.

Responsive CSS

Your custom CSS should work on mobile too. Use media queries to adjust styling for smaller screens:

<style>
  @media (max-width: 768px) {
    h1 { font-size: 28px; }
    .hero-section { padding: 60px 20px; }
  }
</style>

Always test your custom CSS on both desktop and mobile. Open your site on your phone or use Chrome's device emulation tool.

Specificity and Overrides

If your CSS is not applying, it may be a specificity issue. creavio's built-in styles may have higher specificity. To override:

• Be more specific in your selector: .page-content .hero-section h1 instead of just h1
• As a last resort, use !important (but avoid this when possible as it makes future changes harder)

What Not to Do

• Do not add JavaScript in the CSS field. Use the custom code section instead.
• Do not hide critical navigation or footer elements. Your visitors need to navigate.
• Do not use position: absolute on major layout elements. This breaks responsive behavior.
• Do not override animation timing on interactive elements. This can make the site feel broken.

Saving and Previewing

After adding custom CSS, click Save and preview your site in a new tab. Check multiple pages, not just the one you were focused on. Global CSS affects everything.

If something breaks, remove the last CSS you added. Custom CSS is saved with version history, so you can revert to a previous state from the settings panel.