Timeline 07 – @tuanphan

Description

adding timeline with alternate layout: image, text, description, vertical line, fade in fade out effect
view demo – password: abc
buy me a coffee

#1. Install Code

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

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

#1.3. at Design > Choose Simple List

#1.4. at Elements > Enable: Section Title, Item Title, Body, Image

#1.5. at Content > Add your desired title text, image

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

#1.7. at Format > Anchor Link, enter word: timeline-07

#1.8. Hover on Page where you use Team section > Click Gear icon

#1.9. Click Advanced > Paste this code

If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 07.26c04v1 Timeline 07 -->
<style>
body:not(.sqs-edit-mode-active) section[id*="timeline-07"] .user-items-list{display:none!important}
  body.sqs-edit-mode-active .tl07-wrap {display: none !important;}
</style>
<script>
window.Timeline07Config = {
  sectionId: 'timeline-07',
  maxWidth: 700,
  containerPadding: 80,
  fixedBackground: true,
  changeBackground: true,
  overlayColor: 'rgba(58,58,58,0.82)',
  headerColor: '#ffffff',
  titleColor: '#ffffff',
  descColor: 'rgba(255,255,255,0.72)',
  lineColor: 'rgba(255,255,255,0.14)',
  inactiveOpacity: 0.25,
  inactiveBlur: 3,
  sideLabel: 'FATHER OF THE TURKS'
};
</script>
<script src="https://code.beaverhero.com/list/0726c04v1timeline07.js"></script>

#2. Customize

#2.1. To change text color, you can change Line 14 to Line 16

headerColor: '#ffffff',
titleColor: '#ffffff',
descColor: 'rgba(255,255,255,0.72)',

#2.2. To change overlay color, change Line 13

overlayColor: 'rgba(58,58,58,0.82)',

#2.3. To change vertical line color, change Line 17

lineColor: 'rgba(255,255,255,0.14)',

#2.4. To change this text

You can change Line 20

sideLabel: 'FATHER OF THE TURKS'

#3. Other

#3.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) > Add a Markdown Block

Add this code into Markdown

<style>
body:not(.sqs-edit-mode-active) section[id*="timeline-07"] .user-items-list{display:none!important}
  body.sqs-edit-mode-active .tl07-wrap {display: none !important;}
</style>
<script>
window.Timeline07Config = {
  sectionId: 'timeline-07',
  maxWidth: 700,
  containerPadding: 80,
  fixedBackground: true,
  changeBackground: true,
  overlayColor: 'rgba(58,58,58,0.82)',
  headerColor: '#ffffff',
  titleColor: '#ffffff',
  descColor: 'rgba(255,255,255,0.72)',
  lineColor: 'rgba(255,255,255,0.14)',
  inactiveOpacity: 0.25,
  inactiveBlur: 3,
  sideLabel: 'FATHER OF THE TURKS'
};
</script>
<script src="https://code.beaverhero.com/list/0726c04v1timeline07.js"></script>