Customizing Your Blog Design

From the left sidebar, click Design to begin customizing the look and feel of your blog.

From the left sidebar, click Design to begin customizing the look and feel of your blog.

Logo
- Upload your logo and set a destination URL for logo clicks.
- Recommended size: 250×150 or 400×200
Header Button
- Choose from two button types:
  - Subscribe Form
    - "Display a lead capture form when the button is clicked."
    - Form content and settings can be configured in the Form tab.
  - Navigate to URL
    - Link the button to any internal/external URL.
Navigation Bar
- Primary Navigation
  - Set a static menu bar at the top of your blog.
- Dropdown Menu
  - Configure dropdown items that appear when a menu item is clicked.
Custom Code
- You can also inject custom CSS or HTML to fully match your website's brand guidelines.

Blog Title & Description
- Customize the title and description text shown on your blog's homepage.
Text Color
- Set the color of your banner text.
Banner Layout
- Choose text alignment: Left-aligned or Center-aligned.
Background (Color or Image)
- Customize the banner background:
  - Set a solid background color
  - Or upload a background image
    - Recommended sizes: 1680×450 for desktop / 390×300 for mobile
Custom Code
- You can also inject custom CSS or HTML to fully match your website's brand guidelines.

Layout

inblog offers three default post layouts to choose from.
You may also apply additional visual customization via custom code.
- Custom Code: Use HTML/CSS for fully tailored layouts.

Add your company information to the footer section.
Like other areas, the footer can also be customized with code.

Entering and Saving Custom Code

The Custom Code areas under Header, Banner, Layout, and Footer all use the same editor. It has an HTML box on top and a Style CSS box below. Enter CSS rules directly or wrap them in <style> tags as shown below. New or edited CSS rules are automatically wrapped in <style> tags when you apply the code.

<style>
  h2 {
    font-size: 20px;
  }
</style>

Unchanged saved CSS is preserved. Editing other settings or only the HTML does not convert existing CSS. To activate previously saved CSS without tags, review it and explicitly wrap it in <style> tags. Check the design in the preview before saving. Incomplete CSS rules or <style> blocks, and preset names such as cover, produce an error in red text. Do not add HTML or scripts to the CSS field. If an existing field already contains them, you can edit its CSS contents while leaving the other code, style attributes, and order unchanged.

Your code is applied to the blog only after both of these steps:

Click Apply custom code. The code is validated and reflected in the preview inside the editor. It is not saved yet.
Click Save, pinned to the top of the settings panel. Only after this step does the change go live on your blog.

If you click Apply custom code and then leave the Design screen without saving, your changes are lost. A confirmation dialog appears when you try to leave with unsaved changes.

Custom code is stored per screen and per area. The Common, Home / Category, Post, Author, and 404 tabs at the top of the Design screen each keep their own code, and within Common the Header, Banner, and Footer are separate boxes as well. Enter your code in the tab for the screen you want to change — for example, adjust the spacing of a post's body under the Post tab.
Broad CSS selectors such as a or button can affect your entire blog. The editor shows a warning in that case — narrow the selector's scope if you want the rule to apply to one area only.

404 Error Page

You can configure a custom 404 error page for when a user lands on a non-existent URL.

Mobile Preview Support

"Your blog design is fully responsive." Preview how your blog looks on both desktop and mobile views directly from the editor.

Last updated 2026-09-08

PreviousBlog Settings Overview NextManaging Team Members