Flip Icon v2

Description

• flip effect
• view demo – password: abc
• buy me a coffee

Demo 01: Initial (left) – Hover (right)

Demo 02: Initial (left) – Hover (right)

Demo 03: Initial (left) – Hover (right)

#1. Install Code

if you use Personal/Basic Plan and your plan doesn’t support Injection, you can see #2.1.

#1.1. First add a Section > Choose Team > Choose section with (i) icon

#1.2. Hover on top right of section > click EDIT CONTENT

#1.3. Make sure you use Simple List

#1.4. Add your desired image, text in Content tab

#1.5. Hover on top right of section > Click EDIT SECTION

#1.6. at Anchor Link, enter word: flipsection

if you have multiple sections, you can use flipsection, flipsection02, flipsection03…

#1.7. Hover on Page where you added List Simple > Click Gear icon

Click Advanced > Paste this code

<!-- 04.26c23v2 Flip Icon v2 -->
<script>
window.TP_FLIP_CONFIG = {
  cardRadius: '20px',
  rotateSpeed: '0.6s',
  mobileGap: '10px',
  mobileColumn: 2,
  iconPaddingBottom: '10%',
  backFacePadding: ''
};
</script>
<script src="https://code.beaverhero.com/list/0426c23v2flipiconv2.js"></script>

#2. Customize

#2.1. if you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit current page (page where you use Team Section List Simple) > Then add a Markdown Block

next, add this code into Markdown

<script>
window.TP_FLIP_CONFIG = {
  cardRadius: '20px',
  rotateSpeed: '0.6s',
  mobileGap: '10px',
  mobileColumn: 2,
  iconPaddingBottom: '10%',
  backFacePadding: ''
};
</script>
<script src="https://code.beaverhero.com/list/0426c23v2flipiconv2.js"></script>

#2.2. To enable/disable title, description, photo, just toggle these options

#2.3. To add Link to Flip item, just enable Button

Then you can add URL when edit each item

#2.4. To change number of columns you can adjust these options

#2.5. To adjust space between items, you can choose Size & Space

Then adjust these options

#2.6. To change background color behind Flip items, first see Theme Color you are using. In my example, it is LIGHTEST 1

Next, access Site Styles > Colors > LIGHTEST 1

Scroll down to List Section: Simple > Choose Card Background

#2.7. To change number of columns on Mobile, you can find option: mobileColumn: 2,

in top of code

<script>
window.TP_FLIP_CONFIG = {
  cardRadius: '20px',
  rotateSpeed: '0.6s',
  mobileGap: '10px',
  mobileColumn: 2,
  iconPaddingBottom: '10%',
  backFacePadding: ''
};
</script>

#2.8. To change Icon size, adjust this option