{"id":18848,"date":"2020-05-18T12:09:25","date_gmt":"2020-05-18T12:09:25","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=18848"},"modified":"2023-02-09T16:12:13","modified_gmt":"2023-02-09T16:12:13","slug":"jetelements-how-to-create-a-vertical-scrollbar-within-a-column","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-a-vertical-scrollbar-within-a-column\/","title":{"rendered":"How to Create a Vertical Scrollbar Within a Column"},"content":{"rendered":"\n

When the content on your website is divided into columns, it will look visually appealing, with all of them having the same height. The Vertical Scroll option of the JetElements<\/a> plugin will help you put all the content you want into the column without stepping out of the block borders.<\/p>\n\n\n\n

Follow the next few simple steps to add a Vertical Scroll to a column that is way too high.<\/p>\n\n\n\n

\"Vertical<\/div>\n\n\n\n

1<\/span> Step<\/b> \u2014 Start with Elementor<\/strong><\/p>\n\n\n\n

Go to the page you want to edit and click the “Edit with Elementor<\/strong>” button to start. Search the page for the section with multiple columns. When one of them is much higher than the other, it looks like that:
<\/p>\n\n\n\n

\"original<\/div>\n\n\n\n

2<\/span> Step<\/b> \u2014 Proceed to editing<\/strong><\/p>\n\n\n\n

Hover the pointer over the column and hit the Edit Column<\/strong> button.
<\/p>\n\n\n\n

\"how<\/div>\n\n\n\n

Go to Advanced <\/strong>> JetAdvanced<\/strong>. Switch on the Column Vertical Scrollbar<\/strong>.<\/p>\n\n\n\n

\"editing<\/div>\n\n\n\n

3<\/span> Step<\/b> \u2014 Define the height<\/strong><\/p>\n\n\n\n

Now you can choose the height of the column. Scale it manually or type in the precise height. There are three types of measure:<\/p>\n\n\n\n

    \n
  • PX <\/strong>\u2013 pixels;<\/li>\n\n\n\n
  • %<\/strong> \u2013 percent;<\/li>\n\n\n\n
  • VH <\/strong>\u2013 1\/100 of the height of the viewport (this means that if the height of the browser is 1000px, VH will be equal to 10px).<\/li>\n<\/ul>\n\n\n\n

    4<\/span> Step<\/b> \u2014 Pay attention to the note<\/strong><\/p>\n\n\n\n

    The scroll will work more accurately if you follow the advice given in the note. In the Section editing mode, go to Layout <\/strong>and choose the \u201cFit to Screen\u201d option for the Height<\/strong>. The Column Position<\/strong> row will appear immediately \u2013 set it to \u201cStretch\u201d and the Vertical Align<\/strong> to \u201cDefault.\u201d
    <\/p>\n\n\n\n

    \"\"<\/div>\n\n\n\n

    When you finish defining the optimal height of the column \u2013 that\u2019s it! A good-looking and convenient Vertical Scroll is now on your page. Congrats!
    <\/p>\n\n\n\n