Elementor Page Builder.

Realtify is compatible and works alongside the popular page builder, Elementor.

It is one of the newest page builders and allows you to create and customize pages quickly and easily.

This visual page builder, allows you to create pages by using sections and columns to add different widgets to your age content. Sections consist of columns and widgets that you are able to move and manipulate between sections. Each section is draggable, as well. This builder makes use of drag and drop to customize with ease, but there are many other tools to customize content further, for example margin, padding, column width, content position and background color. With the pro version of Elementor, you are also able to write custom CSS into your pages.

To install Elementor Page Builder Plugin:

  1. Go to your WordPress Admin Panel
  2. Click Realtify on the Dashboard Sidebar
  3. Navigate Recommended Plugins tab
  4. Install Elementor

You can also install Elementor from the plugins tab on the WordPress dashboard.

After installing, Elementor adds an extra tab to the standard WordPress editor. To find this tab and create a page or post with the page builder, follow these steps:

  1. Go to your WordPress Admin Panel
  2. Click the Pages on the Dashboard
  3. Click the Add New
  4. Navigate to the top left hand of the WordPress text-box and find Edit with Elementor button.

Elementor Options

On the right side of the page, you will find the editing screen. There, you can add, edit, and move elements, or even choose a layout for your page. The Elementor panel is on the left side.

You can use the available widgets to add elements to your page individually or choose one of the prebuilt templates or block designs.

Elementor Editing Screen

Add New Section

As mentioned before, with this page builder you can make your page consisting of sections, columns, and widgets.

You can add new section by clicking the “+” sign, then choose a column structure. After, you will be able to drag widgets from the Elementor panel to the columns.

Inserting a Template

The Template Library is accessible on the Elementor editing screen next to the “Add Section” button. Click Add Template button. A window will appear with the following tabs: Blocks, Pages and My Templates.

Blocks

Under the Block tab, you will find some premade sections that you can insert to your page rather than building from scratch. These blocks are basic and common content for websites and can help you shape your pages. You can also search for specific kinds of blocks using the Category and search features at the top. After you choose a block, you will still be able to customize and manipulate your selection, as well as Favorite the block for easy selection on other pages.

Pages

Under the Pages tab, you will find many pre-designed templates that you can insert to your page and further customize. You can search through templates, or use the “New,” “Trend,” and “Popular,” tabs at the top. After inserting the template, you can edit the text, and customize some of the styles.  

My Templates

Under the My Templates tab, you will find all of the templates you have saved. Here, you can preview, delete and export your templates as a JSON file so you can import and reuse on other websites. To import templates, you should navigate to the Elementor Settings on the WordPress dashboard.

Saving Pages or Sections as Templates

You can save your entire work on a page as a template to use on other pages, websites, or to save for the future. Once you are content with the changes on your page that you would like to consider for a template, navigate to the bottom left of the page and click on the arrow next to “Publish.” Here you will find additional Publish options. Choose “Save as Template,” enter the name, and then save. It will automatically be added to your “My Templates” area.

To save a specific section, you can hover over it and select the save icon. Name this section and save it to add it to My Templates area.

Elementor Panel

There are many widgets and features included in the Elementor Page Builder, as well as some advanced settings that affect the entirety of your website. From your Elementor Page Editor, navigate to the icon in the top left of the screen to find the advanced configurations. Here, you will find dropdowns for Style and Settings.  

Style

Default Colors

In this section, you can see your website color palette. You can create your own palette by clicking in the squares at the top and selecting a color, or select a premade palette suggestion. As you change colors, you will see the changes in the editor to the right. When you are content with your changes, click “Apply” and the palette will be implemented website wide.  

Default Fonts

In this section, you can change your website fonts. You are able to change the font family and weight of headlines (primary and secondary), body and accents.

Color Picker

In this section you are able to select up to 8 colors to be included in the editor’s color for each color option in a widget. Using this tool often saves a lot of time when customizing widget styles.

Settings

Global Settings

This section has two tabs: Style and Lightbox

Under the Style tab, you can set a default generic font, should you not choose a custom font, as well as the default content width. You can also set the distance between widgets and the element stretched sections will fit to.

Under the Lightbox tab, you can enable an image lightbox on any link that leads to an image file, or enable lightbox in editor. Also, you can customize the background color, UI color, and UI hover color.

Dashboard Settings

To access Elementor settings on WordPress Admin Panel, you can click on dashboard settings.

About Elementor

About Elementor gives you more information about this plugin.

Section Options

You can find some options to change for each section. Just hover over a section to see a blue line indicator. There are up to 5 icons to customize your section: Edit Section, Duplicate Section, Add Section, Save Section and Remove Section

Edit Section

Stretch Section

Enable this option to make a section the full width of a page.

Content Width

The width of content can be Boxed or Full Width. Also, you are able to change it manually by adjusting the amount or typing your desired value.

Columns Gap

Here, you are able to change the size of the gap between columns. Your options are:  Default, No Gap, Narrow, Extended, Wide, Wider

Height

Here, you can choose the height of your section. The height of your section can be Default, Fit to Screen, Min Height. If you choose min height, you are able to manually change the min height.

Content Position

This option lets you change the position of your content. Your options include: Default, Top, Middle, and Bottom.

HTML Tag

Here, you can change the HTML Tag of the section. It can be changed to div, header, footer, article, section, aside or nav.

Style

Background and Background Overlay

A Section background can be Normal or have a Hover effect. Also, it can be Gradient, an image or even a video.

Border

You can have a Normal or Hover effect border and change the color. You can also change the style of it to Solid, Double, Dotted, Dashed, or Groove as well as adjust Border Radius and Box Shadow.

Shape Divider

There are almost 20 available Shape Dividers and you can add it to Top or Bottom of your section.

Typography

With this option, you can change typography parameters: Text Alignment, and the color of section Heading, Text, Link, and Link Hover.

Advanced

Advanced

Under the advanced tab, you can change Margins, Paddings, Z-Index, Entrance Animation, CSS ID and CSS Classes.

Responsive

Responsive options let you Reverse Columns. It means you can choose to reverse the order of your columns on mobile or tablet views.

You can also choose to Hide your section on Desktop, Mobile, or Tablet.

Custom CSS

This option is available for pro users of Elementor, only. However, this option allows you to add custom CSS to any section.