• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

How To Make Landing Pages Like Studiopress & Copyblogger??

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › How To Make Landing Pages Like Studiopress & Copyblogger??

This topic is: not resolved

Tagged: css, design, landing page

  • This topic has 12 replies, 7 voices, and was last updated 11 years, 9 months ago by Brad Dalton.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • June 20, 2013 at 6:29 pm #46974
    ISeemToBeAVerb
    Member

    I really like the clean and graphical landing pages used by Studiopress & Copyblogger.

    Here are a couple examples:

    Genesis Sales Page

    Features

    Copyblogger HomePage
    http://www.copyblogger.com/

    Since Copyblogger and Studiopress both use Genesis, I have to imagine these types of pages are possible to incorporate into our Genesis-built sites.

    Does anyone have any tips or pointers for going about designing a page like this?

    I get how you would do it if you were just building it via HTML & CSS, but I'm lost when it comes to incorporating pages like this into Genesis & WordPress.

    Are these custom page templates with the HTML placed in the actual WordPress page?
    Are they hand-coded in HTML & CSS and placed in the site, effectively bypassing WordPress & Genesis?

    I just don't know where to start, I'm kinda new to all this.

    Any info would be greatly appreciated.

    Thanks,
    - Michael

    June 20, 2013 at 6:48 pm #46981
    AnitaC
    Keymaster

    Copyblogger/Studiopress has a product called Premise (aff. link) that does that.


    Need help with customization or troubleshooting? Reach out to me.

    June 20, 2013 at 7:04 pm #46988
    ISeemToBeAVerb
    Member

    Thanks for the response.

    I'm familiar with Premise, but it seems more geared toward making traditional, copy-heavy landing pages. I'm specifically referring to the short-copy, graphic-heavy landing pages like I linked to in my examples.

    If they are using Premise for their landing pages, I'd love to know how. The examples shown in the Premise demo look nothing like the landing pages on Copyblogger & Studiopress.

    June 20, 2013 at 8:49 pm #46994
    ISeemToBeAVerb
    Member

    I thought I'd take a stab at figuring this out, so here's my newbie hypothesis using the Genesis Sales Page as an example.

    Perhaps a more experienced developer could chime in and let me know if I'm even remotely close to figuring out how this is actually done.

    So here's what I was thinking...

    The entire landing page is a standard WordPress Page with all but the header and footer removed.

    The actual landing page content consists of two parts:

    01. A custom background graphic (used for the main image, dividers and arrows)

    02. Text/images formatted using the standard WordPress Post/Page Editor.

    Each section is formatted using a standard title tag and the Genesis column classes.

    So you have a series of two column layouts that alternate between text left and image left. At the end of each section you have a button aligned center.

    At the very bottom, before the footer, you have a title and three column layout.

    As for the circle of links in the main graphic, I have no clue.

    Anyhow, that's my hypothesis.

    I'd love to hear any comments. Not sure if I'm even in the right ballpark.

    Thanks,
    - Michael

    June 22, 2013 at 2:39 am #47155
    Summer
    Member

    Many of the current child themes come with landing page templates, and Brian Gardner has a tutorial on his website on how to create one: http://www.briangardner.com/create-landing-page/

    Both would be places I'd start.


    WordPress / Genesis Site Design & Troubleshooting: A Touch of Summer | @SummerWebDesign
    Slice of SciFi | Writers, After Dark

    June 23, 2013 at 1:03 pm #47303
    Summer
    Member

    I posted a reply to this with links to a tutorial... did it get caught as spam?


    WordPress / Genesis Site Design & Troubleshooting: A Touch of Summer | @SummerWebDesign
    Slice of SciFi | Writers, After Dark

    June 23, 2013 at 1:22 pm #47312
    ISeemToBeAVerb
    Member

    I'd be interested in seeing that tutorial. Could you try re-posting?

    I've been making good progress using the method I outlined above, but I'm always looking for more info.

    June 23, 2013 at 4:02 pm #47363
    Summer
    Member

    What I'd said was that there are more than a few existing Genesis child themes that come with a landing page template, usually named page_landing.php, and you could use that as a roadmap.

    And there is a tutorial from last year on Brian Gardner's blog, and since the forum here is being mean to me and not letting me post URLs, you can find it by searching on "Brian Gardner landing page tutorial" -- Google has it as the first result 🙂

    From your outline, it sounds like you are looking for something a little more like the home page for the Epik child theme, something with widgets as defined row areas? I'm a big fan of widgetized pages these days, but it's not hard to add those spaces yourself.


    WordPress / Genesis Site Design & Troubleshooting: A Touch of Summer | @SummerWebDesign
    Slice of SciFi | Writers, After Dark

    August 3, 2013 at 2:46 pm #53979
    Tonje
    Member

    I simply cant find the link http://www.briangardner.com/create-landing-page/ or the tutorial on google.

    Someone who can guide me on this please ?

    August 13, 2013 at 5:01 pm #56192
    darlingdearie
    Member

    It's not there anymore. I eventually found it cached in google but it is no longer live on his site.

    Dang, that is what I was also looking for.

    Just came over from Catalyst via Dynamik and trying to find my way around.

    If you, or anybody else, knows of, or finds, a good tutorial on creating an awesome landing page with Genesis, please keep me in that loop.

    Cheers.

    August 14, 2013 at 9:46 am #56326
    William
    Member

    The Landing Page just gives you the blank canvas for your content without the distraction of sidebars. It's still up to you to create and format the content that goes into those Landing Pages.

    If you need to use different fonts, check into Google Fonts for free or Typekit for an annual fee. Both have some great choices. It looks like the StudioPress page uses Google Fonts, so you have access to the same style.

    As for the graphics and the layout, that depends upon you. The Landing Page isn't doing that for you, but the tools are there to create columns to help your layouts.


    –William
    http://williambeem.com

    August 14, 2013 at 10:09 am #56332
    AnitaC
    Keymaster

    Here's the link from Archive.org - I LOVE Archive! http://web.archive.org/web/20130118051843/http://www.briangardner.com/create-landing-page/.


    Need help with customization or troubleshooting? Reach out to me.

    August 14, 2013 at 1:25 pm #56378
    Brad Dalton
    Participant

    Both those pages are custom page templates with custom CSS.

    If you right click the pages, you can grab the url to the style.css files and see what CSS code has been used to design them.

    Its all very doable as long as you have time as there's a fair amount of work been put into both those pages.

    An easier option would be to use a plugin that already does the heavy lifting like Anita suggested with the Premise plugin.


    Tutorials for StudioPress Themes.

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble