Blog Post Code Guide
This is a guide to custom elements for Rich Text blog posts.
Blog FAQ
Positive Negative
Quote
Positive Reinforcement
Label2image
Video
Fulle Width Banner
Wide Banner
Body Width Banner
Simple Table
Complex Smal Table
Complex Large Table
How To
Blog FAQ
This custom code creates a FAQ section with questions and answers.
Follow in-code instructions to modify it, and once done, paste whole code snippet with Rich Text element.
Follow in-code instructions to modify it, and once done, paste whole code snippet with Rich Text element.
<section fs-richtext-component1="blog-new-faq" class="blog10_faq2">
<div>
<div class="margin-bottom-20">
<h3 class="faq2_heading _0-space">FAQ’s</h3>
</div>
<div class="faq2_component">
<!-- This is a FAQ element containing one question and one answer.
Copy it and change question text, and answer text. -->
<div class="faq2_accordion">
<div data-w-id="b768ea3c-cd6f-7e54-0146-ec7ccbed7054" class="faq2_question">
<div class="text-18px text-weight-medium">
<!-- Change the question text below -->
Your question goes here!
</div>
<div class="faq2_icon-wrapper">
<div class="icon-embed-small w-embed">
<svg width="100%" height="100%" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5303 20.8839C16.2374 21.1768 15.7626 21.1768 15.4697 20.8839L7.82318 13.2374C7.53029 12.9445 7.53029 12.4697 7.82318 12.1768L8.17674 11.8232C8.46963 11.5303 8.9445 11.5303 9.2374 11.8232L16 18.5858L22.7626 11.8232C23.0555 11.5303 23.5303 11.5303 23.8232 11.8232L24.1768 12.1768C24.4697 12.4697 24.4697 12.9445 24.1768 13.2374L16.5303 20.8839Z" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
<div class="faq2_answer" style="width: 100%; height: 0px;">
<div class="margin-bottom24">
<div class="max-width-large">
<p class="text-18px _0-space">
<!-- Change the answer text below -->
Your Answer goes here!
</p>
</div>
</div>
</div>
</div>
<!-- This is an end to single FAQ element. -->
<!-- This is a FAQ element containing one question and one answer.
Copy it and change question text, and answer text. -->
<div class="faq2_accordion">
<div data-w-id="b768ea3c-cd6f-7e54-0146-ec7ccbed7054" class="faq2_question">
<div class="text-18px text-weight-medium">
<!-- Change the question text below -->
Another question?
</div>
<div class="faq2_icon-wrapper">
<div class="icon-embed-small w-embed">
<svg width="100%" height="100%" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5303 20.8839C16.2374 21.1768 15.7626 21.1768 15.4697 20.8839L7.82318 13.2374C7.53029 12.9445 7.53029 12.4697 7.82318 12.1768L8.17674 11.8232C8.46963 11.5303 8.9445 11.5303 9.2374 11.8232L16 18.5858L22.7626 11.8232C23.0555 11.5303 23.5303 11.5303 23.8232 11.8232L24.1768 12.1768C24.4697 12.4697 24.4697 12.9445 24.1768 13.2374L16.5303 20.8839Z" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
<div class="faq2_answer" style="width: 100%; height: 0px;">
<div class="margin-bottom24">
<div class="max-width-large">
<p class="text-18px _0-space">
<!-- Change the answer text below -->
Sure, let's do it!
</p>
</div>
</div>
</div>
</div>
<!-- This is an end to single FAQ element. -->
</div>
</div>
</section>
Copied!
Live Demo:
FAQ’s
Your question goes here!
Your Answer goes here!
One more questions goes here?
Let's answer correctly again!
Positive Negative
This custom code creates a positive and negative block. Follow in-code instructions to edit content inside.
Live Demo:
Copied!
<div fs-richtext-component1="positive-negative" class="blog10_positive-negative-component">
<div class="blog10_positive-wrapper">
<div class="text-style-bbmodern _48px">
<!-- Change positive text below -->
Positive
</div>
<div class="blog10_positive-divider"></div>
<div class="blog10_positive-negative-richtext _0-space w-dyn-bind-empty w-richtext"></div>
</div>
<div class="blog10_positive-wrapper negative">
<div class="text-style-bbmodern _48px">
<!-- Change negative text below -->
Negative
</div>
<div class="blog10_positive-divider"></div>
<div class="blog10_positive-negative-richtext _0-space w-dyn-bind-empty w-richtext"></div>
</div>
</div>
Quote
Create a large Quote block.
Copied!
<div class="blog10_quote-component is-for-box-quote">
<section class="blog10-post_quote is-for-box-quote">
<div class="blog10-post_quote-content is-for-box-quote">
<div class="blog10-post_quote-photo">
<!-- Add IMG src below-->
<img src="https://assets-global.website-files.com/5e4ff204e7b6f80e402d407a/6502f73071bdad6f357a606b_molly.jpeg" loading="lazy" sizes="61px" srcset="https://assets-global.website-files.com/5e4ff204e7b6f80e402d407a/6502f73071bdad6f357a606b_molly-p-500.jpeg 500w, https://assets-global.website-files.com/5e4ff204e7b6f80e402d407a/6502f73071bdad6f357a606b_molly.jpeg 512w" alt="" class="blog10-post_quote-photo-img"></div>
<!-- Add H2 Text below-->
<h2 class="blog10-post_quote-h2 is-for-box-quote">All too often, customer service workers aren’t valued as truly skilled or strategic members of the business.</h2>
<!-- Add Author below-->
<div>~ This i a label to give detail on the quote author</div>
</div>
</section>
</div>
Live Demo:
All too often, customer service workers aren’t valued as truly skilled or strategic members of the business.
~ This i a label to give detail on the quote author
Positive Reinforcement
Create a positive reinforcement.
Copied!
<div fs-richtext-component="positive-reinforcement" class="blog10_positive-reinforcement v2">
<!-- Add TEXT below-->
<div class="text-style-bbmodern _36px">Positive Reinforcement</div>
<div class="blog10_positive-reinforcement-richtext w-richtext">
<!-- Add TEXT below-->
<p>All too often, customer service workers aren’t valued as truly skilled or strategic members of the business. It’s a shame (and a missed opportunity), given how big a role customer service agents play in the success of a business.</p>
</div>
<!-- Add href="" LINK below-->
<div class="blog10_postive-reinforcement-buttonholder"><a href="#YOURLINK" class="faq5_answer-link">Learn more ↗︎</a></div>
</div>
Live Demo:
Positive Reinforcement
All too often, customer service workers aren’t valued as truly skilled or strategic members of the business. It’s a shame (and a missed opportunity), given how big a role customer service agents play in the success of a business.
Label2image
Add images to the Rich Text
Copied!
<div class="vlog10-post_2photos-grid">
<div class="blog10-post_2photo-column">
<!-- Add IMAGE DETAILS below-->
<img loading="lazy" src="https://assets-global.website-files.com/5e4ff204e7b6f80e402d407a/64e64685c3be715ae194ce4c_Frame%202504.png" alt="" class="blog10-post_2photo-column-img">
</div>
<div class="blog10-post_2photo-column">
<!-- Add IMAGE DETAILS below below-->
<img loading="lazy" sizes="(max-width: 767px) 132.5078125px, 45.2578125px" srcset="https://assets-global.website-files.com/5e4ff204e7b6f80e402d407a/64e3962685f785e7c8bfd4d8_Container-p-500.webp 500w, https://assets-global.website-files.com/5e4ff204e7b6f80e402d407a/64e3962685f785e7c8bfd4d8_Container-p-800.webp 800w, https://assets-global.website-files.com/5e4ff204e7b6f80e402d407a/64e3962685f785e7c8bfd4d8_Container.webp 828w" alt="" src="https://assets-global.website-files.com/5e4ff204e7b6f80e402d407a/64e3962685f785e7c8bfd4d8_Container.webp" class="blog10-post_2photo-column-img">
</div>
</div>
Live Demo:
Video
Add video to rich text
Copied!
<div fs-richtext-component="video" class="blog10_video-component v2">
<!-- Add VIDEO DETAILS -->
<div style="padding-top:56.17021276595745%" class="blog10_video-content v2 w-video w-embed">
<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F4sLFpe-xbhk%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D4sLFpe-xbhk&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F4sLFpe-xbhk%2Fhqdefault.jpg&key=96f1f04c5f4143bcb0f2e68c87d65feb&type=text%2Fhtml&schema=youtube" scrolling="no" allowfullscreen="" title="👋 Meet Gorgias"></iframe>
</div>
<!-- Add VIDEO LABEL below-->
<div class="text-size-14">This is a video label</div>
</div>
Live Demo:
This is a video label
Full Width Banner
Add full width banner to the rich text
Copied!
<div fs-richtext-component1="full-width-banner" class="blog10_full-width-banner v2">
<!-- Edit src="" and srcset to your needs - post full image links. Remember to encapsulate it with quotes! -->
<img loading="lazy" src="https://assets-global.website-files.com/5e78f62c08f1bb8c2d788576/650c3d0397d51a7b8e344357_cat_duplicat.jpg" alt="" sizes="(max-width: 991px) 100vw, 98vw" srcset="https://assets-global.website-files.com/5e78f62c08f1bb8c2d788576/650c3d0397d51a7b8e344357_cat_duplicat-p-500.jpg 500w, https://assets-global.website-files.com/5e78f62c08f1bb8c2d788576/650c3d0397d51a7b8e344357_cat_duplicat.jpg 650w" class="blog10_full-width-image-banner v2">
<div class="blog10_image-label">
<!-- Edit text under the image. -->
<div class="text-size-14">
You can edit this text.
</div>
</div>
</div>
Live Demo:
This is an image label
Wide Banner
Add wide banner to the rich text
Copied!
<div class="blog10_wide-banner v2">
<!-- Add IMG src="" below-->
<img loading="lazy" src="https://assets-global.website-files.com/5e4ff204e7b6f80e402d407a/6501a5fb662629bd66ef7251_61eedd296c092fbdb771e20d_Hero%20support%20performances.svg" alt="" class="blog10_wide-image-banner v2 with-border-shadow">
<div class="blog10_image-label">
<!-- Add IMAGE LABEL below-->
<div class="text-size-14">This is an image label</div>
</div>
</div>
Live Demo:
This is an image label
Body width banner
Add body width banner to the rich text
Copied!
<div class="blog10_body-width-banner v2">
<!-- Add IMG DETAILS below-->
<img loading="lazy" sizes="(max-width: 479px) 72vw, 157.234375px" srcset="https://assets-global.website-files.com/5e4ff204e7b6f80e402d407a/64ff3e58094f6525bc98d84d_Open-graph%20gorgias%20ai%20-p-500.png 500w, https://assets-global.website-files.com/5e4ff204e7b6f80e402d407a/64ff3e58094f6525bc98d84d_Open-graph%20gorgias%20ai%20-p-800.png 800w, https://assets-global.website-files.com/5e4ff204e7b6f80e402d407a/64ff3e58094f6525bc98d84d_Open-graph%20gorgias%20ai%20.png 2400w" alt="" src="https://assets-global.website-files.com/5e4ff204e7b6f80e402d407a/64ff3e58094f6525bc98d84d_Open-graph%20gorgias%20ai%20.png" class="blog10_body-width-image-banner v2 with-border-shadow">
<div class="blog10_image-label">
<!-- Add IMG Label below-->
<div class="text-size-14">This is an image label</div>
</div>
</div>
Live Demo:
This is an image label
Simple Table
Add simple table to the rich text
Copied!
<div class="blog10_table-wrapper">
<table class="blog10_table_component">
<thead class="blog10_table_head">
<tr class="blog10_table_row">
<th class="blog10_table_header-v2 padding-30px">
<p class="text-style-bbmodern _36px blog10_cell-paragraph">Category</p>
</th>
</tr>
</thead>
<tbody class="blog10_table_body">
<tr class="blog10_table_row">
<td class="blog10_table_cell-v2 padding-30px">
<p class="blog10_cell-paragraph _0-space">1⃝</p>
<p class="blog10_cell-paragraph _0-space">Something is Going to be super useful for how we approach our next phase of design and we can cover this over two lines.</p>
</td>
</tr>
<tr class="blog10_table_row">
<td class="blog10_table_cell-v2 padding-30px">
<p class="blog10_cell-paragraph _0-space">1⃝</p>
<p class="blog10_cell-paragraph _0-space">Something is Going to be super useful for how we approach our next phase of design and we can cover this over two lines.</p>
</td>
</tr>
</tbody>
</table>
</div>
Live Demo:
|
Category |
|---|
|
1⃝ Something is Going to be super useful for how we approach our next phase of design and we can cover this over two lines. |
|
1⃝ Something is Going to be super useful for how we approach our next phase of design and we can cover this over two lines. |
Complex Small Table
Add complex small table to the rich text
Copied!
<div class="blog10_table-wrapper _926px v2">
<table class="blog10_table_component-v2">
<thead class="blog10_table_head">
<tr class="blog10_table_row">
<th class="blog10_table_header-v2">
<!-- Add CATEGORY HEADER below-->
<p class="blog10_cell-paragraph _0-space">Category</p>
</th>
<th class="blog10_table_header-v2">
<!-- Add APP SUGGESTION HEADER below-->
<p class="blog10_cell-paragraph _0-space">App suggestion</p>
</th>
<th class="blog10_table_header-v2 more-width">
<!-- Add WHY USE HEADER below-->
<p class="blog10_cell-paragraph _0-space">Why should you use this apps?</p>
</th>
<th class="blog10_table_header-v2">
<!-- Add PRICE HEADER below-->
<p class="blog10_cell-paragraph _0-space">Starting price</p>
</th>
</tr>
</thead>
<tbody class="blog10_table_body">
<tr class="blog10_table_row">
<td class="blog10_table_cell-v2">
<!-- Add TYPE below-->
<p class="blog10_cell-paragraph _0-space">Helpdesk</p>
</td>
<td class="blog10_table_cell-v2">
<!-- Add NAME below-->
<p class="blog10_cell-paragraph _0-space">Gorgias</p>
</td>
<td class="blog10_table_cell-v2">
<!-- Add SHORT DESCRIPTION below-->
<p class="blog10_cell-paragraph _0-space">Best Shopify helpdesk app</p>
</td>
<td class="blog10_table_cell-v2">
<!-- Add PRICE below-->
<p class="blog10_cell-paragraph _0-space">$10/month for 3 agents</p>
</td>
</tr>
</tbody>
</table>
</div>
Live Demo:
|
Category |
App suggestion |
Why should you use this apps? |
Starting price |
|---|---|---|---|
|
Helpdesk |
Gorgias |
Best Shopify helpdesk app |
$10/month for 3 agents |
Complex Large Table
Add complex large table to the rich text
Copied!
<div class="blog10_table-wrapper _1084px v2">
<table class="blog10_table_component-v2">
<thead class="blog10_table_head">
<tr class="blog10_table_row">
<th class="blog10_table_header-v2">
<!-- Add TABLE HEADER CATEGORY below-->
<p class="blog10_cell-paragraph _0-space">Category</p>
</th>
<th class="blog10_table_header-v2">
<!-- Add APP SUGGESTION below-->
<p class="blog10_cell-paragraph _0-space">App suggestion</p>
</th>
<th class="blog10_table_header-v2 more-width">
<!-- Add TABLE HEADER WHY USE below-->
<p class="blog10_cell-paragraph _0-space">Why should you use this apps?</p>
</th>
<th class="blog10_table_header-v2">
<!-- Add TABLE PRICE CATEGORY below-->
<p class="blog10_cell-paragraph _0-space">Starting price</p>
</th>
</tr>
</thead>
<tbody class="blog10_table_body">
<tr class="blog10_table_row">
<td class="blog10_table_cell-v2">
<!-- Add CATEGORY below-->
<p class="blog10_cell-paragraph _0-space">Helpdesk</p>
</td>
<td class="blog10_table_cell-v2">
<!-- Add COMPANY NAME below-->
<p class="blog10_cell-paragraph _0-space">Gorgias</p>
</td>
<td class="blog10_table_cell-v2">
<!-- Add SHORT DESCRIPTION below-->
<p class="blog10_cell-paragraph _0-space">Best Shopify helpdesk app</p>
</td>
<td class="blog10_table_cell-v2">
<!-- Add PRICING below-->
<p class="blog10_cell-paragraph _0-space">$10/month for 3 agents</p>
</td>
</tr>
</tbody>
</table>
</div>
Live Demo:
|
Category |
App suggestion |
Why should you use this apps? |
Starting price |
|---|---|---|---|
|
Helpdesk |
Gorgias |
Best Shopify helpdesk app |
$10/month for 3 agents |
How To
Add how to section to the rich text
Copied!
<div class="blog10_how-to-component v2">
<div class="blog10_how-to-wrapper">
<!-- Add LINK in href="" below-->
<a href="#" class="blog10_how-to-link-wrapper-2 black w-inline-block">
<!-- Add TEXT below-->
<div>How to do xyz →</div>
</a>
<!-- Add LINK in href="" below-->
<a href="#" class="blog10_how-to-link-wrapper-2 black w-inline-block">
<!-- Add TEXT below-->
<div>How to do xyz →</div>
</a>
<!-- Add LINK in href="" below-->
<a href="#" class="blog10_how-to-link-wrapper-2 black w-inline-block">
<!-- Add TEXT below-->
<div>How to do xyz →</div>
</a>
<!-- Add LINK in href="" below-->
<a href="#" class="blog10_how-to-link-wrapper-2 black w-inline-block">
<!-- Add TEXT below-->
<div>How to do xyz →</div>
</a>
</div>
</div>