Magic Section Widget Tutorial

Intro

Premium Magic Section widget is an off-grid Elementor widget that allows you to show additional content when a trigger like a button, image, or icon is clicked. The section can either slide-in above your content, or push your content aside. It also can be placed at the top, bottom, or to the left or the right side of the page.

This widget opens the door for numerous ideas which you can use to show more content in less space.

Click here to check Premium Magic Section Widget demo.

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key Features

• Content
• Trigger
• Display Options
• Responsive

1. Content

Add the Magic Section content by selecting an existing Elementor template, or by adding the content directly in the Rich Text Editor.

• You can use Elementor Live Templates feature to create/edit Elementor template on the same page. For more information, please check Elementor templates article from here.
• You can also select an existing Elemntor templates.

• Close Button: Enable or disable a close button for the magic content.
• Position: Position the close button to the left or the right side of the content.

2. Trigger

Select between a button trigger and an icon trigger. When the user clicks the trigger, the content of the magic section will be shown. Clicking the trigger a second time will hide the section.

Button

• Float: Enabling float will change the position of the button.
• Button Text: Select the text of the button.
• Icon: Enable or disable the button icon.
• Icon: Select one of many Font Awesome icons list.
• Icon Position: Select the position of the icon. Before or after the button text.
• Icon Size: Select the size of the icon.
• Icon Spacing: Adjust the spacing between the icon and the button text.
• Button Size: Select the size of the button. Select between Small, Medium, Large and Block. The block button size is full width.
• Alignment: Align the button to the left, center or right of the page. This option is not available if you used “Block” as a button size.

Icon

• Float: Enable or disable float, and select between float in and float out.
• Icon Type: Select a Font Awesome Icon or upload a custom image via the WordPress media library.
• Size: Select the size of the icon in pixels or em. If you added a custom image, you can select between the following sizes:
  • Thumbnail – 150 x 150
  • Medium – 300 x 300
  • Medium Large – 768 x 0
  • Large -1024 x 1024
  • Full
  • Custom: You can crop the original image size to any custom size. You can also set a single value for the height or width in order to keep the original size ratio.

3. Display Options

• Position: Select the position of the magic section. Choose between the top, right, bottom or left side of the page.
• Gutter (%): By changing the gutter, you can adjust whether or not the magic section is visible before the trigger is clicked. “0%” is the default value. Increase to push the section outside or decrease to pull the section inside.
• Style: Select between slide and push.
• Overlay: Enable or disable an overlay that will darken the rest of the page and bring focus to the magic section.

4. Responsive

• Responsive Controls: Enable or disable the responsive controls
• Hide on Tablets: Hide Magic Section below Elementor’s Tablet Breakpoint.
• Hide on Mobiles: Hide Magic Section below Elementor’s Mobile Breakpoint.

Style

1. Trigger

• Color: Select the color of the button text.
• Icon color: Select the color of the icon.
• Typography: Adjust the font settings.
• Border Type: Select the border type, color, size, and radius.
• Shadow: Add a shadow behind the button. Select from the following options:
  • Color.
  • Horizontal Position.
  • Vertical Position.
  • Blur.
  • Spread.
  • Position: Outline or Inset.
• Padding: Adjust the space between the text and the edge of the button in pixels, em or %.

2. Close

These settings are only available if the close button is enabled in the content setting.

• Color: Select the color of the close icon.
• Size: Select the size of the close icon.
• Hover color: Select the color of the icon when the user hovers over it.
• Background Color: Select a color that is visible behind the icon.
• Border: Select the border type, color, size and radius.
• Shadow: Add a shadow behind the icon. Select the color, blur, and position.
• Margin and Padding: Adjust the icons margin and padding using pixels, % or em.

3. Container

• Overlay Color: Change the color of the page overlay: This option is only available if the overlay is enabled in the display options.
• Background Type: Select the background color, image or background gradient for the section container.
• Border Type: Select between the following border types, as well as the width of the border on each side of the section:
  • None
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Box Shadow: You can add a shadow around the widget with this option. Adjust the color and the following settings:
  • Horizontal Position
  • Vertical Position
  • Blur
  • Spread
  • Position: Outline or Inset

Adjust the margin and padding using pixels, % or em:

• Out Margin: The space between the page and the section when the section slides out.
• In Margin: The space between the page and the section when the section slides in.
• Padding: Padding is the space between the content and the container.