My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

Elementor WP page builder = "Clean Code"????

Default profile photo
Anonymous
·Oct 24, 2018

Someone recommended Elementor Page Builder for WordPress because clients would appreciate that they could update and modify the custom site themselves.

I saw this in their site:

"High Quality Code - A plugin’s quality depends on the code it is built on. We made sure Elementor is built with the best code architecture in mind"

So, I installed it to a barebone stock WP installation, created a new page and inserted just one row with two columns, a couple of headers and a couple of paragraphs of text. That's all I did, and I got this code:

<section data-id="a4f3765" class="elementor-element elementor-element-a4f3765 elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-top-section"
  data-element_type="section">
  <div class="elementor-container elementor-column-gap-default">
    <div class="elementor-row">
      <div data-id="1c2e979" class="elementor-element elementor-element-1c2e979 elementor-column elementor-col-100 elementor-top-column"
        data-element_type="column">
        <div class="elementor-column-wrap elementor-element-populated">
          <div class="elementor-widget-wrap">
            <section data-id="02989d1" class="elementor-element elementor-element-02989d1 elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-inner-section"
              data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div data-id="2cfde4f" class="elementor-element elementor-element-2cfde4f elementor-column elementor-col-50 elementor-inner-column"
                    data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div data-id="dafe2a2" class="elementor-element elementor-element-dafe2a2 elementor-widget elementor-widget-heading"
                          data-element_type="heading.default">
                          <div class="elementor-widget-container">
                            <h2 class="elementor-heading-title elementor-size-default">Add Your Heading Text Here</h2>
                          </div>
                        </div>
                        <div data-id="08daf70" class="elementor-element elementor-element-08daf70 elementor-widget elementor-widget-text-editor"
                          data-element_type="text-editor.default">
                          <div class="elementor-widget-container">
                            <div class="elementor-text-editor elementor-clearfix">Click edit button to change this
                              text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec
                              ullamcorper mattis, pulvinar dapibus leo.</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div data-id="e27157b" class="elementor-element elementor-element-e27157b elementor-column elementor-col-50 elementor-inner-column"
                    data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div data-id="62a8d2b" class="elementor-element elementor-element-62a8d2b elementor-widget elementor-widget-heading"
                          data-element_type="heading.default">
                          <div class="elementor-widget-container">
                            <h2 class="elementor-heading-title elementor-size-default">Add Your Heading Text Here</h2>
                          </div>
                        </div>
                        <div data-id="e4a79b8" class="elementor-element elementor-element-e4a79b8 elementor-widget elementor-widget-text-editor"
                          data-element_type="text-editor.default">
                          <div class="elementor-widget-container">
                            <div class="elementor-text-editor elementor-clearfix">Click edit button to change this
                              text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec
                              ullamcorper mattis, pulvinar dapibus leo.</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Would someone explain to me how this can be considered "High quality, the best code architecture?" I guess they are referring to something other than the HTML/CSS code, but I have a hard time understanding how this could come out of something that's "high quality architecture." What do they mean when they say "high quality code?"

3