To Read: How to Create an Elementor Vertical Scroll Section with Premium Addons To add a hover transition on the image, select the column and under Style go to Background Overlay, go to Hover and give it the black heading color, set the Opacity to 0.2 and the Transition Duration to 0.5. To add a rounded border to the column top, select it and go to Style, unlink the Border Radius then give it 35 pixels on the right (05:28) Select the time, under Advanced, go to Padding, and give it 20 pixels on the right. Select the inner section, go to Layout, and under Vertical Align select middle. ![]() Still with the button selected, go to Advanced, on Positioning, set the Width to Inline auto to align the button with the time (04:49) Select it, on the Typography option under Style, set the size to 15 pixels. Since the button is inside the card, let’s reduce its font size. Set the Border Radius to 35 pixels on all sides Advertisements For text color, choose yellow, then make the background color white. Go to Style, under Typography choose a font for your button. On the Icon option, go to the Icons library and select a forward arrow (→), insert it, and on the Icon Position option, set it to be After. On the Link option, you need to add a link where your visitors will be redirected when they click on the button. Now select your button widget, under Content set the button text to “Order Now”, set the size to medium. ![]() Go to the Advanced option next, under Positioning set it to Inline auto. Then select Text and also give it white, then go to Typography and change it to your content text font. Go to Style, select Icon, and set its color to white. Go to the Icon option and browse your icons library, choose an icon and insert it. Select the list item delete the 2 list items and remain with one, add content under Text that’s 12:00 – 17:00. Select the text editor widget and under Style change the text color to white, then for Typography give it a content text font of your choice. Then go to the Style option, give it Text-color white, under Typography give Poppins. Now select the main heading widget and go to Content, under Title type in “Spicy Curry”. Select the main column again and under Column Width give it 38%. Then select the inner section column and go to Advanced, add a Padding of 20 pixels on all sides. Select the column and go to Advanced, remove all the paddings. Select the inner section, under Style, add a Background colorof yellow but a bit transparent. Select the inner section which is inside the column you just styled, to this section add a heading widget, a text editor widget, an icon list widget, and a button widget. Select the column again and go to Style, set Position to custom, set X Position to -15 pixels and Y Position to -76 pixels, then set the Size to cover (01:48) Select the spacer widget and in the Content area, give it 254 pixels under the Space option. ![]() In your Widgets area, drag a Spacer widget to your column. Select the column, under Style give it a Background Type of image, choose and insert an image from your media library. To add an inner section inside an inner section, go to your main section, right-click on the column holding the first inner section and copy it, then go to the inner section’ column and paste it (01:05).ĭelete the extra columns and inner sections that you don’t need. ![]() So how do you add an inner section into another inner section? Advertisements However, if you go to the Widgets area and try to drag an inner section to this column, it does not work. Now, we want to add an inner section inside the first column. Advertisementsįor the first column, under Layout set its Column Width to 38%, the second column to 38% as well, and the last column will take the remaining width (24%). Start by going to your Elementor editor, in your widgets area, drag an Inner Section widget to your main section (00:25). Add an Inner Section inside an Inner Section in Elementor
0 Comments
Leave a Reply. |