Create a Responsive WordPress Website with Elementor [Free 网络研讨会]

1. 介绍
2. Tutorial on 如何让你的网站响应元素页面生成器
   1. 如何调整移动设备的小部件和文本属性
   2. 如何调整和重新定位列
   3. How to Hide Widgets, Columns, 和 Sections for Specific Types of Devices
   4. 如何克服位置:绝对位置和固定位置
   5. 如何使用内联宽度创建灵活的移动布局
3. 结论

元素响应介绍

Elementor响应! The modern approach to the development of websites is dictated by the rapid development of mobile devices 和 increasing the resolution of their screens. 今天, developers ab和on an idea to design individual mobile versions of websites 和 trend towards a single adaptive version for all popular devices.

当用户从笔记本电脑切换到iPad时, the website should automatically switch to provide proper resolution 和 image size. In other words, the website should have the technology to respond to user preferences automatically.

I am sure you have already come across a situation when your website looks beautiful on a desktop, but some elements of the layout go wrong when you switch it to the mobile view. The free Elementor page builder offers a great solution with a few clicks only. 今天, we will learn how to fix this issue 和 make your website responsive with Elementor page builder.

我要 Monstroid2 theme, the best Elementor WordPress theme, which is perfect for both beginners 和 advanced users. 您可以使用此产品无限数量的产品, 编辑其源代码, 并将其安装在许多域中. Monstroid2 features an irreplaceable functionality that fits Elementor page builder perfectly. The theme package includes awesome Jet 插件 for free 和 other premium features.

Monstroid2 -多用途模块化元素WordPress主题

现场演示

Details

举办

此外，《og体育首页》也可以在游戏中使用 一个订阅 由Templateog体育首页. 一次订阅, you are getting an ultimate web development kit with unlimited downloads 和 unlimited products. 只有一流的主题, 高质量的扩展, Templateog体育首页提供ONE的专业支持

And now let’s proceed to the tutorial to learn how to make your website get properly displayed anywhere 和 on any device.

Tutorial on 如何让你的网站响应元素页面生成器

如何调整移动设备的小部件和文本属性

1. 打开Elementor和Monstroid2主题.
2. 如果您的桌面版本已完成, proceed to the Responsive mode in the bottom left corner 和 choose either Tablet or Mobile.
3. After Mobile view is chosen, you may notice that the text is super huge. Click the headline element to see the Title settings in the Content tab. 您可以在这里轻松地调整不同设备的对齐选项.
4. Go to the Style tab to edit Size, Line Height, 和 Letter Spacing values. 如果你回到桌面视图, the text properties will be changed accordingly to the one selected for the Desktop view.
5. 导航到高级选项卡更改边距和填充值. If you wish to keep Entrance Animation for some specific layouts; e.g. 桌面，确保为移动模块选择None.
6. 编辑按钮时, 你可以调整自定义大小, 自定义宽度, 对齐, 保证金, 边界半径, 填充, 等.
7. Click Section settings > Style tab, go to Position to choose Center Left value.

如何调整和重新定位列

1. Go to Layout tab of Edit Column settings 和 edit Column Width, Column Order, Vertical Align, 等. If your goal is to position a few columns in a row, set Column Width to 50. Repeat the same for the second column to get them to appear in a row.
2. 在标题部分进行更改, Description section to edit the typography 和 image to make sure they look good on the mobile view.
3. Change the order of the columns by clicking Settings on the section, 转到响应部分，启用反向列(移动).
4. Navigate to the Advanced tab 和 adjust 保证金 和 填充 values to your mobile view.

How to Hide Widgets, Columns 和 Sections for Specific Types of Devices

1. Choose the column you want to remove 和 navigate to the Advanced tab > Responsive section.
2. 启用隐藏移动选项.
3. The same procedure should be repeated to hide all the widgets, columns 和 sections.

如何克服位置:绝对位置和固定位置

1. Click on the widget, proceed to the Advanced tab 和 Custom Positioning. Custom Positioning allows one to change the Width 和 Position values.
2. 位置选项允许选择默认、绝对和固定. Position Absolute allows one to grab your element to reposition it to any other place on your web page. 固定位置允许抓取元素并保持移动, 但是一旦你停下来开始滚动, 您将看到元素被固定在您离开它的地方. 例如，对于订阅表单来说，这是一个很好的实践. Offset allows to change the placement of the element or section while editing its value.

如何使用内联宽度创建灵活的移动布局

自定义定位部分允许设置行内宽度. 这项新功能是最近推出的. Once it is selected, you can see that a blue box around the widget is wrapped up tightly. 因此，您可以重新定位和进一步定制.

如有任何问题, 切换模式时(桌面/移动), 你可以选择改变偏移百分比.

仍然, you should underst和 clearly that custom positioning is not considered a best practice for responsive web design 和 should not be used too frequently.

结论:元素有反应

The growth in the use of mobile devices is just the step forward to more convenient use of the Internet. Your goal is to let any user on any device have the best experience of interacting with your website. 希望本教程对您有所帮助. 只需遵循上面建议的步骤, 你的网站会看起来很棒，在笔记本电脑上也能很好地运行, 平板电脑, 还有手机. Feel free to leave your questions, concerns 和 recommendations in the comments section below.

读也

如何在国际上销售WooCommerce虚拟产品