Services Section 01

Description

• make Services section with left (title) – right (description, grid of items, item has title, hover will change background, description, clickable arrow)
• 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 > You can Enable Section Title, Item Title, Body, Button

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

Next, click Title

Enter 2 paragraphs of text

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

#1.7. at Format > Anchor Link, enter word: services-01

#1.8. Hover on Page where you want to apply effect > 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

<!-- 08.26c07v3 Services Section 01 -->
<script>
window.ServicesSection01Config = {
  sectionSelector: '#services-01',
  splitColumns: '1fr 1fr',
  columnGap: 60,
  mobileGridColumns: 2,
  subtitleFontSize: 16,
  cardMinHeight: 260,
  cardMinHeightMobile: 200,
  borderWidth: 1,
  borderColor: '',
  clickTarget: 'arrow',
  arrow: {
    size: 40,
    iconColor: '',
    circleColor: '',
    iconHoverColor: '',
    circleHoverColor: ''
  }
};
</script>
<script src="https://code.beaverhero.com/listsimple/0826c07v3servicessection01.js"></script>

#2. Customize

#2.1. To change number of columns on Desktop, change this option

To change number of columns on Mobile, change Line 07

mobileGridColumns: 2,

#2.2. To change item height on desktop, mobile, change line 09, 10

cardMinHeight: 260,
cardMinHeightMobile: 200,

#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 services section) > Add a Block > Choose Markdown

Add this code into Markdown

<script>
window.ServicesSection01Config = {
  sectionSelector: '#services-01',
  splitColumns: '1fr 1fr',
  columnGap: 60,
  mobileGridColumns: 2,
  subtitleFontSize: 16,
  cardMinHeight: 260,
  cardMinHeightMobile: 200,
  borderWidth: 1,
  borderColor: '',
  clickTarget: 'arrow',
  arrow: {
    size: 40,
    iconColor: '',
    circleColor: '',
    iconHoverColor: '',
    circleHoverColor: ''
  }
};
</script>
<script src="https://code.beaverhero.com/listsimple/0826c07v3servicessection01.js"></script>