JavaScript scheint in Ihrem Browser deaktiviert zu sein. Um unsere Website in bester Weise zu erfahren, aktivieren Sie Javascript in Ihrem Browser.

Argento-Elemente

Wir haben die Elemente-Seite erstellt, um die Verwaltung Ihres Magento 2 Shops zu vereinfachen. Die Seite erleichtert die Erstellung von Inhalten. Die Seite enthält gebrauchsfertige Widgets und HTML-Snippets mit vordefinierten Stilen. Das Hinzufügen und Konfigurieren der genannten Blöcke erfordert keine Programmierkenntnisse. Jetzt können Sie sie einfach an verschiedenen Stellen Ihrer Website implementieren. Der Vorteil der Verwendung der Informationen der Elemente-Seite ist, dass derselbe Block oder dasselbe Widget auf mehreren Seiten wiederverwendet werden kann. Das spart Ihnen viel Zeit beim Erstellen und Aktualisieren von Inhalten.

Block mit Bild links
Block mit Bild rechts
Trenner mit Hintergrund und Titel
Textblöcke mit kleinen Icons
Textblöcke mit grossen Icons
Textblöcke mit Icons oben
Logos-Slider
Produkt mit Kurzinformationen
Produktraster
Produkte-Slider
Blöcke mit Personen-Bio
Preisblock
Bildergalerie
Neueste Nachrichten
Kundenstimmen
Einzelne Kundenstimme

Block mit Bild links

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.

Wir kümmern uns um
Ihr Erlebnis

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.

<div class="image-block left element">
    <div class="info">
        <h2 class="heading">We care about<br />your experience</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>Entdecken</span>
        </a>
    </div>
    <div class="picture">
        <img src="{{media url=&quot;wysiwyg/elements/argento/luxury/banner-image.jpg&quot;}}" alt="" />
    </div>
</div>

Block mit Bild rechts

Wir kümmern uns um
Ihr Erlebnis

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.

<div class="element image-block right">
    <div class="info">
        <h2 class="heading">We care about<br />your experience</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>Entdecken</span>
        </a>
    </div>
    <div class="picture">
        <img src="{{media url=&quot;wysiwyg/elements/argento/luxury/banner-image.jpg&quot;}}" alt="" />
    </div>
</div>

Trenner mit Hintergrund und Titel

Mit dem Blockcode können Sie die Trenner als Hintergrundbilder für Abschnitte hinzufügen. Die Trenner verleihen einer Webseite etwas Originalität. Zudem kann das Bild Links zu wichtigen Inhalten Ihres Shops präsentieren.

Sommer-Essentials

Sommer-Essentials
Bis zu 50% Rabatt

Das Angebot gilt für Bestellungen, solange der Vorrat reicht.

<div class="element background-divider a-center">
    <img src="{{media url='wysiwyg/elements/argento/luxury/essentials.jpg'}}" alt="Sommer-Essentials" />
    <div class="content">
        <div class="block-title">
            <h2 role="heading">Sommer-Essentials<br />Bis zu 50% Rabatt</h2>
            <p class="subtitle">Das Angebot gilt für Bestellungen, solange der Vorrat reicht.</p>
        </div>
    </div>
</div>

Textblöcke mit kleinen Icons

Die Blöcke haben eine informative Rolle. Ein wichtiger Inhalt zusammen mit einprägsamen Icons wird 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.

Wir kümmern uns um
Ihr Erlebnis

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<br/>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/luxury/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/luxury/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/luxury/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/luxury/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/luxury/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/luxury/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>

Textblöcke mit grossen Icons

Branding

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

Branding

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

Branding

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

<div class="element icon-text-big">
    <div class="item">
        <div class="icon"><img src="{{media url=&quot;wysiwyg/elements/argento/luxury/icons/icon-sale.svg&quot;}}" 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">
        <div class="icon"><img src="{{media url=&quot;wysiwyg/elements/argento/luxury/icons/icon-money.svg&quot;}}" 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">
        <div class="icon"><img src="{{media url=&quot;wysiwyg/elements/argento/luxury/icons/icon-heart.svg&quot;}}" 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>

Textblöcke mit Icons oben

Entdecken our store

Free Delivery

Unser Shop bietet eine umfangreiche und fachmännisch kuratierte Auswahl an Mode- und Lifestyle-Angeboten.

Sichere Zahlung

Unser Shop bietet eine umfangreiche und fachmännisch kuratierte Auswahl an Mode- und Lifestyle-Angeboten.

24h Kundenservice

Unser Shop bietet eine umfangreiche und fachmännisch kuratierte Auswahl an Mode- und Lifestyle-Angeboten.

<div class="element icon-text-top">
    <div class="block-title">
        <h2 class="heading">Entdecken our store</h2>
    </div>
    <div class="content">
        <div class="item">
            <div class="icon luxury-icon luxury-icon-big luxury-cart-alt"></div>
            <div class="info">
                <h3 class="title">Free Delivery</h3>
                <div class="text">Unser Shop bietet eine umfangreiche und fachmännisch kuratierte Auswahl an Mode- und Lifestyle-Angeboten.</div>
            </div>
        </div>
        <div class="item">
            <div class="icon luxury-icon luxury-icon-big luxury-lock"></div>
            <div class="info">
                <h3 class="title">Sichere Zahlung</h3>
                <div class="text">Unser Shop bietet eine umfangreiche und fachmännisch kuratierte Auswahl an Mode- und Lifestyle-Angeboten.</div>
            </div>
        </div>
        <div class="item">
            <div class="icon luxury-icon luxury-icon-big luxury-headphones"></div>
            <div class="info">
                <h3 class="title">24h Kundenservice</h3>
                <div class="text">Unser Shop bietet eine umfangreiche und fachmännisch kuratierte Auswahl an Mode- und Lifestyle-Angeboten.</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.

Our brands

<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_luxury_brands"}}
    </div>
</div>

Produkt mit Kurzinformationen

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.

<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>

Produktraster

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="Entdecken 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>

Produkte-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="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>

Blöcke mit Personen-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/luxury/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/luxury/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/luxury/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>

Preisblock

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

Buy Now

Business Plan

$60/month

1 Complete product
1 year of support
1 Dedicated server
10 Research demo
20 users
10 linked accounts

Buy Now

Enterprise Plan

$80/month

1 Complete product
1 year of support
1 Dedicated server
10 Research demo
20 users

Buy Now

<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>Buy Now</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>
                    <li class="item"><strong>10</strong> linked accounts</li>
                </ul>
                <a href="" class="action primary"><span>Buy Now</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>Buy Now</span></a>
            </div>
        </div>
    </div>
</div>

Bildergalerie

The Bildergalerie 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/luxury/1.jpg&amp;position=0&amp;label=Fashion;file=argento/luxury/2.jpg&amp;position=1&amp;label=Fashion;file=argento/luxury/3.jpg&amp;position=2&amp;label=Fashion;file=argento/luxury/4.jpg&amp;position=3&amp;label=Fashion;file=argento/luxury/5.jpg&amp;position=4&amp;label=Fashion;file=argento/luxury/6.jpg&amp;position=5&amp;label=Fashion"}}
</div>

Neueste Nachrichten

The Neueste Nachrichten 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

Trends
New Collection

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet temporibus laborum id saepe esse repudiandae
Read more
Trends
New Collection

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

<div class="element news">
    <div class="block-title">
        <h2 class="heading">Latest news</h2>
    </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/luxury/news.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/luxury/news.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>

Kundenstimmen

The Kundenstimmen 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\Kundenstimmen\Block\Widgets\Slider" items_number="6" title="Hear from our clients" slides_to_show="3" show_rating="1"}}
</div>

Einzelne Kundenstimme

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