Creating a landing page using Custom CSS in 'responsive' theme

  • Unknown's avatar
    preventiondiaries · Member ·

    Hello,

    I would like to build a landing page for my website http://www.preventiondiaries.com using custom CSS. I would like the landing page to look something like this:

    https://wrapbootstrap.com/theme/bookwriter-ebook-landing-page-WB00454D7

    I understand that this will involve hiding elements using CSS, but I’m not sure how to go about doing this. I just talked to a wordpress engineer who suggested I begin with this:

    Spencer: The basic idea would be to make a page with the content you want
    Spencer: then use css to target that page and hide the elements you don’t want
    Spencer: such as the menu
    Spencer: you’ll find inside the body take a page-id-XXX
    Spencer: this can be used in your My Sites>Theme Customize>CSS pane to target just that page (by adding it before the rest of the selector)

    What I am wondering is whether anyone has a favorite css trick to hide elements? I’m sort of in over my head on this one.

    Thank you for your help!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    We can do this. If you haven’t already, I would suggest creating a page to use for your landing page. You will need to set a featured image and also add a bit of content. There is more information on setting up the home page on the Responsive Theme Showcase page. Scroll down to Home Template. We can then hide anything you do not want on that page. Unlike your example page, I would suggest keeping the Menu at the top. It gives visitors, especially returning visitors, quick access to other pages/sections of your site without having to click through the Read More landing page button and then find what they want to see. We can certainly keep things minimal though.

    Generally on hiding things on CSS, you use your web inspector to find the relevant CSS id or class for the div/element you wish to hide and then use
    display: none;

  • Unknown's avatar
    preventiondiaries · Member ·

    Ahh thank you! I think I have made progress via your instructions! Here is the page so far:

    https://preventiondiaries.org/resources/

    I would like to set it as the static front page, but for some reason I’m having trouble doing that. Nothing needs to be hidden, but I would like the three widgets on the bottom to be populated with a text box, a calendar, and a twitter feed. But when I try to add widgets in the ‘footer’ section via the customizer, they wind up sitting beneath the ‘recent posts’ widget instead of in place of it.

    I would also like the two buttons to sit next to one another versus on top of one another.

    Any suggestions would be much appreciated, and I’m already feeling so much better about this!

    Thank you,
    Christine

  • kathrynwp · Staff ·

    I would like to set it as the static front page, but for some reason I’m having trouble doing that.

    It looks like this page is set as your static front page here: https://preventiondiaries.org/

    Are you seeing something different on the homepage, and if so, please provide a screenshot of what you see on the homepage.

    Would it be possible to upload a screenshot to help in troubleshooting?

    Here’s a guide on how to make a screenshot:
    http://en.support.wordpress.com/make-a-screenshot/

    You can upload the screenshot – in a graphic format like JPG, PNG, or PDF – in your Media Library so I can see it. Thanks.

  • kathrynwp · Staff ·

    Nothing needs to be hidden, but I would like the three widgets on the bottom to be populated with a text box, a calendar, and a twitter feed. But when I try to add widgets in the ‘footer’ section via the customizer, they wind up sitting beneath the ‘recent posts’ widget instead of in place of it.

    I also don’t see any footer widgets added yet. Do you still need help with this?

    I would also like the two buttons to sit next to one another versus on top of one another.

    Could you please provide a link to the page with two buttons, as I’m not sure what you’re referring to. Thanks!

  • Unknown's avatar
    preventiondiaries · Member ·

    Hi Kathryn,

    Thanks so much for your help! I figured out how to make the landing page the main page, although I”m holding off to do that for another day or two until it is looking in better shape. I’ve also managed to get the widgets the way I want them to look, so that is not an issue.

    What I would like to change now is the size of the image – the book- that appears on the main landing page. I would like to make it significantly bigger so that it takes up as much real estate as possible without falling off of the page. Do you have any CSS tricks that might help? Here is the page:

    https://preventiondiaries.org/resources/

    Thanks so much,
    Christine

  • kathrynwp · Staff ·

    Hi Christine,

    What I would like to change now is the size of the image – the book- that appears on the main landing page. I would like to make it significantly bigger so that it takes up as much real estate as possible without falling off of the page. Do you have any CSS tricks that might help? Here is the page:

    You can try something like this:

    .page-id-61 #featured-image img {
  height: 50%;
  width: 50%
}

    Whether it “falls off the page” depends on the size of your visitor’s screen – on a large desktop it might be fully displayed, while on a phone a visitor may have to scroll. I suggest you experiment with those values (just make sure the height and width are the same) and test on different screen sizes to find a size you’re happy with.

    Keep in mind that increasing the size of a featured image this way might make it a bit blurry, because the dimentions are being artificially “upsized.” If the image quality isn’t acceptable, you can insert the image into your post content instead of adding it as a featured image, and right-align it.

  • Unknown's avatar
    preventiondiaries · Member ·

    Thank you Kathryn! This was very helpful.

    Now I’m interested in getting a banner image to sit on the landing page, either above the dropdown menu or below it (where the book and text currently are), running the length of the page, with the text about prevention diaries right below the banner.

    I don’t think it’s possible to add that with the customizer, but wondering if I could use a css trick to include it?

    Thanks,
    Christine

  • Unknown's avatar
    preventiondiaries · Member ·

    Thank you Kathryn! This was very helpful.

    Now I’m interested in getting a banner image to sit on the landing page, either above the dropdown menu or below it (where the book and text currently are), running the length of the page, with the text about prevention diaries right below the banner.

    I don’t think it’s possible to add that with the customizer, but wondering if I could use a css trick to include it?

    Thanks,
    Christine

  • kathrynwp · Staff ·

    Please start a new thread in the CSS forum for your new question, thanks!

  • The topic ‘Creating a landing page using Custom CSS in 'responsive' theme’ is closed to new replies.