• Home
  • Projects
    • Zodiac
    • Z-theme
  • Blog
  • About
 (+46) 432‑582-02,  
   office@mail.se
  • Home
  • Projects
    • Zodiac
    • Z-theme
  • Blog
  • About
    01. April 2021

    Block elements - Zodiac

    Zodiac Framework for Jimdo websites

    The new version of Zodiac framework 5.3 and the new features 'Block Elements'  about how to add pre-made full width sections to your website

    Admin menu

    The new version  5.3 comes with a new admin menu where you will find a completely new feature - 'Block Elements'. The Block elements can be also found in the main dashboard panel by clicking the header title 'Zodiac framework'.

    bg-grey  mid-round add-10 has-shadow wow animated fadeInUp

    What are the block elements and how it works

    So far you could use custom widgets placed inside the columns or as a standalone widget, while the block elements are pre-made full width sections including different elements inside the Widget/HTML. All you have to do is just choose one of the 50 custom block sections and paste the code to your website. Then edit it for your own preference changing the photo, text description etc.

    The block elements are very similar to the Dolphin website blocks and available also with 2 types of animations    

    live preview

    Important

    Before you start using the block elements, you'll need to update the Zodiac Framework on your website with the latest release 5.3, so in admin menu select Zodiac Pro and then update the header links.

     

    There are some important notes of using the Block elements:

      All sections are full width so the block elements can't be used in boxed layouts
      It's not possible to use the block elements inside the columns
      Each block section has -5px margin which reduces the space between 2 different sections but it's not possible to reduce the space between the background image(header) and content, so the first module has to be with a white background
    bg-grey add-20 mid-round

    Blog inside the columns

    The version 5.3 includes also some bug fixes in CSS and JS Updates.

    You will find a possibility to use the module 'Blog display' inside the columns without any coding with the following steps:

    01. Display a module Blog display on any page of your website;

    02. Add a module 'Columns' and refresh the page;

    03. With drag&drop options move  your blog inside of the columns. Then resize it for your needs.

     

    bg-grey  mid-round add-10 has-shadow wow animated fadeInUp
    tagPlaceholderTags: z-blog
    The advanced page builder for Jimdo Creator

    Zodiac is the advanced front-end framework for Jimdo websites. Create unique websites using advanced animations, custom CSS and JS plugins and much more.

    Latest news

    Sorry, the Blog Display Element can't be used inside a blog post!
    footer-styles has-link-inherit

    Resources

    • Design Kits
    • Zodiac Theme
    • Pro Widgets
    • Zodiac Add-ons
    • Block Elements

     

    has-links-list

     

    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-right-nav g-font no-shopping-cart
    navigation styles
    size-16 weight-400 snip-nav
    content styles
    form-white round-btn
    footer styles
    o-form color-white round-btn
    Typography
    Heading H1
    weight-600
    Heading H2
    weight-600
    Heading H3
    weight-600
    Buttons
    weight-600 --hover:bg-custom
    Animations
    wow fadeInUp

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

    z-logo
    draggable-logo

    About | Privacy Policy | Cookie Policy | Sitemap
    This website is not endorsed by or affiliated with Jimdo GmbH
    Log in Log out | Edit
    • Scroll to top
    Close