{"id":381,"date":"2024-09-12T04:01:02","date_gmt":"2024-09-12T04:01:02","guid":{"rendered":"https:\/\/nopassdev.com\/?p=381"},"modified":"2025-07-02T16:07:54","modified_gmt":"2025-07-02T16:07:54","slug":"elementor-tutorial-build-wordpress-site","status":"publish","type":"post","link":"https:\/\/nopassdev.com\/en\/elementor-tutorial-build-wordpress-site\/","title":{"rendered":"Elementor Tutorial: Getting Started Quickly and Easily with a WordPress Website"},"content":{"rendered":"<p>Many people choose to use WordPress to build their websites. However, for those without programming skills, it can be a difficult task to get started quickly and easily create a professional website. Fortunately, there are many WordPress page builder plugins that can help us achieve this goal. In this tutorial, we'll cover how to get started quickly and easily make a website using Elementor, and incorporate the WordPress page builder process to give you more freedom in your website design.<\/p>\n\n\n\n<div class=\"gspb_button_wrapper gspb_button-id-gsbp-bda1734\" id=\"gspb_button-id-gsbp-bda1734\"><a class=\"wp-block-greenshift-blocks-buttonbox gspb-buttonbox wp-element-button\" href=\"https:\/\/hostinger.com.hk?REFERRALCODE=1LIFA70\" rel=\"noopener\"><span class=\"gspb-buttonbox-textwrap\"><span class=\"gspb-buttonbox-text\"><span class=\"gspb-buttonbox-title\">For WordPress websites, we recommend Hostinger hosting.<\/span><\/span><\/span><\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u4e00-elementor\u4ecb\u7ecd\">One,<strong>Elementor<\/strong>present (sb for a job etc)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-1-\u4ec0\u4e48\u662felementor\">1.1 What is Elementor<\/h3>\n\n\n\n<p>Elementor is a WordPress page builder plugin that helps users easily create custom pages without having to write any code.With an intuitive drag-and-drop interface and a rich library of elements, Elementor allows users to create professional website pages quickly.<\/p>\n\n\n\n<p>Elementor operates like this video below \ud83d\udc47<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1280 \/ 720;\" width=\"1280\" controls src=\"https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/elementor.mp4\"><\/video><\/figure>\n\n\n\n<p>Elementor is very easy to operate, just drag the left element to the right with the mouse and set it to design a beautiful interface.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-2-elementor\u7684\u4f18\u7f3a\u70b9\">1.2 Advantages and Disadvantages of Elementor<\/h3>\n\n\n\n<p>Benefits of Elementor include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Visual editing with an intuitive drag-and-drop interface that is easy to use;<\/li>\n\n\n\n<li>Rich library of elements, including text, images, buttons, forms, progress bars and more;<\/li>\n\n\n\n<li>Support real-time preview, you can view the page effect at any time;<\/li>\n\n\n\n<li>Supporting responsive design, you can easily create pages adapted to different devices;<\/li>\n\n\n\n<li>Support for custom CSS and JavaScript code allows for advanced users;<\/li>\n\n\n\n<li>It is not necessary to be able to write code.<\/li>\n<\/ul>\n\n\n\n<p>Disadvantages of Elementor:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>For the same website design, a page created using Elementor will be slower than one written directly in code;<\/li>\n\n\n\n<li>Some advanced features require the purchase of the Pro version.<\/li>\n<\/ul>\n\n\n\n<p>Although Elementor may have some impact on the speed of your website, the advantage of not having to write code is more than enough to offset this impact. So build your own WordPress website and don't hesitate to choose Elementor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-3-elementor\u7684\u7248\u672c\">1.3 Versions of Elementor<\/h3>\n\n\n\n<p>Elementor is available in two versions: the free version and the Pro version. The free version contains basic features and element libraries, while the Pro version contains more advanced features and element libraries.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"elementor\u514d\u8d39\u7248\u548c\u9ad8\u7ea7\u7248\u7684\u533a\u522b\">Difference between Elementor Free and Premium Editions<\/h4>\n\n\n\n<p><strong>1, compared to the free version, Elementor Pro can use more elements<\/strong>For example, these are shown in the screenshot below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"679\" src=\"https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-1024x679.png\" alt=\"\" class=\"wp-image-383\" srcset=\"https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-1024x679.png 1024w, https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-300x199.png 300w, https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-768x509.png 768w, https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image.png 1339w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>2, Elementor Pro can use the template library<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"896\" height=\"596\" src=\"https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-1.png\" alt=\"\" class=\"wp-image-384\" srcset=\"https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-1.png 896w, https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-1-300x200.png 300w, https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-1-768x511.png 768w\" sizes=\"(max-width: 896px) 100vw, 896px\" \/><\/figure>\n\n\n\n<p>The template library is the official Elementor designer designed some styles, you can through the template library directly inserted into your site to use, if you do not know how to design their own style, then this feature is very useful.<\/p>\n\n\n\n<p><strong>3, Elementor Pro can use the theme generator<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"896\" height=\"593\" src=\"https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-2.png\" alt=\"\" class=\"wp-image-385\" srcset=\"https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-2.png 896w, https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-2-300x199.png 300w, https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-2-768x508.png 768w\" sizes=\"(max-width: 896px) 100vw, 896px\" \/><\/figure>\n\n\n\n<p>Using the theme generator, you can completely customize the structure of your site page design, this feature is very good to use, but your own design sense is not good, then their entire site with the theme generator design is not a good idea.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u4e8c-elementor\u7684\u5b89\u88c5\u548c\u914d\u7f6e\">II. Installation and configuration of Elementor<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-1-\u5b89\u88c5elementor\">2.1 Installing Elementor<\/h3>\n\n\n\n<p>Installing Elementor is very easy, just search for the Elementor plugin inside the WordPress backend plugin repository and install it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"896\" height=\"414\" src=\"https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-3.png\" alt=\"\" class=\"wp-image-386\" srcset=\"https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-3.png 896w, https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-3-300x139.png 300w, https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-3-768x355.png 768w\" sizes=\"(max-width: 896px) 100vw, 896px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-2-\u914d\u7f6eelementor\">2.2 Configuring Elementor<\/h3>\n\n\n\n<p>Once the installation is complete, some basic configuration is required, including choosing default fonts, colors, and button styles.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/sitegroundwp.com\/wp-content\/uploads\/2023\/03\/wp-blog-080.png\" alt=\"\u914d\u7f6eElementor\" class=\"wp-image-650\"\/><\/figure>\n\n\n\n<p>Article type is recommended to check only the page, if you use Elementor editor for everything, you will face a very big modification in the later website revision.<\/p>\n\n\n\n<p>Default colors and default fonts are recommended to be disabled so that they will follow the theme's settings.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-3-elementor\u7684\u7b2c\u4e09\u65b9\u6269\u5c55\">2.3 Third-party extensions to Elementor<\/h3>\n\n\n\n<p>Elementor is currently the most popular page builder plugin on the WordPress platform, and its ecosystem is also very rich, in addition to Elementor Pro, there are also many third-party Elementor extensions that can be used to enhance the functionality of Elementor Free.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/sitegroundwp.com\/wp-content\/uploads\/2023\/03\/wp-blog-081.png\" alt=\"elementor\u7b2c\u4e09\u65b9\u6269\u5c55\" class=\"wp-image-651\"\/><\/figure>\n\n\n\n<p>These Elementor third-party extensions can provide more elements which may have better design and functionality than Elementor Free, and also these third-party extensions will be available in a paid version, so you need to consider yourself whether to install the third-party extensions for your own needs and whether to buy the paid version or not.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u4e09-\u4f7f\u7528elementor\u521b\u5efa\u9875\u9762\">Creating pages with Elementor<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-1-\u521b\u5efa\u65b0\u9875\u9762\">3.1 Creating new pages<\/h3>\n\n\n\n<p>Creating a new page with Elementor is very easy, just select \"New Page\" in the WordPress backend and then select \"Use Elementor Editor\".<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/sitegroundwp.com\/wp-content\/uploads\/2023\/03\/wp-blog-082.png\" alt=\"\u4f7f\u7528Elementor\u7f16\u8f91\" class=\"wp-image-655\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-2-\u6dfb\u52a0\u5143\u7d20\">3.2 Adding elements<\/h3>\n\n\n\n<p>Once the page has been created and edited with Elementor, the Elementor Design Page screen appears, as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/sitegroundwp.com\/wp-content\/uploads\/2023\/03\/wp-blog-083.png\" alt=\"elementor\u7f16\u8f91\u9875\u9762\" class=\"wp-image-658\"\/><\/figure>\n\n\n\n<p>Elementor provides a rich library of elements, including headers, text, images, buttons, forms, progress bars, and more. Users can add these elements to the page by drag and drop.<\/p>\n\n\n\n<p>Now you can try dragging one from the left element area to the right editing area, for example dragging a title.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-3-\u8c03\u6574\u5143\u7d20\u6837\u5f0f\">3.3 Adjusting element styles<\/h3>\n\n\n\n<p>Elementor also provides rich styling options, including fonts, colors, borders, shadows, and more. Users can adjust the style of the element with these options to make it more suitable for their needs.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/sitegroundwp.com\/wp-content\/uploads\/2023\/03\/wp-blog-084.png\" alt=\"elementor\u6837\u5f0f\u8bbe\u7f6e\u754c\u9762\" class=\"wp-image-659\"\/><\/figure>\n\n\n\n<p>Different elements can be set up options are different, take our title element above as an example, you can see that after switching to the style tag, you can set the text color, layout inside the text can be set up in the font, font size, line and so on.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/sitegroundwp.com\/wp-content\/uploads\/2023\/03\/wp-blog-085.png\" alt=\"elementor\u9ad8\u7ea7\u8bbe\u7f6e\" class=\"wp-image-660\"\/><\/figure>\n\n\n\n<p>The Advanced Settings panel, which allows you to adjust the layout of this element, commonly adjusts the outer and inner spacing.<\/p>\n\n\n\n<p>In addition to that, you can also set settings for motion effects, backgrounds, borders, and more. You can try tweaking each of these options to roughly experience what kind of changes each setting will cause.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-4-\u9884\u89c8\u548c\u53d1\u5e03\u9875\u9762\">3.4 Previewing and publishing pages<\/h3>\n\n\n\n<p>When creating a page with Elementor, users can preview the page results at any time. When the page is complete, users can publish it to a WordPress site.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/sitegroundwp.com\/wp-content\/uploads\/2023\/03\/wp-blog-086.png\" alt=\"\u9884\u89c8\u548c\u53d1\u5e03Elementor\u9875\u9762\" class=\"wp-image-661\"\/><\/figure>\n\n\n\n<p>It is important to note that if you have followed this Elementor tutorial and clicked on the Edit with Elementor button directly after creating your page, it is recommended that you click on \"Save as Draft\".<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/sitegroundwp.com\/wp-content\/uploads\/2023\/03\/wp-blog-087.png\" alt=\"elementor\u9000\u51fa\" class=\"wp-image-665\"\/><\/figure>\n\n\n\n<p>Then exit to the WordPress backend page after selecting the three horizontal bar button in the upper left corner.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/sitegroundwp.com\/wp-content\/uploads\/2023\/03\/wp-blog-088.png\" alt=\"WordPress\u9875\u9762\u7f16\u8f91\" class=\"wp-image-666\"\/><\/figure>\n\n\n\n<p>Before creating the page, we clicked Edit with Elementor directly because we didn't change the title, so after returning to the page, we need to change the page title, change the URL, and then publish it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u56db-\u4f7f\u7528elementor-pro\">IV. Using Elementor Pro<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-1-elementor-pro\u7684\u4ecb\u7ecd\">4.1 Introduction to Elementor Pro<\/h3>\n\n\n\n<p>Elementor Pro is an advanced version of Elementor that includes more features and a library of elements to help users create more specialized and complex pages.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-2-elementor-pro\u7684\u529f\u80fd\">4.2 Functions of Elementor Pro<\/h3>\n\n\n\n<p>Elementor Pro features include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Theme builder that helps users to create custom WordPress themes<\/li>\n\n\n\n<li>Template library with various types of page templates for quick page creation<\/li>\n\n\n\n<li>Dynamic content, which can dynamically display content based on user input or other conditions<\/li>\n\n\n\n<li>Form builder that helps users create customized forms<\/li>\n\n\n\n<li>WooCommerce integration that helps users create customized WooCommerce pages<\/li>\n\n\n\n<li>More options for element settings<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-3-elementor-pro\u7684\u9ad8\u7ea7\u529f\u80fd\">4.3 Advanced Features of Elementor Pro<\/h3>\n\n\n\n<p>In addition to the basic features and element libraries, Elementor Pro offers several advanced features including theme builder, dynamic content, form builder, and more. These features help users create more complex and advanced pages.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"\u4e3b\u9898\u6784\u5efa\u5668\">Theme builder<\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/sitegroundwp.com\/wp-content\/uploads\/2023\/03\/wp-blog-093.png\" alt=\"\u4e3b\u9898\u751f\u6210\u5668\" class=\"wp-image-674\"\/><\/figure>\n\n\n\n<p>Under Elementor's Templates menu, you can click Theme Builder<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/sitegroundwp.com\/wp-content\/uploads\/2023\/03\/wp-blog-092.png\" alt=\"elementor\u4e3b\u9898\u751f\u6210\u5668\" class=\"wp-image-673\"\/><\/figure>\n\n\n\n<p>With Theme Builder, you can customize the design of all parts of the site, such as HeaderHeader, FooterFooter, Single Post, Single PageSingle Page, Archive PageArchive and so on.<\/p>\n\n\n\n<p>If the WooCommerce plugin is installed, then it is also possible to design the product pages.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"\u52a8\u6001\u5185\u5bb9\">dynamic content<\/h4>\n\n\n\n<p>Dynamic content is very useful when making some generic pages, such as the pass-through header at the top of each page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"616\" src=\"https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-4-1024x616.png\" alt=\"\" class=\"wp-image-387\" srcset=\"https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-4-1024x616.png 1024w, https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-4-300x180.png 300w, https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-4-768x462.png 768w, https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-4.png 1384w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In the picture above, we are the previous tutorial to add a title, through the dynamic content, we can set the title content default page title, is the page title, the link can also choose post url.<\/p>\n\n\n\n<p>This will automatically call the corresponding content to the title, we can use this module child batch to other pages, without having to manually modify the title content and URL each time.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"\u8868\u5355\u6784\u5efa\u5668\">Form builder<\/h4>\n\n\n\n<p>When using WordPress for a business website's official website, it will include an online contact form, which we can create with Elementor Pro's forms feature.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"697\" src=\"https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-5-1024x697.png\" alt=\"\" class=\"wp-image-388\" srcset=\"https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-5-1024x697.png 1024w, https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-5-300x204.png 300w, https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-5-768x523.png 768w, https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-5.png 1364w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Compared with other third-party form plug-ins, Elementor comes with forms that are easier to use with Elementor.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"popup\u5f39\u7a97\">Popup<\/h4>\n\n\n\n<p>Popup is also a feature of Elementor Pro that allows you to create a popup window for your website, such as prompting users to register or contact us.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/sitegroundwp.com\/wp-content\/uploads\/2023\/03\/wp-blog-096.png\" alt=\"\" class=\"wp-image-677\"\/><\/figure>\n\n\n\n<p>Popups can be created by selecting Popups under the Templates menu in Elementor in the WordPress backend, and you can set the popup's popup conditions and restrictions.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"\u5bfc\u5165elementor-pro\u9884\u5236\u6a21\u677f\">Importing Elementor Pro pre-made templates<\/h4>\n\n\n\n<p>As a newbie, it is difficult to design a web page completely from scratch, so importing pre-made templates and then modifying them is a very good choice. Elementor Pro can import all the official pre-made templates of Elementor, and then modify them to the design and content you want.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"510\" src=\"https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-7-1024x510.png\" alt=\"\" class=\"wp-image-390\" srcset=\"https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-7-1024x510.png 1024w, https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-7-300x149.png 300w, https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-7-768x382.png 768w, https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-7.png 1390w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Want to import Elementor prefabricated templates, is also very simple, in the WordPress background menu inside, find the template, kit Library. then you can see the template interface in the above figure, select your favorite template, click on the upper right corner of the Apply Kit button, you can automatically import the entire site design and settings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"492\" src=\"https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-6-1024x492.png\" alt=\"\" class=\"wp-image-389\" srcset=\"https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-6-1024x492.png 1024w, https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-6-300x144.png 300w, https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-6-768x369.png 768w, https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-6.png 1370w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u4e94-elementor\u7684\u5e38\u89c1\u95ee\u9898\u548c\u89e3\u51b3\u65b9\u6cd5\">V. Elementor's Common Problems and Solutions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-1-elementor\u65e0\u6cd5\u52a0\u8f7d\">5.1 Elementor cannot be loaded<\/h3>\n\n\n\n<p>If Elementor fails to load, it may be due to a plugin conflict or WordPress version incompatibility, etc. Users can try disabling other plugins or updating the WordPress version to fix the problem.<\/p>\n\n\n\n<p>If you disable other plugins and the latest version of WordPress still can not be loaded, please switch to helle elementor this theme to test again, still can not be loaded, it is recommended to reinstall WordPress to solve the problem.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-2-elementor\u9875\u9762\u52a0\u8f7d\u7f13\u6162\">5.2 Elementor page loads slowly<\/h3>\n\n\n\n<p>If an Elementor page loads slowly, it may be due to a long server response time or a large page file size. It is recommended to optimize the page design and optimize the server to solve the problem. Too many plug-ins on the site itself causing the page to report errors can also cause the page to load slowly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-3-elementor\u9875\u9762\u6837\u5f0f\u9519\u4e71\">5.3 Elementor Page Styling Mistakes<\/h3>\n\n\n\n<p>If the Elementor page style is wrong, it may be due to CSS conflict or JavaScript error, etc. Users can try disabling other plugins or checking for code errors to fix the problem.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-4-elementor\u4e0e\u5176\u4ed6\u63d2\u4ef6\u7684\u517c\u5bb9\u6027\u95ee\u9898\">5.4 Elementor compatibility issues with other plugins<\/h3>\n\n\n\n<p>Due to compatibility issues between Elementor and other plugins, pages may not display properly or features may not work. Users can try to disable other plugins or contact the plugin author to solve the problem.<\/p>","protected":false},"excerpt":{"rendered":"<p>\u5f88\u591a\u4eba\u9009\u62e9\u4f7f\u7528WordPress\u6765\u642d\u5efa\u81ea\u5df1\u7684\u7f51\u7ad9\u3002\u7136\u800c\uff0c\u5bf9\u4e8e\u6ca1\u6709\u7f16\u7a0b\u6280\u80fd\u7684\u4eba\u6765\u8bf4\uff0c\u5982\u4f55\u5feb\u901f\u4e0a\u624b\uff0c\u8f7b\u677e\u5236\u4f5c\u4e00\u4e2a\u4e13 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_gspb_post_css":"#gspb_button-id-gsbp-bda1734{display:flex;justify-content:flex-start}#gspb_button-id-gsbp-bda1734 .gspb-buttonbox-text{display:flex;flex-direction:column}#gspb_button-id-gsbp-bda1734>.gspb-buttonbox{box-sizing:border-box}","footnotes":""},"categories":[17,6],"tags":[],"class_list":["post-381","post","type-post","status-publish","format-standard","hentry","category-elementor-tutorial","category-wordpress-tutorial"],"blocksy_meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Elementor\u6559\u7a0b\uff1a\u5feb\u901f\u4e0a\u624b\uff0c\u8f7b\u677e\u5236\u4f5cWordPress\u7f51\u7ad9 - \u8de8\u5883\u5efa\u7ad9\u670d\u52a1\u5546<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/nopassdev.com\/en\/elementor-tutorial-build-wordpress-site\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Elementor\u6559\u7a0b\uff1a\u5feb\u901f\u4e0a\u624b\uff0c\u8f7b\u677e\u5236\u4f5cWordPress\u7f51\u7ad9 - \u8de8\u5883\u5efa\u7ad9\u670d\u52a1\u5546\" \/>\n<meta property=\"og:description\" content=\"\u5f88\u591a\u4eba\u9009\u62e9\u4f7f\u7528WordPress\u6765\u642d\u5efa\u81ea\u5df1\u7684\u7f51\u7ad9\u3002\u7136\u800c\uff0c\u5bf9\u4e8e\u6ca1\u6709\u7f16\u7a0b\u6280\u80fd\u7684\u4eba\u6765\u8bf4\uff0c\u5982\u4f55\u5feb\u901f\u4e0a\u624b\uff0c\u8f7b\u677e\u5236\u4f5c\u4e00\u4e2a\u4e13 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/nopassdev.com\/en\/elementor-tutorial-build-wordpress-site\/\" \/>\n<meta property=\"og:site_name\" content=\"\u8de8\u5883\u5efa\u7ad9\u670d\u52a1\u5546\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-12T04:01:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-02T16:07:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1339\" \/>\n\t<meta property=\"og:image:height\" content=\"888\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Nopass\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nopass\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/nopassdev.com\\\/elementor-tutorial-build-wordpress-site\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/nopassdev.com\\\/elementor-tutorial-build-wordpress-site\\\/\"},\"author\":{\"name\":\"Nopass\",\"@id\":\"https:\\\/\\\/nopassdev.com\\\/zh\\\/#\\\/schema\\\/person\\\/10c72918e517d5694cdb56ed20f0eba7\"},\"headline\":\"Elementor\u6559\u7a0b\uff1a\u5feb\u901f\u4e0a\u624b\uff0c\u8f7b\u677e\u5236\u4f5cWordPress\u7f51\u7ad9\",\"datePublished\":\"2024-09-12T04:01:02+00:00\",\"dateModified\":\"2025-07-02T16:07:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/nopassdev.com\\\/elementor-tutorial-build-wordpress-site\\\/\"},\"wordCount\":145,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/nopassdev.com\\\/zh\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/nopassdev.com\\\/elementor-tutorial-build-wordpress-site\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/nopassdev.com\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/image-1024x679.png\",\"articleSection\":[\"Elementor\u6559\u7a0b\",\"Wordpress\u6559\u7a0b\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/nopassdev.com\\\/elementor-tutorial-build-wordpress-site\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/nopassdev.com\\\/elementor-tutorial-build-wordpress-site\\\/\",\"url\":\"https:\\\/\\\/nopassdev.com\\\/elementor-tutorial-build-wordpress-site\\\/\",\"name\":\"Elementor\u6559\u7a0b\uff1a\u5feb\u901f\u4e0a\u624b\uff0c\u8f7b\u677e\u5236\u4f5cWordPress\u7f51\u7ad9 - \u8de8\u5883\u5efa\u7ad9\u670d\u52a1\u5546\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/nopassdev.com\\\/zh\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/nopassdev.com\\\/elementor-tutorial-build-wordpress-site\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/nopassdev.com\\\/elementor-tutorial-build-wordpress-site\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/nopassdev.com\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/image-1024x679.png\",\"datePublished\":\"2024-09-12T04:01:02+00:00\",\"dateModified\":\"2025-07-02T16:07:54+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/nopassdev.com\\\/elementor-tutorial-build-wordpress-site\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/nopassdev.com\\\/elementor-tutorial-build-wordpress-site\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/nopassdev.com\\\/elementor-tutorial-build-wordpress-site\\\/#primaryimage\",\"url\":\"https:\\\/\\\/nopassdev.com\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/image-1024x679.png\",\"contentUrl\":\"https:\\\/\\\/nopassdev.com\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/image-1024x679.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/nopassdev.com\\\/elementor-tutorial-build-wordpress-site\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\\\/\\\/nopassdev.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor\u6559\u7a0b\uff1a\u5feb\u901f\u4e0a\u624b\uff0c\u8f7b\u677e\u5236\u4f5cWordPress\u7f51\u7ad9\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/nopassdev.com\\\/zh\\\/#website\",\"url\":\"https:\\\/\\\/nopassdev.com\\\/zh\\\/\",\"name\":\"\u8de8\u5883\u5efa\u7ad9\u670d\u52a1\u5546\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/nopassdev.com\\\/zh\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/nopassdev.com\\\/zh\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/nopassdev.com\\\/zh\\\/#organization\",\"name\":\"\u8de8\u5883\u5efa\u7ad9\u670d\u52a1\u5546\",\"url\":\"https:\\\/\\\/nopassdev.com\\\/zh\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/nopassdev.com\\\/zh\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/nopassdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/LOGO-NEW.jpg\",\"contentUrl\":\"https:\\\/\\\/nopassdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/LOGO-NEW.jpg\",\"width\":1822,\"height\":306,\"caption\":\"\u8de8\u5883\u5efa\u7ad9\u670d\u52a1\u5546\"},\"image\":{\"@id\":\"https:\\\/\\\/nopassdev.com\\\/zh\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/nopassdev.com\\\/zh\\\/#\\\/schema\\\/person\\\/10c72918e517d5694cdb56ed20f0eba7\",\"name\":\"Nopass\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b8717d323563ed7c90a695bacdb516c285d94c51ce7947adb6c33f07577e6ac8?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b8717d323563ed7c90a695bacdb516c285d94c51ce7947adb6c33f07577e6ac8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b8717d323563ed7c90a695bacdb516c285d94c51ce7947adb6c33f07577e6ac8?s=96&d=mm&r=g\",\"caption\":\"Nopass\"},\"sameAs\":[\"https:\\\/\\\/nopassdev.com\"],\"url\":\"https:\\\/\\\/nopassdev.com\\\/en\\\/author\\\/minglifa2022gmail-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elementor Tutorial: Getting Started Quickly and Easily with a WordPress Website - Cross-Border Website Builders","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/nopassdev.com\/en\/elementor-tutorial-build-wordpress-site\/","og_locale":"en_US","og_type":"article","og_title":"Elementor\u6559\u7a0b\uff1a\u5feb\u901f\u4e0a\u624b\uff0c\u8f7b\u677e\u5236\u4f5cWordPress\u7f51\u7ad9 - \u8de8\u5883\u5efa\u7ad9\u670d\u52a1\u5546","og_description":"\u5f88\u591a\u4eba\u9009\u62e9\u4f7f\u7528WordPress\u6765\u642d\u5efa\u81ea\u5df1\u7684\u7f51\u7ad9\u3002\u7136\u800c\uff0c\u5bf9\u4e8e\u6ca1\u6709\u7f16\u7a0b\u6280\u80fd\u7684\u4eba\u6765\u8bf4\uff0c\u5982\u4f55\u5feb\u901f\u4e0a\u624b\uff0c\u8f7b\u677e\u5236\u4f5c\u4e00\u4e2a\u4e13 [&hellip;]","og_url":"https:\/\/nopassdev.com\/en\/elementor-tutorial-build-wordpress-site\/","og_site_name":"\u8de8\u5883\u5efa\u7ad9\u670d\u52a1\u5546","article_published_time":"2024-09-12T04:01:02+00:00","article_modified_time":"2025-07-02T16:07:54+00:00","og_image":[{"width":1339,"height":888,"url":"https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image.png","type":"image\/png"}],"author":"Nopass","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Nopass","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/nopassdev.com\/elementor-tutorial-build-wordpress-site\/#article","isPartOf":{"@id":"https:\/\/nopassdev.com\/elementor-tutorial-build-wordpress-site\/"},"author":{"name":"Nopass","@id":"https:\/\/nopassdev.com\/zh\/#\/schema\/person\/10c72918e517d5694cdb56ed20f0eba7"},"headline":"Elementor\u6559\u7a0b\uff1a\u5feb\u901f\u4e0a\u624b\uff0c\u8f7b\u677e\u5236\u4f5cWordPress\u7f51\u7ad9","datePublished":"2024-09-12T04:01:02+00:00","dateModified":"2025-07-02T16:07:54+00:00","mainEntityOfPage":{"@id":"https:\/\/nopassdev.com\/elementor-tutorial-build-wordpress-site\/"},"wordCount":145,"commentCount":0,"publisher":{"@id":"https:\/\/nopassdev.com\/zh\/#organization"},"image":{"@id":"https:\/\/nopassdev.com\/elementor-tutorial-build-wordpress-site\/#primaryimage"},"thumbnailUrl":"https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-1024x679.png","articleSection":["Elementor\u6559\u7a0b","Wordpress\u6559\u7a0b"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/nopassdev.com\/elementor-tutorial-build-wordpress-site\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/nopassdev.com\/elementor-tutorial-build-wordpress-site\/","url":"https:\/\/nopassdev.com\/elementor-tutorial-build-wordpress-site\/","name":"Elementor Tutorial: Getting Started Quickly and Easily with a WordPress Website - Cross-Border Website Builders","isPartOf":{"@id":"https:\/\/nopassdev.com\/zh\/#website"},"primaryImageOfPage":{"@id":"https:\/\/nopassdev.com\/elementor-tutorial-build-wordpress-site\/#primaryimage"},"image":{"@id":"https:\/\/nopassdev.com\/elementor-tutorial-build-wordpress-site\/#primaryimage"},"thumbnailUrl":"https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-1024x679.png","datePublished":"2024-09-12T04:01:02+00:00","dateModified":"2025-07-02T16:07:54+00:00","breadcrumb":{"@id":"https:\/\/nopassdev.com\/elementor-tutorial-build-wordpress-site\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/nopassdev.com\/elementor-tutorial-build-wordpress-site\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/nopassdev.com\/elementor-tutorial-build-wordpress-site\/#primaryimage","url":"https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-1024x679.png","contentUrl":"https:\/\/nopassdev.com\/wp-content\/uploads\/2024\/09\/image-1024x679.png"},{"@type":"BreadcrumbList","@id":"https:\/\/nopassdev.com\/elementor-tutorial-build-wordpress-site\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/nopassdev.com\/"},{"@type":"ListItem","position":2,"name":"Elementor\u6559\u7a0b\uff1a\u5feb\u901f\u4e0a\u624b\uff0c\u8f7b\u677e\u5236\u4f5cWordPress\u7f51\u7ad9"}]},{"@type":"WebSite","@id":"https:\/\/nopassdev.com\/zh\/#website","url":"https:\/\/nopassdev.com\/zh\/","name":"Cross-border website service providers","description":"","publisher":{"@id":"https:\/\/nopassdev.com\/zh\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/nopassdev.com\/zh\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/nopassdev.com\/zh\/#organization","name":"Cross-border website service providers","url":"https:\/\/nopassdev.com\/zh\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/nopassdev.com\/zh\/#\/schema\/logo\/image\/","url":"https:\/\/nopassdev.com\/wp-content\/uploads\/2025\/07\/LOGO-NEW.jpg","contentUrl":"https:\/\/nopassdev.com\/wp-content\/uploads\/2025\/07\/LOGO-NEW.jpg","width":1822,"height":306,"caption":"\u8de8\u5883\u5efa\u7ad9\u670d\u52a1\u5546"},"image":{"@id":"https:\/\/nopassdev.com\/zh\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/nopassdev.com\/zh\/#\/schema\/person\/10c72918e517d5694cdb56ed20f0eba7","name":"Nopass","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b8717d323563ed7c90a695bacdb516c285d94c51ce7947adb6c33f07577e6ac8?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b8717d323563ed7c90a695bacdb516c285d94c51ce7947adb6c33f07577e6ac8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b8717d323563ed7c90a695bacdb516c285d94c51ce7947adb6c33f07577e6ac8?s=96&d=mm&r=g","caption":"Nopass"},"sameAs":["https:\/\/nopassdev.com"],"url":"https:\/\/nopassdev.com\/en\/author\/minglifa2022gmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/nopassdev.com\/en\/wp-json\/wp\/v2\/posts\/381","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nopassdev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nopassdev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nopassdev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nopassdev.com\/en\/wp-json\/wp\/v2\/comments?post=381"}],"version-history":[{"count":1,"href":"https:\/\/nopassdev.com\/en\/wp-json\/wp\/v2\/posts\/381\/revisions"}],"predecessor-version":[{"id":391,"href":"https:\/\/nopassdev.com\/en\/wp-json\/wp\/v2\/posts\/381\/revisions\/391"}],"wp:attachment":[{"href":"https:\/\/nopassdev.com\/en\/wp-json\/wp\/v2\/media?parent=381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nopassdev.com\/en\/wp-json\/wp\/v2\/categories?post=381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nopassdev.com\/en\/wp-json\/wp\/v2\/tags?post=381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}