① Access the WordPress administrator page.
For the administrator page URL, refer to the following on Lolipop!
Site Creation Tools > Easy WordPress Installation > WordPress Installation History
② Open Appearance > Themes.
③ Click “Add Theme”.
④ Search for “Hello Elementor” and install it.
⑤ Set up the child theme for Hello Elementor.
Themes are frequently updated, and as a result, minor settings changes may be overwritten and lost.
To prevent this, set up a child theme and make minor settings changes there so that they are not lost even if the parent theme (main theme) is updated.
⑥The Hello Elementor child theme can be downloaded from GitHub.
⑦Click “Code” and “Download ZIP” to download the ZIP file.
⑧Return to WordPress and open Appearance > Themes.
⑨Click “Add Theme”.
⑩ Click “Upload Theme” and “Choose File” to upload the ZIP file you downloaded earlier.
⑪ Activate the Hello Elementor child theme.
⑫ Delete any unused themes. You can delete each theme by clicking “Delete” after selecting it.
⑬ The theme setup is complete once it looks like this.
Install the necessary plugins for building a WordPress site to add functionality.
① Open “Plugins” in the admin panel.
② Click “Add Plugins.”
③ First, search for “Elementor” and click “Install Now.”
Elementor is a tool that allows you to efficiently create and edit high-quality WordPress sites without writing code. The free version alone is sufficient for creating landing pages.
④ Once the installation is complete, click “Activate.”
⑤ The following plugins will also be added later. We will install them later.
⑥ About the plugins already installed
① Open Pages > All Pages and click “Add Page.”
② Enter a title (e.g., “Test”) in the “Add title” field, then click “Save draft.”
③ Click “Edit with Elementor.”
④ Once the Elementor editing screen opens, click the gear icon.
⑤ Change the Page Layout: “Default” to “Elementor Canvas.”
⑥ This will display a blank screen that can be edited with Elementor.
⑦ Click “Publish” in the upper right corner to save the page, and you can confirm it by clicking “View Page.”
Here’s an explanation of each button for creating pages in Elementor.
(1) The “+” button is used when creating a page from scratch. Clicking it will bring up a screen where you can choose between Flex Box and Grid. Details will be explained later.
(2) Clicking it will open a page like the one below.
Sample templates are available in both free and paid versions. While they can save time if used effectively, they will not be used on this site. Details about “Templates” will be explained later.
(3) Site construction using AI is possible (beta version). This will not be used here.
(4) A collection of sample templates using “templately (add-on plugin).” There are free and paid versions. We will not use this here.
① Clicking the “+” in (1) brings up the following screen. Both options allow you to place divided boxes (frames) within the page.
② If you select “Grid” for testing, equally divided frames will be displayed.
③ Click on the 6-divided frame.
The divided frames are fully arranged within the container. The size of the container can be changed. You can also increase or decrease the number of frames within the container later.
④ Click the “X” tab at the top center of the container to delete the container created with Grid. By the way, the functions of each mark are as follows.
⑤ This time, select “Flex Box.” The following frame configuration will be displayed.
⑥ Click the small two-frame configuration on the left.
⑦ The following Flex Box container is created.
⑧ Click the upper left corner of the small container to edit it. Select “%” from the menu on the right to change the width ratio within the page. Set it to 35% here.
⑨ Click the “+” button inside the container to display the widgets. Drag and drop to add them.
⑩ Drag and drop an image.
⑪Click on the image section of “Choose Image.”
⑫The image selection screen will appear, so click here to insert the image.
The image should be uploaded in advance from Media > Library. If the image has not been uploaded, proceed to the “Upload File” tab, click “Select File,” select the file, upload it, and then click “Select” to insert it.
⑬The image has been inserted.
⑭Let’s insert a heading below the image.
⑮Click the pencil icon on the right side of the inserted “Heading” to edit it. You can adjust the following settings.
⑯Next, let’s edit the container on the right side. Click “Edit Container” in the upper-left corner of the right-side container. Set the width to 65% so that it spans 100% of the total width.
⑰Click the “+” icon on the right-side container. A list of available widgets will appear; drag and drop the Text Editor widget into the container.
⑱The Text Editor will display sample text. Replace the content within the frame shown in the left-side sidebar.
⑲ Adjust the font type, size, line height, and character spacing from Style > Text Editor > Typography.
⑳ You can adjust the alignment of the text editor content as a whole from the following:
