LiveCanvas Snippets - sitebuilderone/wp-sitebuilderone GitHub Wiki

Loop examples

Simply start with

<tangible class="live-refresh">
<loop type="services" count="15" orderby="menu_order" order="asc">
[code]
</loop>
</tangible>

Services

Loop example of services taxonomy

<section class="bg-light">
<div class="container py-3 py-lg-5">
<div class="row mb-5 text-center">
<div class="col mw-10 mx-auto">
<div class="lc-block mb-4">
<div editable="rich">
<h1 class="display-4 fw-bold ls-n1">Website Design Services</h1>
</div>
</div>
</div>
</div>
<div class="lc-block">
<tangible class="live-refresh">
<div id="services-posts" class="d-grid gap-2 mw-8 mx-auto">
<loop type="services" count="15" orderby="menu_order" order="asc">
<div class="col-12 py-3">
<div class="row align-items-center">
<div class="col-lg mb-3 mb-lg-0">
<if field="image">
<img loading="lazy" src="{Field image_url size='thumbnail'}" srcset="{Field image_srcset}" sizes="{Field image_sizes}" class="img-fluid" alt="{Field image_alt}">
<else><img loading="lazy" src="https://placehold.co/150" class="img-fluid" alt="Placeholder"></else>
</if>
</div>
<div class="col-lg-9 mb-2 mb-lg-0">
<div class="mw-4">
<a class="fw-semibold" href="{Field url}">
<h2>
<field name="title"></field>
</h2>
</a>
<p>
<field name="excerpt"></field>
</p>
</div>
</div>
</div>
</div>
</loop>
</div>
</tangible>
</div>
</div>
</section>

Custom Post Type Grid

<div class="container">
   <tangible class="live-refresh">
      <div class="row row-cols-1 row-cols-md-2 g-4">
         <loop type="why_choose_us" count="15" orderby="menu_order" order="asc">
            <div class="col">
               <div class="lc-block d-flex h-100">
                  <!-- Optional static or dynamic icon --> 
                  <div class="me-3">
                     <!-- Replace with a custom field if desired --> 
                     <svg width="2em" height="2em" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12,2A10,10 0 1,0 22,12A10,10 0 0,0 12,2Z" />
                     </svg>
                  </div>
                  <div class="px-4">
                     <h5>
                        <field name="title"></field>
                     </h5>
                     <p>
                        <field name="content"></field>
                     </p>
                  </div>
               </div>
            </div>
         </loop>
      </div>
   </tangible>
   <section>
</div>
⚠️ **GitHub.com Fallback** ⚠️