GeneratePress Improvements - Global Colours, Dynamic Typography, Flexbox Grids and SEO improvements

creating a custom global color palette and assigning it to all elements in your site and being able to update them globally has always been the dream of producing something using wordpress with generatepress and with the latest alpha release of generatepress that becomes much more of a possibility and and very easy possibility with the option to provide a global color palette in this short video let's have a look at how these color color features can be implemented in a nice and easy way and what's coming up with generate press in the next version now this version is not is still an alpha release so on this side i'll post all the links below the video this is an alpha release and it's not to be used on production websites um but you can actually download this alpha release and this affects generatepress the free version so this global color palette is available through generatepress um the free version of generatepress and not just the premium version now what is generatepress generatepress is my go-to theme for all the websites that i built for myself and for all my clients um it has an excellent rating more than a thousand reviews five star reviews three million downloads and eighty thousand happy customers it's the fastest team out there in terms of page size loads less than 7.5 kilobytes and no dependencies as no javascript dependencies nothing this is one of the the best themes out there and it's fully accessible to boot you if you go for the premium version you get a lot more features you generate press premium makes this a complete builder as in it becomes a block based builder along with the wonderful generate blocks which allow you to [Music] do a lot more and there's more improvements to the degenerate blocks as well coming in this alpha release so let's have a quick look at what's what's happening with with generate press as such um and you get all of these features available for like a 60 price per year or for a one-time fee you can use this on up to 500 sites so a wonderful uh plugins a wonderful set of a wonderful theme and a wonderful set of plugins all by thomas byrne and his group at generatepress so let's have a quick look i have two sides here one with the current version of generatepress and generate blocks as is and another with the updated alpha versions uploaded here as you can see all the plugins here are the alpha versions whereas the plugins here in this car other installation are all the current versions they are the most up-to-date versions i have an extra plug-in here but i'll explain why that is so um and this is our current setup so the theme is i've removed all the themes the theme is currently just generate press current version in this version and uh house um so i've set up two local sites the other one is also generatepress but here we have alpha version so alpha versions of all the plugins on this one i'm just calling it generate press new and this one is generate press and i've created a realto website um using generated press premium and the only difference being that we've just updated all the plugins to the new version of generate press now what does global colors bring in now previously if i needed to set colors across generate press across my site i would go and i would be editing my pages i'm going to go edit the home page let's go there and let's do the same for the home page now this is an amazing page but let's see how we would have edited this contents so if i wanted to i could have gone here and added a button or added a styling or some colors now let's imagine that i needed to change the color of these buttons i've decided that my client has come to me and they're saying basically that the buttons now need to match the brand colors and the brand colors have changed for example currently the brand color is is this dark bluish and the other other opposite color for that is this gold color so let's imagine that we've decided to go for a change in colors completely in which case um i would have to basically go and update almost all my templates all my everywhere i would have to do this update in multiple different locations for example here i would have to come in and change this color and you notice the colors are not meeting my brand now to meet my brand i would have had to go to um and added a plugin and i would have had to manage a color palette here which would then update my color palette so i needed to manage things multiple different ways to make these changes and further if i needed to customize my color palette wasn't an easy option and you'll see i'm still loading the default colors loaded by generate press not my current color palette i would have had to set each one by this or i would have had to use that color palette plugin and set it up so it causes several difficulties and this is this has been my request to tom for quite a while now almost three years ago i raised a request but he's been following up the the generate press the is really really good at coming back to you with uh improvements all the time and this is a great great improvement personally i i find this will impact my workflow a lot and i find this really really useful that's why i just wanted to share this quickly so what do we what do we do so let's imagine that the color palette has changed now as part of this change or this alpha release now this is not in production i'm just using this on a dummy local local installation as you can see i'm on localhost now the color palette has completely changed in the past our color palette used to um colors used to be the space so you you wouldn't even have a color palette a global color palette you had to set it in another additional plugin now you get a global custom color palette and you can assign this color palette to every element and every item and further to boot that with that the generate blocks which is the add-on plug-in that provides this that makes your theme into a block based builder also is fully integrated with this color palette so let me show you what what is possible so let's imagine that i wanted to change the overall color right you notice my um default custom color that a bit accent color that i'm using throughout the site the accent color is this blue it's used in headings it's used throughout right so i want to improve that i want to change that my marketing team has come to me or my client has come to me and said basically let's change that i'm just going to go and change this and let's imagine that they've changed it into like a purple right some kind of this bright purple and you notice that change took place almost immediately in most places so what happens let's have a look in the front end how much change that has brought in in in one fail swoop it's updated everywhere everywhere that i've actually used that color it's going to update throughout and it's also updated my footer elements wherever i've used that color it's just updated throughout the site i know this looks ugly but this is exactly what i what we mean by global color palettes so you can not just assign it to certain elements you can assign it to any elements and in one click i've changed it right so i'm not happy with that i need to set it back it's as easy as going to your global color palette and changing it back to and the benefit of this approach means that you can just update once and have everything updated in one go similar to the global color palette we're also getting dynamic typography in this version in this alpha release of generate press so what does that mean so basically when we go to generate press into the customizer itself you now have an option uh when you go into customize and we're going to general let's first turn on dynamic typography yeah let's do that and once we do that i'll just hit publish and yes there is a slight difference in my typography so that they do mention that you just have to be careful with the dynamic typography the other thing i'm going to do is also underline all the links in um not on hover basically so that um any links in my site i want them to have an underline and i'll show you why that is important because um that's it that's a pet hate of mine at the moment with the way generators worked and i used to use a lot of complex css to achieve this let's let's go back so when i now go to typography and i compare that to typography on generate press as usual you will see that um the font has been set to montserrat as usual and let's have a look so it's been set to montserrat and and you get some some of these amazing options where you don't have to worry about fonts when you particularly resize so if as i go scale down the fonts scale down properly as well i can i you have these options now a lot more control over setting type so they talk about a all of these features here so in the typography you can set all the google fonts as well as your own fonts and also the typography manager has had lots of improvements here so if i need to get it back this looks a little slightly bolder um the monster at regular so if i went with the bold version or just the regular i'll just go with the normal and but i want in terms of my headings yeah so the heading twos in particular here i want them to be not default but bold there we go so now we brought back the the look and feel that i wanted i also want to do the same with my heading level ones make those bold now this does throw some of the templates but as soon as we go get out of this alpha release we'll be able to import entire sites with all these settings um the correct way i'm really keen to you start using some of these features um the other feature that um is barely mentioned here was the underlining of links now on my own site i've had to add custom css several lines of custom css to ensure that the links are always underlined it's an accessibility feature because if your contrast between your text and your link is not high as with this this particular theme color this particular design calls for a a style or a link color which is very close to the body text as you can see this color is very close to your body text color which is one to two is very close to this so if i was to create a link which i will do now let's see see how that looks so i'm going to edit this page i'm going to create a link to my i'll just say click here for styles right um and let's do this on both sides um both versions so the current version um i will go here edit this page so this is my this is the current version and i've already created a link click here for the styles page let's do the same here i'm going to select this go okay let's just look for the styles page and link to it and you notice straight away it's underlined for me i'm just going to hit update whereas this one even though it has the it i've applied the necessary styles um this one is not unless i add some custom css it's very difficult for me to underline all the links automatically i'll have to ensure that i go here select this go in and possibly go underline right and even that feature is not available quite easily here it's quite quite difficult to set this actually the only way i've been doing it is on my side is by applying a custom css um to make that work and as you can see it doesn't work in the editor for me but i know it it's going to work on the front end but i've added the required custom css using the same using again tom's plugin one of generatepress's plugin to add the custom css and you probably don't want to do this so this makes it a lot easier to manage as well as less css to load and also works pretty well right so that's the second third thing is underlining links another feature which goes hidden um which is quite completely hidden but it's very very essential for both seo and accessibility purposes is um what's what what's known as dynamic um html attributes um yeah so as you can see the navigation has been given a label of toolbar and this throughout the site it's found 54 such area labels i'm just going to go look for area labels um wherever there's pop-ups or drop-downs in the menu it's it's highlighting all of this is telling um is telling devices such as screen readers what the intent of that particular content is and makes them more understandable and this helps both search engines as well as users who have difficulty uh visual difficulties as in when when screen readers read this out these this area labels actually help in in area levels are a big help okay so that's a another quick look at another feature called dynamic html let's also have a look at what else is coming through so in terms of other features coming through if we go to the generate blocks side of things they've come up with flexbox finally so css flexbox with ie11 being dropped the entire grid layout is getting the flex feature with this new version of generate blocks generate blocks alpha release they finally implemented css flexbox into the grid layout now grid is one of four blocks provided by the generate blocks plugin it's an amazing way of handling um handling blocks rather than come up with 50 different blocks or like other block plugins are providing at the moment for every scenario possible and then thereby making your site so heavy that it becomes slow generate press and generate block steam approach this with just four blocks now this is a the template library is a premium feature but otherwise you have a block to create layouts called grid a container to organize your layouts and color them and style them a buttons block to manage buttons basically and a headline block handles rich text and icons so you can create icons with this but let's have a look at the grid block and what it brings so when we want to lay out things you would use grids now with this version of grids let's let's see let's create a simple grid let's create a grid with um you could go half and half let's go something like this where i have an item on the left um so i have a grid item on the left and when i select that i notice that it's 25 and the item on the right is 75 try to do the same thing in um in the in the previous version so i'll go to the sample page and let's just delete what we have here i'll try and put in the grid and this is what you used to get um let's go there notice um you don't actually see the boundaries of the actual grid with this approach with the tinier buttons you can actually see continuously until you start adding things you know exactly where the grid is this used to the previous version used to cause trouble sometimes when you didn't know where you were dragging your things into now you know exactly where you can drag things into to create your layouts the other thing you'll notice is with the previous version with one of the items selected you now you now get the flexbox options previously if i selected we only had um plain css options um and percentage based grids the with flexbox you can do much much better let's have a look at what this what what what let's look at what is what this means for us so i'll just go and choose an image to set this up i'll just choose an existing image let's just pop in this and we'll add some content i'll just go um with a heading i'll just go heading and and we'll also add ins adapter we will add some piece of text uh let's see just copy paste a bunch of text a couple of times let's do that and let's do that again okay so let's do the same on this let's go choose an image and we'll choose the same image and you'll notice that there's some padding automatically being created now this causes more trouble than actually uh benefits sometimes so i'm just going to go this is my heading what did we call that there let's just call it heading here again getting old and um i'll just put in a paragraph and that will add a couple of paragraphs um same as here the fonts are slightly different that's okay now with the old way of doing things if i navigate up to the um the grid i have a horizontal gap of 30. i can still set that in this new way so i can go horizontal gap of say 30. there we go nice now the key difference is going to be how how things get managed as you scale things up or down so if i go to the tablet mode or the mobile mode compare that to the tablet mode and the mobile mode here and you might want to say i don't want to at this tablet mode notice how small the image has become i really don't want to do it this way one option would have been to set the container size and go okay i want to set the container to 50 percent and this container to 50 and all that could be quite difficult and that's all you could do in this old version in the new version you can let um you can you because it's auto auto width you can set things known as the flex flex box right so you can say you can allow things to grow and shrink automatically so let's do that and stuff so you can actually ensure that the the it scales well so you could go i want to grow and shrink and you can also set a basis this is where you would go don't go beyond a certain size so you can set this to like pixel dimensions or a percentage-based dimensions where regardless of what size it's going to stick to that size here in this case because we've set it to flex grow it's actually taking up the full room but we can set it to flex um only to that basis so i can say 200 pixels or 300 pixels um not three 300 pixels and and it will fit that so you can say don't shrink beyond a certain size don't grow beyond a certain size or actually grow and just take up whatever room is available and this makes it a lot more efficient and as well as fluid and becomes such a powerful tool in creating some complex layouts i'm so looking forward to you building stuff with flexbox finally and the magic of flexbox is as you can see here in this explanation that they're providing where as you scale and you don't want the image to grow shrink beyond a certain size by using this shrink option you would set the string shrink to not allow it to shrink beyond a certain size or you could set a basis so that it just fixes to that those dimensions that you want the other advantage with this new layout is that you can actually see where you are dragging things into so for example if i was to create um another grid here quickly i'll just go and i'll just go add one more grid item i'll just go to the top and get out of here i'll get out into desktop mode um and then i'll add one more grid item for example and you'll see when you add a grid item these dotted lines indicate where exactly you need to drag an item into so it was previously difficult to just drag things in you didn't know where you were dragging things in now am i dragging it to the bottom which means it goes here or am i dragging it into this particular column or into a container here like that so i can just click and drag into a container or even a paragraph piece of paragraph just click and drag it into that container there we go and so these borders help us do that also because grid grid items can now have auto bits um so you don't have to worry too much about defining things the color color picker improvements have also come in um and and what what that means is basically in the past for example if i wanted to create a buttons block search for buttons which is the other blocks so this is one of the four blocks provided by generate blocks free premium provides you with template library as well but if i just go to buttons and i add a button i can now go and get the theme colors rather than any color so i can just use okay i want my button to be styled this way and on hover i want my button to inherit this color and so now my button is going to be nicely styled so if i update this and view this page with just a couple of clicks we have like a nice looking button which is still in my brand and keeping to my brand colors um and so very very easily done um this would would be quite difficult otherwise you need to just remember your colors and select your colors or use a color palette uh provide a plug-in an additional plug-in that needs to be loaded and further advantage is generate press has become even smaller it used to be around 30 kilobytes it's now 7.5 kilobytes fully loaded which is awesome um so do give it a try i would highly recommend so but try it out on a temporary site and this should be released this should be releasing in shortly after all the testing this will be released and do play around with generate press if you like uh please give this a video a like and do subscribe also feel free to download generatepress i'll leave a link to generate press premium as well as generate press generate blocks with this toolkit you'll be able to build anything you want

Channel: VJ Design

Views: 380

Keywords: WordPress Tutorials

Id: vlspE87H4qI

Length: 26min 41sec (1601 seconds)

Published: Fri Sep 10 2021