3. Vertical menu. How to add and edit a vertical menu @ Shella theme
In this video, we will show you how to configure
a vertical menu like it is shown on the layout 17.,This is a vertical menu, which we will
replicate now. Go to your Shella editor. In,the Sections click on the Header. Choose the
Header type 5 (vertical menu) and the colorization,style 4. For the main menu we will select
the Header Menu (secondary) and we will leave,the arrows on the first levels. Since we have
chosen the header type 5, we can now select,the menu, which we want to be displayed in
the vertical menu. And it is going to be a,"Main Menu". Let’s also fix the vertical menu
on the home page. So the vertical menu is,already here. In the "Sticky header", we will
leave the options as they are: the sticky,state both for the desktop and mobile and
a slim sticky type.,Now let’s edit our vertical menu the way
it is on the demo layout 17. In order to do,that, we need to add some content blocks.
We will start with the block “Mega menu”.,This is how the vertical menu looks like without
any content blocks. Let’s change it now!,Write for which item the block “Mega menu”
should be applied, e.g.: “Women’s”.,Change the links column size to 4 out of 12.
Increase the column lines limit to 50. Wrap,the menu columns to grid and decrease the
wrapper column size to 8 out of 12. Now let’s,add an additional content on the right side
by choosing the needed content type: "1 item,in the row", and change the column size to 4
out of 12. Let’s see what we have got.,Now we have three columns
and a space on the right side for the content.,The main settings for the “Mega menu”
for "Women’s" are completed. Now we can add,other content blocks to this “Mega menu”
block. This will be a block “Mega-Promo box".,Promo box is a banner, that will be
added to the right side in the mega menu as,an additional content. Choose the URL for
the banner, e.g.: Collections, All Collections.,Here you can select the image for the banner
and change its size to the one you need.,Now let’s add some text lines: in the text
line #1 we will write “SALE AND SPECIAL,OFFERS”. In the second line, it will be
“Get up to 20% off”. We will choose the,colorization style 3. You may also edit buttons
if you need some, but we will skip it and,choose the layout type 3 (Ribbon bottom the
image). Now let’s configure the animation,settings of the image. We want it to be moved
to the center when being hovered over and,we will choose the “Hover” image opacity.
Let’s check what we have got. This is our,banner (Promo box), with the text lines and
animation. In the same way, the other menu,sections can be configured. Let’s proceed
with the section “Men’s” and add a content,block “Mega menu” for it. Set the proper
links column size and the column lines limit.,Here we will enable a width limit. You see?
Now we have 3 columns.,Let’s add a “Mega menu” block for the
“Layouts” and set the proper links column,size and the column lines limit. In the additional
content on the right we will choose “2 items,in the row” as a con
No difficulty
