Lorem ipsum is a pseudo-latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content.
Lorem ipsum is a pseudo-latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content.
Lorem ipsum is a pseudo-latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content.
Lorem ipsum is a pseudo-latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content.
Description: Testimonials example with different morph icons within the images inside them. Images can be in JPG, PNG, GIF, SVG formats. In this example there are SVG avatars, which were made with SVG Avatars Generator
Requires: Bootstrap 3.X for basic grid, buttons, text, etc. styles.
WordPress Note: This example may require theme files customization or using a page builder (composer) at your own. See on it as a starting point.
Important: LivIcons data-options
are set to different from these defaults only! If you have another set of the default options please use a full notation of them which you can get from the Configuration tool
<!-- Testimonials 01 --> <div class="container"> <div class="row"> <div class="col-md-6 col-xs-12"> <div class="testimonials-01 row"> <div class="col-sm-4 col-xs-12"> <div class="livicon-evo" data-options=" name: morph-octagon-square.svg; morphImage: path/to/your_image.svg; size: 100%; style: lines; strokeColor: #fbfbfb; strokeWidth: 4; eventOn: grandparent; drawColor: #eee; drawStartPoint: start; drawOnViewport: true"> </div> </div> <div class="col-sm-8 col-xs-12"> <h3>John Doe</h3> <h6 class="text-uppercase">Cool Company Inc.</h6> <p>Lorem ipsum is a pseudo-latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content.</p> </div> </div> </div> <div class="col-md-6 col-xs-12"> <div class="testimonials-01 row"> <div class="col-sm-4 col-xs-12"> <div class="livicon-evo" data-options=" name: morph-smooth-square.svg; morphImage: path/to/your_image.svg; size: 100%; style: lines; strokeColor: #fbfbfb; strokeWidth: 4; eventOn: grandparent; drawColor: #eee; drawStartPoint: start; drawOnViewport: true"> </div> </div> <div class="col-sm-8 col-xs-12"> <h3>Jane Doe</h3> <h6 class="text-uppercase">Cool Company Inc.</h6> <p>Lorem ipsum is a pseudo-latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content.</p> </div> </div> </div> </div> <div class="row"> <div class="col-md-6 col-xs-12"> <div class="testimonials-01 row"> <div class="col-sm-4 col-xs-12"> <div class="livicon-evo" data-options=" name: morph-square-sticker.svg; morphImage: path/to/your_image.svg; morphState: end; size: 100%; style: lines; strokeColor: #fbfbfb; strokeWidth: 4; eventOn: grandparent; drawColor: #eee; drawStartPoint: start; drawOnViewport: true"> </div> </div> <div class="col-sm-8 col-xs-12"> <h3>John Doe</h3> <h6 class="text-uppercase">Cool Company Inc.</h6> <p>Lorem ipsum is a pseudo-latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content.</p> </div> </div> </div> <div class="col-md-6 col-xs-12"> <div class="testimonials-01 row"> <div class="col-sm-4 col-xs-12"> <div class="livicon-evo" data-options=" name: morph-circle-square.svg; morphImage: path/to/your_image.svg; size: 100%; style: lines; strokeColor: #fbfbfb; strokeWidth: 4; eventOn: grandparent; drawColor: #eee; drawStartPoint: start; drawOnViewport: true"> </div> </div> <div class="col-sm-8 col-xs-12"> <h3>Jane Doe</h3> <h6 class="text-uppercase">Cool Company Inc.</h6> <p>Lorem ipsum is a pseudo-latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content.</p> </div> </div> </div> </div> </div>
/********* Testimonials 01 **********/ .testimonials-01 { margin: 30px 0 0 0; background-color: #F7F7F7; padding: 20px 20px 20px 20px; border: 1px solid #eee; } .testimonials-01 h3 { margin-top: 15px; } .testimonials-01 h6 { color: #555; font-weight: 900; } .testimonials-01 p { color: #888; line-height: 1.5; } @media (max-width: 767px) { .testimonials-01 .livicon-evo { width: 50%!important; margin: 0 auto; } .testimonials-01 h3 { text-align: center; margin-top: 10px; } .testimonials-01 h6 { text-align: center; } }