Magento 2. Stripes footer

In the KB article, we show you the main elements of the footer. You will see code blocks, so you can always use it to find and edit the required element faster.

Argento Stripes footer consists of three CMS blocks:

• footer_contacts - Footer Contacts
• footer_cms_content - Footer CMS Content
• footer_payments - Footer Payments

Footer Contacts

Original CMS block content:

<div class="footer-contacts argento-grid">
    <div class="col-md-3 hidden-xs">
        <img width="192" height="241"
            src="https://argentotheme.com/static/version1774300757/frontend/Swissup/argentotheme/en_US/images/support.png"
            srcset="https://argentotheme.com/static/version1774300757/frontend/Swissup/argentotheme/en_US/images/support.png 1x, https://argentotheme.com/static/version1774300757/frontend/Swissup/argentotheme/en_US/images/support@2x.png 2x"
            alt="need help?"
        />
    </div>
    <div class="col-md-6 col-xs-12">
        <div data-role="title" class="h4">Need Help?</div>
        <div class="argento-grid">
            <div class="col-lg-6 col-md-12 block">
                <div class="block-icon">
                    <span class="fa-stack fa-2x">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="fa fa-map-marker fa-stack-1x fa-inverse"></i>
                    </span>
                </div>
                <div class="block-content">
                    <div data-role="title">Address</div>
                    <div data-role="content">
                        <div>FifthAve Street 31</div>
                        <div>New York</div>
                        <div>USA</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-12">
                <div class="block">
                    <div class="block-icon">
                        <span class="fa-stack fa-2x">
                            <i class="fa fa-circle fa-stack-2x"></i>
                            <i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
                        </span>
                    </div>
                    <div class="block-content">
                        <div data-role="title">Email</div>
                        <div data-role="content">contact@company.com</div>
                    </div>
                </div>
                <div class="block">
                    <div class="block-icon">
                        <span class="fa-stack fa-2x">
                            <i class="fa fa-circle fa-stack-2x"></i>
                            <i class="fa fa-mobile fa-stack-1x fa-inverse"></i>
                        </span>
                    </div>
                    <div class="block-content">
                        <div data-role="title">Phone</div>
                        <div data-role="content">+01 122 334 566</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-xs-12">
        <div data-role="title" class="h4">Connect With Us</div>
        <div class="social-icons colorize-fa-stack-hover">
            <a href="https://facebook.com/" class="icon icon-facebook">
                <span class="fa-stack fa-2x">
                    <i class="fa fa-circle fa-stack-2x"></i>
                    <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
                </span>
            </a>
            <a href="https://youtube.com/" class="icon icon-youtube">
                <span class="fa-stack fa-2x">
                    <i class="fa fa-circle fa-stack-2x"></i>
                    <i class="fa fa-youtube-play fa-stack-1x fa-inverse"></i>
                </span>
            </a>
            <a href="https://twitter.com/" class="icon icon-twitter">
                <span class="fa-stack fa-2x">
                    <i class="fa fa-circle fa-stack-2x"></i>
                    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                </span>
            </a>
            <a href="https://www.instagram.com/" class="icon icon-instagram">
                <span class="fa-stack fa-2x">
                    <i class="fa fa-circle fa-stack-2x"></i>
                    <i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
                </span>
            </a>
        </div>
    </div>
</div>

Footer CMS content

Original CMS block content:

<div class="footer-links">
    <ul class="footer links argento-grid">
        <li class="col-md-3 col-xs-12">
            <div data-role="title" class="h4">Get help</div>
            <ul data-role="content" class="links">
                <li><a href='https://argentotheme.com/"faq"'>FAQ</a></li>
                <li><a href='https://argentotheme.com/"forum"'>Forum</a></li>
                <li><a href='https://argentotheme.com/"sales/guest/form/"'>Returns and Exchanges</a></li>
            </ul>
        </li>
        <li class="col-md-3 col-xs-12">
            <div data-role="title" class="h4">Learn more</div>
            <ul data-role="content" class="links">
                <li><a href='https://argentotheme.com/"terms-and-conditions"'>Terms & Conditions</a></li>
                <li><a href='https://argentotheme.com/"privacy-policy-cookie-restriction-mode"'>Privacy Policy</a></li>
                <li><a href='https://argentotheme.com/"affiliate"'>Affiliate program</a></li>
            </ul>
        </li>
        <li class="col-md-3 col-xs-12">
            <div data-role="title" class="h4">Be inspired by</div>
            <ul data-role="content" class="links">
                <li><a href='https://argentotheme.com/"blog"'>Blog</a></li>
                <li><a href='https://argentotheme.com/"typography"'>Typography page</a></li>
                <li><a href='https://argentotheme.com/"testimonials"'>Testimonials</a></li>
            </ul>
        </li>
        <li class="col-md-3 col-xs-12">
            <div data-role="title" class="h4">Get in touch</div>
            <ul data-role="content" class="links">
                <li><a href='https://argentotheme.com/"social"'>Social media</a></li>
                <li><a href='https://argentotheme.com/"contact"'>Contact Us</a></li>
                <li><a href='https://argentotheme.com/"map"'>Map</a></li>
            </ul>
        </li>
    </ul>
</div>

Footer Payments

Original CMS block content:

<div class="footer-payments a-center">
    <img width="625" height="35"
        src="https://argentotheme.com/static/version1774300757/frontend/Swissup/argentotheme/en_US/images/payments.png"
        srcset="https://argentotheme.com/static/version1774300757/frontend/Swissup/argentotheme/en_US/images/payments.png 1x, https://argentotheme.com/static/version1774300757/frontend/Swissup/argentotheme/en_US/images/payments@2x.png 2x"
        alt="Credit cards, we accept"
    />
</div>