Getting Started - Logging In
You will log into your website by typing the website’s URL and adding /wp-admin/ in order to get to the dashboard. You will need to know your username and password.
Editing the Content of a Post
To edit a post, go to the Dashboard by hovering over the name of the site in the top black bar of the screen and then clicking on Dashboard. Then at the dashboard, click on Posts -> All Posts in the sidebar (left hand column). This will bring up a listing of the posts on your website. Hover over the name of the post that you want to edit and click Edit with Elementor. This will bring up the Elementor editing screen.
Editing in Elementor and Working with Widgets
The content is displayed on the right side of the Elementor editor. Content in the Elementor editor consists of rectangular sections.
When hovering over a section, a blue section icon appears at the top of the section. Sections may contain columns (vertical) areas.
In the blue bar in the top middle of the section are icons as follows:
- + which adds a new section on top of the current section
- Six dots which can be used to move a section to another place on the post or page and to edit certain section characteristics
- X which is used to delete a section
To move a section, hover over the six dots at the center of the blue section icon and drag the item to a new location. A blue bar indicates where a section or widget will be placed.
When hovering over a column, a grey column icon appears at the upper left hand corner of the column. Each column within a section may contain widgets. The column icon can be used to edit columns. For example, right click on the column icon and choose “Add New Column” to add another column to the section. You can then hover over the dashed line between the two columns to adjust the column widths.
Widgets are functional or appearance components that can be dragged from the Elementor sidebar (left) to the visual content space (right), such as the text widget and the image widget.
When hovering over a widget, a blue pencil icon appears at the top right hand corner of the widget. By clicking on the pencil, you will open up the widget for editing. Content is edited in the left hand column, which is the editing panel.
After clicking on the pencil icon, you can edit the text of a section by deleting old text and/or typing your new text in the left hand column, which is the editing panel. Do not edit in the area on the right, which is the Live Preview panel because you can’t always be certain where your cursor is located, and not all editing functions may be available to you in the Live Preview panel. When you have finished your edits, click the green “Update” button to update the content.
To return to the list of widgets, click on the 9-dot icon at the upper right corner of the left sidebar.
To add a new section, simply drag a widget (e.g., text widget, image widget, other) from the widget panel on the left side of the screen to the dotted rectangle at the bottom of the right panel where you see the words, “Drag widget here.”
Editing Text in Elementor – Adding Features
A number of options are available to you when editing text, such as putting text in boldface and/or italic type, underlining, changing the color of the text, making the text into bullet points, and more. After clicking on the pencil icon, these features are available in the left hand column (Text Editor).
Returning to the Dashboard
After editing a post or a page in Elementor and saving your changes by clicking the green Update button, clicking on the three horizontal lines at the top left of the Elementor Widget sidebar allows you to click on the blue bar to “Exit to the Dashboard” (for example when you want to edit another post or page).
Adding an Image
To add an image to its own section, add a new section and drag the image widget onto that section. Click “Choose your image” in the Image widget in the Elementor sidebar. Select the image in the media library (or click Upload Files if the image is not yet in the library and drag the image onto the screen) and then select the Insert Media button on the bottom right. In the Image widget in the Elementor sidebar, choose the desired image size. Enter a caption if desired. Clicking on the image brings up the Elementor image editor, which allows you to position the image left, center, or right.
To add an image to an existing section, start by dragging the image widget onto the existing section, and then follow the instructions above.
To add an image at the top of the post, click on Posts -> All Posts. Choose the post to be edited. Hover over the name of the post and click Edit. Scroll down toward the bottom of the post until you see Featured Image in the right hand column. Click Set Featured Image and choose a photo from the Media Library by clicking on it, or upload a file from your computer and select the image. Then click the blue Set featured image button on the lower right. Click the blue Update button in the upper part of the right hand column to add your featured image.
(Note that the featured image will appear at the top of the post on the page where you are displaying the post, but it may not appear at the top of the actual post itself when a user clicks the “read more” link.)
Adding a Hyperlink to a Post or a Page
Clicking on a hyperlink takes the user to a new internet location.
To create a link using the text editor on the left panel, first enter the text to be linked and highlight (select) the text. Then select the paperclip editing icon (“Insert/edit link).” Enter the internet page address the link is to go to in the URL box, or paste the internet page address if you have navigated to it in a separate window and placed it on your clipboard. You can link to external websites, to documents in your Media Library, and even to other pages on your website. Click the gear icon (Link options). Check the “Open in a new tab” box if desired. Click the “Update” or (“Insert link”) button. The link text will change characteristics to indicate the text is a link, usually a different color. Click the green Update button to save your work.
Adding a Link to a Document in a Post (or on a Page)
Adding a link to a document in a post or on a page is similar to adding a hyperlink because you will add a link to the document’s URL.
Save a PDF of the document (this is preferred for readability, as opposed to saving a document in Word or Excel format) to your Media Library, then go to the Media Library and click on the name of the document. In the right-hand column in the Media Library, click on “Copy URL,” which will put the URL of the document on your clipboard.
Navigate to the post (or page) where you want to insert the link.
Drag the Text Editor widget onto a section if you haven’t yet entered any text. Delete the “placeholder” text if needed. Enter the text that you want to appear on the post, for example
Click here for an article on Eurasian Watermilfoil
Highlight the text that you wish to link (in this case highlight “Click here”).
Click on the paperclip icon (Insert/edit link).
Paste the URL that is on your clipboard.
Click the blue “Apply” button. Alternatively, you can click on the gear icon (link options) and click the box “Open link in a new tab” and click the blue Update button (if you want to open the link in a new tab). The link text will change characteristics to indicate the text is a link, usually a different color.
Click the green Update button to save your changes.
Adding a New Post
On the Dashboard, click on Posts -> Add New, or hover over the + symbol on the top black bar of the Dashboard and click on Post. Enter a title for the post.
Select a category for the post. This will control where the post appears on your pages. If your website has been developed using a technique that automatically places posts with certain tags on the appropriate pages of your site (for example, Agendas and Minutes), this step is critical in order for the posts to appear on the proper page.
To improve the ability of users to find information on your site, you may wish to add tags, which are keywords that you want to be associated with your post.
Set a featured image to appear at the top of your post if you wish – see above instructions under “Adding an Image to a Post.”
Select the “visibility” of the post in the Publish section, which is to the right of the site title:
Public = everyone can see the post
Private = only the site administrator can access the post
Password Protected = only users who know the password can access the post; if this option is selected, you will be prompted to enter the password; then click OK
Click the blue Publish button if you want the post to be immediately viewable prior to adding content. Then click the blue Edit with Elementor button, drag a widget or widgets onto your post, add content, and click the green Update button at the bottom of the Elementor widget sidebar.
If you want the post to be immediately viewable prior to adding content, click the blue Edit with Elementor button, drag a widget or widgets onto your post, add content, and click the green Publish button at the bottom of the Elementor widget sidebar.
Note that clicking the green Publish button will make the post available on the internet unless the visibility of the post is set to Private or Password Protected.
Adding a New Page
If you wish to add a new page to your website, you can follow the instructions for adding a new post, but start by hovering over the + symbol on the top black bar of the Dashboard and click on Page. Enter a title for the page and continue as above for adding a post.
Edit versus Edit with Elementor
When you hover over the name of a post, you will see two editing options – Edit and Edit with Elementor.
The Edit option allows you to change the overall characteristics of the post, such as its visibility, and to add or edit Categories, and add or edit Tags. Categories are used to control where on the website your post will appear, and Tags are used to control the position on the webpage. You can also set or change a featured image for the post through the Edit option.
The Edit with Elementor option allows you to add or edit content on the post.
Creating and Editing a Gallery or Basic Gallery
You can add a gallery (collection) of images to an existing page or you can create a separate Gallery page for your images. You can have more than one gallery on a page. For example, you can create a gallery for photos of the lake, another for wildlife, and yet another for activities on the lake. You can include captions if you wish.
There are two options for a Gallery that use different widgets. The “Gallery” widget allows you to have captions as an “overlay” – they appear when you hover over an image. The “Basic Gallery” widget allows you to place captions below each image. The Gallery widget has a somewhat cleaner appearance because it keeps the spacing between images the same. The Basic Gallery widget will allow for longer captions, but the spacing between the images will then be irregular because some captions may be longer than others.
To create either a Gallery or a Basic Gallery, first add your images to the Media Library. As you add each image to the Media Library, type the caption for that image in the space marked Caption.
Then navigate to your Gallery page or section of a page where you want to insert your gallery, adding it as a new page and adding it to your menu if necessary, as described above. Drag the Gallery widget or the Basic Gallery widget onto the appropriate place on the page. The Gallery widget is in the Pro section of widgets, and the Basic Gallery widget is farther down on the list of widgets under the General section of widgets. After you drag the widget to the page, you will see Edit Gallery or Edit Basic Gallery in the left-hand editing column and a box that says “No Images Selected.” Click on the + sign inside that box, and you will be taken to “Create Gallery.” Click on Media Library near the top and you will see all of the images and documents in your Media Library.
Click on all images that you want to insert into the gallery. Click on the blue “Create a New Gallery” button in the lower right-hand corner. Drag and drop the images to put them in the desired order. Click the blue “Insert Gallery” button in the lower right-hand corner.
In the Edit Gallery or Edit Basic Gallery editing pane on the left-hand side, choose the number of columns you wish.
For the Gallery widget, in the Edit Gallery editing pane on the left, click on “Overlay” and for Title, choose Caption.
For the Basic Gallery widget, in the Edit Gallery editing pane on the left, click on Style (below the words Edit Basic Gallery). Under Caption > Display, click on “Show.”
For either Gallery or Basic Gallery, click on the green Update button to update the page.
To edit the Gallery or Basic Gallery to add images, click on the blue pencil icon for the Gallery/Basic Gallery section. In the left-hand Edit Gallery or Edit Basic Gallery editing pane, click the grey pencil icon in the area that includes your images. Click Add to Gallery, and choose your additional images. Click the blue Add to Gallery button on the lower right. To delete an image, click on the X in the upper right-hand corner of the image in the gallery. Click Insert Gallery. Click on the green Update button to update the page.