Description
- grid of logos, click on each logo will show corresponding section under
- view demo – password: abc
- buy me a coffee
#1. Install Code
#1.1. First, add a Gallery Section (Add Section > Choose Images > Choose section with (i) icon in top right)
#1.1-2. Make sure you choose Grid: Simple
#1.2. at Anchor Link > enter word: tabs-logo-main
#1.3. Next, edit all images in Gallery > Enter URL like this
#tabs-logo-v1
#tabs-logo-v2
#tabs-logo-v3
#tabs-logo-v4
#tabs-logo-v5
#tabs-logo-v6
#1.4. Next, add some sections. If you have 6 logos, you will add 6 sections. Then hover on top right of section > Click EDIT SECTION > at Anchor Link, enter word: #tabs-logo-v1, #tabs-logo-v2, #tabs-logo-v3….same as step #1.3
#1.5. Hover on Page where you use Gallery > Click Gear icon > Click Advanced > Paste this code
<!-- 09.26c12v24 Tabs Logo -->
<script>
window.tabsLogoOptions={
sectionId:"tabs-logo",
sectionRadius:"24px",
sectionSideSpace:"20px",
activeOverlayOpacity:0.75,
logoLine:"1px solid rgba(0,0,0,.14)",
logoSize:"",
mobileColumns:2,
mobileBreakpoint:767,
transitionDuration:180,
fadeUpDistance:"8px"
};
</script>
<script src="https://code.beaverhero.com/gallerysgrid/0926c12v24tabslogo.js"></script>
#2. Customize
#2.1. To change line between logos, change this line
logoLine:"1px solid rgba(0,0,0,.14)",