Blocksy – How to Make a Per-Page Hero if Using Classic Editor

This is what Google AI says about making a hero for one page only in the free version of the Blocksy theme, not globally. I don’t know if it’s true as I have not tried it yet:

In the Blocksy free theme, you are correct: the theme’s individual page settings panel is only accessible when using the Gutenberg block editor. It does not appear as a meta box or sidebar in the Classic Editor.   Since you cannot use the individual page settings in the Classic Editor, and Customizer changes are global, you can use a CSS-based workaround to create a non-global hero for a specific page.

How to Make a Non-Global Hero via CSS

Every page in WordPress has a unique Body Class based on its ID. You can use this to apply “hero” styles to the Page Title area of just one specific page.
  1. Find your Page ID:
    • In your WordPress dashboard, go to Pages > All Pages.
    • Hover over the page you want to change. Look at the URL in the bottom-left of your browser; the number after post= is your Page ID (e.g., page-id-25).
  2. Enable Page Title globally (but styled for one page):
    • In Appearance > Customize > Post Types > Pages, turn the Page Title ON.
    • Go to Design and set the background to “None” or a neutral color.
  3. Apply Page-Specific Styles:
    • Go to Appearance > Customize > Additional CSS.
    • Paste the following code, replacing .page-id-25 with your actual ID:
/* Apply hero styling ONLY to page ID 25 */
.page-id-25 .page-title {
    background-image: url('YOUR_IMAGE_URL_HERE');
    background-size: cover;
    background-position: center;
    padding: 100px 0; /* Creates the "hero" height */
    color: #ffffff; /* Changes text color to white for the hero */
}
/* Optional: Hide the page title on ALL OTHER pages */ 
body:not(.page-id-25) .page-title { display: none; } 
Use code with caution.

Why this works without Gutenberg:

  • Targeting: The .page-id-XX class ensures the hero style only triggers on that specific page.
  • Customization: You can manually set the image URL and height (padding) directly in the CSS.
  • Control: The second block of CSS hides the title area on every other page, effectively making it a “non-global” hero.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top