How To Make Landing Pages Like Studiopress & Copyblogger??

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

This topic is: not resolved

This topic contains 12 replies, has 7 voices, and was last updated by  braddalton 11 months, 1 week ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #46974

    ISeemToBeAVerb
    Participant
    Post count: 11

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

    Here are a couple examples:

    Genesis Sales Page

    http://www.studiopress.com/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

    #46981

    anitac
    Participant
    Post count: 6988

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


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #46988

    ISeemToBeAVerb
    Participant
    Post count: 11

    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.

    #46994

    ISeemToBeAVerb
    Participant
    Post count: 11

    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

    #47155

    Summer
    Participant
    Post count: 954

    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.


    #47303

    Summer
    Participant
    Post count: 954

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


    #47312

    ISeemToBeAVerb
    Participant
    Post count: 11

    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.

    #47363

    Summer
    Participant
    Post count: 954

    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.


    #53979

    Tonje
    Participant
    Post count: 37

    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 ?

    #56192

    darlingdearie
    Participant
    Post count: 3

    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.

    #56326

    William
    Participant
    Post count: 116

    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.


    #56332

    anitac
    Participant
    Post count: 6988

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


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #56378

    braddalton
    Participant
    Post count: 8794

    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.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.