Tong Family

I wanted to created a truly professional site, not just a blog, so my good friend Jim said that Elementor was the way to go. This made some sense, it is based on WordPress and thus easy to get something up and running quickly. So here are some hints:

1. You need a good tutorial to do this and Darrel Wilson comes up as a top hit, it takes you all the way from the ground up, that is get a URL, install WordPress and then create a site with Elementor.
2. The first mistake in the tutorial is saying that you need to change the permalink structure for posts. That actually isn’t true because won’t actually use any blog posts.
3. Then you need a template that works well with Elementor, they suggest the OceansWP theme and you the associated Oceans Extra plugin. I
4. You then install the Elementor Page Builder
5. Then you create a new page with Pages/Add New Page as a bunch of these and then you want to also set the home page and create a bunch of other static pages. At this point you are not doing anything but creating the structure.
6. It is not covered in the tuturial but they do have a quick setup wizard in the theme. This kind of duplicates what the tutorial is doing by giving you a complete site that you just need to edit. But going through the tutorial tells you all the things you have to disable in default WordPress so that Elementor has enough to do it’s own magic.
7. So first create sample pages Home, About Us and Contact Us1 in the Pages area, then go to the menus and add them to Appearance/Menu/New Menu called Main menu, this structure will be used later to wire up all the links between them. You can instance drag and create a set. Then go to Manage Locations to stick the menu at the top.
8. Now flip to a static home page with Appearance/Customize/Home Page Settings/A Static Home Page and pick the Home you created earlier.

Now the real magic begins. Let’s start to disable the pieces of WordPress that get in the way by first hacking away at each page, so starting with the home page, get rid of all the WordPress default elements:

1. The big trick is to fix the theme settings on the home page and change a bunch of things Oceans WP Settings
2. In Content Layout change this to 100% full width. This basically gives total control to elementor across the entire page. And for the same reason you need to for margins choose Disable
3. Then you don’t want the default Top bar so choose Header/Display Header/Display Top Bar and Disable it.
4. Then you want to go to the Menu item (this is different than the tutorial which uses an older version of WordPress) and select the Main Menu you created previously
5. Also disable the Title which defaults in the middle with Title Disable.
6. As an aside you are doing this on a live site and don’t want people looking, then just set the Page publishing to Private and then only registered admins will be able to look at it.

That’s the main trick, if you go to the Elementor Page Builder, you can now drag and drop elements. This is using the Responsive Design framework that Twitter first came up with called Bootstrap, things get laid out in a many rows of sections that can be either 1 to 6 columns wide. Within the sections are various widgets which have the content. You can see this design all over the internet now and Elementor makes that easy:.

Creating a single image home page

Everything goes through fashion, but if you look at airbnb.com for instance it looks way different from the amazon.com page. There is a single massive graphic, so let’s learn how to be so 2019 and do this with elementor:

1. Go to Page/Edit Page for the Home page. and then choose Edit in Elementor this will start the plugin and introduces a drag and drop canvas for web design. Pretty cool what HTML5 can do eh?
2. In this world, every page is made up of a series of sections, go first choose add section and you can choose how. So choose the + and add a section, you get a choice of how how many layout columns are in it.
3. To make the new style ‘gigantic landing page’ that is so popular now, choose just 1 column and then you can look at it’s properties by clicking at the center. This lets you edit the Section properties. You can make a single large area by setting Section Stretch, Column Width: Full Width and Content Height: Stretch to Screen.
4. Now choose Update and look at what you have.
5. Now you need some images, the easiest way is to subscribe to some of the open source image sites. I use Unsplash.com and it is pretty awesome. You can select some and then download them to your machine. As an aside, they make finding your collections nearly impossible, you have to go to your profile, then in the middle in grey is a button called Collections and then you can see it. The url https://unsplash.com/@yourusername/collections works better.
6. Now go to Edit Section/Style/Background and you can choose Classic for an image, Gradient and even Video if you want to have a video running in the background. That used to be very popular, but a static images seems most common now. So choose image and then upload them back up there. And make sure to choose Size as Cover?
7. The essential idea behind this is that you drag and drop objects from the left onto the main area. The key concept is a section which let’s you divide the pages into columns. Then you can drag pieces into those sections. When you want to edit a piece, you can click on it or on the grey icon on the left or the section icon at the top and you will jump to the edit section
8. If you get lost, then you can always right click and select navigator and browse through the components.
9. To manage spacing, you can set each component with two things. The first is margins and the second is padding. Margins basically set the offset on the edges. You normally want this unlocked. Locked means that if you change the top, it will do the same for the bottom. Same for left and right.
10. Finally, you can always add a background to anything and this can be an image. The image stuff normally requires, you set it to contain and then you will get the image. The cool thing is that if you have the section grow, everything on all sides grows.
11. Then there is a cool feature called Template which lets you copy an entire web page over and over.
12. Making the headers work was pretty tricky because you to have to toggle between the Elementor view and the underlying WordPress view.

Some strange things and tricks

That’s the basic ideas, here are the gotchas:

1. At least on the tutorial, the interaction between the WordPress and the Elementor addin. The first is that at least on my trial, the move to a transparent header never really worked, the header always showed. I had to set the first object with a negative pad to make it “write over” the header. The reason was that I had an invisible section and this caused the spacing, so errors, so if you have space problems at the top, use your navigator and see what you have above your first object. And the transparent doesn’t seem to work well and neither does the icon scaling for mobile.
2. Second is that the footer code is pretty buggy, you have the ability to laydown four columns worth of footers and that is pretty confusing actually and there were redisplay bugs.

Making things work for tablets and mobile users

This actually quite cool:

1. every widget in Elementor has an Advanced/Responsive section which let’s you decide if an element displays on tablet or mobile or desktop, so you and have “code” where you can have some parts that say have a video in the background which only works on mobile.
2. There is also a Backup Image for videos that handle this more easily, but if you have to completely redesign sections, then you can basically have different layouts in the same page.
3. If you want to preview what it looks like, when you click on the left arrow to remove the controls, you get a full preview. Pretty nice.
4. The main bug is that for some reason the header never shows up, so you kind of have to eyeball it. The footer you can get rid of in the WordPress Appearance Footer menu, but the header doesn’t seem to be responsive and it fixed except for a smaller icon which also doesn’t seem autoscale.