How to Make a Landing Page
-
Hi Guys,
Do you know which CSS I can use to turn this landing page: https://cswilde.com/acoaus/ Into something like this? http://bit.ly/LANDACOA
My main issue would be getting that header on the (hopefully empty) page’s template, and then adding the textboxes and FB and Twitter links at the end.
Many thanks :)
The blog I need help with is: (visible only to logged in users)
-
Hi @acswilde,
It would be very tricky to replicate the look of that page exactly as the theme you’re using here at WordPress.com has different underlying code to the one that you used with Wix.
The following CSS would change the background colour of the page you linked to to match the one from Wix. It additionally adds some extra padding and borders around the title to make it match up a little more:
post-3540 .post-entry h1 { background: #342201; padding: 50px; } #post-3540 .post-entry h1 a { color: #fff; border-top: 4px solid #fff; border-bottom: 4px solid #fff; padding: 20px; }Please note, the above will apply to any H1 heading that you add to that specific post.
As for social icons, I recommend using our build in social media icons widgets and adding it to your site’s footer:
https://en.support.wordpress.com/widgets/social-media-icons-widget/
You can adjust the widget’s visibility settings so that it’s only visible on that one post, if you wish.
Give that a try and let me know what you think.
-
Thank you so much, Siobhyb : ) This is a tough one, so I really appreciate your help.
So, the only thing that changed was the header and it actually just…disappeared? Didn’t come close to the one from wix : (
I’m thinking I’d need to:
1)Make the entire page white
2) Add a header different from the main website header (any idea on how to do that would be great!) The header would need to be brown and extend through the entire top of the page, like the one in wix.
3) Add the text fields as they are in wix (separate text boxes with the reviews)
-
Hi there,
It looks like I was missing an all important # from the beginning of my original snippet. Can you please try the following?
#post-3540 .post-entry h1 { background: #342201; padding: 50px; } #post-3540 .post-entry h1 a { color: #fff; border-top: 4px solid #fff; border-bottom: 4px solid #fff; padding: 20px; }1)Make the entire page white
The following snippet will make the entire page white:
body { background: #fff; } #wrapper { border: 0; }2) Add a header different from the main website header (any idea on how to do that would be great!) The header would need to be brown and extend through the entire top of the page, like the one in wix.
The original snippet I provided will give your header section a brown background and add white borders beneath the text. Can you give it a try and let me know what you think?
3) Add the text fields as they are in wix (separate text boxes with the reviews)
You could make use of the Testimonials shortcode in order to add your reviews to different “boxes” in a similar way to Wix:
https://en.support.wordpress.com/testimonials-shortcode/
If you give the above a try, I can help out with further tweaks if needed.
-
Hi Siobhyb,
We’re definitely getting there!
1) I tried the white background but then it applied to the entire website? I tried using the pade id code but it didn’t work : (
2) Header and header font size: Can the font size be as big as it is here (http://cswilde.wix.com/acoa), and can the brown header extend throughout the entire page?
3) White lines on header: When I was customizing the css they were showing up but now they don’t T_T
4) I think the font used in wix is a font called Basic, is it available in WP too? And how can I make the font of the testimonials match the overall font of the page? For some reason it’s in courier…
5) Is there any way to align the Bookmuse icon with the testimonials like in the wix page? Make them nice and square as they’re in Wix?
5) Is there a way that I can include the blurb text (the one that starts with “Could you…” in a small text box like it looks on Wix?
Thank you very, very much! : )
-
-
Hi @acswilde,
1) I tried the white background but then it applied to the entire website? I tried using the pade id code but it didn’t work : (
Oh, yes! I’m sorry, I should have thought of that.
The following will apply the changes to only that one page:
.page-id-3540 { background: #fff; } .page-id-3540 #wrapper { border: 0; }2) Header and header font size: Can the font size be as big as it is here (http://cswilde.wix.com/acoa), and can the brown header extend throughout the entire page?
You can increase the font-size in your header, as well as make it bold, with the following:
#post-3540 .post-entry h1 { font-size: 64px; font-weight: bold; }The following will then get the header to extend the full width of the page:
#post-3540 .post-entry h1 { position: absolute; top: 0; left: 0; width: 100%; } .page-id-3540 #wrapper { position: static; margin-top: 120px; }3) White lines on header: When I was customizing the css they were showing up but now they don’t T_T
The snippet I previously gave you was selecting an “a” tag:
#post-3540 .post-entry h1 a { color: #fff; border-top: 4px solid #fff; border-bottom: 4px solid #fff; padding: 20px; }I can see you’ve since changed the text in the header so that it’s no longer a link and is instead inside a “span” tag. You’ll therefore need to replace “a” with “span” in the above snippet.
4) I think the font used in wix is a font called Basic, is it available in WP too? And how can I make the font of the testimonials match the overall font of the page? For some reason it’s in courier…
There isn’t any font with that name available in WordPress.com. You can, however, view a list of our available fonts by navigating to the Fonts section of the Customizer.
I checked and can see that your shortcode has been “code” tags wrapped around it, which is why the text is formatted using a different font. To remove these tags, please head to the editor for that page and select the “HTML” tab from the upper right. Scroll down to your shortcode and remove the “code” tags that are surrounding it.
5) Is there any way to align the Bookmuse icon with the testimonials like in the wix page? Make them nice and square as they’re in Wix?
I recommend first wrapping the image with a HTML div and assigning a class to that div in order to make it easier to style with CSS.
In case you’re not that comfortable with HTML, we have an introductory guide here that will give you an overview of what I mean:
https://en.support.wordpress.com/beginning-html/
5) Is there a way that I can include the blurb text (the one that starts with “Could you…” in a small text box like it looks on Wix?
I can see you’ve already wrapped a HTML div around that text and given an ID of “comp-iotr89sz” to that div. If you’d like to further style that div then you can using the #comp-iotr89sz selector in CSS:
#comp-iotr89sz { Your styles here. }If you haven’t already, I very much recommend going through the Suggested CSS Tutorials here to get you feeling a bit more confident with the way HTML and CSS interact with each other:
-
Also, how can I reorder the order of appearance of the testimonials? < : )
You can make use of the orderby attribute in the shortcode to order your testimonials based on different criteria:
https://en.support.wordpress.com/testimonials-shortcode/#attributes
If you let me know specifically how you’re trying to change the order, I can help further.
-
You’re simply amazing! : )
I managed most of the stuff, and I did read the tutorial, but I still have no idea how to wrap the image with a HTML div and assign a class.
5) Is this it?
<img class=" wp-image-3488 alignleft" src="https://cswilde.files.wordpress.com/2015/05/bookmuse-award-badge.jpg" alt="Bookmuse Award Badge" width="224" height="224" />And if so, how can I make the testimonials align left to it? Because the image is already as align left… : (
5 part II)
`#comp-iotr89sz {
Your styles here.
}`
What styles can I use to make it look nice and pretty like in a box? I tried this but it didn’t work…#comp-iotr89sz { width="224" height="224" }6) To change the font of just the header on that particular page, can I use this code? I tried and it didn’t work…
#post-3540 .post-entry h1 {
font:Museo Sans;
font-size: 64px;
font-weight: normal;
}7) Can I change the font on just that page to black? I also want to leave the names of the authors of testimonials gray, like in Wix, so is there a way I can make all links on that page become light gray?
-
Also, when I load the page, it loads with a certain font and then it jumps into another font, and it’s a little jarring. Since this will be used as a landing page, is there any way to stop it? Do I need to chose a specific font to make it stop?
-
Hi there,
5) Is this it?
<img class=” wp-image-3488 alignleft” src=”https://cswilde.files.wordpress.com/2015/05/bookmuse-award-badge.jpg” alt=”Bookmuse Award Badge” width=”224″ height=”224″ />
And if so, how can I make the testimonials align left to it? Because the image is already as align left… : (You’re right that the image has a class assigned to it already but it would make it easier to manage if you wrapped the entire image and link with HTML “div” tags. Like so:
<div class="landing-image-left" style="text-align:center;"> <a href="http://bookmuseuk.blogspot.ch/2016/05/a-courtroom-of-ashes-by-cs-wilde.html"> <img class=" wp-image-3488 alignleft" src="https://cswilde.files.wordpress.com/2015/05/bookmuse-award-badge.jpg" alt="Bookmuse Award Badge" width="224" height="224" scale="0"> </a> </div>You can see that I added a “div” tags around the “a” and “img” tags. I also gave it a class of “landing-image-left.” You can change the class to anything you’d like and then target it using CSS:
.landing-image-left { float: left; margin-right: 70px; margin-top: 30px; }With the above CSS, you can adjust the value of margin-right and margin-top in order to experiment with the positioning of the image.
Next, you can change the positioning of your testimonials with the following:
.jetpack-testimonial-shortcode { clear: none !important; width: 65%; }What styles can I use to make it look nice and pretty like in a box? I tried this but it didn’t work…
That section already looks quite box-like to me and I’m not sure exactly how you’re trying to change it’s appearance. Would you like it to be smaller in width? Change the alignment of the text? If you can let me know the specifics of what you’re trying to change, I can help from there.
6) To change the font of just the header on that particular page, can I use this code? I tried and it didn’t work…
You’re right to select #post-3540 .post-entry h1 with your CSS. :) The exact property needed to change the font is font-family: museo-sans;.
7) Can I change the font on just that page to black? I also want to leave the names of the authors of testimonials gray, like in Wix, so is there a way I can make all links on that page become light gray?
The following will make all text on that page black:
.page-id-3540 { color: #000; } -
Also, when I load the page, it loads with a certain font and then it jumps into another font, and it’s a little jarring. Since this will be used as a landing page, is there any way to stop it? Do I need to chose a specific font to make it stop?
Your site’s default fonts load before the custom ones in order to make sure the page always loads on slower connections. The alternative is to load a blank screen before the custom fonts, but this means folks on slower connections may not be able to access your content.
If you still wish to stop your default fonts loading before your custom ones, you can use the following CSS:
.wf-loading body { visibility: hidden; } -
OMG YES, you’re a genius! You’re like a CSS goddess! Thank you so much, siobhyb!
All right, so nearly there, only two more questions:
That section already looks quite box-like to me and I’m not sure exactly how you’re trying to change it’s appearance. Would you like it to be smaller in width? Change the alignment of the text? If you can let me know the specifics of what you’re trying to change, I can help from there.
Yeah, in Wix it’s a small box that aligns well with the button, so I’d definitely say smaller in width and more centered when it comes to the button of buy book, just like in Wix. : D
Can I use this to turn the links on this specific page gray:
.page-id-3540 {
a {
outline:none;
text-decoration:none;
color: #808080;
} -
Your site’s default fonts load before the custom ones in order to make sure the page always loads on slower connections. The alternative is to load a blank screen before the custom fonts, but this means folks on slower connections may not be able to access your content.
If you still wish to stop your default fonts loading before your custom ones, you can use the following CSS:
Naaaah, at least then they can read the content instead of facing a blank page. I hate blank pages >_< Leaving it as is is the best alternative then
-
Oh no the header covers the whole thing on the mobile version and the testimonials don’t shift one after the other for mobile. So the page looks great on a desktop but terrible on mobile. Im going to cry now T_T
-
Hi @acswilde,
Oh no the header covers the whole thing on the mobile version and the testimonials don’t shift one after the other for mobile. So the page looks great on a desktop but terrible on mobile. Im going to cry now T_T
Please can you add margin: 0; and padding: 80px 0 60px; to #post-3540 .post-entry h1 in order to make sure your title is centred correctly.
You can then make use of CSS Media Queries to target devices of certain widths.
The following will change the line height of your title and push the content further down the page for devices of different widths:
@media screen and (max-width: 890px) { #post-3540 .post-entry h1 { line-height: 160px; display: block; } .post-entry { margin-top: 250px } } @media screen and (max-width: 533px) { .post-entry { margin-top: 400px; } } @media screen and (max-width: 428px) { .post-entry { margin-top: 550px; } }You can edit the above to your liking: If you’d prefer to have a smaller font size for your title on smaller devices then add font-size and experiment with different value for margin-top and line-height.
To create more space for the testimonials on smaller devices, we can again use a Media Query:
@media screen and (max-width: 768px) { .jetpack-testimonial-shortcode { width: 100%; } } -
Can I use this to turn the links on this specific page gray:
The CSS you gave was pretty much there. :) The extra { before the a was unneeded:
.page-id-3540 a { outline:none; text-decoration:none; color: #808080; }Yeah, in Wix it’s a small box that aligns well with the button, so I’d definitely say smaller in width and more centered when it comes to the button of buy book, just like in Wix. : D
Got you! As before, could you please wrap your image and then all of the content to the right (the text and the button) with HTML “div” tags. It makes it a lot cleaner and easier to style them with CSS if they’re wrapped in “div” tags and have a class that we can select. Let me know once you’ve done that!
As an extra note: I noticed that your hiding the credits to WordPress.com and the theme’s author in your footer. We ask for you to keep those credits intact here at WordPress.com. I’ve sent you an email if you’d like to discuss this policy further there.
-
Hi Shiobhan,
I have added all those codes and tried customizing the header for mobile too. I tried changing values like crazy, and had to copy paste the code you first gave me again, because nothing worked and everything got screwed up in the end.
I’m terrible at this.
I tried making the font 14 and it also didn’t help. The font was smaller but then there was the possibility to scroll right and I don’t want that. So I went back to the original code.
Also, can I use a media query to center the golden image on the mobile screen? Which values should I use?
In regards to the footer, I sent you an email with further queries, because I need the footer out for that particular page. I tried deleting the powered by: none code, but it didn’t work. : ( It still doesn’t show up.
-
It’s definitely the resizing of the font that makes it become a scroll-right page and not a fix screen with only the option to scroll down. Any work around there? : (
-
Hi @acswilde,
While we aim to assist as much as possible with CSS questions on these forums, the customisations you’re requesting are very advanced and take a lot of time/testing to get right.
I don’t think these forums are the best place for you to get further help but have some recommendations for you.
If you’re located near a WordPress meetup or an upcoming WordCamp, you may be able to find someone who will help you with your CSS customisations in person:
http://www.meetup.com/topics/wordpress/
https://central.wordcamp.org/schedule/
You could also consider hiring someone to make these changes on your behalf. WerkPress and WP Curve are suggestions for companies you could use:
http://werkpress.com/wordpresscom/
If you’d like to continue, learning how to target your site’s CSS will help you make certain design and layout changes. Here are some very helpful posts that will help you customise your site with CSS:
http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
https://cssworkshop.wordpress.com/
Alternatively, as that Wix page is already set up to your liking, you could consider adding a custom link to your WordPress.com site’s main menu so that visitors are redirected there.
Good luck, and let me know how it goes.
- The topic ‘How to Make a Landing Page’ is closed to new replies.
WordPress.com Forums 