Como Criar um SITE NO WORDPRESS e Elementor GRÁTIS [Site Profissional, Completo e Passo a Passo]

How to Create a Professional Multi-Page Website with WordPress and Elementor

Introduction to the Tutorial

• Micaela introduces herself and the tutorial's focus on creating a professional multi-page website using WordPress and Elementor.

• The project is designed for an architecture office but can be adapted for any niche. The tutorial will cover step-by-step instructions from scratch.

Template Availability

• A template of the completed project is available for purchase, allowing users to install it in their WordPress setup and modify information as needed.

• Support is offered via email and WhatsApp for installation queries, along with individual templates or package deals.

Important Notices Before Starting

• Viewers are encouraged to adjust playback speed if they find Micaela's speaking pace too fast or slow.

• Links to additional resources, such as banner creation videos and plugin tutorials, will be provided in the video description.

Domain and Hosting Requirements

• The only purchases required for this tutorial are domain registration and hosting services, which are essential for any website.

• Discount coupons for hosting services (specifically Hostinger) will be shared in the description, helping viewers save money while supporting content creation.

Course Structure and Materials

• Lessons are divided into chapters, allowing viewers to navigate directly to specific sections of interest within the video.

• All supporting materials used during the lesson (icons, images, logos) will be made available through links in the description.

Understanding Domain Registration

• A domain serves as a personalized web address; purchasing it grants rights over its use. First-year domain registration may be free with certain hosting plans.

Hosting Services Explained

• Hosting involves renting server space where website files are stored. Hostinger is recommended due to its affordability and features tailored for various needs.

Choosing a Hosting Plan

• Different plans cater to different site sizes; premium plans allow multiple sites while basic ones limit users to one site.

Hostinger Hosting Plans Overview

Benefits of the Basic Plan

• The basic plan offers enhanced website speed and storage capacity, along with a free domain for one year.

• Users can create up to 100 email accounts at no additional cost, which is a significant advantage over other plans.

• Additional features include weekly backups and vulnerability scanning, enhancing site security.

Premium Plan Features

• The premium plan includes more resources such as CDN (Content Delivery Network), which improves both security and speed.

• Users are encouraged to choose their plan based on the specific needs of their project.

Pricing Insights

• Current pricing reflects an 80% discount due to Black Friday promotions; prices may vary throughout the year.

• To qualify for a free domain, users must purchase at least 12 months of service; monthly options are available but do not include this benefit.

Payment Process

• After selecting a plan, users can create a new account by entering an email and password before proceeding to payment.

• Various payment methods are accepted; credit card payments allow for installment options.

WordPress Installation Steps

• It’s crucial to select "create a site" during setup to initiate WordPress installation correctly.

• WordPress is included for free with hosting from Hostinger, allowing users to edit using plugins and themes without extra costs.

Choosing Your Domain Name

Domain Selection Process

• Users need to create login credentials for their WordPress site after purchasing hosting services.

• It's recommended to check domain availability directly on Hostinger's website before finalizing choices.

Understanding Domain Extensions

• Common extensions like .com and .com.br are preferred as they enhance visibility in search results within respective countries.

• Having a country-specific extension (.br for Brazil) can improve local search rankings by aligning with user expectations.

Recommendations on Domain Purchases

• If desired domains are unavailable, consider modifying names or choosing alternatives that still reflect your brand identity.

• Purchasing both .com and .com.br versions of your domain is advisable to prevent competition from similar sites.

How to Register a Domain and Set Up WordPress

Domain Selection and Registration Process

• The speaker discusses selecting a domain with a .com extension, indicating plans for future videos on purchasing a .com.br extension.

• The chosen domain "myhome.com" is noted as part of an educational project, emphasizing that the name can be arbitrary for demonstration purposes.

• Importance of entering accurate personal information during registration is highlighted, as the domain will be registered in the user's name.

• The speaker mentions choosing a server location close to the target audience's country, specifically noting Brazil as an option.

• After completing the registration process, users must confirm their domain details via an email from Hostinger.

Accessing WordPress and Site Management

• Users are redirected to a temporary domain while waiting for their main domain registration to finalize.

• Instructions are provided on navigating within Hostinger to find and manage your site after logging in.

• Users can check if their domain is registered through the control panel; unregistered domains show a red indicator.

• Direct login options into WordPress are explained, including using WP-admin for access without going through Hostinger each time.

Initial Site Configuration in WordPress

• Upon accessing the site link, users may see default layouts or themes since WordPress frequently updates its appearance options.

• Clarification that once WordPress is installed, the site becomes accessible online even before customization begins.

• Logged-in users will see an admin toolbar at the top of their site interface which provides access to administrative functions.

General Settings Customization

• Basic configurations in WordPress include setting up site title and description; these elements impact how your site appears in search results.

• The speaker demonstrates modifying the site's title to "Nexus home arquitetura" along with adding a descriptive slogan for better SEO visibility.

• Instructions on uploading a custom icon for branding purposes are provided; this enhances visual identity across browser tabs.

WordPress Setup and Theme Installation

Domain and Email Configuration

• The domain chosen for the WordPress site should not be altered; changing it may require a new installation or database adjustments.

• The administrator email is crucial for notifications, password recovery, and form responses. If it's not frequently used, consider updating it.

Theme Selection and Installation

• The theme dictates the basic layout of the website. The speaker prefers using "Hello Elementor," likening themes to operating systems on mobile devices (e.g., Android vs. iOS).

• To install a new theme, navigate to Appearance > Themes, delete existing themes if necessary, then add and activate "Hello Elementor."

Page Creation

• Essential pages include Home, About Us, Projects, and Contact. These can be created by navigating to Pages > Add New.

• Each page must be published after creation; this includes setting titles like "Home," "Projects," "About Us," and "Contact."

Menu Setup

• Menus are created in Appearance > Menus. A main menu can be established by selecting desired pages and organizing them as needed.

• Links can also include anchors that redirect within the same page; these are set up through Permalinks.

Finalizing Site Structure

• After creating all desired links in the menu (like Testimonials), save changes to make them visible on the site.

• Set the homepage under Settings > Reading by choosing a static page instead of displaying blog posts.

Plugin Management

• If issues arise with viewing changes on the site due to plugins like Lite Speed Cache, they should be temporarily deactivated during setup.

Installing Elementor Plugin

• Plugins enhance WordPress functionality; Elementor Free will be used for building layouts without needing paid features.

Installing and Configuring WordPress Plugins

Adding a New Plugin

• To install a plugin, navigate to Plugins > Add New. You can search for plugins using the search bar or browse popular options like Elementor.

• The Royal Addons plugin is introduced as another free option. After searching for "Royal," click Install and then Activate.

Setting Default Site Configurations

• The default site settings are highlighted, including the current font and color scheme (pink). Plans to change these to orange and black are discussed.

• The goal is to set default colors and fonts in the WordPress admin panel under Templates > Saved Templates, allowing for easier future adjustments.

Customizing Colors

• Specific color codes are used for customization: secondary color black, text gray, highlight light orange, with additional custom colors white and gray being added.

• Users can rename colors in the settings if desired but may choose to keep them as is.

Configuring Fonts

• Global font settings are adjusted by selecting different font families for primary titles, secondary subtitles, main text, and links/buttons.

• Font sizes and weights are specified: primary title at size 35 weight 500; secondary title at size 20 weight 400; main text at size 16 weight 400.

Creating Header Layout with Elementor

Understanding Header Components

• The header includes elements like logos, menus, and buttons. It's important to differentiate between the entire header layout versus just the menu links.

Using Royal Addons for Menu Creation

• Accessing Royal Addons allows users to create a new template specifically for headers. A name is assigned (e.g., "Header") before saving conditions that apply it site-wide.

Introduction to Elementor Interface

• Upon entering Elementor's editor after creating a template, users can close unnecessary tabs. An overview of containers (main vs internal) is provided.

Working with Widgets in Elementor

• Containers hold various widgets that can be dragged into place. Editing options appear when clicking on items within these containers.

Adjusting Container Settings

• Key container settings include content configuration (text/images), layout styles (color/size), spacing adjustments (padding/margin), which help define overall design aesthetics.

Creating a Website Layout with Flexbox

Understanding Flexbox Container Behavior

• The direction of items in a flex container can be adjusted; when the arrow is horizontal, items align side by side, and when vertical, they stack on top of each other.

• Initial styling involves setting a black background color for the container while planning to change it later.

Adding Images and Widgets

• A logo image is added to the container with a custom width set at 13% to maintain proportionality.

• A navigation menu widget is introduced, allowing customization of hover effects such as underlines or double lines.

Customizing Menu Appearance

• The text color for menu items is set to white, utilizing pre-defined settings for ease of use.

• Typography settings are adjusted including line thickness and spacing for better visual appeal.

Button Creation and Styling

• A button widget labeled "Fale Conosco" is created, linking to a contact page or WhatsApp.

• The button's background features a gradient effect with two shades of orange, enhancing its visual impact.

Finalizing Navigation Elements

• Hover effects are applied to buttons for interactivity; alignment settings ensure that elements are centered within their containers.

• Adjustments are made to the hover colors in the menu for consistency across user interactions.

Designing the Footer Section

Importance of Footer Information

• Footers serve as an essential part of website navigation by providing repeated information that aids user experience throughout the site.

Creating Footer Template

• A footer template is initiated using Royal Builder; conditions are set up before adding content blocks.

Customizing Footer Content

• An image widget is included in the footer linked back to the homepage, ensuring easy access for users.

This structured approach captures key insights from the transcript while maintaining clarity and organization. Each section focuses on specific aspects of web design discussed in the video.

Creating an Institutional Website for Uberlândia

Importance of Localized Content

• Emphasizes the significance of having localized content on a website, particularly for services in Uberlândia. This helps improve search visibility when users search for local services like architects or carpenters.

Designing the Website

• Discusses selecting colors and typography within the website design process, highlighting the importance of aesthetics in user engagement.

Social Media Integration

• Suggests incorporating social media icons (Instagram, Pinterest, TikTok, YouTube) into the site to enhance visibility and engagement with potential clients.

• Advises on customizing icon styles and ensuring links open in new windows to maintain user experience.

Structuring Content

• Introduces creating institutional titles using Elementor's duplication feature to streamline design efforts across multiple sections.

• Outlines how to create a navigation menu by duplicating items and linking them appropriately to relevant pages.

Project Listings and Solutions

• Explains how to categorize projects (e.g., residential, interior designs), ensuring all categories link back to a central project page for easy access.

Finalizing Contact Information

• Details adding contact icons (email, WhatsApp, map location), emphasizing professional email setup through platforms like Gmail linked with domain names.

Footer Design Considerations

• Concludes with tips on designing the footer section of the website, including brand name display and copyright information.

Creating a Privacy Policy Page in WordPress

Steps to Duplicate and Create a Privacy Policy

• The process begins with duplicating the existing privacy policy page, which is available in English by default in WordPress. Users can delete this page to create a new one.

• Navigate to the privacy settings to generate a new standard text for the privacy policy. It's advised to review or consult a lawyer for specific cases, such as e-commerce sites.

• After creating the new text, publish it and adjust layout settings like padding and spacing for better visual alignment on the website.

Configuring Mobile Menu and Footer

• The menu and footer need configuration for mobile devices. Adjustments include setting appropriate padding and ensuring elements are centered.

• For tablet view, change container widths to percentages (100%, 30%, 40%) for better organization across different screen sizes.

Finalizing Layout Adjustments

Image Resizing and Final Touches

• Resize images within containers while maintaining proper spacing between elements. Ensure that changes made do not affect other device views.

• Customize button styles in mobile view by adjusting background color, border thickness, and width percentage for optimal appearance.

Typography Adjustments

• Modify typography settings such as title size and button font size across devices (tablet, computer, mobile), ensuring consistency in design.

Creating Home Page Layout

Editing Home Page with Elementor

• To start designing the home page layout, access all pages from WordPress dashboard and edit using Elementor. This will streamline future edits directly from the home page link.

Setting Up Background Styles

• In page settings, select full-width layout options to remove unnecessary titles. Use flexbox features for advanced padding adjustments.

• Choose a slide presentation style as the background; utilize Canva for image editing to ensure high-quality visuals fit correctly into designated spaces.

This structured approach provides clear guidance on creating essential web components using WordPress while emphasizing responsive design principles across various devices.

How to Edit Images and Create Banners

Image Editing Techniques

• Users can rotate images and undo changes using the shortcut Ctrl + Z.

• A recommended site for downloading images is "freque," which offers both free and paid versions; users should look for green or blue buttons for free downloads.

• When overlaying text on bright images, it's essential to use darker colors to ensure readability.

• Users can add shapes with transparency over images to enhance contrast, making text more legible.

• After editing, multiple images can be downloaded as a zipped folder, which needs extraction before use.

Creating Banners

• Access the banner section in the support material to upload edited images correctly.

• Adjust settings such as repetition duration (1000 milliseconds), transition type (fade), and background size (cover).

• Add titles and subtitles with specific typography settings for better visual appeal; consider adjusting letter spacing for clarity.

• Create call-to-action buttons with customizable text and styles; include icons like WhatsApp for direct communication links.

• Ensure that the menu overlays properly on banners by adjusting opacity and z-index settings in Elementor.

Final Adjustments

• Modify header styles by changing opacity levels to improve visibility against backgrounds while ensuring it remains above other elements.

• Align text centrally within containers after publishing changes; if issues arise selecting containers due to overlapping menus, utilize structure view in Elementor.

Customizing a Container in Elementor

Setting Up the Second Container

• The process begins by selecting a new container and adjusting its settings, including setting a 50% padding.

• Background color is changed to black, and text titled "Nossos Diferenciais" (Our Differentials) is added with an orange typography style.

Adding Icons and Media

• A grid widget is introduced alongside an icon box widget; SVG icons are uploaded for customization.

• Instructions on how to upload SVG files are provided, emphasizing the importance of using compatible formats for icons.

Styling Elements

• Icon sizes and colors are adjusted, ensuring consistency in design with white text on an orange background.

• Additional cards are duplicated to create uniformity across the layout, maintaining a clean aesthetic.

Finalizing Layout Adjustments

Configuring Columns and Rows

• The main container's structure is finalized with four columns in one row for optimal display of content.

• Advanced settings such as margin adjustments and border styles are applied to enhance visual appeal.

Copying Content Efficiently

• Titles from previous sections are copied over to maintain consistency while changing specific texts within the cards.

Creating a Testimonials Section

Setting Up Testimonials

• A flexbox layout is used to introduce testimonials; titles like "Depoimentos" (Testimonials) are created.

Publishing Changes Regularly

• Emphasis on regularly publishing changes during editing sessions to prevent data loss due to unexpected issues.

Integrating Google Reviews

Installing Review Plugin

• Steps outlined for adding a Google review plugin through WordPress admin panel, enhancing site visibility through customer feedback.

Connecting Google Business Account

• Instructions include connecting the business account to pull reviews directly into the website, showcasing customer satisfaction effectively.

Customizing Plugin Settings

Plugin Configuration Options

• The plugin is experiencing bugs, which were not present before. Users can click through various tabs to navigate settings.

• Users can choose to hide verification status and select between different display styles for reviews (style one or style two).

• There are options to filter reviews by star ratings, allowing users to display only four and five-star reviews or all ratings.

Saving and Implementing Code

• After configuring the settings, users need to save their changes and obtain a code snippet for implementation.

• The code is copied into a widget called "short code" within the library, ensuring it appears correctly on the site.

Designing Layout with Flexbox

Creating a Flexible Container

• A flexbox container is created with specific padding adjustments; elements are duplicated for uniformity in design.

• Images related to residential projects are added, with specifications set for image resolution (400x400 pixels).

Styling Elements

• Text color is adjusted to orange, typography settings modified for better visibility, including font size adjustments.

• Card borders are styled with solid lines in orange color; opacity and width settings are customized for aesthetic appeal.

Finalizing Project Cards

Button Configuration

• A button labeled "Request Quote" is created; padding values are adjusted for proper spacing around the button.

Project Section Design

• A new section titled "Our Projects" is established using flexbox layout; background color set to black for contrast.

Image Carousel Implementation

Adding Image Carousel

• An image carousel widget is integrated into the project section; images must be dragged into place from the library.

Gallery Settings

• The content width of the carousel is set to full width; navigation options include arrows only while linking images via Light Box feature.

Transition Effects

• Transition speeds are configured: image transition speed at 50 milliseconds and animation duration at 5 seconds.

How to Create a Website Section Using Flexbox and Canva

Designing the "About Us" Section

• The process begins with inserting a double flexbox layout, setting 50 padding, and copying the title to align it left. The title is changed to "Sobre Nós."

• A text widget is added where specific text is formatted in bold for emphasis, enhancing visual appeal.

• Instructions are provided on creating an animated image using Canva, emphasizing the need for high resolution (10000x1000 pixels).

Creating Animated Images

• Images are arranged in a mosaic style within Canva; adjustments include cropping and resizing images for better composition.

• Each image receives rounded corners with a radius of 10, ensuring uniformity across all visuals.

• Animation effects are applied to images; users can choose from various effects like 'fade in' or 'normal,' followed by downloading as GIF or video.

Implementing Counters in the Design

• After uploading the GIF, a new flexbox layout is created with counters set at values like 300, 500, and 80 for different metrics.

• Titles such as "Clientes Satisfeitos," "Projetos Realizados," and "Obras Entregues" are assigned to each counter for clarity.

Setting Up the Contact Section

• A new contact section is initiated with another double flexbox layout; background color adjustments enhance visibility.

• SVG icons are incorporated into this section; icons representing phone and map services are duplicated for consistency.

Finalizing Contact Information

• Text formatting includes making certain words bold (e.g., “Telefone”) using HTML code generated from widgets for better presentation.

• Social media links are integrated into the footer by copying existing icons from another part of the website.

This structured approach provides clear guidance on designing web sections effectively while utilizing tools like Flexbox and Canva.

Designing a Form and Map Integration

Customizing Icon and Container Styles

• The speaker demonstrates how to customize icons by increasing their size and changing their color to black, adding a "grow" animation on hover.

• The background color of the internal container is set to white, with rounded borders (30px) and a light shadow effect applied for depth.

Adjusting Margins and Padding

• The speaker adjusts the margins of the main container to create space above it (130px), while setting padding within the internal container to 30px.

• A subtitle is added with centered alignment in gray text, followed by duplicating elements for consistency in design.

Creating a Simple Contact Form

• A simple form widget is selected from the library, limited to three fields. The message field is removed, replaced with a phone number input.

• Field labels are customized: "Telefone" for phone number, "Digite seu telefone" as placeholder text; similar adjustments are made for email and name fields.

Styling Buttons and Fields

• Button styles are modified: border colors changed to orange with no border radius. Typography settings are adjusted for better visibility.

• Main container height is set at 500px; both internal containers are aligned centrally for uniformity across the layout.

Integrating Map Functionality

• A map widget is dragged into place, configured with an address ("Centro Uberlândia") and zoom levels adjusted as needed.

• Saturation settings are altered to render the map in black-and-white for stylistic purposes; page completion checks follow.

Mobile Responsiveness Adjustments

• Advanced settings allow margin adjustments on mobile views; specific values (20px padding top/bottom, 80px bottom margin) ensure proper spacing across devices.

• Final tweaks include adjusting title sizes downwards for better fit on mobile screens while maintaining overall design integrity.

Website Layout Adjustments and Content Creation

Mobile and Tablet Layout Adjustments

• The speaker demonstrates checking the mobile layout by inspecting elements on a phone, ensuring everything appears correctly before publishing.

• Adjustments are made to container widths, setting them to 100% for better alignment across devices. This includes modifying rows and columns in the layout.

• Typography settings are adjusted for buttons and titles, including font size changes and padding adjustments to enhance readability on mobile devices.

Page Creation Process

• The speaker navigates to the WordPress admin panel to edit existing pages like "About Us," using Elementor for layout customization.

• A Flexbox is added with specific styling instructions, including color adjustments and padding settings for visual appeal.

• Text content is updated with new information about the organization while maintaining consistent design elements from previous sections.

Team Section Development

• The speaker discusses creating a section titled "Meet Our Team," utilizing existing templates for efficiency in design replication.

• Background colors and typography styles are set for team member cards, emphasizing consistency in branding throughout the page.

• Images of team members are uploaded, with instructions on how to adjust individual card details such as names and descriptions.

Final Review Before Publishing

• After configuring all elements, a final review is conducted on mobile layouts to ensure everything displays correctly before publication.

• The title at the top of one section is noted for change due to redundancy with another section already titled "About Us."

Creating a Projects Page in WordPress

Setting Up the Projects Page

• The speaker begins by discussing the creation of a "Projects" page after finalizing the "About Us" page, indicating a structured approach to website development.

• They navigate to the WordPress admin panel, emphasizing the importance of using Elementor for editing pages and adjusting settings like page width.

• The title is changed to "Projects," and additional text is added to introduce previous works, showcasing an effective way to engage visitors.

Designing with Elementor

• The speaker demonstrates how to use Elementor's image grid carousel widget, explaining adjustments made for layout and resolution, which are crucial for visual consistency.

• They detail customizing navigation elements within the carousel, including color changes and size adjustments, highlighting design aesthetics that enhance user experience.

Finalizing Layout Adjustments

• Instructions are provided on ensuring images maintain uniformity in size within the carousel, stressing the importance of visual appeal in web design.

• The speaker discusses spacing adjustments between elements to improve readability and overall layout before publishing changes.

Responsive Design Considerations

Mobile Optimization

• Adjustments are made for mobile view by reducing padding and modifying typography sizes, demonstrating best practices for responsive design.

• The speaker inspects how elements appear on tablet devices, making necessary layout changes to ensure compatibility across different screen sizes.

Contact Page Setup

Editing Contact Information

• Transitioning to the contact page setup involves copying existing containers from other pages while maintaining consistent styling throughout.

• After pasting content into the contact page, they finalize layout settings such as margins before publishing updates.

Adding Motion Effects

• Additional effects are planned for various titles on different pages (home and projects), enhancing engagement through animations during entry transitions.

How to Enhance Website Design with Motion Effects

Implementing Motion Effects in Containers

• The speaker demonstrates how to apply motion effects, specifically "Side In," to titles and cards within a container.

• Different timing settings are applied for various elements, such as 500 ms for the first title and increasing increments (600 ms, 700 ms, etc.) for subsequent items.

• The process of copying and pasting styles is emphasized; however, caution is advised when applying styles that may alter colors or other attributes unintentionally.

Consistency in Motion Effects Across Elements

• The speaker discusses maintaining uniformity by applying the same motion effect ("Fading Up") across all cards while ensuring consistent timing.

• It’s noted that adding these effects not only beautifies the site but also aids in loading performance by creating delays between element appearances.

Linking Navigation Menus and Anchors

• Instructions are provided on linking navigation menus to specific sections of the website using anchor IDs (e.g., "solu coins" for solutions).

• The importance of correctly formatting links with hashtags and slashes is highlighted to ensure proper navigation functionality.

Fixing Menu Positioning

• Steps are outlined to make the menu fixed at the top of the page so it remains visible during scrolling. This involves activating "Sticky Session" settings.

Finalizing Links in Footer

• The speaker emphasizes checking footer links, including social media links and project pages, ensuring they direct users appropriately.

• After confirming all links are functional, there’s a call to action for testing navigation through different sections like residential projects.

Performance Improvement Tips

• Suggestions include watching videos on SEO configurations for better search engine visibility and optimizing site speed to enhance user experience.

Website Essentials and Backup Strategies

Importance of Cookie Consent and Analytics Tools

• It is mandatory to include cookie consent notices on every page of the website. This ensures compliance with data protection regulations.

• The speaker mentions available resources, including videos on how to set up Google tools like Analytics and Search Console for tracking website performance.

Marketing Tools and Security Measures

• The discussion highlights the importance of configuring marketing tools such as Facebook Pixel and Google plugins to enhance site functionality.

• Emphasis is placed on security plugins that protect the website from hacking attempts and malware infections, which are critical for maintaining site integrity.

Backup Procedures

• Regular backups are essential; they serve as a safety net in case of issues like plugin bugs or payment failures that could take the site offline.

• Having a backup allows users to restore their website without needing to rebuild it from scratch, significantly reducing downtime and stress.

Template Availability for Ease of Use

• The speaker offers pre-made templates for various projects, allowing users who prefer not to start from zero to easily implement designs by simply modifying existing structures.

• Templates streamline the creation process, enabling quick adjustments such as changing titles or links without extensive technical knowledge.