Style Editor Docs
     
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
    11. May 2021

    Styling lists - Matrix Themes

    How to create styling lists in Matrix Theme using the variables

    There are 2 ways to create a styling list  in Matrix Themes:

    1. Using the text editor ( you will find the details in this blog post)
    2. Using the Matrix variables ( more options )

    Variables for styling lists

    This feature has been added on May 2021, so please make sure you're using the latest release of Matrix theme. In section 'Updates' it is possible to find the updated section of CSS, otherwise you can request to update the whole theme from the support page

    How it works

    1. Add a module 'columns' and inside of it display 'Text' with a bulleted list

     

    bg-grey  mid-round add-5  wow animated fadeInUp

    2. Inside of the same columns add Widget/HTML with the following variables and refresh the page

    
    <var> has-check-list </var>
    bg-grey  mid-round add-5  wow animated fadeInUp

    All options

    
    <var> has-check-list </var>
    • Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. In turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam imperdiet imperdiet orci.
    • Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In ut quam vitae odio lacinia tincidunt. Nunc sed turpis.
    • Donec interdum metus

     

    has-check-list

    
    <var> has-check-list-2 </var>
    • Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. In turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam imperdiet imperdiet orci.
    • Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In ut quam vitae odio lacinia tincidunt. Nunc sed turpis.
    • Donec interdum metus

     

    has-check-list-2

    
    <var> has-check-list-3 </var>
    • Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. In turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam imperdiet imperdiet orci.
    • Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In ut quam vitae odio lacinia tincidunt. Nunc sed turpis.
    • Donec interdum metus

     

    has-check-list-3

    
    <var> has-check-list-4 </var>
    • Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. In turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam imperdiet imperdiet orci.
    • Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In ut quam vitae odio lacinia tincidunt. Nunc sed turpis.
    • Donec interdum metus

     

    has-check-list-4

    
    <var> has-check-list-5 </var>
    • Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. In turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam imperdiet imperdiet orci.
    • Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In ut quam vitae odio lacinia tincidunt. Nunc sed turpis.
    • Donec interdum metus

     

    has-check-list-5

    
    <var> has-quote-list </var>
    • Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. In turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam imperdiet imperdiet orci.
    • Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In ut quam vitae odio lacinia tincidunt. Nunc sed turpis.
    • Donec interdum metus

     

    has-quote-list

    
    <var> has-timeline-list </var>
    • Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec

    Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Suspendisse non nisl sit amet velit hendrerit rutrum. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Quisque malesuada placerat nisl. Suspendisse potenti.

    • Pellentesque libero tortor, tincidunt et

    tincidunt eget, semper nec, quam. In turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam imperdiet imperdiet orci.

    • Suspendisse pulvinar, augue ac venenatis condimentum

    tincidunt eget, semper nec, quam. In turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam imperdiet imperdiet orci.

    has-timeline-list

    Note:

    In timeline list you need to make a bulleted list only the first line

     

    
    <var> has-ordered-list </var>
    bg-grey  mid-round add-5  wow animated fadeInUp
    1. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. In turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam imperdiet imperdiet orci.
    2. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In ut quam vitae odio lacinia tincidunt. Nunc sed turpis.
    3. Donec interdum metus

     

    has-ordered-list

    tagPlaceholderTags:

    SUPPORT

    • Blog
    • Support center
    • Tutorials
    • Common Support issues
    • Updates

    QUICK LINKS

    • Advanced Style Editor
    • Features
    • Pricing
    • Pre Purchase Questions
    • Marketplace
    • Zødiac Framework
    • Jimdo Creator

    WIDGETS

    • Instagram feed
    • Team Showcase
    • Animations
    • Parallax widget
    • Full width widgets
    • Countdown Timer
    • All Widgets

    GET INSPIRED

    • Showcase
    • Custom widgets
    • Enterprise Package
    • No coding features
    • Matrix variables
    • Dolphin Block Elements
    hide-in-doc-page

    Showcase
    draggable-logo

     

    Main colors
       bg-primary
       bg-primary-light
       bg-primary-dark
       bg-secondary
       bg-secondary-dark
    Template sections
       body
       top-header
       header
       content
    Footer Styles
       background
       text color
       link color
       horizontal line
    Buttons
       style 1
       style 2
       style 3
    Other elements
      social icons
      navigation color
      subnav background
    Mobile navigation
       background color
       navigation color
    Template configurations
    has-center-nav g-font
    navigation styles
    size-15 weight-400 snip-nav is-uppercase --line01
    content styles
    form-white
    footer styles
    o-form  color-white
    Typography
    Heading H1
    weight-600 is-uppercase
    Heading H2
    weight-600 is-uppercase
    Heading H3
    weight-600 is-uppercase
    Buttons
    weight-600 is-uppercase
    Animations
    none

    Note:
    All changes made here will be applied to your entire website.
    is-switcher admin-only

    MATRIX THEMES

    STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

    About | Privacy Policy | Cookie Policy | Sitemap
    Copyright © 2022 All rights reserved
    Log in Log out | Edit
    • Scroll to top
    Close