You may be thinking, well that’s an interesting name for a plugin. You are right. That being said, the plugin is named appropriately. The plugin bulks Elementor up, so it is like using steroids as it pertains to design.

Today, I am going to show you how to use the OoohBoi plugin to increase the power of Elementor. Let’s take a look at this Elementor add-on and see all that it has to offer.

OoohBoi Steroids for Elementor

OoohBoi Steroids for Elementor is an add-on plugin that will increase the power of the page builder and give you even more great features and functionality to use. Once installed, the plugin gives you an expanded set of tools, options, and settings that expand the Elementor page builder even further.

OoohBoi will simply expand Elementor, and add on other features that the page builder doesn’t have. It also may expand some features already there. The plugin comes with several different add-on features, including the ability to create Elementor overlapping columns.

Some of the other main features include:

• Harakiri: This allows you to change the writing mode (CSS property writing-mode) of Elementor’s Heading and Text Editor widgets.
• Poopart: The ability to add an overlay or underlay ghost-element to any Elementor Widget. 
• Overlaiz: Move the Background Overlay in any direction, as well as to resize it.
• Paginini: Style the posts pagination in Elementor.
• Breaking Bad: Customize the section columns to your liking.
• Glider: Generate sliders using one-click.
• Photogiraffe: Gives you the ability to make any image full-height.
• Teleporter: Hover controls for columns.
• Search Cop: A unique search bar that can be tailored to fit your needs.
• VideoMasq: Allows you to add the SVG mask to the Section video background and let the video play inside any shape.
• Baseline Grid: Define the visual grid as you see fit.
• Butter Button: Design any type of button you want.
• Perspektive: A set of options that allows you to move widgets in 3D space.
• Shadough: Create shadows that conform to any shape.
• Photomorph: Add the clip-path to the Image widget for Normal and Hover state.
• Commentz: Style the post comments in Elementor.

As you can see, there is a lot of new functionality available when you install this Elementor add-on. Let’s take a look at how to get the plugin installed and activated for use.

Note: This tutorial assumes that you already have Elementor running on your website. If you don’t, install the page builder first.

Using OoohBoi Steroids on Your Website

The overall rundown of installation and setup is fairly simple. Let’s go through it together.

Step 1: Install and Activate the Plugin

To start using OoohBoi Steroids in conjunction with Elementor, you first need to install and activate the plugin. You can do this by heading over the Plugins page inside your WordPress admin dashboard.

Simply use the search field to search the plugin by name. Install and activate it right from there.

Step 2: Access the Main Settings Page

Now that the plugin is installed and activated, you want to access the main settings page for it. To do this, click on Settings > Steroids for Elementor. You see that this is now an available option after you activated the plugin.

Now let’s configure it real quick.

Step 3: Configure OoohBoi Steroids

At this point, you have landed on the settings page for the plugin. The setup is very simple. The page is simply a one-off that displays all the add-ons that are available within the plugin.

Just click the blue button next to each feature to turn it on. If you want it off, turn it off. The plugin allows you to use any of the options available. They all don’t have to be turned on.

Step 4: Access Elementor on a Page

Now that the plugin has been set up how you want, it is time to go see where all the available tools are. To do so, you need to open an existing page or create a new page and edit it using the Elementor page builder.

Click on Pages > Add New, located in the left menu of the dashboard.

Click on the “Edit with Elementor” button. This will open the page builder and you are ready to build and design.

Step 5: Use the OoohBoi Steroids Add-Ons

This is where it gets interesting. The actual OoohBoi add-ons are located within the Elementor options they apply to. In other words, you won’t see them listed in their own specific area. They appear under the option they apply to.

Let me show you what I mean. 

Two of the add-ons that come with the OoohBoi plugin are called “Breaking-Bad” and “Glider.”

These don’t automatically show up in the list of functions. However, they will show up when you work on a section that they can be applied. So in this case, I have clicked on the “plus” icon to add a section.

I am simply adding a three-column structure.

Now that the columns are added, you automatically see both the “Breaking-Bad” and the “Glider” options. They appear as part of the Elementor styling area.

From here, you can use those styling options how you see fit.

That’s it! The rest of the add-ons will show when you are in the styling areas that they apply to. You are now running the OoohBoi Steroids add-on and you can do even more with Elementor.

Will OoohBoi Steroids Work with the Free Version of Elementor?

Yes, it will! You don’t need the pro version of Elementor to use the plugin. It attaches perfectly to the free version as well. 

How Do I Use OoohBoi Steroids?

As mentioned above, options only show when you are in the styling area of which they apply. For example, if you are about to style a Heading widget or Text Editor widget, Harakiri options will show up. All the Poopart options can be found under the “Advanced” tab, Poopart panel.

Why Are Some Functions Not Working?

Remember, OoohBoi Steroids is an add-on plugin that combines with Elementor. When they do an update, the OoohBoi developers have to go back through and make sure all options work properly with every update. So, sometimes updates may be a little behind.

Final Thoughts

The Elementor page builder opens up a lot of design and editing possibilities in WordPress. It gives you drag and drop functionality and allows you to more easily build pages to spec on your website.

Adding the OoohBoi Steroids plugin extends functionality even more. It gives you the ability to go even further with your designs and it works perfectly with the free and paid versions of Elementor.

I hope this article was able to show you how easy it is to extend Elementor functionality using OoohBoi Steroids.

Are you an avid user of Elementor? Have you tried this or any other plugin add-ons to further extend the functionality of the page builder?

The post How to Use the Ooohboi Steroids Add-on for WordPress Elementor appeared first on GreenGeeks.

The good news is that you can fix this with the right plugin.

As stated, most themes do give you the ability to set a full-width page or post in your theme. However, many themes have their own custom styles and still allow header and footer areas in a full-width theme layout.

This can be annoying, especially if you are trying to create your own headers and footer style within your theme, and then only use them on certain pages.

There are several WordPress page builders that give you canvas-style layouts, as well as the option of a full-width theme style. However, sometimes even those styles can clash with a theme unless you are using a full canvas style page.

This may not be suitable, as canvas-style pages can be tough to build on and properly display in certain formats.

Today, I am going to show you a great plugin I found that will allow you to set a full-width theme in WordPress with just a few clicks of a button. The best part is that the plugin can also be used in conjunction with several of the best WordPress page builders available.

In the demonstration below, I am going to show you how to use this plugin while using the Elementor page builder for WordPress. Let’s take a look at the plugin and see all that it has to offer.

Setting a Full Width Theme in WordPress

Fullwidth Templates is a straightforward and easy-to-use WordPress plugin that does exactly what the title indicates. It gives you the ability to add full-width page templates to any post or page, using any theme.

Furthermore, the plugin works with most WordPress page builders, including Elementor. This means you can bypass certain templates that may not work right when paired with a theme, and design your own full-width Elementor website.

The plugin is packed full of options for page building. It is lightweight, easy to install and use, and fully responsive. You can do a lot with the different full-width templates that become available when you install and activate the plugin.

It comes with the following templates:

• Blank Template: This removes the header, footer, sidebar, comments, and title section and gives you a blank canvas to work with.
• Full-Width Template: Removes any sidebar, page title, and comments section. It stretches the layout of your page to full width and is perfect for using with WordPress page builders.
• No Sidebar Template: Simply removes the sidebar from the page. This is ideal if your current theme does not have an option to delete the sidebar.

As stated above, the plugin works perfectly with the most popular page builders out there. We will demonstrate it using Elementor below, but it also works with Beaver Builder, SiteOrigin, and many of the other popular page builders you may want to try.

Let’s take a look at how to get the plugin installed and activated. Then we will go over how to use it in conjunction with the Elementor page builder.

Step 1: Install the Fullwidth Templates Plugin

In order to start adding full-width theme templates to your website, you first need to install and activate the plugin. You can do this by going to the Plugins page of your WordPress admin dashboard.

Simply search the plugin name and install it from there.

Once the plugin has been installed and activated, it is ready to use. There are no settings. After installation, the plugin automatically adds a selection of templates to use that you will find in both posts and pages.

Let’s go over how to access a template and build a free full-width WordPress theme using Elementor.

Step 2: Add a Full-Width Template

A few things you want to remember before you add a full-width text converter or template to your site.

1. This plugin will work without page builders as well. So you don’t need to use a page builder. It adds the same full-width theme templates to any theme you happen to be using.
2. Yes, the plugin works just fine with Gutenberg. The selection box exists no matter what editor you use.
3. If you uninstall the plugin, pages and posts that you have created using it will indeed be affected.

With that info in mind, let’s add a full-width theme template in Elementor together.

At this point, the plugin has been installed. To add a new full-width page click on Pages > Add New.

This opens up a new page for your site. Since we are using Elementor, you will see the “Edit With Elementor” button within your editor.

Remember, the next move you make is the same, no matter what page builder you are using, and no matter whether you are using the classic editor or the Gutenberg editor.

Scroll down a little and on the bottom right you will see the “Page Attributes” box. Inside that box is the “template” dropdown menu.

Go ahead and click on the dropdown menu and select the full-width theme template you want to work with.

Note: You will see that the Fullwidth Templates plugin themes have been added to your page or post. Other template items listed here will be based on what page builder you may be using, as well as what theme templates were already available by default.

Once you select the full-width theme template that you want for that page, click on the “Save Draft” button on the top right of your editor.

Step 3: Open Elementor Page Builder

At this point, the template will take hold, and you are good to go to start editing and building your page. Go ahead and give the page a title, and then click on the “Edit With Elementor” button to open the Elementor page builder and start building the page how you see fit.

When you click the “Edit With Elementor” button, the page builder launches.

Simply build and edit how you want. As long as you save your changes as you go, the template you chose remains. You can build your entire site using full-width theme templates.

That’s it! You have successfully installed the plugin and are now building full-width template pages on your WordPress website. Repeat this process as many times as you want to add new pages or posts.

Note: The process is the same for adding full-width posts.

Final Thoughts

Are you tired of trying to code new full-width templates? Or are you tired of trying to look for themes that give you this option? If so, then using the Fullwidth Template plugin is a great choice.

Not only is there zero coding involved, but you have the ability to add full-width theme templates to any theme and page builder. The plugin is also good whether you use the classic editor or the Gutenberg editor.

I hope this tutorial gave you easy-to-understand instructions and showed you how simple it is to get a full-width theme template into your WordPress website.

Have you ever used this plugin? Do you prefer to use it without a page builder or with a page builder?

The post How to Set a Full-Width Theme in WordPress appeared first on GreenGeeks.

Editing a header or footer in Elementor can be a difficult process if you are not sure where to look for the solution. In this article, I am going to show you how to make use of a great plugin that will allow you to create a layout with Elementor and then assign that layout as a header or a footer on your website.

Let’s take a look at the plugin in question and then learn how to use it together.

Elementor – Header, Footer, and Blocks

The Elementor – Header, Footer, and Blocks plugin allows you to create website headers and footers with Elementor. You create a custom layout using the page builder and then set it as an Elementor header or footer element on your website.

You will also have the ability to use a custom block as well with the plugin. Basically, the tool is easy to install, activate, and set up. It is lightweight and gives even more flexibility and building options to Elementor. As you know, this page builder is already packed with functionality.

Let’s take a look at how to install, activate, and set up the Elementor – Header, Footer, and Blocks plugin.

Note: This tutorial assumes that you already have the Elementor plugin running on your WordPress Hosted website.

Install and Activate Plugin

In order to edit headers and footers in Elementor, you first need to install and activate the plugin. You can do this by searching for it on the plugins page of your WordPress admin dashboard.

Once the plugin has been installed and activated, click on Appearance > Header Footer Builder. You will see this located in the left menu of your WordPress admin dashboard.

Now, there are a couple of issues we need to talk about quickly before moving on. This plugin is actually only compatible with certain WordPress themes. There are two ways to get around this issue:

1. Install a theme that is compatible with the plugin (list below)
2. Click on the “Theme Support” tab in the settings section for the plugin and follow those directions.

Install Compatible Theme

The Elementor – Header, Footer, and Blocks plugin is only compatible out of the box with the following themes:

• Astra
• Neve
• Hestia
• GeneratePress
• OceanWP
• Genesis
• Phlox Theme
• Attesa Theme

These are the best themes to use with Elementor.

Note: Some of these themes also offer a variety of child themes. All of those will work as well. So your first option is to use one of the themes from the above list.

Use the Theme Support Tab

Once you are in the settings section for this plugin you will see two tabs.

• All Templates
• Theme Support

Click on the “Theme Support tab.

You will see a couple of different solutions here for adding theme support to the plugin. Go ahead and choose the one you prefer.

The recommended method should work for most themes. If it doesn’t, try the second method. Now, if neither of those two methods work, then you have two choices. You can contact your theme developer and ask them to add support for this plugin, or you can install a compatible theme from above.

Now that is done let’s go ahead and look at how to use this plugin to edit headers and footers.

Note: You will know you can use the plugin properly because the “Theme Support” tab will disappear and you can now add a new template.

Add Header or Footer For Elementor

Now that you are in the template section, go ahead and click on the “Add New” button to add and edit headers or footers for Elementor.

You will be taken to an editing page for the plugin. Here, you will need to complete a two-step process. You need to select all the options you want for the Elementor header or footer and save them. Once saved, you will be presented with a shortcode as well that you can use to put the block in where you want.

Once you make those selections, you can now actually build the header, footer, or custom block using Elementor. Let’s look at what both steps take to accomplish.

Elementor Header and Footer Options

The first thing to do is to set the header and footer options for the new template you are about to build. You are going to name the template. From there, you have several options. They include:

Type of Template: Header, before footer, footer, or custom block.

Display On: Here you will select where to display the header footer on your site. You will also be able to add display rules and exclusion rules.

User Roles: Select your user roles of who can make edits.

Enable Layout for Elementor Canvas: This will allow you to edit using the “canvas” layout that Elementor offers.

Once you have these configurations how you want, click the “Publish” button and the template styles will be published.

Edit Headers and Footers Using Elementor

Now you can go ahead and actually build and edit your header footer layout using Elementor. To do this, click on the “Edit with Elementor” button.

This will open the Elementor editor where you can then build, design, and edit headers and footers using the Elementor page builder.

When you are finished, click on the green “Publish” button at the bottom of the editor and you are all set.

That’s it! You can now display this header or footer in the places you chose while configuring the template. The header footer will display based on the rules you have in place. You can also use the shortcode to display it in blocks or other parts of your website.

Final Thoughts

The Elementor page builder for WordPress is arguably the very best page builder out there right now. That being said, there are a lot of great ad-on plugins available that make this page builder even more powerful.

With this plugin, you can now edit headers and footers and display custom ones in different parts of your website based on the various rules you set. The kicker, you get to build and design these headers and footers using Elementor, which makes creating custom blocks and designing custom headers and footers even easier.

When you combine a page builder like Elementor with a platform like WordPress, the possibilities are endless when it comes to concept and design. This plugin only gives you even more options.

I hope this tutorial showed you how to effectively create headers and footers to display using Elementor. Remember, this specific plugin may take a little extra work to get going. You might have to contact a theme author or use a compatible theme for the plugin to work. However, the process is totally worth it as your site will be as customized as you want.

What other plugins are you using to create customized headers and footers in WordPress? Have you found any that are compatible with Elementor and as easy to build and display as this one?

The post How to Edit Headers and Footers with Elementor in WordPress appeared first on GreenGeeks.

What is Elementor?

Before we dive into how to use fonts in Elementor, it will probably help if you knew a little more about what exactly Elementor is. Chances are you already know, but just in case, let’s touch on it real quick.

Elementor is the most popular WordPress page builder around. Page builders give you the ability to build just about any type of WordPress website you want, without having to use any code. They use a “drag and drop” style that allows almost anyone to come up with something decent as far as layout and design go.

This particular page builder is also very popular because the free version of the plugin is packed full of functionality. Yes, you can also get the pro version if you are a developer.

So what does this mean for you if you install and activate the plugin?

• Instead of standard posts and pages, you will be able to create unique, interesting posts and pages using the plugin.
• The plugin provides you a separate editing interface to work with when you are building pages and posts. So, most of the time, you will be working outside the Gutenberg block editor. Changes will be applied when they are saved.
• You don’t need to learn or understand HTML, CSS, or PHP coding. The drag and drop interface will allow you to build without having to touch code.
• The plugin works on the front end of your website. This means you see exactly what your page or post looks like in real-time. This is also called “what you see is what you get,” or WYSIWYG editing.
• Elementor works with all WordPress themes. You will be able to keep your current theme design intact while still getting to use all the tools and functionality Elementor provides.

There is a lot to cover when you first download and install the plugin. One of the most popular items within the Elementor page builder are fonts. Let’s take a look at how to work with fonts in Elementor.

Working With Fonts in Elementor

Many Elementor Widgets offer the ability for you to edit text color and typography settings. These design options are located in the widgets’ “Style” tab.

Under the Widget Setting > Style, click the edit icon to access the typography settings.

Simple as that. Now you can change font size, color, family & style within the Elementor WordPress Page Builder.

You will be able to change all font styles on any part of the post or page, within just about any block you want. So really, you can have all sorts of font styles on one page if you would like. The font section within the Elementor page builder allows you some real creative freedom.

Style

• Text Color: Choose the color of your text.

Typography

• Family: Choose your font family.
• Size: Choose a size for your font.
• Weight: Choose the weight of the font.
• Transform: Choose the Transform properties for the font.
• Style: Choose between Normal, Italic, and Oblique.
• Decoration: Choose the text Decoration.
• Line-Height: Use the slider to set your line-height.
• Letter Spacing: Use the slider to set your letter spacing.

I hope this helps you easily manipulate text in Elementor however you choose.

Q&A Quick Hits

Just in case you needed some quick answers to some of the most popular questions we receive about fonts in Elementor. Here are some of the more popular questions answered:

How many fonts are included in Elementor? Elementor has 800+ Google fonts already built in to choose from and work with.

Can I add custom fonts to Elementor? Good question. Oftentimes, web designers want to be more branded and unique. You can easily add custom fonts to Elementor when needed.

Why are my custom fonts not displaying on the front end? This is likely due to a cache issue. If you are using a cache plugin in WordPress, clear it out. If your host uses server-side caching, clear that out as well. Remember, you may have to ask your host to help you with server-side caching.

Can I change fonts on any section block or widget I use on a page? Yes, you have the freedom to create different fonts on any item you want.

Do I need to have the pro version of Elementor to use and add custom fonts? No, you have access to all the fonts Elementor has built-in. This includes the ability to add custom fonts even if you are using the free version of the plugin.

How Important are Fonts in Web Design?

You know what gets lost in a page or post sometimes? The importance of fonts and how they should be used. Remember, while you may consider yourself an artist on the page, and want to design and build something that people consider beautiful, it is not always a good idea. You see, “abstract” and fonts don’t really work together well.

In web design and page layouts, you need to be clear, even when trying to make the page beautiful. Bad font usage and typography that is not legible will hurt you in the long run, even if the rest of the page is put together well.

Here are some things to consider when using fonts in Elementor. Above all, try to remember that you want your fonts to attract users to the page and keep them there.

• Font hierarchy establishes a proper message and layout. Both size and color can play a huge role in how the reader interacts with the page and understands it. Proper font hierarchy also helps with page ranking and indexing.
• Use different font types to differentiate messages and get them across more clearly. Use headings, bold font style, and italics when appropriate to help with the message. A good example of this is a quote on a page. When displaying a quote, maybe you want to make that font italic.
• When you combine stylized and standard fonts, you can create a very unique, balanced, and attractive design effect. This kind of work leads to clean, smooth, fresh page designs that users will enjoy reading.
• Try to keep fonts consistent on all pages of your site. This doesn’t mean you can’t design, explore, and create using different fonts. It simply means that whatever you decide on, try to use it everywhere so that your site is consistent and focused.

Final Thoughts

The importance of fonts and how they are perceived can’t be overstated. As is the case with many aspects of a website, the way fonts are presented and used can really help or hurt your website. This holds true for both the user and the site owner.

Poorly situated and displayed fonts will drive your website user off the page because it can be overwhelming and hard to look at. Furthermore, if fonts in Elementor are not used correctly, it could also hurt your overall site and/or page ranking in Google search.

Learning to use fonts in Elementor the right way will allow you to build and design a fun, attractive, user-friendly page or post that is easy to read, understand, view, and follow for both a site user and Google.

Have you been able to build amazing looking pages and layout your fonts like you want to when using Elementor? Do you prefer to keep the default fonts in place even when working with the page builder?

The post How to Work with Fonts in Elementor appeared first on GreenGeeks.

When you use a theme for your website, you get your theme’s “Single Post Template.” It is made out of different elements which include:

• Post Title
• Post Content
• Featured Image
• Metadata
• Comments
• Etc.

With Elementor you can control the layout & design of the Single Post Template – on any theme you are working with.

Create a Single Post Template in Elementor

To accomplish this go to Templates > Theme Builder > Single > Add New. Then select “Single” from the dropdown.

Note: You need Elementor Pro to accomplish this. If you don’t have it you will see this:

Under Select Post Type, choose “Post” and click Create Template.

Now choose a post block and insert. You can also design your own if you want. After you have finished designing, click “Publish” and choose a condition.

Note: Only posts that use Default Template will have the Single Post Template applied to them, even if they otherwise meet the Display Conditions criteria. Posts that use Canvas or Full Width template (or any template other than Default) will not have the Single Post Template applied to them.

The post How To Create a Single Post Template in Elementor appeared first on GreenGeeks.

Furthermore, the Elementor Template Library gives you access to hundreds of designer-made Page layouts and Blocks, all with premium high-end stock images, which you can use freely on your site.

How to Use the Elementor Template Library

Let’s take a look at how to navigate around and use the Elementor template library.

Inserting Templates

Once you are inside the Elementor page editor you want to click the folder icon to add a Page template, Block, or your own saved template from the editing screen.

When you click the folder icon a number of options will appear. You can:

• Click the magnifying glass icon to preview a template.
• Click insert to select a chosen template.
• Give your favorite templates a heart and save them to “My Favorites.”
• Click the arrow in the top right corner to upload a .json or .zip file.

Saving Pages as Templates

If you create a new page and want to save it as a template simply click the green button located on the bottom left of the open panel.

Choose “Save as Template” then give your template a name and save it.

Saving Sections as Templates

Choose the section you would like to save as an Elementor template and right click the section settings blue button. Give your section a name and click “Save.”

How To Export Templates

You can export your saved templates.

Click the folder icon in the Elementor editor. Under “My Templates” click the 3-dots and then click “Export.”

How To Import Templates

You can import templates you’ve exported or downloaded.

Go to Templates > Saved Templates or Templates > Theme Builder or Templates > Popups and click the “Import Templates” button.

Now choose the file you want to import and click the “Import Now” button. Your imported template will now be displayed in your Templates list.

There is a lot you can do with Elementor templates. Create, build and save your own Elementor template library to use anywhere.

The post How To Use the Elementor Template Library appeared first on GreenGeeks.

Elementor Tools

Let’s take a quick look at the Elementor tools that are available for you to use when needed.

To access all the tools below simply click on Elementor > Tools and you will be taken to the “Tools” admin page where you can click on any of the tabs to make your selections.

General

Regenerate CSS: This will clear your CSS files and will generate new files when you make changes to your pages.

Note: Regenerate CSS tool will not regenerate the files on the click of the button.

Sync Library: If you experience bugs with the library, you can sync it here.

Replace URL

Enables the use of Elementor after a domain transfer (Also relevant for adding an SSL certificate to your site).

Version Control

Rollback Version: Switch to a previous version of Elementor.

Become a Beta Tester: By enabling this, you will be notified whenever a new beta version is out.

Maintenance Mode

Choose Mode: Choose between Disabled, Coming Soon & Maintenance Mode.

Who Can Access: Choose who can view your content when one of these modes is active.

Choose Template: Choose a template that will be displayed when one of these modes is active.

Use the above available Elementor tools when needed.

The post Elementor Available Tools appeared first on GreenGeeks.

What Are WordPress User Roles?

Even though Elementor offers its own user role setup, it is still based on the default user roles that WordPress has built-in. User roles in WordPress are basically certain types of “roles” that you can assign people that have access to your website.

You can assign a different user role to all individuals who have access. These roles allow you to control what information and editing power each user has. For instance, you may want someone to have editing ability, while another person you may want to have read-access only. Whatever the case, these powers can be assigned using default roles provided by WordPress.

The default user roles available are as follows:

• Super Administrator: This user role is given to someone that you want to have full access to everything on your website. They have every admin ability within a site including all features. This includes the ability to edit and change files.
• Administrator: A user role given to someone which enables them to control all admin features within a site.
• Editor: Someone who can not only publish and edit posts, but can publish, manage, and edit posts of other users.
• Author: An author role allows the user to publish and manage their own posts. They can’t manage posts from other users.
• Contributor: This user role gives someone the ability to write and edit their own posts, but not publish them.
• Subscriber: This role is given to people who you only want to allow to manage their own profile but nothing else.

Note: When WordPress is initially installed, and administration account is automatically created. More often than not, this is the account you are working from. You have full control from the start.

Why User Roles?

Surprisingly enough, this is actually a pretty common question. User roles have come a long way, and with so many third-party plugins and page builders for WordPress now available, certain user role functionality can control how you allow access to these plugins and page builders. Case in point, using the “Role Manager” tool within Elementor.

That aside, there are also a couple more valuable reasons to use these roles and assign them properly.

Site Safety

User roles in Elementor, and in WordPress in general, help keep your website safe when used properly. Since each role discussed above has a very specific set of permissions attached, they can be used to keep the site safe and private.

Case in point, when you are working with strangers, or allowing guest posts on your website. See, you can add a user role for someone to allow them to provide a guest post, edit, add images, and format, but not allow them to publish. This would be an author user role.

However, if you wanted to give someone you trusted more of the ability to do all the above, while also allowing them to publish articles, then you can assign an editor user role. You can see that the further up the user role chain you get, the more trustworthy you think someone is or the better you know them.

This also works great for users you need to sign up for something specific on a website. They can sign up while also being blocked from important aspects. This is known as a subscriber role. A subscriber role is one given to shoppers on an eCommerce site. It can also be assigned to someone who has signed up for your email newsletter.

Overall, roles help keep your site secure and safe, while allowing certain access tiers for certain users.

Accident Prevention

This goes right under site safety. When you handle user roles in Elementor and in WordPress properly, then you can avoid site accidents. Sometimes, you may give someone you know and trust a user role lower than you intend them to have. Reasons may vary, but often this is because they are not familiar with certain aspects of WordPress or how it all works.

Blocking them off from certain levels of accessibility will help prevent accidents, as they will not even have access to different functionality until they learn how to use it. User roles are a powerful tool. When used correctly, they can add a lot of safety, security, and functionality to your WordPress website.

For instance, what if someone you knew well had admin privileges and changed settings in a cache plugin or removed a tool completely without knowing? It’s easy to do a lot of damage if someone has a user role well beyond their scope of knowledge.

Accessing Role Manager in Elementor is quick and easy.

Elementor Role Manager

With the above info in mind, let’s talk about how the “Role Manager” function in Elementor works a little differently than the user role function for WordPress. In reality, the user roles you assign in WordPress for individuals will apply and roll over, even when you are using the Elementor page builder to design your website.

The actual Role Manager within the Elementor page builder plugin is made more designer specific. Basically, this gives you an extension of user roles. It also allows you to offer extra functionality to Elementor specific roles within your website.

For example, you can use the user roles in Elementor option to allow certain access levels to the Elementor editor. You can choose to lock specific individuals with certain user roles out of Elementor entirely.

Again, doing so will help keep the Elementor design aspects of your website safe and sound. It will also prevent accidents from users who don’t know their way around the platform. Let’s take a look at the Role Manager in Elementor. I will show you how to access and use it properly.

Role Manager in Elementor

 Click on Elementor > Role Manager to access the role manager settings page.

This function sends you to the Role Manager page. Now, click on any user role type. Check the “No access to editor” checkbox to block the user from editing the page.

Note: If you are using Elementor Pro, you have an added feature called “Access to edit content only,” so the user can edit the content only without the ability to change the layout of the page/post. This content is available in the free version of the Elementor page builder. To extend the functionality, you will need to purchase the pro version. That is entirely up to you.

Final Thoughts

Now that you have a better understanding of how user roles work in both WordPress and Elementor, you can go about adding them appropriately. It isn’t difficult at all to assign proper user roles in Elementor. Basically, when you know where to look, you can get your site on the fast track to being safer and more secure.

Allowing only certain users to have access to the Elementor page builder within your website could be the difference between your site design and navigation going smoothly, or slowly because of errors and mistakes.

Elementor provides you with a ton of design options and functionality for building a WordPress website. This is just one of many amazing options at your fingertips.

The post How to Manage User Roles in Elementor appeared first on GreenGeeks.

Adding Custom Fonts can come in handy if you really want to change your fonts around when you create a new page in Elementor. As long as all of your system requirements are up-to-date and running smoothly adding Custom Fonts is very simple.

Add Custom Fonts to Elementor

To add Custom Fonts to Elementor first make sure you have Elementor installed. Now click on Elementor > Custom Fonts.

You will come to the “Add Custom Fonts” page. At this point, you simply click on the “Add New” button, give your font a name and click on “Add Font Variation.”

Note: You do need the pro version of Elementor to add Custom Fonts. If you are not running the pro version you will see this page:

Available Font Formats

• The Web Open Font Format (WOFF): WOFF is the most recommended format to use since it is supported by all modern browsers.
• The Web Open Font Format (WOFF 2.0): TrueType/OpenType font that provides better compression than WOFF 1.0.
• TrueType Fonts (TTF): This font was developed in the late 1980s, by Apple and Microsoft.
• SVG Fonts/Shapes: SVG fonts allow SVG to be used as glyphs when displaying text. Make sure to use this format to support old versions of iPhone.
• Embedded OpenType Fonts (EOT): This font file works on IE, but not on other browsers. Make sure to use this format to support earlier versions of IE.

You can also see and choose new font weights and styles. Choose a font weight, select a style, and click publish.

Viewing Your Custom Fonts

You will find all of your newly added fonts when you edit text with Elementor. Simply Go to the “Style” tab, located under Typography > Family, and you will see your new Custom Fonts.

The post How To Add Custom Fonts to Elementor appeared first on GreenGeeks.

Here is a list of system requirements you need to have in place to use Elementor.

Note: If you are not sure whether or not your system can handle Elementor, call your hosting provider. Or, contact GreenGeeks and they will set you up with fast, secure, and scalable WordPress hosting that can easily handle all this and much more.

Elementor System Requirements List

Make sure you have the following in place for the Elementor system to work properly:

• WordPress 5.0 or Greater
• PHP 7 or Greater
• MySQL 5.6 or Greater
• WP Memory Limit
• Browsers
• Device
• Servers
• X-Frame Options
• PHP Z-Lib Extension

That gives you a pretty good idea of where you need to be to run Elementor. Let’s take a look at the system requirements in more depth.

System Requirement Details

Make sure you have the below system requirements in place before trying to use Elementor.

WordPress 5.0 or Greater

Elementor works with WordPress version 5.0 or greater

PHP 7 or Greater

Note: If your site is hosted on a server with an older PHP, you may experience issues. We recommend you contact your hosting provider to upgrade to the latest version of PHP.

Elementor also works with PHP 5.4+, but these older versions have reached official End Of Life and as such may expose your site to security vulnerabilities and bugs.

MySQL 5.6 or Greater

MySQL version 5.6 or greater OR MariaDB version 10.0 or greater.

WP Memory Limit

WP Memory limit of 128 MB or greater (256 MB or higher is preferred).

Browsers

Please note that you can use Elementor with Safari, Chrome, and Firefox. However, you will not be able to edit with Microsoft Edge versions earlier than 79. You cannot edit with any version of Microsoft Internet Explorer.

That being said, pages built with Elementor will show up in ALL the browsers, including Microsoft Edge and Microsoft Internet Explorer.

Device

It is not possible to edit with mobile phones and tablets for the moment. It is possible to work only with desktop computers.

Servers

Contact your hosting provider if you are having saving issues, or to get an SSL in place.

X-Frame Options

Set to “same origin” to avoid editing issues. Have your hosting provider set this for you.

If all this is set in place, then you will have no issues using Elementor to build your WordPress website.

PHP Z-Lib Extension

While not always necessary, it is preferable to have PHP Zlib extension enabled on your server. Again, ask your website host to do this for you.

Final Thoughts

Using the Elementor page builder allows you to build and customize a WordPress site using a drag and drop technique. There is a ton of functionality and features you get access to.

However, in order for it to run properly, you have to make sure you meet all the Elementor system requirements. Sometimes Elementor might not work to it’s fullest potential. Double-check the requirements above and go from there.

The post Elementor System Requirements appeared first on GreenGeeks.