The post Elementor Community appeared first on Supplement Fox FAQ.

Go to the bottom panel:

1. To preview click the  icon. 
   
   Note: The Preview link is different than the actual page link
2. If you are satisfied with the result, go ahead and click the  button. 
3. Click ‘Have a Look‘ to view the published page
   

Save Draft

In Elementor you can edit a Published page and save your work as Draft. That means that you will not ruin your published page while saving your work as Draft.

1. Click the arrow next to Update / Publish
2. Choose Save Draft

The post Preview & Publish your page appeared first on Supplement Fox FAQ.

1. Content Width: Set the Content Width to Boxed or Full Width. When choosing Boxed – use the slider to set your width
2. Columns Gap: Set your Columns Gap
3. Height: Choose between Fit to Screen: Your section will fill the screen, and Min Height: Set a Min Height, and use the slider to set your section height
4. Vertical Align: Set your Section content’s vertical alignment
5. Overflow: Select how to handle content that overflows its container. Default allows the overflow. Select Hidden to hide the overflowing content.
6. Stretch Section: Force the Section to stretch to the full width of the page
7. HTML Tag: Set an HTML Tag for your section.

Style

Background (Normal & Hover)

1. Background Type: Choose between Classic , Gradient , or Video Background

Background Overlay (Normal & Hover)

1. Background Type: Choose between Classic or Gradient
2. Blend Mode: Set a Blend Mode

Border (Normal & Hover)

1. Border Type: Set a Border Type
2. Border Radius: Set your Border Radius
3. Box Shadow: Add a Box Shadow

Shape Divider (Normal & Hover)

1. Type: Click the dropdown to choose your Shape Divider style
2. Color: Pick a color
3. Width: Set the width of your Shape Divider
4. Height: Set the height of your Shape Divider
5. Flip: Flip the direction of your Shape Divider
6. Bring to Front: Force your Shape Divider to be in front of other objects

Typography

1. Set Typography Colors for the section

Note: The ‘Set Typography’ colors won’t work if Default Colors are enabled.

Advanced

Advanced

1. Margin: Set the section Margin
2. Padding: Set the section Padding
3. Z-index: Set the Z-Index. 
4. CSS ID: Set an CSS ID for your section
5. CSS Classes: Set CSS Classes for your section

  Motion Effects

1. Sticky: Set your section as Sticky, and choose between Top or Bottom. 
2. Scrolling Effects: Set Scrolling Effects to On to choose from a variety of animations and interactions that can occur when the user scrolls through the page.
3. Entrance Animation: Click the dropdown to choose an animation.

Responsive

1. Reverse Columns: Slide to reverse your columns order (Great for Mobile)
2. Visibility: Show or Hide your section on Desktop, Tablet, or Mobile

Attributes

1. Add your own custom attributes.

Custom CSS

1. Add your own custom CSS

The post Section Overview appeared first on Supplement Fox FAQ.

How To Adjust Settings For Mobile, Tablet, and Desktop

Many editable features have a Mobile, Tablet, and Desktop settings.  Most common uses include: Text size, Margin and Padding of elements etc.

1. Look for the Viewport Icon  next to the individual element you wish to control. 
2. Click the specific device icon for which you want to edit its settings.

Controlling Responsive Background Images and Borders

Background images in Elementor are automatically device-responsive, but you also have control over more options for each device.

1. Background Image: You can choose a different background image for each device if needed, whether it is a size-appropriate version of the same image, or a completely different image altogether.
2. Background Image Display Options: You can select a different image position, attachment, repeat, and size for each device. In this way, you have more control over which area of the image is displayed on different device sizes.

Visibility 

You can choose to Show / Hide a Section according to the device.

1. Go to Section Setting > Advanced > Responsive
2. Set your visibility preferences, choosing from Hide on Desktop, Hide on Tablet, or Hide on Mobile.

When hiding an element, and switching to the view it’s hidden on, you will see that this element is “muted”. This gives you a clear indication that this element will be hidden on the live site, but still enables you to edit it as needed. 

You can edit that specific area in the responsive mode in which it is not hidden. For example, if the element is visible on mobile but hidden on desktop and tablet, you will be able to edit the element in the mobile view.

Change Mobile & Tablet Breakpoints

You can set the mobile and tablet breakpoint values.

1. Go to Elementor > Settings > Style Tab, and set the breakpoint value for mobile and tablet
2. Save your changes
3. Go to Elementor > Tools > General Tab > Regenerate CSS, click Regenerate Files

Columns Ordering

This feature reverses the ordering of columns.

To use Columns Ordering go to Section Setting > Advanced > Responsive > Reverse Columns and set it to Yes.

Device Preview

Switch between Desktop, Mobile or Tablet views by clicking on the corresponding icons on the bottom of the panel.

Help! I Changed Something While In Mobile Preview, And It Changed On Desktop Too! Why?

• You can’t delete an element (widget, column, or section) while previewing one mode (mobile, for example), and expect it to only be deleted from that type of device. Deleting elements will delete them across all devices. You can, however, use the element’s Responsive Visibility feature by going to the element’s Advanced > Responsive tab and enabling any of its visibility options (Hide on Desktop, Hide on Tablet, or Hide on Mobile). While the element won’t be deleted on those devices, it will be hidden.
•  You can’t move elements around while previewing one mode, and expect them to only be moved for that type of device. Moving elements around in any preview mode will move them across all devices. One exception to this is the Section > Advanced > Responsive > Reverse Columns feature, which does move columns to their reverse position.
•  If an element doesn’t have a Viewport Icon  next to it, changing that element in one preview mode will change it across all devices.

How To Adjust Settings For Mobile, Tablet, and Desktop

Many editable features have a Mobile, Tablet, and Desktop settings.  Most common uses include: Text size, Margin and Padding of elements etc.

1. Look for the Viewport Icon  next to the individual element you wish to control. 
2. Click the specific device icon for which you want to edit its settings.

Controlling Responsive Background Images and Borders

Background images in Elementor are automatically device-responsive, but you also have control over more options for each device.

1. Background Image: You can choose a different background image for each device if needed, whether it is a size-appropriate version of the same image, or a completely different image altogether.
2. Background Image Display Options: You can select a different image position, attachment, repeat, and size for each device. In this way, you have more control over which area of the image is displayed on different device sizes.

Visibility 

You can choose to Show / Hide a Section according to the device.

1. Go to Section Setting > Advanced > Responsive
2. Set your visibility preferences, choosing from Hide on Desktop, Hide on Tablet, or Hide on Mobile.

When hiding an element, and switching to the view it’s hidden on, you will see that this element is “muted”. This gives you a clear indication that this element will be hidden on the live site, but still enables you to edit it as needed. 

You can edit that specific area in the responsive mode in which it is not hidden. For example, if the element is visible on mobile but hidden on desktop and tablet, you will be able to edit the element in the mobile view.

Change Mobile & Tablet Breakpoints

You can set the mobile and tablet breakpoint values.

1. Go to Elementor > Settings > Style Tab, and set the breakpoint value for mobile and tablet
2. Save your changes
3. Go to Elementor > Tools > General Tab > Regenerate CSS, click Regenerate Files

Columns Ordering

This feature reverses the ordering of columns.

To use Columns Ordering go to Section Setting > Advanced > Responsive > Reverse Columns and set it to Yes.

Device Preview

Switch between Desktop, Mobile or Tablet views by clicking on the corresponding icons on the bottom of the panel.

Help! I Changed Something While In Mobile Preview, And It Changed On Desktop Too! Why?

• You can’t delete an element (widget, column, or section) while previewing one mode (mobile, for example), and expect it to only be deleted from that type of device. Deleting elements will delete them across all devices. You can, however, use the element’s Responsive Visibility feature by going to the element’s Advanced > Responsive tab and enabling any of its visibility options (Hide on Desktop, Hide on Tablet, or Hide on Mobile). While the element won’t be deleted on those devices, it will be hidden.
•  You can’t move elements around while previewing one mode, and expect them to only be moved for that type of device. Moving elements around in any preview mode will move them across all devices. One exception to this is the Section > Advanced > Responsive > Reverse Columns feature, which does move columns to their reverse position.
•  If an element doesn’t have a Viewport Icon  next to it, changing that element in one preview mode will change it across all devices.

The post Responsive mode appeared first on Supplement Fox FAQ.

This step-by-step guide walks you through how to create a website using  Elementor.

The post How to Use Elementor – Getting Started appeared first on Supplement Fox FAQ.