Plugins and wp core need updating as they contain bug fixes and security fixes
What are the risks?
If you haven’t updated for many months, Don’t worry too much. The plugin updates should still work.
The risks are more when plugins authors do not release new updates and the plugins become “abandoned” as they plugins are more likely to be exploited.
Glitches during the update process or plugin conflicts with the specific versions of plugins can happen. Conflicts will require you to reinstall the previous version of the plugin. Glitches will require a manual update of the plugin or simply try upgrading again.
Key Points for Safe updates:
Always backup your plugins directory and database before performing the updates.
If your risk is high, update everything on staging/development server before updating on live server to ensure no conflicts
Users are very important. These are people that have access to your website so you want to see yourself in here.
Usually administrator is the correct role for you when we’re adding a new user.The options are very simple. We set a username. The email address is important because an invitation is going to be sent to the user. You don’t have to set that password. You can let the user set their own password.
For instance if I just create a test user for pixelstorm.
I don’t have to fill out the name, I don’t have to fill out lastname, I don’t have to fill out website
Sending users an invite to WordPress
This checkbox is to send the user notification. So the user is going to get a notification in their email about their account at. The user will get a link to login. The user will be able to set their own password.
Which is best practice as you don’t want to know their password.
What are the WordPress user roles?
Another important aspect here is user roles. Administrator is the most powerful user role. In a single WordPress website install as opposed to a multi-site install. The privileges slowly get less powerful so let’s just go through these roles quickly so I’ve just brought them up in the WordPress.org articles.
The administrator is someone who has access to all the administrative features.
the Editor is someone who can publish and manage posts including the posts of others.
The author is somebody who can publish and manage their own posts.
Contributor is someone who can write and manage their own posts but cannot publish them.
Subscriber is someone who has only you can only manage their profile.
I’ve gone ahead and created the new test user as a subscriber.
Changing a users permissions or access level.
Go to all users. I see this screen here which displays all the people that have access to the website so if we wanted to configure someone’s settings to be to change their user role I could just go to edit and change their user role.
Switching on the WordPress toolbar – Enabling one of WordPress most intuitive features.
Another really cool setting that I find sometimes is switched off. I find that the people that have this tool bar here switched off have the most trouble with WordPress. I think this is a really cool feature, really intuitive. What this does is when it’s switched on and it’s switched on for me at the moment. As I’m logged in as the administrator. What this does is it gives us this toolbar at the top here.
Why this is handy is because say for instance, I’m on the hello world post. I can tell straight away that I’m editing a post. I can go edit post and that’s gonna take me straight in to the hello world post. Once again I can go to view post and that takes me back to the frontend. That’s the way I like to tackle it. I can go in to the post on viewing and then I go back out and that’s quite handy for me.
It’s also really handy say for instance, if you’re on a page it says “edit page” now so I can edit the sample page. That comes in really handy especially when you’re dealing with things like custom types. It’s always handy to know where you are in the scheme of the website.
Deleting users and attributing the content.
Another important part of managing users in WordPress is deleting users. Now users usually have some sort of content that they’re responsible for you’ll see that this user here is responsible for one post. If we try delete this user it’s gonna ask me to attribute the content to another user. I can just attribute to the remaining user and then confirm the deletion of the user.
In this video we’re going to explore another page builder. The WP Bakery Visual Composer. The visual composer is super popular. One of the main reasons it’s so popular is because it comes bundled with many WordPress premium themes.
Support for visual composer when using a premium theme.
A premium theme that we have used a lot in the past for building client websites has been Fortuna. This premium theme comes with the visual composer plug-in bundled into the zip file when you download the installable theme files. The version of the visual composer plug-in that comes with your premium theme is the free version so you don’t get many of the features that list that are listed here. you may get a lot of elements that you can put into your page you might get any templates or add-ons. you’ll get the theme builder obviously and you get a year of updates but the way this works is your premium theme say for instance, Fortuna we’ll be releasing new versions of this theme which you are entitled to download as long as you have a license a valid license. Every time you download your latest theme you should be getting a new release of the visual composer as well. That’s how that would work but you won’t get support directly from
visual composer through your theme that your support will be based entirely on your theme. You will have to contact your theme developers to get support rather than contacting the visual composer plug-in WP bakery people.
Now, once you have installed your premium theme or you’ve installed your free version of the the visual composer plug-in. We can start building pages. let’s launch straight into this and see how their visual composer works. Im especially interested to see how it stacks up against Gutenberg.
Getting started building pages with visual composer.
Right now we’ve got Gutenberg and visual composer installed. To allow the WP bakery to be your primary builder you just click this button here and this will take you to a new screen. you’ve got one more click to go. now you need to click this button ‘the backend editor’ and now we’re exposed to the visual composer.
adding modules to the page with visual composer
We can tell that because we can see the visual composer text block here so this text block is the first visual composer block that were being exposed to. We can also see the WP bakery page builder panel with the plus icon, the templates icon.. so this plus icon will allow us to add more components to the page. Like this row module, other modules we can add to the page. There is so many built into the fortuna theme it’s quite overwhelming at first. We will explore a few of these momentarily.
The “bakery hat” icon just takes you to their WP bakery website.
A few more buttons over here that look a little bit scary. this one here just does undo, that one does redo, this one put you in full-screen mode. let’s get out of that. This icon cog wheel says page settings but it’s really just for CSS code. That’s stylesheet code.
The undo is just to undo your last change. if i make a change, save that and then I undo so now that changes has been removed, if I undo again then it remove my row that i added in at the start. That’s a clever little undo feature.
You should not need to use Gutenberg if you are using Visual Composer.
now if I want to click to access gutenberg I can. not that you’d want to flick to Gutenberg. I can’t think of a reason why you’d want to use 2 page builders. sticking to the one page builder is a good idea.
Building page layouts with columns in visual composer
One of my favorite features about the visual composer is the columns. I could take this one column content component here I can convert it into two columns. That leaves me with an empty column here which is fine. I could leave this column empty or I could add an image. I’ll add the image from the media library we can upload an image from a computer or we can choose from an existing image in the media library. We’ve got a choice of sizes , captions, alignment, what happens when you click the image.. Pretty standard WordPress options for images.
Create a 3 column layout with visual composer.
I want to create a new row and set the columns. then I could add content within each of these columns and these columns would automatically be responsive. So on mobile, on a mobile device that would all stack on top of each other. I don’t have to do anything. It’s very, very easy way to create the page and populate it with content.
Add a button and configure button settings.
I think the success of this page builder can be contributed to the fact that it gives you such high level control over all the element settings. I wanted to add a button to the page. it gives me quite a lot of options for configuring this button. I should be able to configure the color, the hover colors, color of the text, the styling of the button. Here we go there’s some preset color options. we’ve got some button styles. boarder radius and button icon as well. so that’s actually not that many I’ve seen things with way more options just for a single button. the options that you get do
depend a lot on the theme that you’ve installed.
Fast page building.
Another awesome feature of the visual composer is the speed in which you can build pages. We can we’ve got this duplicate button here and this icon here means we can drag. that’s a really cool feature. Great for really speedily building the page. there’s also all sorts of cool design elements that you can throw in. and then we’ll add in a little separator an icon. Position that in the center. We’ll get a cooler icon. yeah okay the happy face. copy that a few times and drag it over here. We can build these nice three column grids that you see everywhere. We’ll do a quick preview to take a look in the frontend. that’s not really. we want to Center the text and we want to Center the button as well.
and we want to put a bit more space below the icon. Center the text. you can see how the trap that we’re falling into here is we have to do everything again and again again it’s quite repetitive. Even though it’s fast, it’s quite repetitive. I said we want to center the button but there’s no alignment option for this button which i think is a bit of a flaw in the Fortuna theme button settings.
Using css to fix issues with visual composer limitations.
I’ll show you another way around that. If we just preview just to see where we are again. we just need our button to be centered. What I’ll do is I’ll just throw on a little CSS. we’ll call this “our_button” just for simplicity sake. we will copy that class onto all the other instances of the button. now we go up to the page settings or the CSS settings and we popin the rule. that should do it. It might need a display:block as well. That should fix our problem. that we don’t have any alignment settings on the button. let’s preview that. It did not work.
I found the issue in those style sheets one of the styles is being overridden their display block to display block style is being overridden by this style. Which is coming from the fortuna theme. to override that we’d have to write in a few extra styles. Now our display block is actually working because I turn the other one off. we want to text-align:center as well. this isn’t a CSS tutorial but so let’s just skip ahead.
Using the spacing element
Save those changes and preview that now and that’s what we wanted now we wanted to put a little bit of space below the icon so Fortuna gives us a pretty cool little visual spacer which we can add in a space. I thought there was a little spacer icon here. There it is. “spacing” okay so here we can set the 20 pixel space which is good. I like this because it’s visual we can see the spaces which is great.We can control the spaces. we can adjust them if we need to.
Add in a title module
I’d like to also put a title above these columns as well. because it looks a bit lost at the moment. so I’ll add in a fortuna heading module.
Okay again preview, we’d also want to Center this heading. as well so I’m gonna delete those and so the alignment there is good. okay now duplicate again. Preview again. That’s looking a bit better. that’s a pretty cool little three column content feature of my site.
there’s many other things I could continue to do to this to finesse it. what I want to do next is add a full-screen background color and add more top and bottom spacing to this component. Then I’m gonna show you how to copy this component and put it onto a new page or even a new website.
Adding background colours and spacing to your rows.
If we go to our row settings here the row settings are cool. We’ve got all sorts of stuff here like full height row. okay let’s go for full height row. Where do you want to position the elements in the columns? I nt them to be positioned in the middle. that’ll be cool. we’ll take a look at that feature. let’s just take a look at that feature. see what that does for us. If I preview. that’s giving us huge space around it. not too bad. that could be a bit too much space though. Let’s undo that and what we might do now we can set our space between our columns if we’re unhappy with the way it currently looks.
Setting full width panels
the main feature I want to show you is row stretch so we can stretch the row. which i think is what we want. yeah we want to stretch the row. we could stretch the row and content but we’re just after the row.
We want the content to be still restricted width. we don’t want the content to be stretched all the way to the edge of the screen. preview that and we probably won’t even be able to tell actually unless little bit of background color.
Let’s set the background color of this entire area. Preview, now we’re getting what I needed. which is I wanted the row to stretch all the way to the edge. Now I want some padding on that top and the bottom design options it’s got padding put 200 on the top and then 200. preview and that’s looking pretty nice.
there’s lots of space around it quite the nice feature.
Saving reusable components with visual composer.
Let’s save this as a reusable component. We can add it to other pages easily. Saves us rebuilding it if we wanted this feature on other pages. we should be able to do that so if I just go back to my row settings. I’ve got this option here to “save it as template”. I’m gonna call this “three column feature”. Save it. I wait until it’s finished saving. now it’s finished. This template has been saved.
Adding the saved element to a new page
If I add a new page I will just call this a lot my launch my page builder and I’ll just call this “about us”. back into editor now to access our saved feature we go to templates icon here and we see a “three column feature”. Add that onto the page and there we areaa. click preview and there we have it. That’s been saved. Now notice our CSS hasn’t worked because we need to also copy the CSS that we wrote in the page settings. copy that and paste it into it into here on a new page. This CSS is only affecting the page that we’re currently on. I’ll go and grab that CSS.
That’s how to copy one component from one page to another. now if we wanted to copy this component as well as all the other components on the page to another page in our website or another website you also using visual composer….
let’s say we duplicate this component here one more time and then we go to classic mode and then we go into a text mode make sure you’re on the text mode. we copy all of this code here. Go add new page. Launch the bakery and in the text field. Paste it all in there.
The visual composer is a very powerful plugin especially with the cloning features. cloning components and reusing
components on different pages and being able to copy all the code from one page to another. we did fall into a little bit of a trap where were we were configuring individual elements and that was becoming quite repetitive and taking a bit of time but it was it is a really fast builder and it’s really quick to throw pages together. I’d still choose Gutenberg over visual composer because gutenberg is native and it’s made by WordPress and even in a short sort of 20 minute demonstration of the visual composer we did find bugs we’ve found some features that should have been built in but just
Quality of code
the code that visual composer produces on the front end is quite bulky and bloated and it becomes a hassle to
style because it produces so much HTML on the front end which I’m not a fan of. I don’t think there’s anything that visual composer can do that gutenberg couldn’t. Gutenberg is free. it’s free and here you can see with visual composer that live we’ve got this bulky icon here which is basically just an ad for their to sign up at their and buy the premium version of the plug-in and no doubt there are some super powerful features in in the premium version and it is a powerful tool I just don’t think you need it now that gutenbergs here
if you’re gonna choose a builder I’d choose gutenberg. some painful aspects of the visual composer are sometimes it’s hard to find little elements that sort of built in like for instance padding’s and stuff can get really hard to locate when they’re hidden because we’ve got like a module within a module, within a module, within a module type situation and in all areas is a place to store padding. it becomes sort of really tedious process of finding where the padding is
being applied to.
That’s it, if you are stuck with the visual composer then good luck with it. if you’re in a situation where you can
choose gutenberg. I would certainly choose Guttenberg. I’ll see you in the next video.
WordPress gives you a little bit of control over how things are displayed on the frontend.
For instance you could display it like this. “post=1” Which is basically display your posts by post ID. Each page and post has its own ID. That’s what that stands for. The problem with that is it’s horrible to look at.
It’s horrible to read and it’s not semantics and it doesn’t mean a lot to search engines.
This is one of the reasons why my WordPress is good at SEO out of the box.
We don’t want to use /2019/12/15/sample-post/ this really isn’t much better. It is slightly better but it still got this messy date in there. Date data is best displayed in other areas.
/sample-post/ is the one I choose most often because it’s the simplest. That’s just gonna display my website URL with with the page name or the post name.
You can get more sophisticated if you like. Especially if you’ve got a pretty complex blog or something cause you can choose this custom structure here and by default it set the post name which is exactly the same as /sample-post/ but you could add in something custom. If you put your cursor right there you can put in category there too.
If you save that now. Then go to all posts and view a post that’s been categorized.
This one has been categorized for the category of “mycat”.
If I view that now we’ve got “/mycat” what “/hello-world”.
Go back and if we undo that now that’s just hello-world so it’s up to you how you like to do it.
There is another option down here in permalinks. Personally, I think that the shorter the better the shorter the sweeter the more you can sort of keep it simple and cut straight to the point. It’s better for search engines.
It’s better for people. There’s also this other option down here which is category base which if you read the instructions here it’s something. if we put in the word “topics” or something like that “topics” let’s just go with “something” save that now. What that does is, if we view our categories this time and we go to view the “mycat” category. Now, the category structure has changed now. It’s “something” + “mycat” which I don’t recommend I think this is just getting too convoluted and you would have to have a pretty good reason for doing something like this…. Which I can’t think of any
The comment settings located under the discussions settings tab.
The sort of sites that we build which are more business focused, simple business style sites that showcase businesses services. In this use case there’s no need for comments. We disable comments because if we leave to comments enabled, we will get a lot of spam comments which causes a lot of maintenance and overhead to sort of maintain.
Keep your database light and fast
We mainly just delete all the spam comments as they’re coming through. Spam comments can fill up the site. which makes your database slower and heavier. We just disable comments and all the other comment related settings. We switch it all off and click save now the comments are disabled
The Reading settings is really important section of the WordPress settings. There is some really important settings in here.
Setting your homepage and blog settings
We’ve got the home page settings. At the moment, our homepage is set to display our latest posts rather than a static page. Our homepage is essentially a blog right now. I could change this to a static page and then choose the only other page that I actually have right now is called sample page but I could create a new page new create a new page called “home”. I could set my homepage to be a page which i just created and is called “home”.
I’ll set it to sample page. This is a default page that WordPress gives you with every every install of WordPress.
Here we can also set our blog page. I could actually create a page called “blog” and set it to to be the blog page. And set it here to display all my blog posts. I’ve also got the amount of blog posts I want to show.
Settings for RSS
This setting here for syndication feeds is for RSS feeds. You can set the amount of posts that you can show on your RSS and here we have further options for how much text we want to display on on the feed so probably best to use a summary rather than the full text. I’m not a huge user of syndication. I just never really got into that and never really experienced the world of RSS. I gave it a shot once and it just quickly sort of faded away into the background of my work flow.
The most important of all the wordPress Settings.
This is a critical setting. We can discourage search engines. We can discourage Google from crawling our website.
The only reason you would want to do to do that is if your site is really still under construction. You’re not ready for the search engines to come along and crawl the site. Also, perhaps you have a staging website or a development website.
A development website which is a clone of your website which you use for testing purposes… for instance. For our development workflow, we upload our work to staging site, get the work approved by the client and then we send it to the live site. If you’ve got a system like that in place.. then you want to you want to discourage the staging site from being crawled but never the live site.
These are your general WordPress settings. I’ve got some really important information in here.
Setting the wordpress site title and tagline
the site title which is displayed to the user quite often. It certainly appears a lot in search results like Google search results and the tagline also very important that we use our official company tagline here
Both of these are reflected on the front-end to the end-user.
Setting the wordpress master email address
We’ve got the WordPress address so no need to change to change this especially if it’s correct they look at the the main email address here so for me I often find that this email address is still registered to the web developer even though the web developers still not in the picture. This should really be the site owner so this is the master email address
whether or not you want to open membership
This is only used for sites and for membership sites so that should really never be checked.
Default user role
default user role so for new new members that sign up what what is going to be their user role. All these options have different levels of privileges.
the language I’ve always really just stuck with us us English
the timezone can also be important especially if you have functionality that relates to the to the time.
we being in Melbourne I think we’re at the moment UTC plus 11
the date format I’ve never really been concerned with this but this is really just how the date displays
If you’re not happy with the number format or you you prefer a number format you can set that here
Same with the time. If time is really important to you and for me I think the dates especially important especially if you’ve got a blog or something outputting the date of the publication. I think is really important.
the importance of dates
I don’t like to see blog posts with no date on it.
I think it’s I think it’s a valuable feature to display for usability and then once again if you’ve got functionality that relies on timing then set your week settings.
the week settings
Our week starts on Sunday so we’d set that there to Sunday and then just click Save and then you can move on to the next section
In this video we’re going to start from the very basics. We’re gonna teach you how to log in so go to your website.
The login url
Start with the URL of your website. Then type in forward slash (/) WP dash (-) admin.
You’ll see that you get redirected to this wp-login.php address.
You can also just type that in to access this page as well. For some reason, I find /wp-admin easier to remember and so that’s the address I always go to.
How to do a lost password
If you don’t know what details to login with you can try a lost password. Lost password is going to work based on your username or your email address.
If you put in your email address here and hit to get new password you’ll be emailed an invitation to reset your password.
If you do the lost password and your password and your email address isn’t in the system, you don’t have an account created, then this will give you an error.
In this situation this is where you would contact your web developer and request to have an account created for you.
Or ask what email address your account is linked to.
wp-admin page is a 404 page not found
If you type in wp-admin and you get redirected to a page not found or you don’t see this login area it could be that you’re not actually running a WordPress website or it could be that that there is a plug-in on your website that or some sort of functionality on your website that is changing the the login address so it’s changing WP-admin to be something else. The reason why someone why you would do something like this on your website is for security. WordPress it is really popular and this address is widely known to be the login address. Hackers know know all about this address. They know to target this address to try and break into your website. That’s why changing this address is considered to be a good idea.
This video we’re gonna talk about beaver builder and we’re gonna go through how you would build a page with beaver builder firstly if you’re choosing beaver builder right now you’re wondering what builder to choose I probably I’d skip over build beaver builder I’d go for Gutenberg personally but if you’re sort of stuck with beaver builder this is the video for you to help you help you get a bit of an overview sort of knowledge of beaver builder so firstly a bit of housekeeping here so in the plugins I’ve disabled Gutenberg activated, so that’s gonna disable Gutenberg for us.
Then I’ve got the beaver builder plug-in light activated. With the light plug-in I don’t have things like save module save template you know all that really cool stuff that you can kind of save components out and reuse them on other pages and save templates and drop that into it to a page so we don’t have those features will will dance over them a little bit to give you a flavor for that for it but I am stuck with the light version here.
Let’s create a new page and we can call this page anything.
launching beaver builder
If we go to the beaver builder tab and that automatically has launched Beaver Builder. We’re in beaver builder and beaver builder is a layer on top of WordPress. A layer of abstraction.
To get out of beaver builder we go into WordPress admin here and we can go into the current page or we can go to the dashboard so I’ll just go edit page to break back out of beaver builder.
Now I’m back in WordPress with the default tiny MCE editor.
Launching beaver builder again.
Adding content to the page with beaver builder
Okay, here we are the + icon in the top right corner is the main start the main sort of start button for for beaver builder. This is going to give you access to columns, modules which is content so another word for modules would be a Content modules, text editor and if you’ve got the premium version then you’ll see a lot more modules here as well.
To drag the rows, click and drag. It sort of disappears for a while which can be almost look like a bug, then you just move the cursor while still holding down the click button and you’ll see that we actually do have an object there, ready to be dropped into a position you choose to let go of the selection.
Now, that we have this sort of structure, we can remove if we don’t want. The idea is that we drag content in these modules in these cells. I call them cells or boxes. We go over to modules and then we just grab a text add text editor module throw that in there and this is where the content would go.
If you want you can fullscreen. Click the little icon.
Configure content properties with beaver builder
There’s also other properties on this module so we can change the font the style text shadow and then in advanced we’ve got some spacing properties and visibility and animation and it gets a bit more sophisticated here with the HTML element as well so that’s their the basic properties.
On the text element what other modules do we have in the free version here we’ve got audio, photo, video and HTML code so we can drag a photo over there and select a photo. It’ll take us to our media library in which we can upload a media image if we need and pop that in.
Then we’ve got things like widths so we can adjust the width to be whatever we want so if we’re not happy with a 50/50 sort of two-column scenario we want to want that slightly more obscured slightly more weighted to the to the left for the content and have a smaller image we can just drag this module here.
beaver builder max-width content width
What I when I’m looking at this what the first thing I see is wow we’re really crammed in here why can’t we just make this bounding area larger so for that I’d be looking in the spanner here to see what sort of properties we have so the spanner obviously represents settings. Settings that we can adjust so let’s go maybe forwards so I don’t think my themes gonna support that but the maximum width that my theme, which is a default WordPress theme is supporting here is is 1100 pixels wide. Which isn’t that wide this error is… I mean this restricted width here that we’re experiencing is a direct result of my theme that I’m using.
This is the default TwentyTwenty WordPress theme and it’s really designed to work with Gutenberg and what I’m seeing here is I’m seeing entry-content div and the direct child of the entry-content div, which is this one here. It’s going to be set to 58 REM which is what’s causing me this restricted width issue.
If I turn that off then I’ll get the expected 1100 max pixel width. That’s what’s happening here. So for the point of this demonstration we’ll just continue on launching beaver builder.
beaver builder duplicate content
We can also duplicate elements here so just by clicking this icon here we can duplicate.
beaver builder responsive mode
Let’s click the content to bring up the content properties and you’ll notice this button here this little monitor icon actually represents responsive editing so we can access tablet and mobile views from from clicking this little icon here which is cool.
beaver builder first impressions
When you first load up beaver builder. I’ve noticed a lot of people are a bit confused. They rollover one element and they get this blue box pop up, then you roll over another element and you get another blue box pop up and the other one turns gray… and they’re like, well what does that mean?
beaver builder bounding boxes
That’s kind of confusing and I realized that the color meanings can be described like this: so blue is the hover color so when you’re hovering over something it’ll be blue and the gray colors represent the parent of the object that you’re hovering over. That’s all the colors mean.
beaver builder column settings
Also one of the gotchas that I experienced with beaver builder was setting background colors so and it was because I found this icon here to be I don’t know I just couldn’t wouldn’t expect to see edit columns there’s column settings in here so and if this icon just does not say that to me I’d expect it to be a wheel or something you know this the cog wheel or something like that but anyway in you’ve got column settings in here which are pretty is we can adjust more widths
if we go down further we can set the color of text we can also set background colors. I should have a color property here.. okay there it is.
It’s just a bit confusing the interface is not what I’d enjoy interacting with on a daily basis.
There are some really important settings sort of hidden away in this icon here.
beaver builder reusable modules and page templates
I mentioned before one of the best features of beaver builder is actually with the premium version of beaver builder.
For instance, If we were to want to save this module here to be reused on another page. That would there in the premium version. There is a save as button here which allows you to save this as a reusable module so that way you don’t have to rebuild it every time you want to add it to a new page. That’s a really handy feature. You’ll be able to add it to your page from a section in here templates or modules. There will be something something down here called save modules which you can access quite easily and add to the page so I mean if you are going to go down the beaver builder Road I definitely recommend getting the premium version for the for the ability to save whole page template and for the saved modules.
beaver builder or Gutenberg?
Gutenberg can save reusable blocks natively. There’s no premium version. It’s built into WordPress so I choose Gutenberg over beaver builder any day of the week. It’s made by WordPress. It’s always going to run smoother and better than beaver builder.
The clients we work for love Gutenberg and they’ve find it really intuitive. Beaver builder however, I’ve seen some clients have gotten really confused… just based on the look of beaver builder and the usability of it