Setelah kita membuat halaman pertama menggunakan Divi Builder maka kita melihat source yang dihasilkan baik pada database maupun pada content HTML

  1. Source Code dalam database
    Pada tabel posts dengan ID=15 kita mendapatkan data pada field post_content seperti berikut ini:

    [et_pb_section fb_built="1" admin_label="Section Judul" _builder_version="4.4.3" hover_enabled="0" module_id="seksi_satu"][et_pb_row admin_label="Row 1" _builder_version="4.4.3" hover_enabled="0" module_id="baris_satu"][et_pb_column type="4_4" _builder_version="4.4.3"][et_pb_text admin_label="Text pada judul" _builder_version="4.4.3" hover_enabled="0" module_id="teks_satu"]
    
    Halaman pertama
    
    [/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]
    

     

  2. Kemudian pada tampilan HTML kita mendapatkan source seperti berikut ini:
    
    
    <div id="seksi_satu" class="et_pb_section et_pb_section_0 et_section_regular" >
    
    
    <div id="baris_satu" class="et_pb_row et_pb_row_0">
    
    
    <div class="et_pb_column et_pb_column_4_4 et_pb_column_0 et_pb_css_mix_blend_mode_passthrough et-last-child">
    
    
    <div id="teks_satu" class="et_pb_module et_pb_text et_pb_text_0 et_pb_text_align_left et_pb_bg_layout_light">
    
    
    <div class="et_pb_text_inner">
    Halaman pertama
    </div>
    
    
    			</div>
    
    
    <!-- .et_pb_text -->
    			</div>
    
    
    <!-- .et_pb_column -->
    			</div>
    
    
    <!-- .et_pb_row -->
    			</div>
    
    
    <!-- .et_pb_section -->	
    

Kalau kita perhatikan maka Divi Builder akan menghasilkan shortcode-shortcode WordPress yang disimpan ke dalam field post.post_content. Shortcode-shortcode kemudian diterjemahkan oleh Divi menjadi tag-tag HTML . Demikianlah kita memahami bagaimana cara kerja Divi Builder dalam menyimpan kode tampilan dan memproses kode tampilan ke kode HTML.

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

Source code hasil Divi Builder