Modern Web Development with WordPress Elementor
Tags: webdev, wordpress
Published: 2023-05-27 00:09:32

As a web developer working at [Design Agentur Form und Zeichen in Graz](https://www.formundzeichen.at/), I have encountered various challenges while striving to build stunning, modern websites and stable web applications. Depending on the specific project requirements, we leverage different technologies and services. In this post, I aim to present some intriguing approaches for modern web development for small websites and provide a concise overview of essential software that every web developer should be familiar with.

## Modern WordPress and some hidden gems

Back in the day, when numerous content management systems (CMS) emerged and competed for dominance, it became commonplace to purchase a promising theme or utilize a free one to swiftly build a website. For a developer it was easy to build a clean and simple WordPress theme from scratch, but it was not possible to eliminate the plugins, especially when the website had to provide a lot of features or if it used ecommerce plugins like [WooCommerce](https://woocommerce.com/).

However, as the website grew in size and the demand for additional functionality increased, more and more plugins were installed, leading to instability and a less professional appearance in terms of design.

![WordPress Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c1uzj5kw6kxl023cxamv.png)

Furthermore, as time elapses, security issues begin to manifest. It is important to regularly update old themes and plugins, but unfortunately, some of them cease to receive updates. In fact, we had to resolve security breaches on multiple customer websites that were compromised by automated scripts. This is particularly crucial when it comes to [WordPress](https://wordpress.org/), as it is one of the mostly widely used CMS and therefore a target for many automated hacking attacks.

### Simplicity and security with Elementor

When visual post editing plugins like visual composer showed up, things got easier. Without detailed knowledge, a user could change the content of the website and even apply some minor layout and design changes. But with new possibilities, new problems arrived. Those visual editors produced a high amount of metadata, that is stored in the database. Because of the bad efficiency of the plugin, saving an edited page could take up to 20 seconds, depending on the complexity of the page. The page speed for customers, which is very important for Search Engine Optimization (SEO) suffered too. With cache plugins, the situation got better, at least for the publicly presented pages.

When [Elementor](https://elementor.com/) was released, there suddenly was a simple very easy-to-use editor, that apparently even works very efficient compared to others.

![Elementor Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vpzn0kawo75qiwqllv04.png)

The way of setting up a simple website changed completely. Instead of using a theme, even beginners are able to build simple websites. The first step is to install the free and clean [Hello Elementor Theme](https://elementor.com/products/hello-theme/). Because the theme is not the main product of, Elementor is very simple and clean and thus a very low security risk. Elementor also has a great interest in keeping the theme updated, as it is the foundation of a stable Elementor setup. They also provide a [child theme](https://github.com/elementor/hello-theme-child), if you want to extend it with custom code. But by now it is not necessary to install the child theme for small websites anymore, because Elementor has a great integration of custom code blocks for JavaScript and CSS code or any other HTML tag that is loaded to the HTML DOM.

### Modern design elements
Nowadays, all important devices including smartphones are capable of processing complex website content without effort. With these capabilities, new possibilities arise. In a recent [blog post about the integration of 3D objects into your WordPress Elementor website](https://www.formundzeichen.at/en/development/three-js-in-wordpress-elementor/) that I published on our [website](https://www.formundzeichen.at/), you can find a step-by-step guide. It is very easy to load 3D objects, and it only takes some basic HTML and JavaScript knowledge to adjust the code to your needs. 

![load 3D objects with WordPress Elementor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xevk5rhwn2toxqes4qh.png)

### Fast websites with stable caching plugins

I mentioned above, that we had to fix several security breaches on WordPress websites. Most of the time the vulnerability was caused by plugins. But even when the plugins are updated frequently, there are some unfixed high severity security issues in some plugins. Especially, caching plugins have a high chance of producing security problems. The plugin we had the best experience with is [W3 Total Cache](https://wordpress.org/plugins/w3-total-cache/). It is very fast, and we never had a security breach caused by this plugin so far. 

### Easy resets with a backup plugin

Even when you have a stable and secure website setup, it is always advisable to configure automated backups. I have encountered numerous situations where a simple plugin update caused a WordPress website to crash. In such cases, or if you accidentally remove important components from your website, having a quick reset option can be extremely helpful.

The most stable option is to setup [Jetpack](https://jetpack.com/) for your website. But this service is charged. If you want to use a free alternative, I would recommend [UpdraftPlus](https://wordpress.org/plugins/updraftplus/). This backup solution is hosted on your website, and you can connect file storage services like [Dropbox](https://dropbox.com/) to be sure to never lose your data.

### Basic security setup

Finally, the stability of the website can be improved by a huge step with a security plugin. [Wordfence Security](https://wordpress.org/plugins/wordfence/) is one of the most popular plugins of this kind. Make sure to back up your website before you install plugins like this, because they change internal WordPress files and settings. There is a small possibility, that your website crashes during the setup of the plugin because of wrong hosting settings or because you lose the connection. In case of a crash, just reset your website with your backup solution and try again. 

## A stable WordPress installation

When you use those tool, you have a stable and fast basic installation. With Elementor, it is easy to build pages without deep programming knowledge. Of course, there are many interesting aspects of developing websites with WordPress, that I did not cover in this post. But it is a great start and prevents you from running into many potential problems. 

If you found this post helpful, please feel free to leave a comment and share your thoughts. I would also love to hear your recommendations for any plugins you consider essential for a basic setup.