Customize your WordPress block theme with Global Styles
HTML-код
- Опубликовано: 23 авг 2024
- Download the Ollie block theme for free at OllieWP.com and start building beautiful, blazing-fast websites with modern WordPress and Ollie.
---
Hey folks, Mike here from Ollie and in this video, I want to tell you all about the Global Styles interface where we can easily customize the design of our WordPress websites with a block theme like Ollie.
One of the first things many users want to do when they set up a new WordPress website is customize the theme. Some folks just want to change the font and others want to tweak the styles to match their existing brand. Now, we can do all of that visually with the Global Styles interface.
In traditional WordPress themes, this level of customization a bit of a hassle because much of the theme customization happened in the code. But now, we have block themes, which are built from the ground up with customization in mind. Block themes are made entirely of content blocks, so they are easy to customize and configure within the WordPress editor.
Each block theme ships with a file called theme.json. This file defines all of the styles for the site like typography, colors, color palettes, layout settings, and more. This effectively acts as the design system for your site.
All of the style settings in your theme’s theme.json file are fully editable via the Global Styles interface in the Site Editor. Using the controls in Global Styles, you can easily make global changes to your site’s typography, colors, and layout. Let’s hop into WordPress and check out how Global Styles works.
Want to change your whole site’s color palette? Just choose one of the various color palettes included with your theme.
You can even change the default appearance of specific blocks. Maybe you want to restyle your buttons to have a fully around appearance. This is super simple to do in Global Styles.
There are also some powerful tools built into Global Styles like the Style Book and Revisions. The Style Book gives you a birds-eye view of common elements you’ll find on your website such as paragraphs, headings, buttons, images, and more. This view, combined with the Global Styles controls, makes it easy to make visual changes to your site and see immediate feedback of how it looks.
Revision history gives you a snapshot of the various stylistic changes you’ve made to your site. Maybe you changed a bunch of styles but aren’t happy with how it looked in the end. No problem! You can simply open up your revisions and jump back to an iteration you’re happy with.
Think of Global Styles as the command center for how your website is styled. Once you know the ins-and-outs of this interface, customizing your site will be an absolute breeze.
That’s all for this video! See you in the next one where we’ll explore even more powerful site building features available with the Ollie block theme.
You can download the Ollie block theme for free by visiting olliewp.com.
Thanks for your work!
Question: How can I add custom fonts in an easy way?
Good Morning Mike I find this content is refreshing and simpler to work with a Block Theme
You seem like a nice person, hope your work thrives
I finally found where I could change the width under Layout (which I wish you had covered). Thanks Mike - great job!
Many thanks for these great presentations, they are super useful! Just wondering if there is some method to enable Global Styles in a hybrid theme. The new Font Library API released with WP 6.5 is a great addition that I would love to use within hybrid themes as well. Many thanks!
Great job. Thanks. Look forward to the next one.
Thanks but, I've been looking and can't find how to change the logo or background for navigation area
Excellent. But, how can I use another font family ??
Is there a easy way to add a custom font on Ollie?
Right now, we don't have a custom way of adding a font, but a font library is coming to WordPress core soon. We'll wait until that launches and then ship with a bunch of really great font combinations.
Just wondering....it's not totally clear to me if there's a way to, say, edit the colors in the existing palettes that Ollie is shipped with--or create a new one...
It looks like the values for each of the respective palettes are set in the "/styles/blue.json" file for the Blue theme for example and I can edit those directly or create a modified copy and drop it in the styles folder and that seems to work for now. But isn't this likely to be over-ridden at the next theme update?
Is anyone else having issues with text being small on their website frontend but large in the editor? My text size on both isn't matching up. Some of my custom CSS is also only working on the frontend of the site and not in the editor.
Once I change my colors and typography, am I able to save it as a new preset?
I'm unclear about the stylebook. If I make a change to the paragraph text by clicking that area of the stylebook and chang the font used for paragraphs and then hit save, it changes the font on the site. However, if I go back to the style cards and select one of them, that change I made is now gone. Same thing happens when I try to save individual styles. Any change I make is overwritten if go back and select the style theme I just made the change too. What am I doing wrong? thnx!
Nice! Mike please show us how you built Ollie patterns ike your first video
I'll definitely be doing more of those videos now that there's a way to design and save patterns in the WordPress interface. Stay tuned and subscribe!
Awesome 😍@@OllieWP
Excellent content!
Are these more specific settings under typography, colors and layout different depending on what block theme is being used or is that part of the settings WP core? And how about the 'Customize the appearance of specific blocks and to the whole site' setting below that ... are these settings for native WP blocks and the currently active theme as well as any other third party blocks from a plugin?
How about global styling for patterns - the reusable block is now called synced block but carries the same content in each instance where it is used, while also showing the same style. But how about wanting to create and save patterns that have particular styles but different content? Is that what will be partially synced patterns, which is not part of WP core yet? Is there an alternative way to have this today? I guess this is where the traditional page builders on top of WP have had their own solutions, but with FSE block themes going forward, I wonder how global styles for patterns carrying different content in different parts of a site can be implemented. This is still all very new to me, so maybe I am missing something.
There are a ton of typography options available for all of the core blocks. They are usually pretty consistent from block to block. As far as 3rd party blocks, I'm not entirely sure! I'll have to test that. I would guess if they are using core typography settings for their styling, that the global styles could tie into that.
You are right, partially synced patterns should be coming in the near future. There's not a great alternative right now, but you could try a little trickery with synced patterns and detaching. This will be hard to explain, but I'll try! (Maybe I should make a video for this.)
First, you could create a synced pattern as a placeholder. Design it how you want it to look on every page, with the content you want in there. Then, replace the content (headings and paragraphs) with small chunks of synced patterns with just the content. So your heading would be a synced pattern, and your paragraphs would be a synced pattern. This way, you could insert your placeholder pattern on each page, which would retain the overall design of the pattern, but you could detach the content patterns (heading and paragraphs) as needed and customize the content.
So basically, use a placeholder synced pattern, and use synced patterns and detaching to customize the content as needed. Check out my Patterns video that was just published! It shows how to work with synced patterns and detaching. ruclips.net/video/w8DehSH1_PA/видео.html&ab_channel=OllieWP
I didn't see any options for adding button hover colors (and effects) with the native core button block. Also, was trying to find border settings for columns/stacks. Like if I wanted to add a bottom border to a CTA block etc. Maybe I've overlooked something? Styling settings seem limited at the moment without using a plugin like Kadence Blocks.
Hi there, hover colors will be coming to the core buttons soon. As soon as they land, we'll support them in Ollie.
It's definitely possible to add a bottom border. Select the group/stack, then in the block sidebar, click the Styles tab (half filled circle next to the cog). Then, on the border settings, click the "Unlink sides" setting, which will bring up a box where you can add a border to only one side.
You shouldn't need Kadencee if you are using a well-made block theme. Usually it's just a matter of learning all of the new design tools available and how/when to use them. It takes a little time to learn, but it's worth it in the long run.
@@OllieWP Hi, i figured out the border settings, thanks! Is there a way to add a box-shadow to blocks without CSS in core? And that is great news about hover colors :)
Box shadow is also coming soon! Here's a post describing how you can use them in beta now: developer.wordpress.org/news/2023/01/using-the-box-shadow-feature-for-themes/
I'll wait until the shadow component is merged (github.com/WordPress/gutenberg/issues/44651) and then I'll design some nice shadows to ship with Ollie.
The "we" stuff drives me nuts, but I like your theme and tutorials a lot. But "we" aren't diving down into a color, YOU ARE.
Sorry it's not your style! I just looked at several tutorials like this and they all use "we" and not exclusively "I." Sounds more natural, in my opinion! Inclusive of the audience, who may be following along on their sites.