OXYGEN 2.0 VS ELEMENTOR - THE BEST SITE CREATOR FOR WORDPRESS
Credit: Web Development Services
You do not necessarily have to be a programmer to build an
awesome WordPress site. The creators of visual sites allow you to create
professional looking designs by using previously created elements, sections,
templates and other basic elements.
You can find a couple of creators of WordPress sites in the
official WordPress repository and elsewhere. In this article, we will see two
of the best: Oxygen 2.0 and Elementor. We will test both builders in a clean
WordPress installation, with the Twenty Seventeen theme.
STARTING
You can install Oxygen 2.0 and Elementor as a WordPress
add-on. Elementor works with any topic. Basically, you build your own custom
design on a theme. Oxygen 2.0 does not require a theme, as it offers a visual
replacement for WordPress themes. Although you still need to have a theme set
in the WordPress administrator (as WordPress requires), it does not affect the
design of your site in any way.
Oxygen allows you to start with a prefabricated website or a
blank installation. If you want a quick result, opt for the prefabricated
design, since the Oxygen design library offers beautiful templates. A blank
installation is an excellent option if you want to do everything from scratch.
After installing and activating the Oxygen 2.0 add-on, the following screen
will appear:
By default, Oxygen installs the atomic design set. Remember
that we do not work with the themes here, but Oxygen replaces the usual
WordPress themes to give you more design options. If you do not like the
default, you can also choose other prefabricated design sets.
For the sake of this article, we will choose the blank
installation so we can try everything from scratch. Oxygen 2.0 does not add any
distraction to your administration area. Do not place ads in your WordPress
panel, you will only find a modest menu in the left sidebar.
ELEMENTOR
After installing Elementor Page Builder, a new menu will be
added to your WordPress administrator. An "Elementor General
Information" widget with the latest Elementor news will also appear on
your panel:
As in the case of Elementor, it still depends on a theme,
you cannot choose between a pre-designed or blank start. You will start to
create your personalized page on the theme that you configured in the menu of
the Appearance sidebar. This is what the main management page of the Elementor
menu looks like right after the activation:
STRUCTURE
Both Oxygen 2.0 and Elementor use a structure based on
templates. You can manage the templates from the WordPress administrator and
edit the designs that belong to the WYSIWYG editor (What you see is what you
get) from each site creator.
OXYGEN 2.0
With Oxygen, you can create a specific template for the page
or for the entire site. The templates for the entire site have two types:
full-page templates and so-called reusable parts that you can reuse in
different full-page templates.
Oxygen gives you access to a lot of template configurations.
For example, you can decide which parts of your site a template applies to, if
it is inherited from other templates, and configure a template priority order
for cases where more than one template is applied to a specific page. In
addition, you can also add short codes to each template.
To use a specific template for a specific publication or
page, simply go to the publication or page editor and choose the template in
the widget that Oxygen adds to its administrator interface:
You can easily manage, edit, filter and delete your oxygen
templates from the Templates menu that looks like the menus of all publications
and all WordPress pages:
ELEMENTOR
Elementor also has two types of templates: Pages and
Sections. When you click on the Create Template button, Elementor takes you
directly to the page creator interface, outside of the WordPress administrator.
If you want to edit the configuration of your Elementor
templates, you must go to the template manager that you can access in the My
templates menu. Elementor allows you to choose from three different template
types: Default Template, Elementor Canvas and Full Element Width. The second
(Elementor Canvas) allows you to work with a blank canvas instead of the set of
themes in the Appearance menu.
Visual edition
In fact, both page creators have impressive visual editing
capabilities. Visual editors exist in a separate interface, outside the
WordPress administrator. Both Oxygen 2.0 and Elementor allow you to easily move
between the two interfaces.
OXYGEN 2.0
When you click on the Edit with oxygen button in the Templates
menu, Oxygen takes you to the visual interface of the site generator. If you
choose the blank installation, start with a blank page, while you can start
from your prefabricated design set if you chose to install the prefabricated
website. This is what the Oxygen 2.0 site creator interface looks like with a
blank installation:
The white screen on the right is your canvas. You can place
the building blocks of your site on it by dragging and dropping the elements in
the left panel. Oxygen 2.0 has a new and amazing flex box design engine that
facilitates the design and alignment of elements on your page. You can also
easily switch between horizontal and vertical designs.
Now, we'll switch to one of Oxygen's prefabricated design
sets so you can see how class-based editing works with Oxygen 2.0. Most site
creators do not have this function and you must edit the elements that belong
to the same CSS class one by one. However, with Oxygen, you can edit the design
of all elements that contain the same class at the same time.
For example, to edit the style of the top menu items, you
only need to click on one of the items (for example, About) and all the related
CSS styles appear in the left pane. From here, you can adjust the font family,
text color, font size, and all other properties related to the top menu items.
At the top of the left sidebar, you can see the name of the
class you are editing (winery-header-link in the example). Therefore, all items
that contain this specific class will be updated throughout the site each time
you save the changes. Not only can you edit the classes, but also the
membership states, such as: hover or: after. In addition, you can also create
separate styles for different screen resolutions (for example, for mobile
screens).
Another great thing about the creator of Oxygen visual sites
is the Structure panel. It is not visible by default, but you can open it
easily when you need it. It appears in the panel of the right sidebar and
allows you to consult the structure of all HTML elements at any time. In
addition, you can also drag the elements and appear in their new places in the
visual editor in real time.
ELEMENTOR
By default, you can add building blocks to existing themes
with the Elementor visual page generator. However, there is an option
(Elementor Canvas) that allows you to edit a blank canvas as well. In the
screenshot below, you can see how you can drag and drop additional items into
the Twenty Seventeen theme (however, you can also use any other WordPress
theme).
You can choose from the three-page construction options: you
can add a new section, a new template, or drag a widget from the panel in the
left sidebar. In the case of templates, you can upload them from the Elementor
design library or from your own Elementor templates saved in your WordPress
administrator. In the case of sections (smaller building blocks), Elementor
allows you to choose between a couple of predesignated designs:
For example, if you choose the three-column design, you can
add widgets to each column separately. In the following example, we added three
social icons from the Elements panel, one to each column. Element aligned them
correctly within the section and you can also easily edit related styles, such
as color, size, margins and fills.
The Elementor visual generator allows you to hide each
element in different screen resolutions (desktop, tablet, mobile) and control
the response aspects of your design as well.
OTHER FEATURES
Both Oxygen 2.0 and Elementor offer a couple of additional
features. In addition, both give you access to an independent design library
should you prefer to start with a prefabricated design. Both have impressive
documentation with a series of tutorials, videos and other learning materials.
OXYGEN 2.0
Oxygen 2.0 comes with the impressive dynamic data feature
that makes it possible to link design elements created within the visual
generator to data from your WordPress database. You can also easily export and
import all your CSS and other design configurations that you have created with
Oxygen. In addition, you have access to the SVG libraries of Font Awesome and
Linear icons, install your own SVG sets and integrate Oxygen 2.0 with your type
kit account, too.
ELEMENTOR
Elementor has an excellent role manager where you can
configure what type of users (Subscriber, Contributor, Author, Editor) can
access the visual editor interface. Elementor also allows you to easily put
your entire website in Maintenance Mode while you edit the design. In addition,
you can add your custom fonts to Elementor, which you can then use directly
from the visual interface of the page generator.
