This is Unit 0, focusing on web design. In this Engineers blog, I want to introduce some of the topics I’ve been working on daily. This time, I will explain how to use the WordPress plugin, Elementor. By using the Elementor plugin, you can intuitively create web page layouts with drag-and-drop operations. No programming skills are required. In this post, I will explain the basic usage of Elementor.
Elementor Installation and Validation
Elementor is not compatible with all WordPress themes, so we recommend using a supported theme. For this example, we are using the official Elementor theme: HelloElementor.
Booting Up Elementor
Go ahead and create a new fixed page. Now selsect “Edit with Elementor”
About Elementor Widgets
The features provided by Elementor are called “widgets.” You can see a list of widgets on the left side of the screen.
With the paid version, you can access more widgets. As of September 2024, there are four plans available for the paid version, with upgrades ranging from $59 to $399 per year.
Creating a Layout
First, use the “Layout” widget to determine the structure of your web page.
In Elementor, there are two types of page layouts: Flexbox and Grid.
In earlier versions, Elementor layouts were made up of “Sections,” but in recent updates, the concept of “Containers” has been introduced leading to the deprecation of “Sections”.
In this example, we will create a layout using a Grid.
By default, a Grid layout with 3 columns and 2 rows will be created.
Detailed settings can be adjusted by clicking “Edit Grid” on the left side of the screen.
Placing Elements in the Grid
You can easily create a web page by placing elements from the basic widgets.
Simply by using mouse operations, you can easily position content commonly used on web pages.
In the future, I plan to cover more detailed setting methods.
As introduced previously, you can also easily conduct tests using the “LOCAL” environment so please give it a try.
Stay tuned for the next technical blog post.
