The user interface of Elementor is intuitive and beginner-friendly, so you can be up and running in minutes. In this article we’ll breakdown how you can start editing your website with Elementor.

How to create a brand new page and edit with Elementor:

  1. From your Dashboard open the Page menu, and click Add New.
  2. Once you’ve given your page a name, press the blue “Edit with Elementor” button.

If this is your first time creating a page or news post and you want more details, click here: Pages Add/Edit a New Page

Please Note: If Elementor takes awhile to load, name your page and try clicking Publish or Save as Draft first. Then click on ‘Edit with Elementor’

Shortcut to edit with Element to an existing page or post:

  1. From your Dashboard open the Pages menu, and click All Pages.
  2. Hover the cursor over the page you wish to edit – this will bring up the action menu – click Edit With Elementor.

Right away, you’ll be taken into the Elementor building site. You’ll notice that the page is separated into different parts: the Widget panel on the left, and the Editing Screen on the right. Let’s see all the great things you can do on the Editing Screen first.

The Editing Screen

Initially, you won’t see much in the editing screen apart from the header and footer that come with your theme. But don’t worry, you can put a lot of content between the two. 

First lets explain the three elements you will always be working with when editing / building your pages.

1. Sections – Are blocks you edit and inside them are Columns.

2. Columns – Sit inside of Sections and used to house Widgets

3. Widgets – Individual elements that are placed inside of Columns

Ok, now that is out of the way. Let’s get back to your fresh new page. See the rectangle with the words “Drag widget here” and two buttons in the middle of the page? That is called a section and its where all the fun happens.

To create a section

  1. Click icon to create a Section or drag a widget in that section.
  2. Choose how many columns you want in the section.

*If you drag a widget into a new section, it will automatically create one column structure for you.

*If you drag a second widget into a section it will be stacked below your first widget. If you wish your widget to be stacked next to the first widget you will have to create a structure with two columns, and place the widget in the column next to your first widget.

3. We can place lots of widgets in any one of these columns. All you need to do is simply drag a widget from the panel to the column.

Go ahead and try it yourself. You can always delete a section by pressing  X on the Section Handle.

* If you wish to have widgets side-by-side make sure to select the appropriate number of columns.

Example of a two columns inside of a section without any widgets

Example: Here we created a section with two columns, and have then dragged both a Text and Image widget into each columns. It’s that easy!

Navigating the Widget Panel

The widget panel is where you can find all your available widgets for your website. First, however, we want you to look up to the very top of the panel, at the red stripe that says “elementor”.


 

  • The square with 9 dots  on the right takes you to the widgets list.
  • The “hamburger” menu button on the left allows you to switch screens, and gives you access to other options, including going back to your club admin’s dashboard. If you want to go back to the widgets, just click the square 9 dot icon on the right.

Tip: We do not recommend you use Elementor’s Global Style (Default Colors, Default Fonts, Theme Style), it will interfere with other settings for your whole site. GotSport’s Club Websites makes it easy for you to change your club’s main theme settings in a more friendly way. CLICK HERE TO LEARN MORE

The Widgets

Right under the Search Widget bar, you’ll find Widgets, including the GotSport widgets. Every club website will have access to the Basic widgets. If you have one of our premium club websites, you will have access to Pro and GotSport Widgets.

 

The Bottom Stripe Menu

Finally on the bottom of the panel, you have another bar with very useful options and functionalities

  1. Settings : The Settings button gives you some basic quick edits to your page/news post. Including your page’s title & Status. However, some Elementor settings do not work with the GotSport Theme, therefore we recommend you don’t adjust these settings in Elementor.
  2. Navigator: Some say its one of the most useful tools if you are working with a lot of content on your page. It will allow you to easily navigate and see every section, column, and widget in the hierarchical order you have on that page.
  3. History: Elementor will keep an eye on all the actions you perform while creating a page or a post. When you want to see what you did, all you need to do is press the History icon and have a look at the Actions tab. And if you’ve saved previous versions of a page or a post, you’ll be able to find them under the Revisions tab. This is useful if you want to revert back to an older version of the page.
  4. Responsive: Clicking this icon will bring up a drop down menu at the top of your edit screen where you can choose between different types of devices. Picking one will give you a preview of how your page looks on that type of device. You’ll be able to pick between a desktop computer, a tablet, and a mobile phone. The preview may not be EXACTLY what you see on the phone or tablet but it is pretty close.
  5. Preview: When you click this icon, a preview of the page will open in a separate browser tab.
  6. When you click on the Update or Publish green button, you are saving the page.

Now that you understand the basics of the drag and drop editor, you are probably wondering how do you edit Sections, Columns & Widgets? This takes a bit playing around to see what you looks good for you. However, we created some guides and tips to help get your pages looking great.

What Next? Elementor Settings Basics (Sections, Columns, Widgets)