For my next WordPress Site I wanted to try using a Page Builder. WordPress already offers default way to customize content. But page builders help do what WordPress does best. Simplify the web design process.
WordPress offers support for several page builders. Each page builder includes drag and drop features that allow you to easily add and customize content on your website. Some of the most popular page builders are:
- Beaver Builder
I ended up choosing Elementor as it is the plugin that seemed to have the most support with different themes. Some features the free version of Elementor support are:
- Live Preview
- Fast Interface
- Free Widgets
- Unique effects for built in elements
Elementor uses its own window to make edits to your website’s page. When we first open Elementor’s page builder the screen is split up between a side panel and a preview of your website. The side panel is filled with draggable widgets that can be used to fill your website with customized content.
Within the preview window new Sections can be added. Sections are new rows that we fill with content. Once we create a new section, we have the option to choose a structure type. This is basically the amount of columns the new row will have. After we add a new section we can drag widgets to a column in the new row.
We can select the side panel to display different settings that change how the element reacts. In the edit section the main tabs are: layout, style, and advanced. When we edit widgets layout is swapped for content.
Under layout we can change:
- Stretch Section
- Content Width Style
- Column Gap type
- Height type
- Vertical Align Type
- Overflow type
- HTML tag type
- Structure type
Under the style tab we can change:
- Multiple background types or images
- Slide duration and type
- Background overlay
- Shape Divider
Under the advance tab we can change:
- CSS ID
- CSS Class
- Motion Effects for Entrance Animations
- Mobile Responsive Settings
These are just settings that are specific to the elements used in my examples. By selecting a different element we can change the available options in the settings.
The Gutenberg editor is WordPress’ new default content editor. This editor contains allot of the same functionality as Elementor. You can add new rows, columns, and widgets as blocks of code. Additionally you can select a block to apply settings to an element.
What Gutenberg lacks is built in widgets and the ability to apply different visual and functional settings. With Elementor I can easily add built in icons, image galleries, testimonials, and progress bars. I probably can add similar elements through Gutenberg. However many of these elements would require programming knowledge or additional plug-in installations.