This will be where you can find basic info on using your site, how to work with various plugins, and other information you may need. This page will be updated on an ongoing basis, so check back as needed. 🙂
The basics | Elementor | Woocommerce | SEO basics
Go to yourdomain.com/wp-admin.
Use the username & password I sent you in an email.
Elementor is a visual page builder plugin that I have begun using more and more on sites in 2019.
Here is the info you need to get started working with it.
When you go to Pages–>All pages, you’ll see that pages that use Elementor are marked as such, which helps you remember that Elementor is in use. 🙂 To edit one of the pages, hover over the page title and when the little extra menu shows under the page title, click, “Edit with Elementor.”
Once the page loads Elementor’s interface, you will see the page’s contents to the right, and to the left you will see Elementor’s editing area. All content is arranged into rows (also called sections) and then each row will have columns, and each column then holds individual widgets.
One thing to note: The top menu & logo and the bottom three footer widget areas & copyright bar are items that have to be edited in the theme; they are *not* editable in Elementor. Elementor only changes the stuff between the header & footer. 🙂
(You can get Elementor to edit those areas too, but you have to buy the full version, and it’s just not needed since you can just edit things in the theme.)
You can edit the content of a page (Elementor IS able to be used on posts, but that’s overkill – you don’t need it for posts, since posts don’t need an advanced layout 🙂 ).
You cannot edit the header/logo/menus, the sidebar, or the footer widgets/copyright areas with Elementor. Those items all have to be edited within the usual WordPress areas and/or your theme.
On the way.
When you click on any row/column/widget and its editing options appear on the left-side column, look at the very top of this left-side column for the dark pink bar (with name of what you’re editing), and just under that dark pink bar, look for the three tabs of “Content,” “Style,” and “Advanced.” These are your main editing tabs, and all widgets/columns/rows have them.
Exactly what each one lets you edit will vary depending on what item you’re editing, and where certain options are for different widgets will vary, but you’ll soon get used to how the options work. The “Content” tab will usually give you options for layout things; the “Style” tab will give you options for editing font colors, sizes, fonts, letter spacing, and more; and the “Advanced” tab will give you the spacing options for margins & padding (margins = space on the outside of things, and padding = space on the inside of things).
Note: Notice that for margins & padding on the Advanced tab, there is a little gray “chain” or lock icon to the side of where you write in values…this is to lock the same value for all four sides. Feel free to play with it and see how it all works. 🙂
When you are editing an item on an Elementor page, if you hover your mouse over it, you will see *three* things to note: a blue pencil icon in the top right of the text widget, a dark gray little icon in the top left, and the blue tab at the top center of the row. You will use all three of these often:
You can click and drag any/all elements around to rearrange them (individual widgets, entire columns, entire rows): Click and hold the top right blue icon to move a widget around, click and hold the dark gray left top icon to move around a column, and click and hold the blue top middle tab to move around an entire row.
You can duplicate an entire row by right-clicking the top middle blue tab at the top of the row and selecting “duplicate.”
You can add a new row from scratch by clicking the pink “+” circle at the bottom of all rows on the page (will be showing before your footer).
You do NOT need the pro version – Elementor is 100% free.
The paid/pro version offers some extra bells & whistles that are not needed for your site to function as I set it up. If you ever want to buy the pro version for a specific reason, feel free! 🙂 But you don’t ever HAVE to. 🙂
No – Elementor does not leave any code behind if you stop using it on a page. This is one of the things I love about it! Other visual page builders leave a LOT of annoying shortcodes behind when you uninstall them…Elementor does not.
Hover over a column, and RIGHT-click the dark gray icon in the top left of the column.
When you have two or more columns, you can hover over the line between them, then click & drag back and forth to resize the columns. (But note that this kind of adjustment for desktop may not look good on mobile; if you do a bunch of changes to desktop & need help making it work on smaller screens, just let me know. Elementor lets you fine-tune for mobile, but it’s too much to go into right now, lol!)
Hover over the widget then click RIGHT-click the little blue icon in the top right of the widget, and choose “Duplicate.”
Hover over the widget then click and hold the little blue icon in the top right of the widget, and drag it to a new place.
Hover over the row then click and hold the blue tab at the top middle of the section, then drag it to a new place.
Press Command+Z to undo.
Click the green button at the bottom of the left side panel.
Look at the top of the left side editing panel, the dark pink bar: click the three lines at the top left, then click, “Exit to dashboard.”
If you get stuck, have further questions, and/or have suggestions of what you’d like me to add to this page, email me! 🙂