How to Change the Layout of the Website

⌘K

How to Change the Layout of the Website

Accessing Global Styles

 

To begin customizing global styles, follow these steps:

  1. Log in to your platform’s admin dashboard.
  2. Navigate to Appearance in the left-hand menu
  3. Click on Editor to open the editing interface.
  4. In the editor, locate and click on the Styles section. Then click on the Pencil Icon. This will display all available global style options.
  5. Click on the layout.

Content Width

  1. What It Does
    1. Sets the maximum width (in pixels, by default) for the main content area. This is typically where paragraphs, images, and standard blocks reside.
  2. How To Edit
    1. Type a numeric value (e.g., 856) in the Content Width field.
    2. Click px (or an icon next to it) to switch units if your theme or editor supports alternative units (like em or %).
  3. Why It’s Important
    1. Keeping your content at a readable line length is essential for a comfortable reading experience. A width of 650–900 pixels is common for text‐heavy content.

Wide Width

  1. What It Does
    1. Defines a larger maximum width for blocks set to “wide” or “full‐width” alignment.
    2. Typically used for images, galleries, or wide layout sections that span more space than standard content.
  2. How To Edit
    1. Enter a numeric value (e.g., 1290) in the Wide Width field.
    2. This ensures that any block with wide alignment will expand up to this width (depending on the device/screen size).
  3. Best Practice
    1. Make sure your Wide Width is significantly larger than Content Width to see a noticeable difference.

Padding

  1. Purpose
    1. Controls the space between the edges of the site’s container and the content inside it.
    2. Useful for ensuring text and images don’t butt up directly against the browser edges or background areas.
  2. Adjusting Padding
    1. In the Padding area, you’ll typically see four linked values (top, right, bottom, left). Some themes present these as a single group (0 px, 0 px).
    2. If the link icon (chain symbol) is active, changing one value applies to all sides equally.
    3. Click the chain icon to unlink, allowing different values for each side.
    4. Use the sliders or type in exact pixel values.
  3. When To Adjust
    1. If you notice your content is too close to the site’s border, increase the padding.
    2. For a more compact layout, reduce the padding.

Block Spacing

  1. Definition
    1. Sets the vertical (and sometimes horizontal) spacing between individual blocks (e.g., paragraphs, images, headings) in the main content area.
  2. How To Edit
    1. Enter a numeric value (e.g., 24) or use the slider to adjust spacing.
    2. The measurement unit is typically pixels (px), but may be changed to another unit if supported.
  3. Design Considerations
    1. Increasing block spacing can give your layout a more open, airy feel.
    2. Decreasing block spacing helps fit more content on the screen but may reduce readability.
Was this article helpful to you? No Yes

How can we help?