{"id":427,"date":"2022-01-19T14:15:38","date_gmt":"2022-01-19T14:15:38","guid":{"rendered":"https:\/\/rockythemes.com\/documentation\/?p=427"},"modified":"2022-01-19T15:31:54","modified_gmt":"2022-01-19T15:31:54","slug":"using-the-elementor-page-builder","status":"publish","type":"post","link":"https:\/\/rockythemes.com\/documentation\/using-the-elementor-page-builder\/","title":{"rendered":"How to use the Elementor Page Builder"},"content":{"rendered":"\n

After installing Creativo you can choose to import a Creativo PreBuilt Website<\/strong> or you can choose to create everything from scratch, using Creativo, Elementor Page Builder<\/strong> and Creativo Elements<\/strong>.<\/p>\n\n\n\n

If no Creativo PreBuilt Website was imported, we can still install Elementor by navigating to Creativo -> Plugins area: <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Hit the Install button for both Elementor<\/strong> plugin and Creativo Elements<\/strong> plugin. <\/p>\n\n\n\n

It’s very important that both Elementor and Creativo Elements plugins are installed and active. If you do not install Creativo Elements plugin, you won’t be able to use any of the elements\/widgets we created for Elementor.<\/p>\n\n\n\n

After both plugins have been installed we can get started.<\/p>\n\n\n\n

The Elementor page builder can be used by default, on Pages.<\/p>\n\n\n\n

Navigate to your WordPress admin dashboard -> Pages<\/strong> -> Add New<\/strong>.<\/p>\n\n\n\n

Enter a Title for your new page and from the Right Sidebar of your editing window -> Page tab<\/strong> -> Template<\/strong> -> choose Elementor Full Width<\/strong>.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

After doing this hit the Publish<\/strong> button.<\/p>\n\n\n\n

Now click on Edit with Elementor<\/strong>.<\/p>\n\n\n\n

We are now being taken to the actual Elementor Page Builder interface, where we will be able to build anything we want on our page, by using Drag and Drop actions.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

From the left we can choose which element to add. <\/p>\n\n\n\n

Before adding elements, we should first create a new Section. <\/p>\n\n\n\n

Sections will hold the actual elements while allowing us to create custom layouts, for example: a 3 columns layout or a 4 columns layout.<\/p>\n\n\n\n

Click on the + button and choose a section layout, also known as Structure<\/strong>, to be added. <\/p>\n\n\n\n

For this example we are going to use a 3 Columns layout<\/strong>.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Our new structure should appear on the page, in a 3 columns layout.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Pretty cool. Now we can start adding some elements. Let’s try using some Buttons elements.<\/p>\n\n\n\n

From the left Elementor sidebar, click on the button on the right of the Edit Section title.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

We are now taken in the Elements section where we can either search for the element\/widget we want to use or navigate through the available sections.<\/p>\n\n\n\n

By default the Basic section will be collapsed displaying the available elements\/widgets of Elementor. Make sure to close that section by clicking on it.<\/p>\n\n\n\n

Scroll down until you find the Creativo section<\/strong>. <\/p>\n\n\n\n

This is where all the Creativo Elements exist. These, are special elements\/widgets that were created by us, RockyThemes, to best suit our needs for our theme. <\/p>\n\n\n\n

These elements\/widgets will only work with Creativo theme and only if the Creativo Elements plugin is enabled.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

As you can see the Creativo Elements\/Widgets are colored in Blue and also have a small “C” letter in the top left corner of each element.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Position your mouse over the Button element.<\/p>\n\n\n\n

Next click on it – and without releasing the mouse button – drag the element into one of the three available columns<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Now that the element has been added on the page we can use the provided settings to make the button the way we want. <\/p>\n\n\n\n

The Content tab -> Text is where the actual Text for the button can be changed. Either type your text here or click on the actual Button, at the end for the Click here text and use your keyboard to type in the text that you want to appear on the button.<\/p>\n\n\n\n

Set a link for your button and change the alignment to Center using the Alignment settings.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Icons are optional but can be set by easily clicking the + button under Icon section.<\/p>\n\n\n\n

Next let’s move to the Style tab. Click on it and the actual Styling options will be provided.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Here we can alter the colors, background, button effects, border radius, paddings as well as the Typography of the button. <\/p>\n\n\n\n

There are also options for hover state so click on the Hover tab to access these settings.<\/p>\n\n\n\n

Once you are satisfied with your changes, hit the Update button<\/strong> located at the bottom right corner of the Elementor panel.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The page will now be updated with the changes we performed:<\/p>\n\n\n\n