No video

Learn how to design WordPress patterns with the block editor and the Ollie block theme

  Рет қаралды 11,069

OllieWP

OllieWP

Жыл бұрын

Download the free Ollie block theme for WordPress here: olliewp.com
For the past few years, a bold initiative has been underway to modernize WordPress with a powerful content and site editing engine, and now, it’s here.
Instead of building your site with code, you can use the new site editor to build your site with blocks, pattern designs, and a fully-customizable design system. You just need a WordPress block theme to get started.
That’s where Ollie comes in. Ollie is a powerful new WordPress block theme that enables easy-peasy site building within the native WordPress interface, no page builder plugin required.
Best of all, Ollie is super lightweight, performant, and its pixel-perfect, responsive design system ensures your websites look great on all devices. Oh yeah, and it’s totally free! Learn more about the Ollie block theme and download it at olliewp.com.
In this tutorial, we'll build a WordPress pattern design from scratch using just the WordPress editor and the Ollie block theme.

Пікірлер: 68
@dodgewagen
@dodgewagen 2 ай бұрын
Beautiful Theme and Great tutorials!
@dawnelise1528
@dawnelise1528 Жыл бұрын
When I did a search for Ollie theme a site came up selling it for $75 with a few templates added. And a simple database so posts can work better, I assume. This pisses me off. I would like for you to sell something with posts added and a tutorial. You made this fantastic theme and should monetize it, because a lot of us would love to pay YOU, but need a bit more help. Or sell a version that integrates with the HubSpot CRM like StudioPress did once. Thank you so much for this AWESOME THEME!
@omerta3393
@omerta3393 Жыл бұрын
Nice job please create more tuts
@OllieWP
@OllieWP Жыл бұрын
More on the way! Thanks for watching.
@ChristianBehrends
@ChristianBehrends Жыл бұрын
I'm excited to use Ollie for my projects. You're getting some traction for sure with Jamie and Paul talking about you.
@OllieWP
@OllieWP Жыл бұрын
Hey Christian, thanks for that! I'm very grateful to have rockstars like those two talking about Ollie. It's an exciting time in WordPress!
@RoufaYouakeem
@RoufaYouakeem Жыл бұрын
This is great! I used to do a lot of custom Wordpress development before Gutenberg and even though I was super exited when it was released I always found it lacking. This looks like the missing link! Great job, man! I would love to see some tutorials on how to extend Ollie and add our own components/blocks.
@mikemcalister3781
@mikemcalister3781 Жыл бұрын
Sounds good, Rafael! I'll keep that in mind as I create more videos. 😎
@AndyFeliciotti
@AndyFeliciotti Жыл бұрын
Heck yeah Mike!
@maxziebell4013
@maxziebell4013 Жыл бұрын
Cool intro… theme also looks spectacular!
@HaifengZhu-pn3uq
@HaifengZhu-pn3uq 8 ай бұрын
I never heard of Ollie before, but from the tutorial it is a cool theme
@ItisNigel
@ItisNigel 11 ай бұрын
GOLD 🥇 Love these short vids on how to build patterns along with Jamie Marsland's 30min to copy a web page. Ollie is superb 🤓
@OllieWP
@OllieWP 11 ай бұрын
Thanks, Nigel! I'll be doing some more of these shortly! I actually have a few recorded, I just need to edit and publish. 😎
@juanra.ortizp
@juanra.ortizp Жыл бұрын
Great! Thank you. Ollie is amazing. These kind of tutorials are wonderful, please keep it going.
@OllieWP
@OllieWP Жыл бұрын
Stay tuned, more tutorials on the way!
@jaguar6901
@jaguar6901 7 ай бұрын
We need more videos how to design digital product store just with block editor❤
@mdazhardware
@mdazhardware Жыл бұрын
Great light weight wp theme.
@RavishankarAyyakkannu
@RavishankarAyyakkannu 11 ай бұрын
Very useful video. That OllieWP is automatically responsive is pretty impressive. Great job!
@ValerieLynn
@ValerieLynn Жыл бұрын
Good intro to building with Ollie.I like the faster pace; I can watch first to get a feel for what's happening and then if I need to, I can go back. Will you cover saving patterns also?
@mikemcalister3781
@mikemcalister3781 Жыл бұрын
Hi Valerie, thanks so much! Yup, I certainly will be covering saving patterns. Stay tuned!
@georgivasilev3867
@georgivasilev3867 Жыл бұрын
Very interesting. I will try to combine Ollie with Kadence blocks.
@webdoze
@webdoze Жыл бұрын
Nice tutorial!
@steveharmancambridge
@steveharmancambridge Жыл бұрын
Fantastic, this was great!
@johnhaynes9910
@johnhaynes9910 Жыл бұрын
Excellent, more please :)
@visualmodo
@visualmodo Жыл бұрын
Truly good work!
@aloneinfiction4101
@aloneinfiction4101 Жыл бұрын
You explained it so perfectly, thank you!!! More tutorial please!!!
@OllieWP
@OllieWP 11 ай бұрын
Stay tuned! More on the way with the full workflow of saving patterns to your theme with the site editor.
@biomediachanel
@biomediachanel Жыл бұрын
Congratulations! Ollie looks honestly very promising. Performance is a priority for me. I tested your landing page with page speed insights and I found that for now it scores 77/100. I assume that this is due to the fact that ollie is still in early development and it will be improved in the future. My question is: In the future, can we expect 100/100 website performance from ollie at the level of generatepress or similar performant and light weight themes? Thank you so much! I'll be following your progress closely!
@OllieWP
@OllieWP Жыл бұрын
Hey there, thanks for checking out Ollie! Keep in mind that the Pagespeed Insights isn't a perfect tool and you have to read the results with some context. It looks like it's dinging me for some of the image sizes I'm using (which I'll fix), but that wouldn't affect your score once you replace the images on your site. It's already scoring 100/100 on many tests, so this is circumstantial. Block themes are inherently much faster than classic themes for many reasons, and performance is always top of mind when I'm building Ollie.
@biomediachanel
@biomediachanel Жыл бұрын
@@OllieWP Ok, I totally understand it. And to go further with website performance optimization there are a lot of things that can be done aside from the theme itself, such as using a better hosting, setting up a caching plugin such as wp rocket, using .webp images and so on. I made the test again and this time it scored 90/100 on mobile and 80/100 on desktop. This is very good result taking into account it's one of the first iterations. There's still some room for improvement with lcp fid cls but I'm sure you will be able to figure it out. I think ollie has a lot of potential and I definitely see it one day will becoming something big. I will be watching your progress closely and testing out ollie in some of my projects to see if I can give you some constructive feedback. Keep up with the good work!
@aaronbradshaw7256
@aaronbradshaw7256 Жыл бұрын
This looks awesome. The only thing preventing me from using it right now is there appears to be no dynamic data through ACF integration.
@OllieWP
@OllieWP Жыл бұрын
Hey Aaron, I don't think there's anything in Ollie preventing it from working with ACF. If there's something specific, let me know and I'll get it fixed up!
@nousssh9455
@nousssh9455 Жыл бұрын
Thanks. Learned some layout tricks with Group block. Also I was not aware of block spacing..
@OllieWP
@OllieWP Жыл бұрын
Awesome! The group block and block spacing are both very powerful little tools!
@morizanova
@morizanova Жыл бұрын
Waiting for another video and FSE global styles
@adriablancafort
@adriablancafort Жыл бұрын
Great work! Is it possible to add css to style some elements? (for example make menu links have button style)
@OllieWP
@OllieWP Жыл бұрын
Hey there, yup you could certainly do that. You could either add a button class to a menu item, or you could even add a button block to the nav area.
@adriablancafort
@adriablancafort Жыл бұрын
@@OllieWPGreat! Thank you.
@UltimatePaperMache
@UltimatePaperMache Жыл бұрын
Hi Mike. I have a website that has been up for many years, with hundreds of posts. New content is added daily by my readers, so I don't think I can redesign it on a staging server - but I'd really like to move from Elementor to blocks. If I switch from my GeneratePress theme to Ollie, will my current Elementor posts maintain their current design until I can change them, one at a time?
@OllieWP
@OllieWP Жыл бұрын
Hey there Jonni, the transition away from Elementor is probably going to be a little tricky no matter what block theme you switch to, including Ollie. I wouldn't suggest changing the theme on your live site because there are so many things that could go sideways, depending on what Elementor features are enabled, etc. If possible, I would consider hiring someone to help transition your site to a block theme. Although it will be a bit of a transition, you will be free from the page builder plugins, and you'll be able to edit your site much easier going forward. Plus it will probably be a lot faster!
@梧桐小讲堂
@梧桐小讲堂 Жыл бұрын
Mike, so good block theme! By the way, it seems that the email subscription feature is not working. Can't get any confirmation email.
@OllieWP
@OllieWP Жыл бұрын
Apologies for that, I'll take a look!
@HermanSpanjer
@HermanSpanjer Жыл бұрын
@@OllieWP I just tried again, and also no confirmation email...
@JeffFinley
@JeffFinley Жыл бұрын
How does Ollie compare with Blocksy? Does it work with Woocommerce?
@OllieWP
@OllieWP Жыл бұрын
Hey Jeff, I haven't used Blocksy, so I can't compare. I also haven't really tested it heavily with WooCommerce. Right now, I'm focused on making Ollie a great theme to build your standard website with. To do WooCommerce really well, you basically need a theme that's well optimized for it. Maybe I'll do that one day with Ollie, but for now, I'm starting simple!
@Drugvigil
@Drugvigil 4 ай бұрын
How could I enable downloads after collecting emails from visitors?
@techbyfinne
@techbyfinne Жыл бұрын
Great theme !!! Will be using it on my new site :) Is there a child theme for it?
@OllieWP
@OllieWP Жыл бұрын
Yup, you can download the child theme on Github: github.com/OllieWP/ollie/releases/latest/download/ollie-child.zip
@techbyfinne
@techbyfinne Жыл бұрын
@@OllieWP perfect 💪🙏
@susanpearson-creativefibro
@susanpearson-creativefibro Жыл бұрын
I am in the process of switching from Divi. I went with Spectra One but this looks much easier to use. If I switch will I loose the content I’ve made in Spectra or can I save the templates and bring them in to Ollie?
@OllieWP
@OllieWP 11 ай бұрын
Hi there, I don't know Spectra really well, so I can't say for sure. But unless it's a standard WordPress block theme, I don't think the template will easily transfer over to Ollie. Ollie ships with its own templates. You may be able to add them via a child theme though.
@MeemBeen
@MeemBeen Жыл бұрын
So I have a question as a beginner with WP themes. A lot of other tutorials and such that build out themes for WP talk about how the "content" should be entirely separate from your "theme" that way there's no confusion over where to change text or other chunks of content. Clearly in this tutorial there was a lot of content put directly into the theme, almost using the theme editor moreso like a visual webpage editor, and injecting content directly into the theme. Was this moreso just a stylistic choice for a short-ish youtube video to show what the theme is capable of? Or would you recommend building your content right into the theme editor if we plan to use Ollie as a theme? Really hope this doesn't come off with any sort of shade or anything like that--truly just a beginner trying to harmonize lessons from a dozen different YT vids. An addition to this question too is; if the user has no intention of ever adding blog posts and is just using WP like a static site builder, does any of that even matter?
@OllieWP
@OllieWP Жыл бұрын
Hey there, thanks for the question. This is one of those topics where there isn't a right or wrong answer, especially as the editor evolves and content and design are more intertwined than ever. So it really depends on your use case and what kind of sites you're building. Patterns are pre-made designs, and those are meant to be inserted into posts and pages. So right off the bat, you're injecting design into content. That seems to be the entire aim of the block and site editor. For personal sites, landing pages, small business sites, this probably isn't something you should have to worry about. However, if you have clients, they may have a more strict separation of content and design, and for that reason, they may not be interested in fully utilizing the site editor. Those projects might be better suited for classic PHP themes. Ollie is definitely a modern theme though, and that means it's going to lean heavily into the new WordPress, and that means we're also stepping into a new paradigm of how to build with WordPress!
@inlandbott
@inlandbott Жыл бұрын
Great. Theme. Does anyone know how to change the template for a specific page? I see this on the Ollie docs page, but can't find it anywhere when editing a page "To create the pages you see on the Ollie theme demo, simply insert Ollie’s full-page patterns onto any page, and apply the No Page Title template via the editor sidebar."
@OllieWP
@OllieWP Жыл бұрын
Hey there, can you be a little more specific what you're trying to do? Happy to help, but I'd like to know a little more about what you need first.
@poppingjaz
@poppingjaz Жыл бұрын
Do any other FSE blocks work with Ollie?
@OllieWP
@OllieWP Жыл бұрын
All of the WordPress core blocks work with Ollie! The whole theme is made of blocks. 😎
@mikelittlezed1
@mikelittlezed1 Жыл бұрын
Useful to see. Thanks. The audio being out of sync was a little distracting though.
@OllieWP
@OllieWP Жыл бұрын
Hey Mike, where are you seeing the audio out of sync? I'm not seeing it on my end, but would love to fix it if it's a problem!
@mikelittlezed1
@mikelittlezed1 Жыл бұрын
@@OllieWP ​ I have tried it in Firefox, Chrome, and Safari (all on a 2021 Macbook Pro (M1). All were out of sync when you are full screen. It is still probably out of sync when you switch to the secreen capture, but the little video in the corner is too small for it to be a distraction. It may have been be slightly better on Safari, but even there it is still out of sync. I used to have the problem when I recorded videos on my external DSLR at a different framerate from my computer and screen recorder. Even today, when I use QuickTime to record video with an external camera and external mic it looks out of sync.
@AuroobaMakes
@AuroobaMakes Жыл бұрын
@@mikelittlezed1 @OllieWP Just as a note, I think this may be a KZfaq glitch. It was out of sync for me at first but a few hours later, perfectly synced, tested in Chrome/Firefox/Safari both times as well.
@slingsandarrows
@slingsandarrows 9 ай бұрын
Does anyone know why I can't seem to add custom fonts to Ollie? I've tried using plugins and manually. However, when I go to the style editor the custom fonts do not show up.
@OllieWP
@OllieWP 9 ай бұрын
Hey there, a lot of the plugins out there for adding fonts don't seem to work with block themes unfortunately. Soon, you'll be able to change the fonts right inside WordPress. Until then, you might want to use a plugin like Create Block Theme to add fonts to your site properly. You may also want to use this in conjunction with a child theme. Here's a quick tutorial on managing fonts with the Create Block Theme plugin: learn.wordpress.org/tutorial/manage-your-block-theme-fonts-with-create-block-theme/
@slingsandarrows
@slingsandarrows 9 ай бұрын
@@OllieWP I used the Create Block Theme plugin and my local fonts uploaded correctly. However, when I went to the style editor the fonts did not show up. I’m using the Ollie child theme.
@wordpresstipsntools960
@wordpresstipsntools960 Жыл бұрын
Disappointed to be honest, the title of the "how to design WordPress patterns..", where actually you designed an element and that's it. I was expecting it to teach or tell us about how to create "WordPress Patterns", or at least how we can save an element as a pattern in the WordPress Editor - like we are able to create and store design components in Elementor and other similar Visual Builder Tools. Am I write?
@OllieWP
@OllieWP 11 ай бұрын
This video was created before there was a way to save the pattern to your site with the WordPress interface. Now you can do that, so I'll be making some new videos of the full process.
@haskelbosack8475
@haskelbosack8475 Жыл бұрын
Promo_SM 🍀
Beginner's Guide: Switching to a WordPress Block Theme
16:57
Jamie Marsland
Рет қаралды 10 М.
Llegó al techo 😱
00:37
Juan De Dios Pantoja
Рет қаралды 58 МЛН
Clown takes blame for missing candy 🍬🤣 #shorts
00:49
Yoeslan
Рет қаралды 46 МЛН
Double Stacked Pizza @Lionfield @ChefRush
00:33
albert_cancook
Рет қаралды 113 МЛН
ОБЯЗАТЕЛЬНО СОВЕРШАЙТЕ ДОБРО!❤❤❤
00:45
How to Properly Layout A Website (For Beginners)
14:50
The Website Architect
Рет қаралды 552 М.
Learn how to supercharge WordPress with @wordpress/scripts
22:42
Marcelo Vieira
Рет қаралды 1,5 М.
Creating a WordPress Block Theme - Creating Block Patterns
21:29
Jacob Martella
Рет қаралды 1,1 М.
Top 20 Most Popular WordPress Block Themes
58:42
David McCan
Рет қаралды 3,3 М.
13 Things To Remove From Your Website Immediately
12:33
Orbit Media Studios
Рет қаралды 301 М.
Are You At Least at Level 4 of UI?
10:57
Malewicz
Рет қаралды 92 М.
WordPress Gutenberg - The Ultimate Guide
27:59
Jamie Marsland
Рет қаралды 48 М.
2 Ways of Building Websites
8:37
Sajid
Рет қаралды 79 М.
Llegó al techo 😱
00:37
Juan De Dios Pantoja
Рет қаралды 58 МЛН