Como Deixar seu Site 100% Responsivo no Elementor WordPress
How to Make a Responsive Website for a Company in 2019
In this tutorial, Leandro Biffi explains how to make a website responsive using Elementor. He demonstrates how to adjust the design of the site by changing spacing, margins, font size, and other settings.
Making Adjustments with Elementor
- To adjust the design of your website, you will need to use Elementor on each page.
- Click on the element you want to edit and make adjustments in responsive mode by selecting "tablet" and not clicking on any other options.
- Be careful not to click on any other devices while editing as it may cause confusion and alter the presentation of your site.
- Always preview changes in tablet mode before making them live.
Configuring Design Settings
- Use tablet mode to configure design settings such as alignment, font size, line height, and spacing.
- Adjust font size and line height for better readability on tablets.
- Improve alignment by adjusting margins or setting them to zero.
Overall, this tutorial provides step-by-step instructions for making a website responsive using Elementor. By following these guidelines, users can ensure that their sites are optimized for viewing on different devices.
Customizing Website for Tablet and Mobile Devices
In this section, the speaker explains how to customize a website for tablet and mobile devices. They demonstrate how to adjust the font size, line height, margins, and alignment of text and images.
Adjusting Font Size and Line Height
- To adjust font size and line height for tablet devices, go to the "tablet" option in the style editor.
- Only make changes where there is a symbol indicating that it is specific to mobile or tablet devices.
- Copy and paste the style onto other sections of text.
Adjusting Margins and Text Alignment
- To adjust margins for mobile devices only, go to "advanced" settings in the widget editor.
- Do not change anything that does not have a symbol indicating it is specific to mobile or tablet devices.
- Change text alignment only where it is allowed by symbols indicating it is specific to mobile or tablet devices.
Customizing Contact Form
- The contact form can be customized by copying and pasting styles from another section of the website.
- Some elements may not be customizable through the element editor.
Configuring a Responsive Website
In this section, the speaker demonstrates how to configure a website to be responsive across different devices.
Setting up the Desktop View
- The desktop view is set up and checked for any changes.
- The text size is adjusted to fit the screen.
- The location and contact information are checked for any differences in placement.
Configuring the Tablet View
- The tablet view is configured and checked for any changes.
- A margin is added to fix an issue with the case of success section being too close to other elements.
Configuring the iPad View
- The iPad view is configured and checked for any changes.
- A margin is added to fix an issue with the case of success section being too close to other elements.
Configuring the Smartphone View
- The smartphone view is configured and checked for any changes.
- An extension on Chrome is used to check how it looks on a smartphone.
- All sections are confirmed as responsive.
Conclusion
In this section, the speaker concludes by inviting viewers to become members of their program and thanking them for watching.
Final Thoughts
- Viewers are invited to join a membership program that provides early access to content.
- Thanks viewers for watching.