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.

Enjoying your evenings at home shouldn’t feel like a compromise.

The Ratio removes variables like water temperature, extraction time, and pour over pattern so you can worry less about making your coffee, and more about drinking it.

The Ratio removes variables like water temperature, extraction time, and pour over pattern so you can worry less about making your coffee, and more about drinking it.

Learn more
<div class="image-block left element">
    <div class="info">
        <h2 class="heading">Enjoying your evenings at home shouldn’t feel like a compromise.</h2>
        <p class="text">
            The Ratio removes variables like water temperature, extraction time, and pour over pattern so you can worry less about making your coffee, and more about drinking it.
        </p>
        <p class="text">
            The Ratio removes variables like water temperature, extraction time, and pour over pattern so you can worry less about making your coffee, and more about drinking it.
        </p>
        <a href="" class="action primary">
            <span>Learn more</span>
        </a>
    </div>
    <div class="picture">
        <img src="{{media url=&quot;wysiwyg/elements/argento/marketplace/banner-image.jpg&quot;}}" alt="" />
    </div>
</div>

Block with Image on Right

Enjoying your evenings at home shouldn’t feel like a compromise.

The Ratio removes variables like water temperature, extraction time, and pour over pattern so you can worry less about making your coffee, and more about drinking it.

The Ratio removes variables like water temperature, extraction time, and pour over pattern so you can worry less about making your coffee, and more about drinking it.

Learn more
<div class="element image-block right">
    <div class="info">
        <h2 class="heading">Enjoying your evenings at home shouldn’t feel like a compromise.</h2>
        <p class="text">
            The Ratio removes variables like water temperature, extraction time, and pour over pattern so you can worry less about making your coffee, and more about drinking it.
        </p>
        <p class="text">
            The Ratio removes variables like water temperature, extraction time, and pour over pattern so you can worry less about making your coffee, and more about drinking it.
        </p>
        <a href="" class="action primary">
            <span>Learn more</span>
        </a>
    </div>
    <div class="picture">
        <img src="{{media url=&quot;wysiwyg/elements/argento/marketplace/banner-image.jpg&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.

Interior Design
A summer of adventures

Buy and sell anytime, anywhere and always make the best deals

Learn more
<div class="element background-divider">
    <img src="{{media url='wysiwyg/elements/argento/marketplace/divider-bg.jpg'}}" alt="Interior Design" />
    <div class="content">
        <div class="block-title">
            <strong role="heading" aria-level="3">A summer of adventures</strong>
            <p class="subtitle">Buy and sell anytime, anywhere and always make the best deals</p>
        </div>
        <a href="{{store direct_url=''}}" title="Learn more" class="action"><span>Try out 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.

We care about your experience

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">We care about your experience</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/marketplace/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/marketplace/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/marketplace/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/marketplace/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/marketplace/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 class="item">
            <div class="icon"><img src="{{media url=&quot;wysiwyg/elements/argento/marketplace/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>
</div>

Text Blocks with Big Icons

Pay with credit card or PayPal

With our advanced payment module you can select the payment menthod that fits! And always secure!
More about payments

Free shipping starting at $50

Benefit from our free shipping worldwide policy to get your products wherever you need them.
More about shipping

Security, from start to finish

We take security very seriously. This is why we don’t store your data and encrypt all transactions.
More about security
<div class="element icon-text-big">
    <div class="item">
        <div class="icon mp-icon mp-icon-big mp-cards"></div>
        <div class="info">
            <h3 class="title">Pay with credit card or PayPal</h3>
            <div class="text">With our advanced payment module you can select the payment menthod that fits! And always secure!</div>
            <a href="{{store url='payments'}}" title="More about payments">More about payments</a>
        </div>
    </div>
    <div class="item">
        <div class="icon mp-icon mp-icon-big mp-shipping"></div>
        <div class="info">
            <h3 class="title">Free shipping starting at $50</h3>
            <div class="text">Benefit from our free shipping worldwide policy to get your products wherever you need them.</div>
            <a href="{{store url='shipping'}}" title="More about shipping">More about shipping</a>
        </div>
    </div>
    <div class="item">
        <div class="icon mp-icon mp-icon-big mp-secure"></div>
        <div class="info">
            <h3 class="title">Security, from start to finish</h3>
            <div class="text">We take security very seriously. This is why we don’t store your data and encrypt all transactions.</div>
            <a href="{{store url='security'}}" title="More about security">More about security</a>
        </div>
    </div>
</div>

Text Blocks with Icons on Top

Pay with credit card or PayPal

With our advanced payment module you can select the payment menthod that fits! And always secure!

More about payments

Free shipping starting at $50

Benefit from our free shipping worldwide policy to get your products wherever you need them.

More about shipping

Security, from start to finish

We take security very seriously. This is why we don’t store your data and encrypt all transactions.

More about security
<div class="element icon-text-top">
    <div class="content">
        <div class="item">
            <div class="icon mp-icon mp-icon-big mp-cards"></div>
            <div class="info">
                <h3 class="title">Pay with credit card or PayPal</h3>
                <div class="text">
                    <p>With our advanced payment module you can select the payment menthod that fits! And always secure!</p>
                    <a href="{{store url='payments'}}" title="More about payments">More about payments</a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="icon mp-icon mp-icon-big mp-shipping"></div>
            <div class="info">
                <h3 class="title">Free shipping starting at $50</h3>
                <div class="text">
                    <p>Benefit from our free shipping worldwide policy to get your products wherever you need them.</p>
                    <a href="{{store url='shipping'}}" title="More about shipping">More about shipping</a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="icon mp-icon mp-icon-big mp-secure"></div>
            <div class="info">
                <h3 class="title">Security, from start to finish</h3>
                <div class="text">
                    <p>We take security very seriously. This is why we don’t store your data and encrypt all transactions.</p>
                    <a href="{{store url='security'}}" title="More about security">More about security</a>
                </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">
        <strong role="heading" aria-level="3">Browse brands</strong>
    </div>
    <div class="block-content">
        {{widget type="Swissup\EasySlide\Block\Slider" identifier="argento_mp_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 products
  1. Chevillère gauche VoltActive : soulage la douleur à la cheville lors de vos activités quotidiennes et sportives  - 100 ans d’experti
  2. TSM 88 5113 Bandage de sport Bandeau de grossesse Noir Taille XL - 5113-XLSchwarzXL
  3. Poupées enfants fille 7 pièces YWW-0005
    Poupées enfants fille 7 pièces YWW-0005
    22,70 €
  4. E.A.R. Classic ear plugs Pack 50 Pairs by RE:  Hygiène et Soins du corps
  5. Rouleau de massage pour les pieds - en bois
  6. canne pliante reglable en hauteur
    canne pliante reglable en hauteur
    17,00 €
  7. Coupe ongle avec anses
    Coupe ongle avec anses
    9,00 €
  8. ECODE® DIP STATION-Table d'inversion gravitationnelle pliable Multigym 6 en 1 Power Tower Réglable, salle de gym à domicile ECO-854
  9. ECODE® Vélo d'appartement pliable Slim Bike, tendeurs de résistance élastiques pour routines de tronc supérieur, panneau LCD ECO-809
  10. ECODE® Tapis roulant New Walk 1HP avec télécommande, Affichage de contrôle LCD, Système d'arrêt automatique, guidon pliable ECO-2575
par page
<div class="element products-grid">{{widget type="Swissup\Highlight\Block\ProductList\All" title="Explore our products" carousel="0" products_count="10" column_count="5" 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">{{widget type="Swissup\Highlight\Block\ProductList\All" title="Similar Products" carousel="1" products_count="6" column_count="6" 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/bio-1.jpg'}}" 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.jpg'}}" 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.jpg'}}" 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
Sign up now
Business Plan
$60/month
  • 1 Complete product
  • 1 year of support
  • 1 Dedicated server
  • 10 Research demo
  • 20 users
Sign up now
Enterprise Plan
$120/month
  • 1 Complete product
  • 1 year of support
  • 1 Dedicated server
  • 10 Research demo
  • 20 users
Sign up now
<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>Sign up now</span></a>
        </div>
        <div class="price-block">
            <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>
            </ul>
            <a href="" class="action primary"><span>Sign up now</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>Sign up now</span></a>
        </div>
    </div>
</div>
<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/marketplace/1.jpg&position=0&label=Image1;file=argento/marketplace/2.jpg&position=1&label=Image2;file=argento/marketplace/3.jpg&position=2&label=Image3;file=argento/marketplace/4.jpg&position=3&label=Image4;file=argento/marketplace/5.jpg&position=4&label=Image5;file=argento/marketplace/6.jpg&position=5&label=Image6"}}
</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.

News & inspiration
  1. Post Link

    How the new spring collection came to life

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Post Link

    How the new spring collection came to life

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  3. Post Link

    How the new spring collection came to life

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="element news">
    <div class="block-title">
        <strong role="heading" aria-level="3">News & inspiration</strong>
    </div>
    <div class="content">
        <ol class="post-list">
            <li class="item">
                <div class="post-image">
                    <a href="#" title="News post">
                        <img src="https://boutique.ramsayservices.fr/media/"wysiwyg/elements/argento/marketplace/news.jpg"" alt="Post Link">
                    </a>
                </div>
                <div class="post-content">
                    <span class="post-tag">Trends</span>
                    <h2><a href="#" title="How the new spring collection came to life">How the new spring collection came to life</a></h2>
                    <div class="short-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
                </div>
            </li>
            <li class="item">
                <div class="post-image">
                    <a href="#" title="News post">
                        <img src="https://boutique.ramsayservices.fr/media/"wysiwyg/elements/argento/marketplace/news.jpg"" alt="Post Link">
                    </a>
                </div>
                <div class="post-content">
                    <span class="post-tag">Trends</span>
                    <h2><a href="#" title="How the new spring collection came to life">How the new spring collection came to life</a></h2>
                    <div class="short-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
                </div>
            </li>
            <li class="item">
                <div class="post-image">
                    <a href="#" title="News post">
                        <img src="https://boutique.ramsayservices.fr/media/"wysiwyg/elements/argento/marketplace/news.jpg"" alt="Post Link">
                    </a>
                </div>
                <div class="post-content">
                    <span class="post-tag">Trends</span>
                    <h2><a href="#" title="How the new spring collection came to life">How the new spring collection came to life</a></h2>
                    <div class="short-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
                </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.

<div class="element testimonials">
    {{widget type="Swissup\Testimonials\Block\Widgets\Slider" items_number="6" title="Hear from our clients" slides_to_show="3" show_rating="1"}}
</div>

Single Testimonial

<div class="element testimonial-single">
    {{widget type="Swissup\Testimonials\Block\Widgets\Slider" items_number="6" title="" slides_to_show="1" show_rating="1" img_width="217" img_height="217"}}
</div>