You know CSS really is quite simple, the configuration is not that difficult. I have taken countless classes (I didn't say I finished them) but this quick hour made more sense to me than anything I've ever seen. I get it! I have had GeneratePress for three years now, and this actually makes so much sense to me. It's awesome. Thanks so very much. Great lesson. You got a new subscriber ! Keep churning these out.
I definitely will. I plan to do detailed videos on the pro features like hooks and headers soon. What kind of sites are you building with GeneratePress?
@@BuildThatWebsite I'm building tour and travel websites where I need to show multiple itineraries and tables. Creative package blurbs etc. That kind of stuff....
If you have some decent HTML and CSS skills, you should check out Lazyblocks or Genesis Custom Blocks, which will allow you to easily create your own custom coded Gutenberg Blocks (It builds the PHP and Javascript for you automatically). This will help you design content blocks that can be reused (same styling but different content) on each post. If you're still a beginner in CSS, Elementor Pro can help you do the same thing, but you can build your templates visually and then re-use them. I'll be dropping a new video this weekend, showing how to build custom Elementor templates that include dynamic custom fields. Also, check out my TablePress video if you want a good tutorial on using the best Free table plugin for WordPress: th-cam.com/video/5R_04UIMkJM/w-d-xo.html
I'm glad I found your channel, dude. You're very good at explaining these steps, and I say so being quite new to CSS and GeneratePress. Subscribed! Looking forward to more videos.
@@BuildThatWebsite I'm very interested in seeing more videos like this one, where you apply your knowledge step-by-step. As someone who is used to pagebuilders and learning how to really develop/code, that sort of content is really helpful to me, and from what I can tell by the comments, to other people too.
You can learn the basics of CSS in an afternoon. Start with the box model, spacing as well as block vs inline-block vs inline elements. After that you can focus on learning the specific properties that are relevant to what you're trying to build. I also suggest learning flexbox early on. It makes alignment and responsive design so much easier. Check out codeacademy for some free interactive intro courses, and then you can move on to youtube tutorials or a book. Then start practicing. You learn by doing, not by reading/watching. As for GeneratePress, it's honestly not the greatest theme for non-developers. I've had to learn PHP just make some customizations that are easy on other themes. I recommend checking out blocksy if you're looking for a beginner-friendly theme. The free version is pretty amazing and the pro version adds things like hooks and a header builder like GeneratePress premium offers.
In Chrome you just click the icon that appears next to your box-shadow rule. If you're using Firefox I don't think there's a popup for adjusting the offset, blur & spread. It only lets you adjust the colors.
Please continue this video, complete the sidebar, and, if possible, set up the sale of one digital product, one physical product. Very useful tutorial, thank you.
Hopefully I can release an e-commerce tutorial this summer. As for the sidebar, I did a full video on creating useful sidebars: th-cam.com/video/YmtFQN3p7iY/w-d-xo.html
I studied the video, you have perfectly designed the output of the posts as a whole. I would like to know your opinion, if this is not only a news site, but also the sale of goods, how would you design the home page, and the store page, one digital, and one real product ...? I would like to set up ticket sales for my city, and allow others to post their products by subscription. How would you do it? Generatepress I like it, can you share your experience?
Maybe there will be a continuation of the video about working with Generatepress? You explain it very clearly, despite the fact that I do not know English the best way
@@roppor2194 I will definitely be doing more videos on working with GeneratePress. I want to show how to add breadcrumbs and an author box for example. I'll also get more into adding functionality and design with page builders (like Elementor) or Gutenberg blocks.
@@BuildThatWebsite maybe you could show how to edit the HTML of the theme itself? I've been trying to customize the "entry-date" of a post with css but I need to wrap it around spans before I can target it. But I haven't located the html file and idk where it is. Any tips?
@@miguelwillbanks3344 The good news is that you can definitely target the .entry-date without a span. It already has an .entry-date class name, which is all you need. If you're trying to target it to specific pages or categories, you can use the body classes or category classes in the parent containers to narrow your targeting. GeneratePress compartmentalizes every part of the content display, and uses a hook system to determine what to show and where. It makes the theme really flexible, but also incredibly hard to modify for non-developers. If you have the premium version, you can just ask for a php snippet in the forums and the team will literally write code for you. If you're using free, just use google to search "generatepress filter entry-date" or something along those lines. Most questions have already been asked an answered in their forums. Also (with pro) you can use the new content-template feature to modify the post meta with blocks, and you could add the span or custom class that way. But there's no HTML file you can modify, and the .entry-date isn't even part of a PHP template. It's generated by a custom function, and can only be modified with a filter, which definitely requires PHP skills or a snippet from the GP team.
I will be diving into the 'content templates' and new theme builder functions in some upcoming videos. I was also thinking about doing one on customizing a category template, and inserting content into your archives with the block editor.
@@BuildThatWebsite that would be awesome to look forward to. So when targeting the "entry-data", if I want to just target only the "year" to style it, I can do that without a span then? Thanks.
My plan is to do a complete build from scratch using Generatepress to build a website. Maybe a blog, or a small business site. Is there anything specific you'd like me to cover?
Maybe an Amazon Affiliate site? 😅 You could re-design one of my websites if that's alright with you. I'm terrible at web design and would like my site to look more professional. In future, I could use that template over and over again by just tweaking the colors alone, leaving the design as is.
But if you want to do it from scratch, please share the template as well so those who have GeneratePress premium can plug in the template. You could also charge for the template if you want. Those who want free, they can follow that tutorial you'll be doing.
Hi Matt, another great tutorial 👍. Many thanks 🙏 . One issue: I struggle hard to find the GeneratePress Child Theme. You mention in the video that you put the link into the description. Can’t find it there. Also I can’t find anything like „GeneratePress Child“ in the Wordpress Plugin oder Theme download area. Can you help me out with that? BTW: I have GeneratePress Pro.
Here's the blank generatepress child theme: generatepress.com/api/themes/generatepress_child.zip It has zero customization. All it does is hold your customization changes and keep them separate from the parent theme. That way you can swap out designs simply by changing child themes. You can also save previous versions of the site as a child theme if you do a major redesign, and revert back with a single click if you want. In the future, I may try releasing a customized version using GeneratePress Premium if there's enough interest.
If you must use GeneratePress, you can still achieve a magazine layout by using plugins. PostX Pro is a great option: www.wpxpo.com/postx/?ref=mmilliken (affiliate link) It's well-coded, not a page builder, and has tons of included templates, card designs and pre-built layouts.
Hi Matt! Great tutorial again! One question though: to what extent does all this additional CSS have an impact on performance (page speed)? Is it not recommended to put as much as possible in the styles.css ? Thanks
Two thoughts: 1) compared to a plugin you might install to customize your site, this amount of css is insignificant. It will add less than 5ms of download time. 2) it doesn't really matter where you put the css. Whether you put in style.css, customizer, or a 3rd-party plugin it all gets enqueued the same way. Load times should be basically identical. But yeah, if it's going to be permanent css go ahead and move it to style.css
In the dashboard of Wordpress “using generatepress theme”, under seo it shows as - keyword not set. Just wondering what is this & how to fix it. Thanks in advance 🙏
@@BuildThatWebsite oh yes I have rank math, thank you. But Is this something to be concerned about? I’m including keywords in my blog posts. Thanks again, I hope you can advise
Thank you very much. Fantastic video. Lots of very neat customisation tips. Request: Could you do some videos on GenerateBlocks (free version) in tandem with GeneratePress (I have the premium version) , how to style the sidebar with CSS, create a custom sidebar with elements and create a custom archive page, please? I've just subbed, hopefully you will grow your channel.
This are great suggestions and they're in the queue. Hopefully I can get to some of these in the next month or two. Can you clarify what you want to learn about custom archives? I'm assuming you mean more than styling, but actually restructuring the archive and adding custom content? I'm actually doing this now on one of my sites using Elementor (though there is a trick you can use to override the archive pages with standard WordPress page, no coding required.
@@BuildThatWebsite Thanks for the reply. On the WP site I'm working on (local darts league in the UK) the archive in the side bar lists every month since 2012 until the present, and it's getting very, very long. I know there is a dropdown option - but I'd like to know how to move the archive to a dedicated page. Yes, restructuring the page, but knowing how to style the page would be a bonus and the less coding the better. I use GP Premium and GP Blocks. Really appreciate it - and I don't expect you to be my private tutor LOL.
@@ziggsstar You could use something like WPBeginner's compact archives plugin to quickly build a simple accessible archive. This is especially helpful if people frequently navigate by month (like league results) www.wpbeginner.com/blueprint/compact-archives/ I do cover some basic archive styling in my hour-long generatepress tutorial. Depending on your category structure, you may be able to override archives with pages which you could design with GP Blocks or Gutenberg. A drag and drop option is to use a theme builder like Elementor Pro or Beaver Themer for custom archives.
@@BuildThatWebsite I already looked at the site unfortunately, I haven't found what I needed 😔. I would like to uplift the content container as in 54:22 . Please can you provide me with css that you've used to target the inside article ?
@@demasmoha You're right, sorry. I'll try find a place to add the code this weekend if I have some time. To raise the content container all you need is some negative margin. So for example: .inside-article { margin-top: -150px; } If you want to do it only on your posts, you would write: .single-post .inside-article { margin-top: -150px; } Adjust the exact amount of margin to make it look right for your design.
I love your tutorials and have learned a lot from them .❤️ One question and sorry if it's silly. Is it necessary to use the Child Theme, if I were to use the Code Sniper plugin instead? I can add any changes to the PHP without touching the original Theme. Would it be necessary or this plugin could replace the Child Theme. Thanks in advance 🤘
You don't NEED a child theme unless you want to edit theme template files like archive.php or create custom post templates. I like to use a child theme on every site with Generatepress because customizer settings and CSS stay with the child theme which lets me switch designs by switching child themes. But if you're just adding a bit of php, Code Sniper or Code Snippets is fine instead of a child theme.
@@BuildThatWebsite Thanks for Reply me. Maybe you seem silly, but today I bought a plugin called Yello Pencil and life was solved in relation to the part of not knowing CCS at the time I could do everything that had sounded and I did not have to use Elementor since everything is pure CCS.
First of all thanks a lot🥰 How to creat pagination (previous 1 2 3>>next) and how to creat sticky header in gp premium & Gutenberg plz answer . Thank You
If you're looking to split posts into multiple pages, try this guide: www.wpbeginner.com/wp-tutorials/how-to-split-wordpress-posts-into-multiple-pages/ As far as sticky headers, I already did a video on this using Generatepress. There are 3 methods, including the built-in option for Generatepress premium. th-cam.com/video/sZPX1rJcAeY/w-d-xo.html
Sure, GeneratePress is a great choice to combine with Elementor, and I use them both together on my own site. There are a couple ways to combine them. I don't use the Elementor Pro theme builder very often, instead I prefer to let GeneratePress handle the structure of the site and will inject elementor templates into GeneratePress hooks when needed. For example, my 'video' page template is built using Elementor Pro. It pulls data from custom fields to generate the article. Example: www.buildthatwebsite.com/video/top-products-hero-elementor
It looks like you're using Blocksy on your site, which has many of the same features as GeneratePress, especially when it comes to theme hooks (requires Blocksy Pro). Site redesigns are a pain, so I wouldn't switch themes unless you really need to. And Blocksy is much easier to customize than GeneratePress, since it has way more styling controls and pre-built templates.
Can you please tell me how can I target only posts that have a featured image for this styling? Here's what my theme says about such posts: class="post-1619 post type-post status-publish format-standard has-post-thumbnail hentry category-helmets no-featured-image-padding"
Put the body classes .post.has-post-thumbnail at the start of your css rule. For example: post.has-post-thumbnail .entry-content h2 { font-size: 35px: }
Thanks, It worked on parts where it had .entry-content or .entry-title in the classes. But sadly this code doesn't allow me to make this exception. .single-post article:before { content: ""; width: 100%; height: 600px; display: block; position: absolute; top: 0; left: 0; background-color: #19284D; z-index: -1; max-height: 80vw; }
Oops! 😅 I have no idea about CSS so that's why I'm facing these issues. Thanks again, it's now working as needed. I rewatched the tutorial and it's now fixed, along with the code you gave me.
When i apllied changing bakground color of hero section css code it worked perfectly for desktop but not visible on mobile view.. can u guide about it.. Another i only want this rule for my home page But it shows on all post n pages if Any code for this plz share Thanks
I'm not sure why the background color wouldn't show on mobile unless either 1) You're using a media query or 2) the featured image is covering the background color. If you only want a CSS rule to apply to the homepage, you can use the .home class before the selectors when writing your rule. .home .your-selector .another-class { background-color: red; } On each page, WordPress adds different body classes to the BODY element of the HTML. You can use these to target styles to specific pages, categories, etc. I recommend checking out my Chrome Inspector video to learn how you can inspect your pages and discover these classes. th-cam.com/video/151NXMk0a2c/w-d-xo.html I think I should do a video on basic tips for styling WordPress with CSS also.
@@BuildThatWebsite Thanks allot.. Yeah you must make a vedio about it And my feuture image not covering the area its 800×450 But there is no color If there is any way like email or something i can share screen shot Or can i share ss with google drive ??
You can use the contact form on my site to get in touch. I'd probably need to see the front end of the site to take a look, so it'd need to be live on the internet.
That was awesome I enjoyed allot with learning I want you to make a vedio on How to setup amaizing home page and hero section using elements Without css or with lil bit css both
Thanks for the suggestion. I definitely will be doing videos on how to build a homepage using both page builders and the Gutenberg block editor. A tutorial on Generatepress elements is also planned, but it might end up being part of a complete site-build tutorial.
I totally understand. I'm going to do a follow-up video for GeneratePress premium with minimal CSS. But unfortunately if you only use the free version of GP you'll need some css or a theme builder like Elementor Pro to create anything that looks custom.
Awesome. GP should pay you for this coolest GP' tutorial ever seen.
You know CSS really is quite simple, the configuration is not that difficult. I have taken countless classes (I didn't say I finished them) but this quick hour made more sense to me than anything I've ever seen. I get it! I have had GeneratePress for three years now, and this actually makes so much sense to me. It's awesome. Thanks so very much. Great lesson. You got a new subscriber ! Keep churning these out.
is CSS hard to learn? how long time do you think a common person need to spend
A million Thanks brother!!! Hope you keep posting more such awesome videos about generatepress......🤞🤞
I definitely will. I plan to do detailed videos on the pro features like hooks and headers soon. What kind of sites are you building with GeneratePress?
@@BuildThatWebsite I'm building tour and travel websites where I need to show multiple itineraries and tables. Creative package blurbs etc. That kind of stuff....
If you have some decent HTML and CSS skills, you should check out Lazyblocks or Genesis Custom Blocks, which will allow you to easily create your own custom coded Gutenberg Blocks (It builds the PHP and Javascript for you automatically). This will help you design content blocks that can be reused (same styling but different content) on each post.
If you're still a beginner in CSS, Elementor Pro can help you do the same thing, but you can build your templates visually and then re-use them. I'll be dropping a new video this weekend, showing how to build custom Elementor templates that include dynamic custom fields.
Also, check out my TablePress video if you want a good tutorial on using the best Free table plugin for WordPress: th-cam.com/video/5R_04UIMkJM/w-d-xo.html
@@BuildThatWebsite Ok, I'll check those out.
Great video -so well explained. You’ve got a new subscriber!
Welcome! Should be some new Generatepress videos coming out in January
I'm glad I found your channel, dude. You're very good at explaining these steps, and I say so being quite new to CSS and GeneratePress. Subscribed! Looking forward to more videos.
Do you have a suggestion for a future video on Generatepress or anything else?
@@BuildThatWebsite I'm very interested in seeing more videos like this one, where you apply your knowledge step-by-step. As someone who is used to pagebuilders and learning how to really develop/code, that sort of content is really helpful to me, and from what I can tell by the comments, to other people too.
I am new to CSS and GP too, I am wondering how long time I need to master CSS and GP
You can learn the basics of CSS in an afternoon. Start with the box model, spacing as well as block vs inline-block vs inline elements. After that you can focus on learning the specific properties that are relevant to what you're trying to build. I also suggest learning flexbox early on. It makes alignment and responsive design so much easier.
Check out codeacademy for some free interactive intro courses, and then you can move on to youtube tutorials or a book. Then start practicing. You learn by doing, not by reading/watching.
As for GeneratePress, it's honestly not the greatest theme for non-developers. I've had to learn PHP just make some customizations that are easy on other themes.
I recommend checking out blocksy if you're looking for a beginner-friendly theme. The free version is pretty amazing and the pro version adds things like hooks and a header builder like GeneratePress premium offers.
Thank You SO MUCH FOR THIS!!!
How do you get that box to pop up at 27:08? Mine doesn't seem to be there.
In Chrome you just click the icon that appears next to your box-shadow rule. If you're using Firefox I don't think there's a popup for adjusting the offset, blur & spread. It only lets you adjust the colors.
@@BuildThatWebsite Makes sense as I was using Firefox. Will edit the site on Chrome instead, thanks!
Please continue this video, complete the sidebar, and, if possible, set up the sale of one digital product, one physical product. Very useful tutorial, thank you.
Hopefully I can release an e-commerce tutorial this summer. As for the sidebar, I did a full video on creating useful sidebars: th-cam.com/video/YmtFQN3p7iY/w-d-xo.html
@@BuildThatWebsite Thanks Bro 👍
I studied the video, you have perfectly designed the output of the posts as a whole. I would like to know your opinion, if this is not only a news site, but also the sale of goods, how would you design the home page, and the store page, one digital, and one real product ...? I would like to set up ticket sales for my city, and allow others to post their products by subscription. How would you do it? Generatepress I like it, can you share your experience?
Maybe there will be a continuation of the video about working with Generatepress? You explain it very clearly, despite the fact that I do not know English the best way
@@roppor2194 I will definitely be doing more videos on working with GeneratePress. I want to show how to add breadcrumbs and an author box for example. I'll also get more into adding functionality and design with page builders (like Elementor) or Gutenberg blocks.
Love the video! Is there more coming?
The channel has been on pause but coming back with Generatepress and Gutenberg content in may
@@BuildThatWebsite Thanks for your reaction!
Can you please update the CSS code somewhere. Its really hard to follow up like this. Thanks for the awesome tutorial.
This is really good. Thanks for the hard work.
Glad you found it helpful! What video should I make next on GeneratePress. Complete site build using the pro version?
@@BuildThatWebsite maybe you could show how to edit the HTML of the theme itself?
I've been trying to customize the "entry-date" of a post with css but I need to wrap it around spans before I can target it. But I haven't located the html file and idk where it is.
Any tips?
@@miguelwillbanks3344 The good news is that you can definitely target the .entry-date without a span. It already has an .entry-date class name, which is all you need. If you're trying to target it to specific pages or categories, you can use the body classes or category classes in the parent containers to narrow your targeting.
GeneratePress compartmentalizes every part of the content display, and uses a hook system to determine what to show and where. It makes the theme really flexible, but also incredibly hard to modify for non-developers.
If you have the premium version, you can just ask for a php snippet in the forums and the team will literally write code for you. If you're using free, just use google to search "generatepress filter entry-date" or something along those lines. Most questions have already been asked an answered in their forums.
Also (with pro) you can use the new content-template feature to modify the post meta with blocks, and you could add the span or custom class that way.
But there's no HTML file you can modify, and the .entry-date isn't even part of a PHP template. It's generated by a custom function, and can only be modified with a filter, which definitely requires PHP skills or a snippet from the GP team.
I will be diving into the 'content templates' and new theme builder functions in some upcoming videos. I was also thinking about doing one on customizing a category template, and inserting content into your archives with the block editor.
@@BuildThatWebsite that would be awesome to look forward to.
So when targeting the "entry-data", if I want to just target only the "year" to style it, I can do that without a span then?
Thanks.
Thanks for the awesome video! Is there a second part to this tutorial?
My plan is to do a complete build from scratch using Generatepress to build a website. Maybe a blog, or a small business site.
Is there anything specific you'd like me to cover?
Maybe an Amazon Affiliate site? 😅
You could re-design one of my websites if that's alright with you.
I'm terrible at web design and would like my site to look more professional.
In future, I could use that template over and over again by just tweaking the colors alone, leaving the design as is.
But if you want to do it from scratch, please share the template as well so those who have GeneratePress premium can plug in the template.
You could also charge for the template if you want. Those who want free, they can follow that tutorial you'll be doing.
A blog would probably be more suitable as not many people design their own business websites. But many bloggers do design their own blogs.
@@BuildThatWebsite Glad you mention small business site. I will be more interested in building an ecommerce site with GP.
Hi Matt, another great tutorial 👍. Many thanks 🙏 . One issue: I struggle hard to find the GeneratePress Child Theme. You mention in the video that you put the link into the description. Can’t find it there. Also I can’t find anything like „GeneratePress Child“ in the Wordpress Plugin oder Theme download area. Can you help me out with that? BTW: I have GeneratePress Pro.
Here's the blank generatepress child theme: generatepress.com/api/themes/generatepress_child.zip
It has zero customization. All it does is hold your customization changes and keep them separate from the parent theme. That way you can swap out designs simply by changing child themes. You can also save previous versions of the site as a child theme if you do a major redesign, and revert back with a single click if you want.
In the future, I may try releasing a customized version using GeneratePress Premium if there's enough interest.
I need to build my next project using GP. Magazine style theme. I do not know CSS. Not sure what to do.
Is the client requesting GP?
If you must use GeneratePress, you can still achieve a magazine layout by using plugins. PostX Pro is a great option: www.wpxpo.com/postx/?ref=mmilliken (affiliate link)
It's well-coded, not a page builder, and has tons of included templates, card designs and pre-built layouts.
Hi Matt! Great tutorial again! One question though: to what extent does all this additional CSS have an impact on performance (page speed)?
Is it not recommended to put as much as possible in the styles.css ?
Thanks
Two thoughts:
1) compared to a plugin you might install to customize your site, this amount of css is insignificant. It will add less than 5ms of download time.
2) it doesn't really matter where you put the css. Whether you put in style.css, customizer, or a 3rd-party plugin it all gets enqueued the same way. Load times should be basically identical. But yeah, if it's going to be permanent css go ahead and move it to style.css
@@BuildThatWebsite Many thanks !!
In the dashboard of Wordpress “using generatepress theme”, under seo it shows as - keyword not set. Just wondering what is this & how to fix it. Thanks in advance 🙏
That's probably from your seo plugin like yoast, rankmath, AIO SEO, etc
@@BuildThatWebsite oh yes I have rank math, thank you. But Is this something to be concerned about? I’m including keywords in my blog posts. Thanks again, I hope you can advise
Thank you very much. Fantastic video. Lots of very neat customisation tips. Request: Could you do some videos on GenerateBlocks (free version) in tandem with GeneratePress (I have the premium version) , how to style the sidebar with CSS, create a custom sidebar with elements and create a custom archive page, please? I've just subbed, hopefully you will grow your channel.
This are great suggestions and they're in the queue. Hopefully I can get to some of these in the next month or two.
Can you clarify what you want to learn about custom archives? I'm assuming you mean more than styling, but actually restructuring the archive and adding custom content?
I'm actually doing this now on one of my sites using Elementor (though there is a trick you can use to override the archive pages with standard WordPress page, no coding required.
The sidebar video is up if you're interested. th-cam.com/video/YmtFQN3p7iY/w-d-xo.html
@@BuildThatWebsite Thanks for the reply. On the WP site I'm working on (local darts league in the UK) the archive in the side bar lists every month since 2012 until the present, and it's getting very, very long. I know there is a dropdown option - but I'd like to know how to move the archive to a dedicated page. Yes, restructuring the page, but knowing how to style the page would be a bonus and the less coding the better. I use GP Premium and GP Blocks. Really appreciate it - and I don't expect you to be my private tutor LOL.
@@BuildThatWebsite Yep, got a notification today. I will have a watch later today - many thanks in advance.
@@ziggsstar You could use something like WPBeginner's compact archives plugin to quickly build a simple accessible archive. This is especially helpful if people frequently navigate by month (like league results) www.wpbeginner.com/blueprint/compact-archives/
I do cover some basic archive styling in my hour-long generatepress tutorial. Depending on your category structure, you may be able to override archives with pages which you could design with GP Blocks or Gutenberg. A drag and drop option is to use a theme builder like Elementor Pro or Beaver Themer for custom archives.
I would love to have all the css used in this demo please . Thank you very much 😊 this was golden nuggets
That's a good point, thanks for reminding me. I'll post it on the site and add a link to it ASAP.
@@BuildThatWebsite I already looked at the site unfortunately, I haven't found what I needed 😔. I would like to uplift the content container as in 54:22 . Please can you provide me with css that you've used to target the inside article ?
@@demasmoha You're right, sorry. I'll try find a place to add the code this weekend if I have some time. To raise the content container all you need is some negative margin. So for example:
.inside-article {
margin-top: -150px;
}
If you want to do it only on your posts, you would write:
.single-post .inside-article {
margin-top: -150px;
}
Adjust the exact amount of margin to make it look right for your design.
I love your tutorials and have learned a lot from them .❤️ One question and sorry if it's silly. Is it necessary to use the Child Theme, if I were to use the Code Sniper plugin instead? I can add any changes to the PHP without touching the original Theme. Would it be necessary or this plugin could replace the Child Theme.
Thanks in advance 🤘
You don't NEED a child theme unless you want to edit theme template files like archive.php or create custom post templates.
I like to use a child theme on every site with Generatepress because customizer settings and CSS stay with the child theme which lets me switch designs by switching child themes. But if you're just adding a bit of php, Code Sniper or Code Snippets is fine instead of a child theme.
@@BuildThatWebsite Thanks a lot! It was not clear if it was necessary or not. But i got it.👍
@@BuildThatWebsite Thanks for Reply me. Maybe you seem silly, but today I bought a plugin called Yello Pencil and life was solved in relation to the part of not knowing CCS at the time I could do everything that had sounded and I did not have to use Elementor since everything is pure CCS.
First of all thanks a lot🥰
How to creat pagination (previous 1 2 3>>next) and how to creat sticky header in gp premium & Gutenberg plz answer .
Thank You
If you're looking to split posts into multiple pages, try this guide: www.wpbeginner.com/wp-tutorials/how-to-split-wordpress-posts-into-multiple-pages/
As far as sticky headers, I already did a video on this using Generatepress. There are 3 methods, including the built-in option for Generatepress premium. th-cam.com/video/sZPX1rJcAeY/w-d-xo.html
@@BuildThatWebsite sir , thanks a lot🥰🥰🥰🥰🥰🥰🥰🥰❤️❤️❤️❤️❤️❤️❤️❤️❤️
Sir,
How to creat video background homepage without plugin!?
Does GeneratePress have built-in Cookie Consent fuction?
GP doesn't set any user cookies, so no there is no consent feature.
Can GeneratePress be edited with Elementor? Cheers!
Sure, GeneratePress is a great choice to combine with Elementor, and I use them both together on my own site.
There are a couple ways to combine them. I don't use the Elementor Pro theme builder very often, instead I prefer to let GeneratePress handle the structure of the site and will inject elementor templates into GeneratePress hooks when needed. For example, my 'video' page template is built using Elementor Pro. It pulls data from custom fields to generate the article.
Example: www.buildthatwebsite.com/video/top-products-hero-elementor
It looks like you're using Blocksy on your site, which has many of the same features as GeneratePress, especially when it comes to theme hooks (requires Blocksy Pro). Site redesigns are a pain, so I wouldn't switch themes unless you really need to. And Blocksy is much easier to customize than GeneratePress, since it has way more styling controls and pre-built templates.
Can you please tell me how can I target only posts that have a featured image for this styling?
Here's what my theme says about such posts:
class="post-1619 post type-post status-publish format-standard has-post-thumbnail hentry category-helmets no-featured-image-padding"
Put the body classes .post.has-post-thumbnail at the start of your css rule.
For example:
post.has-post-thumbnail .entry-content h2 {
font-size: 35px:
}
Thanks, It worked on parts where it had .entry-content or .entry-title in the classes.
But sadly this code doesn't allow me to make this exception.
.single-post article:before {
content: "";
width: 100%;
height: 600px;
display: block;
position: absolute;
top: 0;
left: 0;
background-color: #19284D;
z-index: -1;
max-height: 80vw;
}
I wanna hide this block on the posts without a featured image.
Oops! 😅 I have no idea about CSS so that's why I'm facing these issues. Thanks again, it's now working as needed. I rewatched the tutorial and it's now fixed, along with the code you gave me.
makes it look easy
great video
When i apllied changing bakground color of hero section css code it worked perfectly for desktop but not visible on mobile view.. can u guide about it..
Another i only want this rule for my home page
But it shows on all post n pages if
Any code for this plz share
Thanks
I'm not sure why the background color wouldn't show on mobile unless either 1) You're using a media query or 2) the featured image is covering the background color.
If you only want a CSS rule to apply to the homepage, you can use the .home class before the selectors when writing your rule.
.home .your-selector .another-class {
background-color: red;
}
On each page, WordPress adds different body classes to the BODY element of the HTML. You can use these to target styles to specific pages, categories, etc. I recommend checking out my Chrome Inspector video to learn how you can inspect your pages and discover these classes. th-cam.com/video/151NXMk0a2c/w-d-xo.html
I think I should do a video on basic tips for styling WordPress with CSS also.
@@BuildThatWebsite Thanks allot..
Yeah you must make a vedio about it
And my feuture image not covering the area its 800×450
But there is no color
If there is any way like email or something i can share screen shot
Or can i share ss with google drive ??
You can use the contact form on my site to get in touch. I'd probably need to see the front end of the site to take a look, so it'd need to be live on the internet.
@@BuildThatWebsite okay thanks i will send you
@@BuildThatWebsite whats your website url so i can contact
That was awesome
I enjoyed allot with learning
I want you to make a vedio on
How to setup amaizing home page and hero section using elements
Without css or with lil bit css both
Thanks for the suggestion. I definitely will be doing videos on how to build a homepage using both page builders and the Gutenberg block editor.
A tutorial on Generatepress elements is also planned, but it might end up being part of a complete site-build tutorial.
Hi dude, this is absolutely a valuable lesson. Can I have the css code, please?
I'm currently building a spot on my website to post code from tutorials. It should be up by the end of next week hopefully.
Thanks, you helped me a lot
You're welcome!
More generatepress+generateblocks tutorial pleaseeeeeeee....thank you
It's definitely on the list. I'm trying to get a complete site build tutorial with GeneratePress Pro done in October
I can't find the child theme link?
This is the link to the blank child theme which you can install and customize: generatepress.com/api/themes/generatepress_child.zip
Thank you! 😊
that CSS is too much for a newbie like me :(
I totally understand. I'm going to do a follow-up video for GeneratePress premium with minimal CSS.
But unfortunately if you only use the free version of GP you'll need some css or a theme builder like Elementor Pro to create anything that looks custom.