List Image Slide Up

Description

hover title: image slideshow, click item: expand full box with title, background image, more description and button
view demo – password: abc
buy me a coffee

#1. Install Code

#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. At Design, choose Simple List

#1.4. at Elements > Enable these options

Note: You can disable Section Title, Section button if you don’t need them.

#1.5. at Content > Add your desired image/text

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

#1.6-2. At Format > Anchor Link, enter word: list-slide-up

#1.7. Hover on Page where you added Team > click Gear icon

#1.8. Click Advanced > Paste this code.

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

<!-- 08.26c03v4 List Image Slide Up -->
<script>
window.ListSlideUpConfig = {
  listHeight: "80vh",
  contentPadding: "40px",
  showVerticalLines: true,
  hideFirstLine: true,
  lineColor: "rgba(0, 0, 0, 0.15)",
  lineWidth: "1px",
  slideUpDuration: "1600ms",
  expandDuration: "1700ms",
  imageOverlayColor: "rgba(0, 0, 0, 0.28)",
  titleColor: "#111111",
  titleColorHover: "#ffffff",
  activeTitleColor: "#ffffff",
  activeDescriptionColor: "#ffffff",
  activeButtonColor: "#ffffff",
  activeContentGap: "24px",
  rightMaxWidth: "42%",
  descriptionButtonGap: "14px",
  showCloseButton: true,
  closeButtonLabel: "&times;",
  closeButtonSize: "28px",
  closeButtonColor: "#ffffff",
  closeOnOutsideClick: false,
  disableInEditMode: true
};
</script>
<script src="https://code.beaverhero.com/listsimple/0826c03v4listimgslideup.js"></script>

#2. Customize

#2.1. To change List section height, change this line 04

listHeight: "80vh",

#2.2. To change vertical line style, change line 08, line 09

lineColor: "rgba(0, 0, 0, 0.15)",
  lineWidth: "1px",

#2.3. To change title and title hover color, change line 13, 14

titleColor: "#111111",
  titleColorHover: "#ffffff",

#2.4. To change title, description, button color on item expand, change line 15, 16, 17

activeTitleColor: "#ffffff",
  activeDescriptionColor: "#ffffff",
  activeButtonColor: "#ffffff",

#3. Other

#3.1. if you use Personal/Basic Plan and your plan doesn’t support Injection. You can edit current page > Add a Block > Choose Markdown.

Then add this code into Markdown

<script>
window.ListSlideUpConfig = {
  listHeight: "80vh",
  contentPadding: "40px",
  showVerticalLines: true,
  hideFirstLine: true,
  lineColor: "rgba(0, 0, 0, 0.15)",
  lineWidth: "1px",
  slideUpDuration: "1600ms",
  expandDuration: "1700ms",
  imageOverlayColor: "rgba(0, 0, 0, 0.28)",
  titleColor: "#111111",
  titleColorHover: "#ffffff",
  activeTitleColor: "#ffffff",
  activeDescriptionColor: "#ffffff",
  activeButtonColor: "#ffffff",
  activeContentGap: "24px",
  rightMaxWidth: "42%",
  descriptionButtonGap: "14px",
  showCloseButton: true,
  closeButtonLabel: "&times;",
  closeButtonSize: "28px",
  closeButtonColor: "#ffffff",
  closeOnOutsideClick: false,
  disableInEditMode: true
};
</script>
<script src="https://code.beaverhero.com/listsimple/0826c03v4listimgslideup.js"></script>