How can you add Custom Block ?

4 Kommentare

  • Ifra Saqlain
    Community Moderator

    Hey benoit,

     

    I did it by using Copenhagen Theme.

    If you have already two custom blocks then copy and paste line by line , but I think you have category blocks not custom blocks , so you can do like this for two other custom blocks.

    See line no. 7 to 12  and copy that code. (may be class name not same , structure note same but you can do like this)

     

    Paste that copied code, see in given image. 

     

     

    Do changes , custom block title <h4> ,   description of custom block <p> ,  add link in anchor tag <a href=" # "> (remove # and add page redirection link ).

     

     

    See the result:

     

    Make sure class name of custom blocks which is already you have , must be same of all blocks.

    If any issue please let me know.

     

    Thank You 

    Team Diziana 

     

    0
  • Benoît Le Goff

    Thank you very much, it works great. I've got another question. I try to put 2 small category-block side by side.

    i try to figure out in the css with witdh:50% but it doesn't work.

    Do your have an idea ?

     

    Benoit

    0
  • Ifra Saqlain

    Benoit

    Apply this code but pay attention on class name - blocks-list and  blocks-item .

    Class name is same in the images which I have given above. 

    .blocks-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    }

    @media (min-width: 768px) {
    .blocks-list {
    margin: 0 -15px;
    }
    }

    .blocks-item {
    display: flex;
    flex: 1 0 340px; //you can change this flex property width for number of blocks
    margin: 0 0 30px;
    max-width: 100%;
    text-align: center;
    }

    @media (min-width: 768px) {
    .blocks-item {
    margin: 0 15px 30px;
    }
    }

     

    If you want 3 blocks in one row side by side then flex property should be    flex: 1 0 340px 

     

     

     

    If you want 4 blocks in one row side by side then flex property should be   flex: 1 0 240px

     

    By using this given code your blocks will be mobile responsive.

    If any issue let me know :)

     

    Thank You

    Team Diziana

    0
  • Benoît Le Goff

    Hello,

    Thank you very much !

    All works !

     

    Have a nice day.

     

    Benoît

    0

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Powered by Zendesk