- This topic has 12 replies, 7 voices, and was last updated 10 years, 1 month ago by
.
-
Posts
-
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/featuresCopyblogger 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,
- MichaelCopyblogger/Studiopress has a product called Premise (aff. link) that does that.
Love coffee, chocolate and my Bella!
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.
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,
- MichaelMany 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 DarkI 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 DarkI'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.
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 DarkI 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 ?
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.
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.comHere's the link from Archive.org - I LOVE Archive! http://web.archive.org/web/20130118051843/http://www.briangardner.com/create-landing-page/.
Love coffee, chocolate and my Bella!
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.
- The forum ‘General Discussion’ is closed to new topics and replies.