Beginner's Guide to GenerateBlocks  ## Metadata - Author: [[The Admin Bar]] - Full Title: Beginner's Guide to GenerateBlocks - Category: #articles - Document Note: --- tags: - #WordPress - #GenerateBlocks - #WebDesign Author: [Video Creator - Likely Adam from WPCrafter, verify before publishing] Source: [YouTube - Beginner's Guide to GenerateBlocks (Free)](https://www.youtube.com/watch?v=u7h1h2BiZOE) Reference: [Video Timestamps Linked Throughout] date created: 2025-08-16 14:32 --- # Title: Beginner's Guide to GenerateBlocks (Free) - Installation, Settings, and Basic Layouts ## Table of Contents: - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📖 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-diversity-equity-inclusion-and-belonging-assessment) - [✅ Logical validity](#-logical-validity) - [🔍 DARVO Analysis](#-darvo-analysis) - [🔍 SEO Evaluation](#-seo-evaluation) - [🎯 Conclusion](#-conclusion) --- ## 📝 Summary: This beginner’s guide introduces new users to **GenerateBlocks**, a lightweight WordPress block plugin for building flexible layouts. The walkthrough covers installation, settings, styling controls, breakpoints, and basic layout creation. It emphasizes CSS/HTML familiarity, responsiveness, and efficient workflow tools like style search, and demonstrates creating a responsive section with a headline and image. --- ## 📖 Main Content: The video provides a hands-on tutorial for new GenerateBlocks users. It covers: - Installing from the WordPress plugin repository. - Basic settings like **Global Max Width** and **CSS Print Method** ([2:21](https://www.youtube.com/watch?v=u7h1h2BiZOE&t=141)). - Using text, headline, and image blocks with unique classes for isolated styling ([4:40](https://www.youtube.com/watch?v=u7h1h2BiZOE&t=280)). - Styling consistency across blocks with state controls (hover/focus/link). - Understanding breakpoints and how styles cascade down from desktop → tablet → mobile ([6:58](https://www.youtube.com/watch?v=u7h1h2BiZOE&t=418)). - Styling controls: layout, sizing, spacing, typography, backgrounds, borders, positioning, effects ([9:30](https://www.youtube.com/watch?v=u7h1h2BiZOE&t=570)). - Using the style search feature for faster navigation. - Building a section with containers, headings, images, and a CSS Grid layout ([14:25](https://www.youtube.com/watch?v=u7h1h2BiZOE&t=865)). - Creating mobile-responsive designs by adjusting grid columns ([21:06](https://www.youtube.com/watch?v=u7h1h2BiZOE&t=1266)). --- ### 🗒️ Notes - **Installation & Setup** - Install from repo → search “GenerateBlocks” by Tom. - Settings: Global Max Width (theme inherits if GP is active), CSS print method (inline vs. external file). - Regenerate CSS files if styles don’t appear. - **Block Basics** - 8 free blocks; headline & text are technically the same block. - Unique auto-generated class per block. - State selectors: main, hover, focus, link. - **Styling** - Consistent style panel for all blocks. - Search & filter style controls. - Breakpoints: settings cascade down, tablet overrides mobile, mobile is isolated. - **Layout Construction** - Outer container (section) + inner container for constrained width. - Padding & margin settings for spacing. - Typography, alignment, and color customizations. - **Image Handling** - Prefer GenerateBlocks image over WP core image. - Full styling control: border radius, borders, link, size units. - **Responsive Design** - Grid or Flexbox for layouts. - Breakpoint-specific styling (e.g., stacking columns on mobile). - **Workflow Tips** - Use slash command for block insertion. - Combine selectors for targeted responsive/interaction styling. --- ## 📖 References: - [GenerateBlocks Plugin Repo](https://wordpress.org/plugins/generateblocks/) - [GeneratePress Theme](https://generatepress.com/) - [Py Calendar Plugin](https://pycalendar.com/) --- ## 🗣️ Paraphrase: 1. *Original:* "GenerateBlocks really relies on the language of CSS and HTML. So if you have that basic understanding, I think you can get up to speed a whole lot easier." *Paraphrased:* GenerateBlocks uses native CSS and HTML conventions, so prior knowledge of these will help you learn faster. 2. *Original:* "Pretty much anything you can dream up, you can build inside the Generate Block system." *Paraphrased:* The GenerateBlocks system offers enough flexibility to create almost any design concept you can imagine. --- ## 📰 Newsletter: **Title:** Build Smarter with GenerateBlocks – Your Lightweight Layout Solution This week, we’re exploring **GenerateBlocks**, the block plugin that’s making custom layouts in WordPress both fast and flexible. Whether you’re starting fresh or refining your theme, you’ll love its **CSS-first approach**, **responsive controls**, and **searchable style panel**. We also check out the Py Calendar plugin for easy event management. 🎯 *Pro Tip:* Use the **slash command** to speed up block insertion and the **Global Max Width** for consistent layouts. 💬 Got a favorite GenerateBlocks tip? Share it with us! Links: [GenerateBlocks](https://generateblocks.com) | [Py Calendar](https://pycalendar.com) --- ## ✅ Action Items: - Connect GenerateBlocks tutorials to **open-source contributor onboarding** for WordPress block development. - Highlight CSS-first methodology as an **educational pathway** for new contributors. - Use responsive layout concepts in **WordPress Training Team** materials. - Share insights at community events to promote **performance-first design**. - Evaluate potential for an **OSPO-approved design workflow guide** for open-source projects. --- ## 🧪 Hypotheses: - H1: New contributors with CSS/HTML knowledge will adapt to GenerateBlocks faster. - H2: Style search significantly reduces block styling time for power users. ### 📊 Methodology: - **Data Sources:** WP training logs, survey responses. - **Design:** A/B testing with control group (no style search) vs. test group (style search enabled). - **Analysis:** Measure time-to-completion and error rate. ### ❓ Questions: - How does GenerateBlocks’ performance compare to heavier page builders? - Does the CSS-first approach deter total beginners? ### 🔮 Future Research: - Explore integration of GenerateBlocks with collaborative editing workflows. - Develop block library templates for community reuse. ### 💡 Implications: - Faster onboarding for contributors → higher retention. - Improved site performance → better UX and SEO. --- ## 🧠 Learning Styles Assessment: - **Visual:** Minimal use of diagrams → could add annotated screenshots of UI. - **Aural:** No audio alternative beyond narration → consider downloadable audio summary. - **Verbal:** Strong use of direct instructions → could expand with analogies. - **Physical:** Lacks interactive exercises → suggest “build-along” projects. - **Logical:** Strong with step-by-step CSS logic. - **Social:** No built-in collaboration prompts → suggest adding community challenges. - **Solitary:** Lacks reflection prompts → could include journaling tasks. - **Naturalistic:** No environmental tie-ins → optional analogy with “layout ecosystems.” --- ## 📊 Accessibility Assessment: - Screen reader compatibility likely depends on YouTube’s captions. - No alt-text for images in demo → recommend adding. - Ensure keyboard navigation is possible in the block settings panel. --- ## 🌍 DEIB (Diversity, Equity, Inclusion, and Belonging) Assessment: - Language is neutral and accessible. - No cultural examples → could add global site use cases. - Could break up longer instructions for neurodiverse learners. - Include variety in example site content (beyond Western-centric designs). --- ## ✅ Logical validity: - **Positive:** Strong causal reasoning in explaining breakpoints → performance benefits. - **Potential Weakness:** Assumes CSS familiarity as baseline; could alienate beginners. - **Tone: - Summary: Sponsor: Pie Calendar is the easiest, most flexible event calendar plugin for WordPress. Turn any post into an event in minutes and display it on a beautiful front-end calendar. With features like recurring events, blackout dates, and e-commerce integrations (plus a Lifetime Deal), you’ll never go back to bloated plugins again. Learn more at https://piecalendar.com ---------------- If you’re brand new to GenerateBlocks, this is the place to start. I’ve made hundreds of videos using GenerateBlocks and GeneratePress—but somehow, I’ve never actually made a beginner’s guide… until now. In this video, I’ll walk you through: ➡️ Installing GenerateBlocks (free version) ➡️ A quick tour of the interface & settings ➡️ How blocks, styles, and breakpoints work ➡️ Building a simple section with a headline and image ➡️ Making it responsive for tablet & mobile By the end, you’ll have the confidence to start building your own layouts the right way. Whether you’re pairing it with GeneratePress or using it on its own, this guide will help you get past the learning curve faster. And if you’re comfortable with a little HTML/CSS, you’ll feel right at home. Check out Jonathan's Generate Made Easy course: https://jonathanjernigan.com/generate-made-easy/ See my GenerateBlocks playlist: https://www.youtube.com/watch?v=YDPxfU76gl4&list=PLaB2pvMXt9t32fOKDmfUhbs9HtXetsnq4 💻 Visit Our Website: https://theadmin.bar/yt-tab 🗨 Join Our Free Community: https://theadmin.bar/yt-community 📨 Get the Best of The Admin Bar Delivered: https://theadmin.bar/yt-tfc 🔁 Sell More Care Plans: https://theadmin.bar/yt-wom 🧮 Use My Website Price Calculator: https://theadmin.bar/yt-calculator 📜 Get My Proposal Template: https://theadmin.bar/yt-proposal ☑️ Get More Done with My Checklists: https://theadmin.bar/yt-checklists 🔴 Live Event Schedule: https://theadmin.bar/yt-events 🔧 The Tools I Use: https://theadmin.bar/yt-tools ⚡ My Agency, OGAL Web Design: https://theadmin.bar/yt-agency - URL: https://youtube.com/watch?v=u7h1h2BiZOE&si=0MjBDAaaSCjgw_-M A question that I've seen come up inside the Generate Blocks or Generate Press community a hundred times is a good starting place for somebody brand new using Generate Blocks.I've done hundreds of videos using the system, but I've never created a beginner's guide. So, that's what we're going to do here today. If you've never used Generate Blocks before, I'm going to give you a quick overview of the interface, and we'll build some things out to get you started on the right path going forward. But before we dive in, I just want to give a quick thanks to this video sponsor, Py Calendar. Pycal is the easiest and most flexible event calendar plugin for WordPress. In 5 minutes or less, you can turn any post on your website into an event that displays on a front-end calendar.Pyalar is compatible with all themes and page builders and is super easy for both you and your clients to use. Packed with amazing features like recurring events, blackout dates, e-commerce integrations, and more, you won't miss the old bloated calendar plugins you used in the past.We have a lifetime deal available as well, so be sure to visit pycalendar.com to learn more. The only plugin I have active on this site so far is my GP premium plugin. This has to do with the Generate Press theme, which we're not going to cover in this video, but I just wanted to show you that it is here. It's just here because it's going to make it easier for me to demo some of these things.Now, you can use Generate Blocks with or without the Generate Press theme. It definitely works better with it as there's some pretty nice integrations. But the first thing we need to do is go to the plugin repo and install the Generate Blocks plugin. To do that, we'll just make sure we're here on our plugin screen. And we'll click the add new button over here in the search plugins field.I'm going to go ahead and search for Generate Blocks. And we can see it should be the first result here by Tom. And we'll go ahead and install and activate this plugin. Now that we have it installed, you'll notice a link for Generate Block settings over here in your sidebar. And if we go to the settings page, there's only really two things for you to deal with. One is the global max width setting. This is the content width on your website.Now, because I'm using Generate Press, it's bringing that in from my theme at 1280 pixels, which is what I've set there. But if you're using a different theme, you'll be able to set this value here in pixels. The other option is the CSS print method. And from here, you have two choices: either an external file or inline embedding. The external file is going to make your site a little bit faster as it's better for performance.However, sometimes it can get hung up in caching. So, a lot of times when I'm developing, I'll go with the inline embedding option, and then once the siteGoes into production, I’ll switch this over to an external file. If you do ever notice that you’re setting some styles, but they’re not showing up in the front end and you’re using this external file method, you can always go back to the settings page and click the regenerate CSS files. And that will usually clear it up. We’ll go ahead and save those changes. And now we can go into a page and start playing with GenerateBlocks. So I’ll just hover over pages and we’ll click add page. And we’ll just call this playground for now. If we open up the block inserter here, you can see our GenerateBlocks blocks are at the top of the screen here. We have eight different blocks to choose from in the free version.As we build out some demo pieces in this video, we’re going to go through using all of these. But for now, I’m just going to go ahead and drag a text block onto the page. And we’ll just put some text into it so we can take a look at the settings. When we have one of our GenerateBlocks blocks selected over here on the right-hand side, you’ll see there’s both a settings panel and a styles panel. We’ll take a look at this settings panel first. Here you can see we have some specific options having to do with our text block. Now, these settings can change depending on which block you have selected. For example, if I add a button block in here, you’ll see we have some different options than when we just had that text block selected.But here in the text block, we have the option to add an icon which we can choose from the library or paste in our own SVG code. We can also change this tag name from anything in the drop-down list. Now, one of the first quirks you might notice is when you bring in a text block, you’ll see that it has a paragraph tag name by default. But of course, we could change this to an H1, for example. You’ll see when we did that, if we look back at the list view here, we’re getting the GenerateBlocks headline block icon for this block. It’s actually changed this block type from a text block to a headline block. But if we were to use this control here to change that tag name, this works the same as the one over here on the side back to a paragraph. You can see this went back to a text block.Essentially, the headline block and text block are the same block, but the tag name is different based on which one you drag in. If you drag in a text block, it’s going to be a paragraph. If you drag in a headline block, it’s going to be a headline. However, you can switch between either one of these seamlessly. So, it doesn’t really matter which one you bring in. Both of them will work. I’m going to go ahead and get rid of this button block for now, so we can focus just on the text block here and start looking at some of the style options. So again, I have this text block selected. And if we go over here in the right-hand side into our styles tab. We have all the different style controls for this block. Now, this panel is going to lookthe same for every GenerateBlocks block you bring in, which is nice because it keeps it consistentfrom one block to the next. And we have a ton of styling controls here. So let's go through this. At the top, you can see a class that has been assigned to this text block. Now, by default,GenerateBlocks is going to assign a class to every block you bring in. You'll see because thisis a text block, it got the class GB text hyphen a random string of numbers and characters. Now,this will be a unique class for every block, which will just make sure that when you make changes tothis, it won't affect anything else. One of the benefits to using GenerateBlocks Pro is you canadd your own classes to each one of the elements right here inside these settings, which gives yousome more global control. But in the free version, we can only use the class that was assigned tothis by default. Now, underneath that, we have a few different selection options. By default,you're going to be making changes to the main selector, which is just this selector by itself.But if you wanted to make some styling controls to the hover state, we can click on hover here,and you can see the selector has been changed. It's now that same class, but its targeting ishover or focus. Now, any changes we make to the styling here will only happen on hover and focus. On this block in particular, we also have a link selector which would select any linkswithin the text. Meaning, if I just grab this word text here and added a link to it. And ifwe select this links button here, we're only going to be controlling the styling for anylinks inside this text block. Here we can also manage our selectors. Some blocks will giveyou some additional selectors. Here on the text block, we just have that main selector, hover,and focus. So, we don't see any of those other options here, but we might see some of those lateras we go through some of these different block types. It's just good to know that this is hereright away in case you're looking for something you can't find. As you probably already noticed, having a basic understanding of HTML and CSSis really handy if you're going to use GenerateBlocks. A lot of builders will obscure thingslike class names or pseudo selectors by givingthem their own unique names that maybe make them a little bit more user-friendly. GenerateBlocks really relies on the language of CSS and HTML. So if you have that basicunderstanding, I think you can get up to speed a whole lot easier in GenerateBlocks because all ofthese things will seem really familiar. However, if you've never written CSS before, it's going totake a little bit of getting used to. Now, there are pros and cons to this, but for me, this is aA huge reason why I use GenerateBlocks is that it uses the same language as HTML and CSS, so I don't have togo around and try to find all these proprietary settings. If I know how it works in CSS,I know how it works inside GenerateBlocks. The next thing you'll find in our styles panels hereare all of our breakpoints. It's going to default to all screens, which is your desktop breakpoint. All the settings you set on desktop will trickle down to tablet and mobile as well. However, you'll probably find that you need to make specific changes on the tablet breakpointor mobile breakpoint. You can switch to these, and when they're selected, any settings that youset here inside the style controls will only be applied to that breakpoint and lower. So,anything you do on desktop will trickle down to tablet and mobile. Anything you do on tablet willtrickle down to mobile, and anything you do on mobile is just for those mobile settings. Now, there are some additional settings here. Forinstance, if you just wanted to target your tablet or your tablet and mobile, you can do that from here.Again, inside GenerateBlocks Pro, you can actually create your own custom media queries,which is really nice when you want to target some of those in-between sizes. Although this mayseem complex, it gives us a ton of flexibility. For example, if I wanted to target my tablet and mobile, but only the hover state on that, I cancombine these two options here. Now, any styles I change inside the panel will only affect tabletand mobile when the element is hovered. Being able to use all of these in combination really makesthis system extremely flexible. We'll go ahead and go back to our desktop breakpoint in our mainselector here so we can start going through some of the style controls. Each one of these hasa ton of controls hidden behind an accordion. We won't go through each and every single one,but I want to give you an overview of what all is here. In the layout panel, we canfind things like the display controls. Each of those different controls might have some differentsettings here inside of grid or flex layouts. In the sizing, we can set widths and heights. In the spacing, we can set things like padding and margin. In typography, we can set text color,font sizes, font styles, and all of the things relating to typography. Backgrounds, we can choosea background color or add our own background types like image, gradient, or overlay. Under borders,we can set both the border thickness and color as well as the border radius. Inside of position,we can change this to relative, absolute, or sticky. We can also set our inset values andoverflow controls. Fairly often. The media settings really only apply to things like your image block or your shape block. Here we have options for lists. So if you have something like an ordered or unordered list, you can change the list type here. Put a different image in there instead of a bullet. And you can change that list style position. There are a few settings under more, which is just kind of like the junk drawer. Here we see pointer events, cursor, fill color, and stroke color, which would have to do with your SVG elements. Not every CSS control is in this panel, but the vast majority of them is. Of course, it's going to take a while to memorize where all these settings are, but there are a couple of features that will really help you out.Let's say, for instance, I wanted to set my background color. Instead of going in here and going into backgrounds and finding the color, if I didn't know where that is, I can use this search box here to just search for background. This will filter down all the controls just to the things that have to do with background.Now, while it isn't just background color, I do find background color here along with anything else that has to do with my background. Same thing if I wanted to find border controls; I can search for border, and now it's surfaced all the border controls here. This is really handy if you want to move quickly through the style panel or if you're just trying to hunt something down. You'll see when you've searched for something, you get this little bar here showing you what you searched for. And you can click the X to escape that search and get back full control of your panel. You also have an option here to filter the controls. By default, it's going to be set to show all, but you can also set this to show controls with value, which will only show you any controls that you've actually set styles to. We'll reset that filter. We'll go in here and just set a dark background color. And now if I use this show controls with value, it's only going to show background color because that's the only setting I've set here. We also have the option here to show inherited values. This is going to be less helpful in the free version, but in the pro version, this is something I use quite a bit as we can use some different nesting options and descendant selectors.And being able to see what values are being inherited by other classes is extremely helpful. Okay, now that we got kind of a whistle-stop tour of the interface, let's go ahead and try to build something out. So, I'm going to select that text block and delete it so we can just start from scratch. And I'll typically use the slash key here to enter my different blocks. That way, you can just type them in, but you can, of course, use the block inserter up here as well. But I'm just going to use my old habits. And we'll go ahead and type in a forward slash. To start typing in the word container, we're just going to make a typical section here withsome text and an image inside of it. So, we'll go ahead and add our container to the page. And thefirst thing we're probably going to want to do is change the HTML tag of this container. To do that,we're going to go back into the settings here. And under tag name, I want this to be a sectiontag. Now, inside of this, I want to constrain all the contents to the content width of my website.Right now, this container is stretching the full width. In fact, if I close the inserter over hereand the settings over here, you'll see that this container is stretching the entire width of thewebsite. And I don't want my text to go all the way from the left side over here to the right sideover here. So I need to constrain that. Now when you add a container to the body of your page here,you'll get this option inside the toolbar that says add an inner container. If we click that,GenerateBlocks goes ahead and adds another container inside the container you had selected. So you'll see this was our section and this is the container it just added. And it puts a few specialproperties on this container. If I select it and we open up our styles again and go into the stylepanel, we'll make sure we turn this filter back to show all. You'll see that we have a red dothere next to sizing and spacing because those have had some settings put into them. If we gointo the sizing, you can see our max width is set to our global max width. If you remember back tothe beginning of the video, we actually had that max width being inherited by our theme, which was1280 pixels. This little global button will just relate to that global setting. But you can alwaysuncheck it and put in anything you want. Like if I just wanted this to be 950 pixels, I can type in950. And now that's the max it can be. Of course, I could change it to 50. And now it's going to beextremely narrow. In my case, I do want to use that global max width. So I'll make sure that'sturned on. By using the inner container, it also set our margin on the left and right to auto.That just makes sure that it puts this inner container centered on the screen. So all ofour content will go in that center area. Now, our section probably needs some padding. I prefer toput that padding on the outer container. So we'll open up our list view again, go to that container,and now we can go into the spacing setting here and add some padding. I'll start with maybe 80pixels on the top and 24 on the left and right. So now we have an even 80 on top and bottom and24 on left and right. We can type in all these values separately or we can use these link axishere to do the vertical padding and horizontal padding which would have saved me typing in aWant. But I'm going to go back to that axis, and we'll just make the horizontal padding 24 pixels. Now we can go inside of our inner container here and add our heading and image blocks. So I’ll go ahead and add a block here. We’ll do a headline block. So I’ll search for headline.I’m going to change the tag to an H1 and we’ll put this as my headline. Now a lot of your styling for this is going to be inherited by your theme. Right now I don’t have a lot of that set up, and we’re just going to style things individually just so we can get used to the interface.I probably want to center this headline and make it a little bit bolder. So, I can use these quick controls here to change the text alignment to center, which will center this inside of its container. And I can go inside the typography settings, and under font weight, I can change this to bold to make that headline bold.We also might want to change the color of it, which I can do by going here to text color, and we’ll just give this the blue color from our theme's palette. Now, underneath that, let’s add an image. So, I’ll just go to the end of my headline here. Press return on my keyboard. And now I can use that forward slash trick again to start typing in image.Now, you’ll see here we have two different image blocks when I search for image. The first is the core image block, and the second is the generate blocks image block.You’ll see that all the generate blocks have a blue icon here. And we’re generally going to want to use the generate blocks version if there’s one available. The core blocks don’t have all the styling controls, and the generate blocks ones do. So, they’re a whole lot easier to work with. We’ll go ahead and add this image to our page.And now we have to select the image that we want. We can either upload it, choose something from our media library, or insert it from a URL if we want a hot link to an image somewhere else.We’ll go ahead and go into our media library. And we can see that there’s no images on this website yet. So, I’ll go ahead and upload one.I uploaded this picture into the media library, and we’ll go ahead and select it. And we can see this is now added to our page. If we go into the settings here, you can see the URL for this image is inside this image field. And if we wanted to change it out, we can use this browse button to pick something else from our media library.Now, we have all the same styling controls for this image. If we flip back over here to the styles tab, we can do anything we want.Like, let’s say we want to set a border radius. Let’s link all those sides together.And I’ll put something big like 60 pixels in here just so we can easily see it on the screen. We could add a solid border to it if we’d like.Maybe one pixel. And we’ll make it a gray color. That might be a little bit hard to see on the screen share, but you get the idea that we can use all of these. Styling controls here to affect our image, headline, or whatever block we want to add tothe page. Now, like I mentioned earlier, different blocks have different settings in here. Here youcan see the URL for the image that we're inserting into this page. We can also put in a link. So, ifI wanted to link this to the admin bar's website, we could just type in adminbar.com, and nowthis image will be linked to that URL. We can open it up in a new tab, set it to no follow, or changethis to a sponsored link. Because we're using an image block here, we can take advantage of sourceset and use the full-size image, a thumbnail, medium, large, etc. In this case, I want to usethat full image. We also have some settings here which can also be found in the styles panel. Now,this is a little bit confusing, but what GenerateBlocks tries to do is surface some of thosesettings that you might be most likely to use here inside that settings panel. So, here if Iwanted to change the width, I could change it to maybe 200 pixels. And that's going to change thewidth of my image. You'll see if I flip back over here to our styles panel and go into sizing, it'salso inserted that 200 pixels into our width here. So, we can change it at either place. I'm going togo ahead and change that back to 100%. I typed in 100 here, but you can see it's set to pixelsas the unit by default. We can click on that and choose any of these other units, or I can type in the percentage key on my keyboard, and that will automatically change this unit to percentage. Butlet's work on this layout a little bit. Let's say I want the headline on the left-hand sideand the image over on the right. To do that, I can use CSS grid on my inner container. So,we'll select our inner container again. I'll go into the layout panel and under display, I'm goingto change this to grid. Now, inside of our grid layout settings, I have my grid template columnsdeclaration and a few helpful presets inside this icon. If I click on that icon, you can see we havea few different column layouts to choose from. In this case, I just want two columns. So, I'llselect the two columns here. Now, you can insert your own grid template columns here. In fact, ifI wanted to change this out to just say 1fr 1fr, I can type that in and it will still respect thatas long as it's a valid declaration. I'm going to go ahead and use the preset here since thisrepeat function tends to work a little bit better responsively. And we can go about continuing toset up this layout. Now, I want the headline to be centered vertically in here. So, we can gointo our alignment panel and change the align items to align center, which will align thesevertically. Of course, we could do the same layout with flexbox. And flip these back and forth however I need to. All those flex controls live here inside that flex layout. And if you already understand CSS, none of this should be much of an issue. Of course, if you're new to CSS, you might have to take a little bit more time learning how the flex properties work, which can be a little bit to wrap your mind around. I'm going to go ahead and put this back to CSS grid since I prefer that for this kind of layout, but let's take a look at how we would need to change this responsively. We'll go ahead and go into our tablet and mobile view. These could still work as a two-column layout. So, I'm going to leave it the same there. But as we go down to our mobile breakpoint, obviously, we have some issues. Everything we set up on the desktop version is trickling down to the mobile version. And here, we actually want to stack these things on top of each other so that the headline is above the image. All we need to do to do that is go back into our grid template columns. Now that we have the mobile breakpoint selected, this is only going to affect things at that mobile breakpoint. Here, I'll just choose the one-column preset, which will make sure that our grid is only one column wide. Now, you can see here as we go back to tablet, it goes back to two columns. Of course, still two columns on desktop, but on mobile, we're back stacked to a single column. Any of the settings you put inside the style controls here can be controlled at the different breakpoints. So, even if you wanted to make this headline red, but only on mobile, you could go in here and change this color to red. You can see it's red on mobile, but if we go back to our tablet and desktop versions, it's the blue that we assigned originally. I can imagine if you're brand new to GenerateBlocks, the complexity of all this might be a little bit overwhelming. But it's this complexity that allows this builder to be so flexible. Pretty much anything you can dream up, you can build inside the Generate Block system, especially if you're using Generate Blocks Pro. Of course, a 20-minute video isn't going to teach you everything you need to know about the system. In order to do that, you're just going to have to spend some time playing around with it. I would suggest finding some sections you like or things you've built before and try to recreate them using Generate Blocks. As you use the system more and more, you're going to get a whole lot faster and everything's going to become more intuitive. Of course, I also have hundreds of videos here on my YouTube channel, most of them using Generate Press and Generate Blocks. But if you prefer a start to finish learning experience, then my good buddy Jonathan Jernigan's got a Generate Blocks course that will take you from absolute beginner to building out full websites using the system. Hopefully, you enjoyed this. Video. If you did, I would really appreciate a thumbs up.And if you have any questions, make sure to leave them down in the comments. Go ahead and hit subscribe, and we'll see you in the next, Beginner's Guide to GenerateBlocks, The Admin Bar, 01k2hwjj29y5nt3v2s3pr6b2wh.