We created the Elements Page to get managing your Magento 2 store simple. The page makes it easier to create content. The page includes ready-to-use widgets and HTML snippets with predefined styles. Adding and configuring the mentioned blocks doesn't require any programming skills. Now you can simply implement them in various places on your website. The benefit of using the information of Elements Page is that the same block or widget can be reused on multiple pages. That saves you lots of time when creating and updating content.
You can use the blocks as a navigational tool. They include links to popular content of your store. Both images and a brief introduction present whatever you believe your visitors will find valuable.
In hac habitasse platea dictumst. Vivamus adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis tristique. Nam vel iaculis mauris. Sed ullamcorper tellus erat, non ultrices sem tincidunt euismod. Integer et elit eget elit facilisis tristique.
Our work
<div class="image-block left element"> <div class="info"> <h2 class="heading">Stylish interiors</h2> <p class="text"> In hac habitasse platea dictumst. Vivamus adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis tristique. Nam vel iaculis mauris. Sed ullamcorper tellus erat, non ultrices sem tincidunt euismod. Integer et elit eget elit facilisis tristique. </p> <a href="" class="action primary"> <span>Our work</span> </a> </div> <div class="picture"> <img src="{{media url="wysiwyg/elements/banner-image.jpg"}}" alt="" /> </div> </div>
In hac habitasse platea dictumst. Vivamus adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis tristique. Nam vel iaculis mauris. Sed ullamcorper tellus erat, non ultrices sem tincidunt euismod. Integer et elit eget elit facilisis tristique.
Our work
<div class="element image-block right"> <div class="info"> <h2 class="heading">Stylish interiors</h2> <p class="text"> In hac habitasse platea dictumst. Vivamus adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis tristique. Nam vel iaculis mauris. Sed ullamcorper tellus erat, non ultrices sem tincidunt euismod. Integer et elit eget elit facilisis tristique. </p> <a href="" class="action primary"> <span>Our work</span> </a> </div> <div class="picture"> <img src="{{media url="wysiwyg/elements/banner-image.jpg"}}" alt="" /> </div> </div>
With the block code, you can add the dividers as section background images. The dividers bring a little originality to a web page. Plus, the image can present links to the important content of your store.
Innovative experience
Custom interior design suggestions<div class="element background-divider a-center"> <img src="{{media url='wysiwyg/interior/home-interior.jpg'}}" alt="Interior Design" /> <div class="content"> <div class="block-title"> <p class="subtitle">Innovative experience</p> <strong role="heading" aria-level="3">Custom interior design suggestions</strong> </div> <a href="{{store direct_url=''}}" title="Try out now" class="action"><span>Try out now</span></a> </div> </div>
The blocks have an informative role to play. A piece of important content along with memorable icons will help you to communicate with your customers who speak multiple languages. The blocks with icons compact information into one easily recognizable symbol. Within a text block, you can add custom-designed icons too.
In hac habitasse platea dictumst. Vivamus adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis tristique.
<div class="element icon-text-small"> <div class="description"> <h2 class="heading">Stylish interiors for everyone</h2> <p class="text">In hac habitasse platea dictumst. Vivamus adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis tristique.</p> </div> <div class="icons"> <div class="item"> <div class="icon bg-yellow"><img src="{{media url="wysiwyg/elements/icons/icon-check.svg"}}" alt="" /></div> <div class="info"> <h4 class="title">Donec rutrum congue</h4> <div class="text">Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. </div> </div> </div> <div class="item"> <div class="icon bg-lavender"><img src="{{media url="wysiwyg/elements/icons/icon-location.svg"}}" alt="" /></div> <div class="info"> <h4 class="title">Donec rutrum congue</h4> <div class="text">Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. </div> </div> </div> <div class="item"> <div class="icon bg-mint"><img src="{{media url="wysiwyg/elements/icons/icon-heart.svg"}}" alt="" /></div> <div class="info"> <h4 class="title">Donec rutrum congue</h4> <div class="text">Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. </div> </div> </div> <div class="item"> <div class="icon bg-yellow"><img src="{{media url="wysiwyg/elements/icons/icon-tags.svg"}}" alt="" /></div> <div class="info"> <h4 class="title">Donec rutrum congue</h4> <div class="text">Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. </div> </div> </div> <div class="item"> <div class="icon bg-lavender"><img src="{{media url="wysiwyg/elements/icons/icon-money.svg"}}" alt="" /></div> <div class="info"> <h4 class="title">Donec rutrum congue</h4> <div class="text">Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. </div> </div> </div> <div class="item"> <div class="icon bg-mint"><img src="{{media url="wysiwyg/elements/icons/icon-sale.svg"}}" alt="" /></div> <div class="info"> <h4 class="title">Donec rutrum congue</h4> <div class="text">Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. </div> </div> </div> </div> </div>
<div class="element icon-text-big"> <div class="item bg-lavender"> <div class="icon"><img src="{{media url="wysiwyg/elements/icons/icon-sale.svg"}}" alt="" /></div> <div class="info"> <h3 class="title">Branding</h3> <div class="text">Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt.</div> </div> </div> <div class="item bg-yellow"> <div class="icon"><img src="{{media url="wysiwyg/elements/icons/icon-money.svg"}}" alt="" /></div> <div class="info"> <h3 class="title">Branding</h3> <div class="text">Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt.</div> </div> </div> <div class="item bg-mint"> <div class="icon"><img src="{{media url="wysiwyg/elements/icons/icon-heart.svg"}}" alt="" /></div> <div class="info"> <h3 class="title">Branding</h3> <div class="text">Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt.</div> </div> </div> </div>
<div class="element icon-text-top"> <div class="block-title"> <strong role="heading" aria-level="3">Explore our store</strong> </div> <div class="content"> <div class="item"> <div class="icon bg-yellow"><img src="{{media url="wysiwyg/elements/icons/icon-sale.svg"}}" alt="" /></div> <div class="info"> <h3 class="title">Donec rutrum congue</h3> <div class="text">Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt.</div> </div> </div> <div class="item"> <div class="icon bg-mint"><img src="{{media url="wysiwyg/elements/icons/icon-money.svg"}}" alt="" /></div> <div class="info"> <h3 class="title">Donec rutrum congue</h3> <div class="text">Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt.</div> </div> </div> <div class="item"> <div class="icon bg-lavender"><img src="{{media url="wysiwyg/elements/icons/icon-heart.svg"}}" alt="" /></div> <div class="info"> <h3 class="title">Donec rutrum congue</h3> <div class="text">Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt.</div> </div> </div> </div> </div>
The Logos Slider is perfect for displaying a list of brands available in your store. You can also use it to show your partner or client logos. With the block code, you can add your slider to your site quickly and easily. Made using Easy Slider module widget.
<div class="block block-carousel element brands-slider"> <div class="block-title"> <strong role="heading" aria-level="3">Our brands</strong> </div> <div class="block-content"> {{widget type="Swissup\EasySlide\Block\Slider" identifier="argento_home_brands"}} </div> </div>
The block/widget enables you to display a short description of the product on a category, other product listing pages, and product page. Using block/widget you will easily show the main information of your product briefly to arouse interest. Built with Highlight module widget.
Gaiwan con capacidad de 200ml, incluye 2 tazas de 100ml y estuche rigido.
<div class="element product-info">{{widget type="Swissup\Highlight\Block\ProductList\All" title="" carousel="0" products_count="1" column_count="1" page_count="1" order="default" dir="asc" template="Swissup_Highlight::product/list.phtml" mode="list" show_page_link="0" conditions_encoded="^[`1`:^[`type`:`Magento||CatalogWidget||Model||Rule||Condition||Combine`,`aggregator`:`all`,`value`:`1`,`new_child`:``^]^]" hide_when_filter_is_used="0"}}</div>
The block displays products in a product grid. It shows 4 products per row on the desktop and 2 per row on mobile. You can select a list of products manually. You can expand the grid with columns, custom text, labels. Built with Highlight module widget.
<div class="element products-grid">{{widget type="Swissup\Highlight\Block\ProductList\All" title="Explore our store" carousel="0" products_count="8" column_count="4" page_count="1" order="default" dir="asc" template="Magento_Catalog::product/list.phtml" mode="grid" show_page_link="0" conditions_encoded="^[`1`:^[`type`:`Magento||CatalogWidget||Model||Rule||Condition||Combine`,`aggregator`:`all`,`value`:`1`,`new_child`:``^]^]" hide_when_filter_is_used="0"}}</div>
The widget allows you to show the attractive product slider on your site. You can add a carousel to posts, pages, sidebars. This is a great way to showcase your products and increase conversions. Built with Highlight module widget with ajax carousel enabled.
<div class="element products-slider">{{widget type="Swissup\Highlight\Block\ProductList\All" title="Related products" carousel="1" products_count="4" column_count="4" page_count="2" order="default" dir="asc" template="Magento_Catalog::product/list.phtml" mode="grid" show_page_link="0" conditions_encoded="^[`1`:^[`type`:`Magento||CatalogWidget||Model||Rule||Condition||Combine`,`aggregator`:`all`,`value`:`1`,`new_child`:``^]^]" hide_when_filter_is_used="0"}}</div>
This block is an excellent solution to display the personal BIO of your team members. The block includes a profile image, title, and biography.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet lig
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet lig
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet lig
<div class="element bio"> <div class="item"> <div class="wrapper"> <img src="{{media url='wysiwyg/elements/bio-1.png'}}" alt="" class="image"> <h4 class="title">Owen Hill</h4> <span class="subtitle">Head Designer</span> <p class="info">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet lig</p> </div> </div> <div class="item"> <div class="wrapper"> <img src="{{media url='wysiwyg/elements/bio-2.png'}}" alt="" class="image"> <h4 class="title">Angie Smith</h4> <span class="subtitle">Head Designer</span> <p class="info">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet lig</p> </div> </div> <div class="item"> <div class="wrapper"> <img src="{{media url='wysiwyg/elements/bio-3.png'}}" alt="" class="image"> <h4 class="title">Alice Richardson </h4> <span class="subtitle">Head Designer</span> <p class="info">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet lig</p> </div> </div> </div>
With the block, you can add your own custom pricing table block. It shows the price range with combinations of different prices. It shows a list of services or products included in the pricing package. You have only to choose a location where you want to add the block.
<div class="element pricing"> <div class="block-content"> <div class="price-block"> <span class="title">Starter Plan</span> <div class="price"><strong class="amount">$40</strong><span class="period">/month</span></div> <ul class="conditions"> <li class="item"><strong>1</strong> Complete product</li> <li class="item"><strong>1</strong> year of support</li> <li class="item"><strong>1</strong> Dedicated server</li> <li class="item"><strong>10</strong> Research demo</li> <li class="item"><strong>20</strong> users</li> </ul> <a href="" class="action primary"><span>Get Started</span></a> </div> <div class="price-block popular" data-popular="Popular"> <span class="title">Business Plan</span> <div class="price"><strong class="amount">$60</strong><span class="period">/month</span></div> <ul class="conditions"> <li class="item"><strong>1</strong> Complete product</li> <li class="item"><strong>1</strong> year of support</li> <li class="item"><strong>1</strong> Dedicated server</li> <li class="item"><strong>10</strong> Research demo</li> <li class="item"><strong>20</strong> users</li> <li class="item"><strong>10</strong> linked accounts</li> </ul> <a href="" class="action primary"><span>Get Started</span></a> </div> <div class="price-block"> <span class="title">Enterprise Plan</span> <div class="price"><strong class="amount">$120</strong><span class="period">/month</span></div> <ul class="conditions"> <li class="item"><strong>1</strong> Complete product</li> <li class="item"><strong>1</strong> year of support</li> <li class="item"><strong>1</strong> Dedicated server</li> <li class="item"><strong>10</strong> Research demo</li> <li class="item"><strong>20</strong> users</li> </ul> <a href="" class="action primary"><span>Get Started</span></a> </div> </div> </div>
The Image Gallery block allows you to easily add an image gallery. It can be an image only or an image with the link. That will lead customers to the important pages of your store. The element is made using Lightbox Pro module widget with masonry grid gallery layout.
<div class="element gallery"> {{widget type="Swissup\Lightboxpro\Block\Widgets\Gallery" template="widget/masonry.phtml" img_width="600" img_height="auto" thumb_width="80" thumb_height="100" gallery="file=argento/home/image_44.jpg&position=0&label=Modern+room;file=argento/home/image_48.jpg&position=1&label=Yellow+chair;file=argento/home/image_47.jpg&position=2&label=Clean+kitchen;file=argento/home/image_45.jpg&position=3&label=Comfy+sofa;file=argento/home/image_46.jpg&position=4&label=Cups+and+green+wall;file=argento/home/image_49.jpg&position=5&label=White+wooden+room"}} </div>
The Latest News block helps you to show recent posts from a blog, top trending news, videos, and stories. By default, the block displays 2 news items.
<div class="element news"> <div class="block-title"> <strong role="heading" aria-level="3">Latest news</strong> </div> <div class="content"> <ol class="post-list"> <li class="item"> <div class="post-image"> <a href="#" title="News post"> <img src="https://florite.biz/media/"wysiwyg/elements/news1.jpg"" alt="Post Link"> </a> </div> <div class="post-content"> <span class="post-tag">Trends</span> <h2><a href="#" title="New Collection">New Collection</a></h2> <div class="short-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet temporibus laborum id saepe esse repudiandae</div> <a href="#" class="read-more-link">Read more</a> </div> </li> <li class="item"> <div class="post-image"> <a href="#" title="News post"> <img src="https://florite.biz/media/"wysiwyg/elements/news1.jpg"" alt="Post Link"> </a> </div> <div class="post-content"> <span class="post-tag">Trends</span> <h2><a href="#" title="New Collection">New Collection</a></h2> <div class="short-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet temporibus laborum id saepe esse repudiandae</div> <a href="#" class="read-more-link">Read more</a> </div> </li> </ol> </div> </div>
The Testimonials widget allows you to add testimonials anywhere on your website. Using it you can embed customer testimonial slider into your store pages in a few clicks.
Valoración100%Deliciosos! Con buena concentración, muy buena calidad, voy por mi segundo pedido!! Suuuper recomendados!!
Valoración100%La calidad y presentación de sus productos es de 10. Me encanta que se percibe la pasión y el corazón que le dedican a su trabajo. Muchas felicidades!
Valoración100%Un té Matcha delicioso
Valoración100%Desde que inicié en el camino del té, el mejor lugar para comprar mis tés favoritos y los accesorios más bonitos ha sido florite! Además de una excelente atención por parte del personal y de su fundador Jesús! Siempre tienen una buena taza y una charla enriquecedora para ofrecer! 10/10!
Valoración100%Es la primera vez que hago compra por medio de Florité; di con esta página casi por casualidad, me encantó el producto y en definitiva ya se convirtió en mi sitio favorito para comprar té !!!!
Valoración100%Buen producto y buena atención a cliente lo recomiendo
<div class="element testimonials"> {{widget type="Swissup\Testimonials\Block\Widgets\Slider" items_number="6" title="Our clients love us" slides_to_show="3" show_rating="1"}} </div>
Deliciosos! Con buena concentración, muy buena calidad, voy por mi segundo pedido!! Suuuper recomendados!!
Todo excelente, los tés y tisanas de excelente calidad y sabor todo perfecto
maravilloso trato personal por los propietarios, deliciosos en todos sus aspecto y soy su cliente desde siempre, los habia olvidado y no saben como me arrepenti, los retomo y veo que han superado todas las espectativas, puedo dar mil estrellas, (no sol olas permitidas) :-)
Los tés y la tetera me encantaron pero si quisiera comentarles mi experiencia. Me llegó un correo diciendo que mi pedido ya estaba listo, pero me asusté porque yo no había pedido nada, ni conocía su tienda. La cosa fue que mi novio compró mi regalo de cumpleaños con ustedes y dio mi correo para que me dieran de alta en su newsfeed, pero preguntó en su tienda si me llegaría un correo con lo que había comprado el (mi regalo sorpresa) en la tienda le dijeron que no pero si me llegó y descubrí cual iba a ser su regalo dos días antes de mi cumpleaños. Se arruino la sorpresa. Les escribo esto para que tengan cuidado en el futuro y no le arruinen la sorpresa a otro cumpleañero o cumpleañera.
Me encanto la presentación, compre variedad, llego en tiempo, tiene excelente presentación y estan buenisimos. Pronto comprare de nuevo. Recomendadiaimo
El producto es de buena calidad y con un aroma delicioso, estoy muy feliz con lo que recibí. El único inconveniente que le encuentro es la paquetería ya que demora un poco, por todo lo demás es exactamente como lo esperaba.
<div class="element testimonial-single"> {{widget type="Swissup\Testimonials\Block\Widgets\Slider" items_number="6" title="" slides_to_show="1" show_rating="0" img_width="349" img_height="394"}} </div>
Sumérgete en el mundo del té y conoce nuestras promociones, cursos, recetas, últimas noticas y sobre todo tus productos favoritos.
