How to Create a Splash Page

Community Forums Forums Design Tips and Tricks How to Create a Splash Page

This topic is: not resolved

This topic contains 17 replies, has 4 voices, and was last updated by  rbrown08 1 year, 10 months ago.

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #9564

    bamajr
    Participant
    Post count: 68

    Before this gets moved, or someone blindly replies about this being a duplicate post, please read the whole thing. I don’t feel that this is a dupe as I’m not looking for something as simple as a landing page (http://www.briangardner.com/create-landing-page/ & http://www.studiopress.com/forums/topic/what-is-the-current-snippet-to-create-splash-page/). I’ve read both of these and they are not exactly what I’m trying to accomplish. I even posted about this issue (at the second link, provided above) and haven’t gotten any response. I have used this idea on another website and it doesn’t exactly meet the objective, for one specific client.

    I’ve been using Genesis for a while now and have built a couple of my own themes and have spent quite a bit of time modifying several other themes. However, on one website, I’m still having a problem – or I’m just simply confused.

    I have a client who has had some flash work done for him. In fact, the client’s old website was almost entirely flash. They had some issues with their domain registrar and host, and lost their domain. Now, I’m trying to help them set up a new website at a new host. This new website will primarily utilize WordPress/Genesis, instead of the Flash idea. However, they still want to incorporate parts of the flash movie (Who can blame them? It probably cost them quite a bit.).

    Flash has it’s places, but I’m not a fan of using flash for entire websites. As the prior website wasn’t under my supervision and the client’s current wants are not my choice, please, help me focus on a WordPress/Genesis solution. Here is what I’m trying to accomplish:

    I need the root (I.E. http://www.MyWebsite.com/) to land on a page with nothing but a single image, one line of text two buttons.
    Button #1 one will take the visitor to the self-encompassing flash movie (I.E. http://www.MyWebsite.com/flash/), which is little more than a .SWF file, embedded in a similar fashion, the image in #1 (above) was.
    Button #2 will take the visitor to the WordPress home page (I.E. http://www.MyWebsite.com/home/).

    Everything else will operate like a normal WordPress/Genesis website.

    - – - – -

    So, here’s my issue…

    I know how to use create a landing page, but I’m running into issues trying to use that process to insert a single image, a single line of text and a line with two buttons in it (FYI: The buttons are CSS, not FLASH – in case that matters). The image is not a background image for the whole page, just the background image of a single div.

    <code>

    <div> <!– outer div –>

    <div id=”image”> <!– image div –>

    <div class=”left”> <!– left content –> </div>

    <div class=”right”> <!– right content –> </div>

    </div> <!– close image div –>

    <div id=”text”> <!– line of text –> </div>

    <div id=”buttons”> <!– buttons div –>

    <span class=”left-button”> <!– left button –> </span>

    <span class=”right-button”> <!– right button –> </span>

    </div> <!– close button div –>

    </div> <!– close outer div –>

    <code>

    This is essentially all I need on the root of the website (I.E. http://www.MyWebsite.com/). No header. No Footer. No Widgets. No Menu. No Sidebar. No Posts.

    - – - – -

    The Flash page will basically be laid out the same way, only without the text and buttons.

    <code>

    <div> <!– outer div –>

    <embed> <!– embed flash .SWF file –>

    <code>

    The Flash Movie is the same size as the image from the root.

    - – - – -

    Does this make sense to anyone other than me?


    Where to find me: APP.net | Facebook | Google + | Twitter | Website

    #9791

    Chris Cree
    Participant
    Post count: 147

    I’m not quite sure what your question is here. But you can create a home.php file, put all the remove_action statements you need to remove the items like with a landing page. Then you can add in the HTML with your image and links.

    For the flash page you can create another page template that also strips out the unwanted elements. Make sure you remove the genesis loop on this page template with
    [php]remove_action( ‘genesis_loop’, ‘genesis_do_loop’ );[/php]

    Then add the script to your flash video. You can make any page URL you want show the flash video then by adding a new page using that page template.


    #10764

    bamajr
    Participant
    Post count: 68

    Thanks for your response Chris…

    I must be doing something, little or big, wrong. This is exactly what I’ve been doing and I’m not quite getting what I want. I’m going to look over my work again to see if I can find what ever it is I’m missing.


    Where to find me: APP.net | Facebook | Google + | Twitter | Website

    #11190

    bamajr
    Participant
    Post count: 68

    So, here is what I’ve put together, based of the afore mentioned articles/tutorials:


    <?php
    /**
    * This file adds the Landing template to the BamajrEFM Child Theme.
    *
    * @author Bamajr
    * @package BamajrEFM
    * @subpackage Customizations
    */
     
    // Add custom body class to the head
    add_filter( 'body_class', 'add_body_class' );
    function add_body_class( $classes ) {
    $classes[] = 'bamajrnhcc-splash';
    return $classes;
    }
     
    // Remove header, navigation, breadcrumbs, footer widgets, footer
    add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
    remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
    remove_action( 'genesis_header', 'genesis_do_header' );
    remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );
    remove_action( 'genesis_after_header', 'genesis_do_nav' );
    remove_action( 'genesis_after_header', 'genesis_do_subnav', 15 );
    remove_action( 'genesis_before_content_sidebar_wrap', 'genesis_do_breadcrumbs');
    remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );
    remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
    remove_action( 'genesis_footer', 'genesis_do_footer' );
    remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );
     
    genesis();

    It produces a white box with the generic first post in it, which I do not want on the home page.

    At what point do I add the suggested HTML?

    I realize I need to add something similar to:

    Old Flash Site Enter New Website

    But, I guess I’m unsure of where to add this, in the code I’ve shown, above. I need to ensure blog posts are not part of this page.


    Where to find me: APP.net | Facebook | Google + | Twitter | Website

    #11191

    bamajr
    Participant
    Post count: 68

    FYI: Forum Admins and Moderators, the CODE tag isn’t working correctly!


    Where to find me: APP.net | Facebook | Google + | Twitter | Website

    #11194

    bamajr
    Participant
    Post count: 68

    FYI: Forum Admins and Moderators, the CODE tag isn’t working correctly! When the CODE tag is being used, some HTML is still being rendered instead of printed to the screen, as you can see above!

    Also, the option to edit posts goes away after a specific amount of time, right? Well, if you use your browser’s BACK BUTTON, you can edit the post as many times as you want, even without the presence of the BACK BUTTON – as I’m doing now.


    Where to find me: APP.net | Facebook | Google + | Twitter | Website

    #14127

    rbrown08
    Participant
    Post count: 39

    Hi, I’m wondering if you got this figured out as I’ve been asked to do the same thing.  I can make the landing page, but I don’t know how I’m to add the flash animation to it.


    #14190

    tomarob
    Participant
    Post count: 18

    I’m kinda’ new at this, – - but can’t you just ‘iframe’ if in??Create a folder with the necesssary files and folders inside it to achieve what you need, drop (ftp) it into your root, – - and then just use the little iframe shortcode to insert it right onto/into your (any) page.  The plug-in I use to do this very thing can be downloaded from here . . . http://wordpress.org/extend/plugins/iframe/

    In other words, what your calling in should work independantly on it’s own if your were to type in ‘yoursite.com/newfolder’, – - as long as it works like that, – - your iframe shortcode will show the results exactly like that right on your page . . .

    #14246

    rbrown08
    Participant
    Post count: 39

    I couldn’t just iframe the video in because the whole idea is that the page will not have the header and footer sections like the entire website has.  What I need is an intro page that strictly has the video running and then the user clicks a link to enter the site.

    I’ve tried iframes in the past for other types of projects and IE doesn’t read iframes; I don’t know if that is still the case.


    #14310

    bamajr
    Participant
    Post count: 68

    @rbrown08 – I’m not sure what version of IE you are using, but I’ve not had a problem with IE and iFrames, for a while. As best as I can remember, iFrames have worked with IE, all the way back to at least 2005. I know there have been some issues reported, but of the issues I’m aware of, just about all of them were due to restrictive settings in IE, which I don’t think can be avoided, even today. Similar to disabling JavaScript, if iFrames are not allowed, they wont work.

    That being said, @tomarob I’m not sure iFrame-ing is a good idea for a flash movie, or any media object for that matter.

    The HTML iFrame Element (or HTML inline frame element) represents a nested browsing context, effectively embedding another HTML page into the current page. - Mozilla

    While I’m sure there is a way to use iFrames, displaying a Flash video on a page, does not require access to another HTML Page. The Flash .SWF file simply needs to be embedded. This can be done by uploading the Flash .SWF file, in the WordPress Media Manager and using the .SWF file’s path (URL) to embed it with the traditional Flash embed script.

    In the end, I usually recommend against using Flash on a website’s home page or on priority landing pages. There are so many things which can keep Flash from working correctly, if at all.

    In the case of my client, their old website was built entirely in Flash. The client wanted to embed the old Flash website (one .SWF file) on a single page, so it was accessible by those who want to continue using it. The main home page though, was not ever going to contain an embedded flash video. The home page would have had two links on it – one for the old flash website and one for the new website.


    Where to find me: APP.net | Facebook | Google + | Twitter | Website

    #14379

    tomarob
    Participant
    Post count: 18

    @bamajr

    I’m not sure if I’m understanding exactly what you’re looking for, – - do you mean a completely blank page and then just the two ‘text-buttons’??

    Anyway, – - I experimented a little with that in mind, – - and came up with this , – - (and put it very temporarily on a site I just made for a friend).

    And although I couldn’t use the ‘exact’ paging you want here for the obvious reasons that it’s a working site, – - if you click on each block of menu-text, – - you’ll at least see the differences up in the address bar of each  . . .

    http://www.chesterfieldremodeler.com/button-page/

    I didn’t bother with much styling or any of that, – - just kept it bare bones.

    Lemme know if this is even close to what you’re looking for?? . . .

    P.S.  Didn’t use any ‘iframing’, – - bein’s you don’t seem to like that approach . . .

    #14436

    tomarob
    Participant
    Post count: 18

    OK, – - I even created an ‘image-page’ with a more designed look, – - and all seems to be workable . . .

    http://www.chesterfieldremodeler.com/testee/

     

    #14485

    rbrown08
    Participant
    Post count: 39

    @bamajr,

    Here’s the code I used on a template page and you I’ve put in BOLD where the html code would go.  This worked for me…

    <code>

    <?php
    /**
    * This file adds the For Women template to our Child Theme.
    *
    * @author Roxanne Brown
    * @package Child
    * @subpackage Customizations
    */

    /*
    Template Name: For Women
    */

    // Add custom body class to the head
    add_filter( ‘body_class’, ‘add_body_class’ );
    function add_body_class( $classes ) {
    $classes[] = ‘forwomen’;
    return $classes;
    }

    add_filter( ‘genesis_pre_get_option_site_layout’, ‘__genesis_return_full_width_content’ ); // Force Full-Width Layout
    remove_action( ‘genesis_before_loop’, ‘genesis_do_breadcrumbs’ ); // Removes breadcrumbs
    remove_action( ‘genesis_post_title’,’genesis_do_post_title’ ); // Removes post title
    remove_action( ‘genesis_post_content’, ‘genesis_do_post_content’ ); // Removes content
    add_action( ‘genesis_post_content’, ‘child_do_content’ ); // Adds your custom page code/content

    // Do Custom Content
    function child_do_content() { ?>

    THIS IS WHERE YOU CAN PUT IN YOUR HTML CODE.

    <?php }
    genesis();


    #14499

    tomarob
    Participant
    Post count: 18

    Very good stuff there, rbrown08, – - I did it in kind of a ‘back-door-cheater’ fashion.

    I made up a new html page and named it php, – - dropped it into the theme file, – - and let it automatically show up on my page edits right on my templates list. Then I just chose it instead of say, ‘default’, – - and I can then name any page I want to have that template.  It just needed one short paragraph of php to ‘title’ it.

    Just a one-shot solution, – - but I would think that’s all that would be needed. Any changes later, – - I would just re-code the php page itself.

    #14506

    rbrown08
    Participant
    Post count: 39

    @tomarob,  That’s a good way too because you can use that template for several pages if you like.

    For creating CSS buttons for your site, I love this:  http://css-tricks.com/examples/ButtonMaker/.


Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.