Argento Elements

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.

Block with Image on Left

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.

New

Adventure Starts Now

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.

Shop Now
<div class="image-block left element">
    <div class="info">
        <p class="label">New</p>
        <h2 class="heading">Adventure Starts Now</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>Shop Now</span>
        </a>
    </div>
    <div class="picture">
        <img src="{{media url=&quot;wysiwyg/elements/argento/force/banner-image-left.png&quot;}}" alt="" />
    </div>
</div>

Block with Image on Right

New

Adventure Starts Now

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.

Shop Now
<div class="element image-block right">
    <div class="info">
        <p class="label">New</p>
        <h2 class="heading">Adventure Starts Now</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>Shop Now</span>
        </a>
    </div>
    <div class="picture">
        <img src="{{media url=&quot;wysiwyg/elements/argento/force/banner-image-right.png&quot;}}" alt="" />
    </div>
</div>

Divider with Background and Title

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.

Nike Collection
New Nike Collection

Three-piece toe construction for classic tennis support and performance.

Shop Now
<div class="element background-divider a-center">
    <img src="{{media url='wysiwyg/elements/argento/force/nike-collection.png'}}" alt="Nike Collection" />
    <div class="content">
        <div class="block-title">
            <strong role="heading" aria-level="3">New Nike Collection</strong>
            <p class="subtitle">Three-piece toe construction for classic tennis support and performance.</p>
        </div>
        <a href="{{store direct_url=''}}" title="Shop Now" class="action primary"><span>Shop Now</span></a>
    </div>
</div>

Text Blocks with Small Icons

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.

Stylish interiors for everyone

In hac habitasse platea dictumst. Vivamus adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis tristique.

Donec rutrum congue

Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt.

Donec rutrum congue

Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt.

Donec rutrum congue

Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt.

Donec rutrum congue

Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt.

Donec rutrum congue

Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt.

Donec rutrum congue

Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt.
<div class="element icon-text-small">
    <div class="description">
        <h2 class="heading argento-force-title"><strong role="heading" aria-level="3">Stylish interiors for everyone</strong></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"><img src="{{media url=&quot;wysiwyg/elements/argento/force/icons/icon-check.svg&quot;}}" 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"><img src="{{media url=&quot;wysiwyg/elements/argento/force/icons/icon-location.svg&quot;}}" 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"><img src="{{media url=&quot;wysiwyg/elements/argento/force/icons/icon-heart.svg&quot;}}" 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"><img src="{{media url=&quot;wysiwyg/elements/argento/force/icons/icon-tags.svg&quot;}}" 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"><img src="{{media url=&quot;wysiwyg/elements/argento/force/icons/icon-money.svg&quot;}}" 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"><img src="{{media url=&quot;wysiwyg/elements/argento/force/icons/icon-sale.svg&quot;}}" 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>

Text Blocks with Big Icons

Secure Payments

Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.

Money Back

Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.

Fast Delivery

Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.
<div class="element icon-text-big">
    <div class="item">
        <div class="icon"><i class="force-icon force-icon-bigger force-shield"></i></div>
        <div class="info">
            <h3 class="title">Secure Payments</h3>
            <div class="text">Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.</div>
        </div>
    </div>
    <div class="item">
        <div class="icon"><i class="force-icon force-icon-bigger force-100percent"></i></div>
        <div class="info">
            <h3 class="title">Money Back</h3>
            <div class="text">Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.</div>
        </div>
    </div>
    <div class="item">
        <div class="icon"><i class="force-icon force-icon-bigger force-delivery"></i></div>
        <div class="info">
            <h3 class="title">Fast Delivery</h3>
            <div class="text">Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.</div>
        </div>
    </div>
</div>

Text Blocks with Icons on Top

Explore our store

Secure Payments

Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.

Money Back

Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.

Fast Delivery

Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.
<div class="element icon-text-top">
    <div class="block-title">
        <strong role="heading" aria-level="2">Explore our store</strong>
    </div>
    <div class="content">
        <div class="item">
            <div class="icon"><i class="force-icon force-icon-bigger force-shield"></i></div>
            <div class="info">
                <h3 class="title">Secure Payments</h3>
                <div class="text">Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.</div>
            </div>
        </div>
        <div class="item">
            <div class="icon"><i class="force-icon force-icon-bigger force-100percent"></i></div>
            <div class="info">
                <h3 class="title">Money Back</h3>
                <div class="text">Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.</div>
            </div>
        </div>
        <div class="item">
            <div class="icon"><i class="force-icon force-icon-bigger force-delivery"></i></div>
            <div class="info">
                <h3 class="title">Fast Delivery</h3>
                <div class="text">Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.</div>
            </div>
        </div>
    </div>
</div>

Logos Slider

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 argento-force-title">
        <strong role="heading" aria-level="3">Brands</strong>
    </div>
    <div class="block-content">
        {{widget type="Swissup\EasySlide\Block\Slider" identifier="argento_force_brands"}}
    </div>
</div>
<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>

Products Grid

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.

Explore our store
pro Seite
<div class="element products-grid hero">{{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>

Products Slider

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 hero">{{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>

Blocks with Person Bio

This block is an excellent solution to display the personal BIO of your team members. The block includes a profile image, title, and biography.

Owen Hill

Head Designer

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

Angie Smith

Head Designer

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

Alice Richardson

Head Designer

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/argento/force/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/argento/force/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/argento/force/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>

Pricing Block

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.

Starter Plan
$40/month
  • 1 Complete product
  • 1 year of support
  • 1 Dedicated server
  • 10 Research demo
  • 20 users
Get Started
Enterprise Plan
$80/month
  • 1 Complete product
  • 1 year of support
  • 1 Dedicated server
  • 10 Research demo
  • 20 users
Get Started
<div class="element pricing">
    <div class="block-content">
        <div class="price-block">
            <div class="info-top">
                <span class="title">Starter Plan</span>
            </div>
            <div class="info-bottom">
                <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>
        <div class="price-block popular">
            <div class="info-top">
                <span class="title">Business Plan</span>
            </div>
            <div class="info-bottom">
                <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>
                </ul>
                <a href="" class="action primary"><span>Get Started</span></a>
            </div>
        </div>
        <div class="price-block">
            <div class="info-top">
                <span class="title">Enterprise Plan</span>
            </div>
            <div class="info-bottom">
                <div class="price"><strong class="amount">$80</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>
</div>
<div class="element gallery hero">
    <div class="block-title">
        <strong role="heading" aria-level="2">Gallery</strong>
    </div>
    <div class="content">
        {{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/force/1.jpg&amp;position=0&amp;label=Fitness+training;file=argento/force/2.jpg&amp;position=1&amp;label=Desert+bike;file=argento/force/3.jpg&amp;position=2&amp;label=Basketball;file=argento/force/4.jpg&amp;position=3&amp;label=Swimming;file=argento/force/5.jpg&amp;position=4&amp;label=Power+lifting;file=argento/force/6.jpg&amp;position=5&amp;label=Cycling+Marathon"}}
    </div>
</div>

Latest News

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.

Latest news
  1. Post Link

    New Collection

    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet temporibus laborum id saepe esse repudiandae
    Read more
  2. Post Link

    New Collection

    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet temporibus laborum id saepe esse repudiandae
    Read more
<div class="element news hero">
    <div class="block-title">
        <strong role="heading" aria-level="2">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="{{media url=&quot;wysiwyg/elements/argento/force/news1.jpg&quot;}}" 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="{{media url=&quot;wysiwyg/elements/argento/force/news2.jpg&quot;}}" 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>

Testimonials

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.

Our clients love us

Bewertung
100%

Ottimo prodotto

25. Januar 2023
Profile image
BUDINI DOMENICO
Bewertung
100%

produit parfaitement correspondant à la demande

26. Januar 2024
Profile image
quebella
Bewertung
100%

Ottimo prodotto

25. Januar 2023
Profile image
SPANEDDA GIANFRANCO
Bewertung
100%

Tutto ok

10. Mai 2023
Profile image
MIHAILA CRISTIAN
Bewertung
100%

Ottima qualità della gomma e soprattutto dei metalli. Cromature perfette, viteria inox di alta qualità.

10. Mai 2023
Profile image
BOSCO GIACINTO
Bewertung
100%

Sono rimasto pienamente soddisfatto del prodotto e dall'assistenza offerta in occasione dell'ordine.

24. Januar 2023
Profile image
TURRENI ROBERTO
<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>

Single Testimonial

Was Kunden sagen

Concernant le service, il est exceptionnel et je pèse mes mots. J'ai eu à traiter avec Mme Garofalo concernant 2 commandes et ma satisfaction est totale. L'entreprise est très professionnelle et fait le maximum pour vous fournir le produit dont vous avez besoin et qui vous satisfera. Concernant le produit un taud pour un semi-rigide, les matériaux sont de qualité et je n'ai pour le moment pas de remarque "négative" sur ce dernier qui me donne toute satisfaction. Il est vrai que ce commentaire n'est qu'éloges mais même en cherchant, je n'ai pas trouvé de points d'améliorations.

24. Januar 2023
Profile image
UBRIG CHRISTOPHER

Ottimo tessuto ad un prezzo conveniente, staff molto professionale. Lo consiglio.

25. Januar 2023
Profile image
CARACCIOLO GIUSEPPE

Efficiente e esatto.

25. Januar 2023
Profile image
GIUNCHI PAOLO

Il contatto con l'azienda è stato semplice, ho ricevuto risposte ai miei quesiti in modo celere e cordiale, altrettanto semplicemente ho effettuato l'ordine e in breve ho ricevuto la merce che corrispondeva esattamente a quello che aspettavo.

25. Januar 2023
Profile image
FIUME MARILENA

Buona qualità e vestibilità delle estensioni laterali. Contatto molto carino. Noi raccomandiamo! Saluti, Richard

23. April 2024
Profile image
r.pollak@pr-electronic.com

Densità ottima.

10. Mai 2023
Profile image
NAUTIKA di Mazza Michele
<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>