Different styles across pages

  • Unknown's avatar
    portiaelan · Member ·

    I am trying to create some subpages on my website that will have different font(s), font colors, and backgrounds. What is the easiest way to do this?

    Current theme: Twenty-Twenty Five

    Example subpage: https://portiaelan.com/please-choose-a-destination/welcome-to-1983/ –> ideally this page would have a black background, green text, and a different font

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    zikriaahmad411 · Member ·

    Hi @portiaelan,

    I love how you’re customizing your site; it’s such a fun and creative way to set the tone for each section. That “Welcome to 1983” page idea with the black background and green text totally gives retro computer vibes.

    You can define the background, text colors, and fonts directly on the page you’re editing using the block editor. The easiest way to do this is by styling the parent block, which is usually a Group block that wraps around the content. That way, the style gets applied to the whole section like this:

    To change the background and text color:

    1. Click into the block (or Group block) you want to style.
    2. Open the Styles section in the right sidebar.
    3. Choose your background and text colors from there.

    You can find the exact steps here: Access the Color Settings.

    To change the font of a block:

    1. Click on the block you want to edit.
    2. In the same Styles section, scroll down to the Typography section.
    3. Choose a different font family, size, and more.

    Here’s how: Access the typography settings.

    I’d love to learn more about your creative vision for the site. Are these pages part of a larger narrative experience, like an interactive zine or story world tied to your writing? Or are you exploring distinct visual identities for different projects (like your games, writing updates, etc.)?

    Also, huge congrats on Homebound! That’s such an exciting milestone. Are you planning to include early looks, press info, or behind-the-scenes updates for readers? I’d be happy to help brainstorm ways to structure those pages if that’s something you’re exploring.

    Looking forward to hearing what you’re dreaming up next!

  • Unknown's avatar
    portiaelan · Member ·

    Thank you for the quick and thorough response, as well as the congratulations! I really appreciate the help — I’m very new to manipulating WordPress sites.

    I was able to successfully change the background color, font, and font color — although now I’m seeing three other tweaks I’d like to make:

    1. The black background seems to be a box, rather than the full width of the page (which I would prefer)
    2. I’d rather it didn’t display the header “Portia Elan” on this page — am I able to remove it for this page?
    3. The page title “welcome to 1983” is still in the font/colors of the overall theme. Can this be adjusted?

    Overall, this (“welcome to 1983”) will be part of a network of pages that provide a kind of extended experience for early readers of the book (booksellers, influencers, etc.). Eventually, I’ll want to build out my main page (portiaelan.com), but for now prefer it stay as a single, simple page!

  • Unknown's avatar
    zikriaahmad411 · Member ·

    @portiaelan You’re very welcome, and I’m glad to hear you’ve already made such great progress customizing the page! Since you mentioned being new to editing, these two guides might be helpful for getting more comfortable:

    🔹 How to Add Content Using Blocks
    🔹 Learn the WordPress.com Editor Interface

    Now let’s walk through your next set of customizations one by one:

    1. Black background doesn’t extend full width

    What you’re seeing is likely because the Group block that holds your content is set to “None” under alignment. You can switch it to Full width from Block Toolbar like this:

    Once that’s selected, your black background should stretch across the whole screen.

    2. Removing the header “Portia Elan” on this page

    That’s coming from the “Pages” template, which defines the structure of all your pages. To hide the header on this specific page, follow these steps:

    1. Go to Appearance > Editor > Templates
    2. Open the Pages template
    3. Click the List View icon (top left), find the block that contains your site title/header, and delete it.

    Here’s the full guide on editing the page template: Edit the Page Template.

    Keep in mind: any changes to the Pages template will affect all pages that use it. If you’d like different layouts for different pages, you can create a custom template only for Welcome to 1983 and assign it to that page. Here’s how: Create a Custom Template.

    3. Changing the “Welcome to 1983” page title style

    That title is also part of the Pages template; it’s controlled by the Title block there. You can customize the font and colors by:

    1. Clicking the Title block in the Pages template
    2. Opening the Block Styles on the right
    3. Under Typography, you can choose the font, size, and style
    4. And under Color, you can adjust the text color

    Just like the header, any changes to the title block in the template will show up on all your pages that use it, so if you’re aiming for different styles per page, a custom template will give you that freedom.

    I love that Welcome to 1983 is part of a deeper reader experience. What a brilliant way to draw people into your world before Homebound launches. Do you imagine each page in this network having its own unique vibe? And when you’re ready to build out your homepage, are you thinking minimalist landing page, or something more like a portfolio and press hub?

    Let me know how it goes and if you need help with anything else!

  • The topic ‘Different styles across pages’ is closed to new replies.