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

·

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?"

Start a personal dev blog on your domain for free and grow your readership.

3.4K+ developers have started their personal blogs on Hashnode in the last one month.

Write in Markdown · Publish articles on custom domain · Gain readership on day zero · Automatic GitHub backup and more

Renso's photo

I have the same problem, as designer elementor is a great tool. but as fundamentalist of the code, I am very concerned.

it can not be that an empty page of elementor has hundreds of unnecessary classes and of "divs" without sense.

the other day I did a speed test on a website published as the best of the month made with ELEMENTOR. all the websites had a score in red in mobile and a score in the middle of the desktop.

j's photo

that's marketing .... think about it ;D would someone buy your product if you write

  • shitty code, but you're obviously to cheap to buy good one'
  • not everything is a masterpiece
  • well at least it works

let be realistic ... the definition of clean-code doesn't exist and it's the trade of business needs and standards .... so is this clean ? nope we can start religious wars on

  • CSS Compositions
  • Sematic HTML structures
  • structural complexity
  • WCAG
  • CSS naming philosophies

so we can now argue from the perspective of generated code as well is it a good clean composed structure that allows fluent changes? maybe ...

we need different standards for different perspectives .... to me using WP already declares a certain standard g But I don't want to go political ;P

Jason Knight's photo

j hit it on the head, that's the marketing blurb. And like most marketing it's just another bald faced lie.

Pointless data attributes probably as hooks for JavaScript doing things that's none of JS' business, endless pointless DIV for nothing, endless pointless classes for nothing, gibberish use of numbered headings since they have SECTION tags (themselves a pointless redundancy to the H2 so contained, but if you use SECTION those should all be H1), DIV around what are plainly grammatical paragraphs (though a lot of the blame for that lies on wordpress' doorstep)...

It's 4k of markup for what, not even a half k of markup? Yeah, to make that claim? They're basically lying, or simply don't know the difference. I'd have to see what they're doing for layout with that, but I'm doubtful there is any legitimate reason for the markup of that section to vary significantly from:

<div class="describeTheseSubsections">

    <div class="subSection">
        <h2>Add Your Heading Text Here</h2>
        <p>
            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.
        </p>
    <!-- .subsection --></div>

    <div class="subSection">
        <h2>Add Your Heading Text Here</h2>
        <p>
            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.
        </p>
    <!-- .subsection --></div>

<!-- .describeTheseSubsections --></div>

Aka 1/6th the code and that's WITH extra comments so it's clear what DIV I'm closing. Depending on what the contents of the subsections are, they might not even warrant the classes on those inner DIV either.

Though it's wordpress; I jokingly refer to it as turdpress for a reason. The default 'out of box' markup isn't any better, and since most people these days seem to start with wordpress, and learn wordpress' broken, bloated, nonsensical ways of doing things, it hobbles beginners and alleged "experts" alike when it comes to the most basic aspects of using HTML properly.

I've only once ever seen a Wordpress template that came close to bothering to meet the wording, intent, or goals of HTML and its specification, leveraging proper semantics, separation of presentation from content, or even trying to give anything more than lip-service to accessibility... it neutered the upgrade path due to having to make internal changes to how WP works, and I swear the effort of doing so put the creator of said version into an early grave.

So a wordpress "easy template" thing that lies about what it does and has bloated nonsensical pointless markup? Not exactly news. That's what wordpress seems to be for, conning beginners.

Remember, just because something is popular, doesn't mean it's good... or right... or just..