Flip Read More

Description

• initial: show image, title – hover: show background color, description, read more
• view demo – password: abc
• buy me a coffee

#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: flip-readmore

If you need to apply effect to multiple sections on same page, just use flip-readmore, flip-readmore02, flip-readmore03…

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

Click Advanced > Paste this code

<!-- 05.26c04v3 Flip Readmore -->
<script>
window.TP_FLIP_CONFIG = {
  cardRadius: '20px',
  rotateSpeed: '0.6s',
  mobileGap: '10px',
  mobileColumn: 2,
  iconPaddingBottom: '30%',
  backFacePadding: '',
  readMoreText: 'Read More',
  flipDirection: 'horizontal',
  frontBg: false,
  backBg: true,
  borderStyle: 'none',
  frontTitle: true,
  backTitle: false
};
</script>
<script src="https://code.beaverhero.com/list/0526c04v3flipreadmore.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: '30%',
  backFacePadding: '',
  readMoreText: 'Read More',
  flipDirection: 'horizontal',
  frontBg: false,
  backBg: true,
  borderStyle: 'none',
  frontTitle: true,
  backTitle: false
};
</script>
<script src="https://code.beaverhero.com/list/0526c04v3flipreadmore.js"></script>

#2.2. To change read more url, you can adjust Item Button URL

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

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

Then adjust these options

#2.5. 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.6. To change number of columns on Mobile, you can find option: mobileColumn: 2,

in top of code

mobileGap: '10px',
mobileColumn: 2,

#2.7. To change Icon size, adjust this option

iconPaddingBottom: '30%',

#2.8. To change text Read More to another text, change this option

readMoreText: 'Read More',