Making my home page look like the demo home page


#1

How do I insert the widgets and make my home page look like the demo? My home page currently has the slider (so the top part looks like the demo); and “below the fold,” it looks like a regular blog (With the first blank post that says “Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!”). Thanks, Vlad.


#2

The website I am working on, using Moesia: http://monicacartertagore.com. I want to be able to create sections on that site’s home page like the demo home page. And I would like to be able to build pages, using the page builder, with content/text that is black text on white background. Thanks.


#3

Normally I would refer you to the documentation page, but your first comments were already on the documentation page. Might want to go back there and read Chapter 8. Front page configuration :slight_smile:


#4

To get black text for those text widgets, you should add the following code in a custom CSS plugin:


.textwidget {
      color: #000;
}

You can change #000 to a lighter color if you want, like #111, #222 etc.


#5

I did follow the steps … Created a page called Front page, and assigned widgets to it. But that created a new page; the widgets did not show up on the home page. The documentation says “create a page called Front page (or whatever else name you like) and assign to it the Front Page template.” Is the assigning done under Page Attributes (right column), while editing the page? It all seems very straightforward, yet I’m definitely missing something.


#6

Yeah, you must also set it as an actual front page. To do this go to Appearance > Customize and see the Static Front Page tab. Choose the page you want as the front page and another one for your blog posts. Save your settings and you’re good to go.


#7

Thanks for the CSS and the home page tip. Both worked. … Is there a CSS for increasing the font size in widgets? Also, if you visit the monicacartertagore.com home page, the text is sticking to the sides of my screen. Any way to fix that? Thanks, Vlad.


#8

Add this:


.widget_text,
.widget_siteorigin-panels-embedded-video {
    padding: 0 80px;
    font-size: 16px;
}

This will also add some padding for the video you have there.


#9

Wow, code is really a beautiful thing.

I had inserted a video on the home page using the Embedded Video widget. It was so gigantic, I had to remove it … but it would be good to have it on the page. Is there a way to decrease the size (perhaps make it the same size as one can see in YouTube?

Thanks a lot, Vlad.


#10

The text widget (on the home page) headline is sticking to the Call to action widget that’s above it. Any CSS to create a gap between the two? Thanks.


#11

Please ignore the last question. Just figured out the CSS for it. And feeling pretty pleased about it.


#12

This will unstick the headline. The thing is that the widgets you are using (text and video) aren’t part of the theme and therefore are not supposed to be part of the front page.


.widget_text {
      margin-top: 80px;
}

You can probably do something like this for the video (or you can set a width from the iframe - if that widget asks you from an iframe):


.widget_siteorigin-panels-embedded-video {
      width: 500px;
      margin: 0 auto;
}


#13

And that worked like a charm. Thanks, Vlad. Although, I opted to keep the Call to action block for now.

I had a bit of an issue with getting the right background for the Call to action block: The Title is black while the Call to action text is light gray. I wish they were the same color, which would have made the background selection easier. … Is there a way to change the Title and/or Call to action text colors?

Thanks.


#14

Sure, go to the Customizer > Colors and you’ll find there the Call to action section, or any other section you need.


#15

Thanks. You guys are the greatest!


#16

Vlad,

Hope your day is going fine.

I just imported blog posts into this install (http://monicacartertagore.com), and everything looks fine. However, the posts don’t show the image (on the home page). Is there a way to fix it?

Also, how can I increase the font size of the posts?

Thanks.


#17

Nothing is actually broken so there is nothing to fix :slight_smile: You just need to edit your posts and set featured images.

Add this for the font size:


.entry-content,
.entry-summary {
   font-size: 16px;
}

You should open a new topic when you have a new question, just to keep things organized.