Как изменить footer section

The website footer is an area that appears at the bottom of the page, below the website’s content. This section of the webpage typically contains the website logo, navigation menu, subscription form, map, links to social networks, and contact information for a company or organization. Footers can vary significantly in size, content, and style depending on their purpose and the type of website they are present on.

If you are using Elementor for designing your website, you can easily create your website footer in minutes with its handy widgets or premade footer blocks. Besides, you have many customization options to display useful information for your visitors.

In this blog, we’ll show you how to edit a footer in Elementor following two easy ways. Also, we are going to share a bonus part. Don’t miss it if you want to use free footer blocks for your website.

Let’s dive into the guide.

2 Different Methods to Edit Footer in Elementor

The header and the footer are common website elements that every website has. You can easily design and customize your website header using Elementor. But here we are focusing on how you can design a footer with Elementor.

If you want to design a custom header with Elementor, you can follow the below handy tutorials.

• How To Design A Custom Elementor Header In 2 Minutes
• How To Edit Your WordPress Header With Elementor

In this section, we are going to show you how to edit the footer in 2 possible ways using Elementor.

Method 1: Edit Footer Using Elementor Widgets
Method 2: Edit Footer Using Elementor Theme Builder

Choose a method that suits you.

Let’s get started:

Method 1: Edit Footer Using Elementor Widgets

Here, you’ll learn how to design and customize a footer from scratch using the Elementor widgets.

Step 1: Set Footer Structure

First, we need to add a structure to design our footer. You can do it by clicking the (+) icon. Follow the below image. here, we’ve added three columns.

After adding the footer structure, it’s time to change the section Layout and add a Background Color.

Step 2: Add Heading Widget

We are planning to add three different contents to the three different columns. Let’s add.

First, find the Heading widget from the Elementor widget gallery. Then drag & drop the widget into the left-side column.

In the Content area, you can manage the heading content. Here, you can manage the Title, Link, Size, HTML Tag, and Alignment of the heading.

You are able to customize the heading design by going to the Style section. You can change the Text Color, Typography, Text Stroke, Text Shadow, and Blend Mode of the heading.

We’ve also added another heading under the ‘Location‘ heading to write the company address following the above process. Similarly, you can manage and style the heading in your own way.

We’ve also added content to the other two columns. Here is the current look of the footer.

Step 3: Add Another Section

We want to add our social icons to the footer area. We’ve added another section and set its Layout & style. You can follow the below image to learn the process.

Step 4: Add Social Icons Widget

Find the Social Icons widget first. Then drag & drop the widget into the section.

In the Content area, you can manage your social icons content. Here, you can add or remove an Item, and set the Shape, Column, and Alignment of the social icon.

Go to the Style section to customize the icons in your own style.

Final Preview

We’ve added some content to the page. Let’s have a look at the current design of the footer.

Method 2: Edit Footer Using Elementor Theme Builder

At this moment, you’ve learned how to design and customize a footer using Elementor widgets. Now we are going to demonstrate how to use Elementor Theme Builder to create a footer. Make sure that you’ve installed and activated the Elementor pro version.

Let’s dive into it.

First, go to the Templates->Theme Builder area.

After that, you’ll get the option to add your footer. Here, you need to select the Site Parts->Footer from the left sidebar. Then click on the Add New button.

On the following popup, you’ll get all the Footer Blocks. Choose the suitable one and click on the Install button to install the block on your website.

That’s it.

Also, learn How To Design A Custom Elementor Header.

Bonus: Use Happy Addons Free Footer Blocks to Your Website

Happy Addons is one of the popular, fast-growing Elementor addons that come with pre-built templates and blocks for designing your website. With Happy Addons, you can easily add a footer to your website with its free blocks.

Read this handy article and learn how to use Happy Addons’ Template Library the right way.

FAQs on How to Edit Footer in Elementor

Still, you may have questions in your mind. In this section, we’ve answered some common questions regarding the Elementor footer.

Are You Ready to Design Your Website Footer

In this tutorial blog, we’ve shown how you can design and edit your website footer using Elementor. We’ve also introduced Happy Addons’ free footer blocks.

Apart from that, we’ve answered some common questions on the Elementor footer. If you are still stuck and need more help, you can ask your query in the comment box below.

If you like this blog share it on your social channels. Don’t forget to subscribe to our newsletter. It’s free.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. We have been creating WordPress tutorials since 2009, and WPBeginner has become the largest free WordPress resource site in the industry.

The footer is the part of a document found at the bottom margin of each page. It usually contains information like the page number that appears throughout your document. Footers can also help keep documents organized and look more professional. 

Corporate and academic standards typically call for more than just one footer in a document. 

The cover page, the appendices, and other pages in different orientations can all have different footers. 

MS Word offers more than one way to add different footers on each page. 

• Using preset footer options
• By inserting section breaks

Method 1: Using the Preset Footer Options

Step 1: Open up a Word file. 

Step 2: Access the footer section. 

Once our document is opened, go to the Insert tab and click the footer drop-down menu. Then, select the Edit footer option found at the bottom of the menu. 

Alternatively, you can double-click the bottom margin of your document to access the footer section. 

Step 3: Access the footer design tools. 

Now that the footer section is enabled, you’ll be directed to the Header & Footer Design tab. You’ll see two unticked checkboxes from the Options group: Different First Page and Odd & Even Pages checkboxes. 

If you want the first page to have a different footer from the rest of your document, tick the Different First Page checkbox. 

On the other hand, tick the checkbox next to Odd & Even Pages if you want the odd-numbered pages to have a different footer from the even-numbered pages. 

Step 4: Add your content into your footer. 

You can now start adding your text or object in the footer section. Once finished, simply double-click outside the footer section to go back to the main text.

You can also press the Close Header and Footer button.

Method 2: By Inserting Section Breaks

Section breaks mark the point at which a part of your document ends and another one starts. They help organize the different parts of your document to easily configure different footers for each page. 

Here’s how you can create section breaks in your document. 

Step 1: Open up an MS Word file. 

Step 2: Create section breaks. 

Once our document is ready, click at the start of the page that you want in a different footer. Then, move your cursor to the upper left part of your window and click the Layout tab. After that, click the Breaks drop-down menu. Finally, select the Next Page option in the selection. 

For this example, we want the second paragraph with a different footer. So, we’ll insert section breaks before and after this paragraph. We’ll place our cursor right at the start of the second paragraph and insert the section break. 

Now, place your cursor at the end of the section and repeat the process. You’ll notice that MS Word moved the section to a separate page. 

Step 3: Access the footer section. 

Now that our section is set up, go to the Insert tab and click the Footer drop-down menu. Then, select Edit Footer from the list of options.

Alternatively, you can simply double-click the bottom margin of the page to access the footer section. 

Step 4: Unlink the section footer. 

To make this successfully work, we’ll need to break the connection between the footer in the current section and the previous one. So, with your cursor still inside the footer section, click on the Link to Previous button found on the Header & Footer Design tab. 

You can now insert your content in the footer section. Take note that you’ll have to repeat the same process for each page that you want to have a different footer. 

To go back to the main text, simply double-click outside the footer or click on the Close Header and Footer button. 

There you have it! You’ve just inserted section breaks to have a different footer on each page in MS Word. 

Conclusion

We hope you’ve found this article helpful! 

To your visitors, the default text can seem unprofessional and even out of place. So, it makes sense not to display a default footer on your WordPress website. You’ll be relieved to know that you can remove it or edit it to your specifications should you choose to display more pertinent branded information like the logo, copyright notice, or a link to your privacy policy.

To learn what to put in a website footer, check out Website Footers: Best Design Practices & Examples.

A customized footer will help visitors identify with your brand. Read on to learn how to remove and/or edit the footer on your site.

Is It Legal to Remove “Proudly Powered By WordPress”?

In short: Yes. WordPress is open-source software. It’s designed to allow anyone to change the source code.

You have the ability to modify your default WordPress templates. You won’t be breaking any laws if you change your footer to fit your company’s brand.

But before you make any changes, you’ll want to backup your WordPress website. This proactive step ensures that you can quickly restore your site if you make a mistake. Whether you’re editing your footer or doing a full redesign, it’s a good habit to backup your site.

Method 1: How to Remove WordPress Footer

If you simply want to remove the footer altogether, the easiest solution is using a plugin.

WordPress plugins extend the functionality of your site. It’s an easy solution when you want to make minor tweaks or major changes to your site. Plus, it requires no coding experience. Follow the steps below to edit your footer with a plugin.

1. Install and activate the Remove Footer Credit plugin.

Image Source

2. Go to Tools > Remove Footer Credit.

3. Enter the text or HTML you would like to remove in the first text field. Then, add your own footer text to the second text field.

4. Click Save.

If the above option doesn’t work for you or you want to do some more advanced edits, read on for additional ways to make changes to the default branded footer.

Method 2: How to Change the Copyright Footer in WordPress

Most theme developers know that you’ll want to edit their default footers. So, they usually offer a built-in option in the theme to make changes.

Every WordPress theme is different. So, this setting may be available in different sections within the theme.

1. Log in to the WordPress dashboard.

2. Go to Appearance > Customise.

3. Look to see if you have a Footer option.

4. If you do, select Footer > Bottom Bar. From there, you’ll be able to disable the footer or put in your own text.

5. If you have the Copyright Area option. If you do, you can make changes to this footer as well.

Image Source

If your theme does not have these presets built in, you’ll have to remove the default WordPress footer using another method. We’ve included other options below.

Method 3: How to Edit WordPress Footer Widgets

Some WordPress themes use widgets to add specific features, like footers.

1. You can find your footer widget by going to Appearance > Widgets.

2. On the right, you’ll find the footer widget section, Footer.

3. From the list on the left, drag and drop the Text widget underneath the Footer.

4. Click the down arrow and then add your content in the text field.

Method 4: How to Edit WordPress Footer PHP File

The footer is defined in a WordPress template file as footer.php. You can edit the file by going to Appearance > Theme Editor. Then, follow the steps below.

1. Select the specific theme in the right-hand corner.

2. Locate the theme footer (footer.php) under Theme Files on the righthand side. You can use Crtl+F to find it if you’re having trouble.

3. Find this PHP code:

 
get_template_part( 'template-parts/footer/site', 'info' );

Image Source

4. Replace the PHP code with the code below and change “add text here” with your specific content.

 
//get_template_part( 'template-parts/footer/site', 'info' );
echo “add text here”;
?> 

5. Press the Update File button.

The final result will look like this:

Method 5: How to Edit the WordPress Footer through Your Theme

Theme builders make it easy for you to tweak your website to match the look and feel of your brand. Most theme builders come with a built-in footer plugin.

For example, Jupiter X lets you customize your footer with the help of a drag-and-drop visual editor. You can add, modify, and remove the widgets in real time. There are also dozens of ready-made footer templates available if you’re in a hurry.

The Themify Builder is another intuitive page designer. You can remove the default copyright information and create custom footers with a few simple clicks.

Elementor also offers dynamic templates to build beautiful pages with no coding skills. Let’s walk through the process of editing the WordPress footer with Elementor below. 

1. Log in to your WordPress dashboard.

2. Click Templates > ThemeBuilder.

3. Click the plus icon next to Footer in the left panel.

4. You can either choose a premade footer block from the library, or exit out and create one from scratch. Here’s an example of a premade footer block:

Image Source

5. When you’re ready, click Publish.

6. You can click Add Condition to choose where to publish the footer or stick with the default option (ie. the entire site).

Mistakes When Editing a Footer in WordPress

Editing any part of your website is a big deal. A harmless error can temporarily shut down your entire website. Here are a few common mistakes to avoid when editing your footer.

1. Using CSS to hide the links.

One method of removing the footer involves adding the following code snippet to the CSS editor. 

 
.site-info{display: none;}

This method works simply by hiding the links in your footer. However, hiding links was a common trick used in black hat SEO (search engine optimization) to boost website rankings in search engines. Google sees this action as a violation of its website guidelines and may penalize your site as a result. So, we recommend avoiding this method altogether.

2. Not reading the license documentation.

Third-party themes may have stipulations in their license agreements that could restrict you from removing copyright notices. You’ll want your legal team to contact the theme developer with any questions or concerns.

Removing WordPress Branding from Your Footer

Editing your site footer removes unwanted copy and helps you create a customized look that your visitors will come to recognize each time they come in contact with your brand.

Editor’s note: This post was originally published in January 2020 and has been updated for comprehensiveness.

Hey friends, today in this blog, you’ll learn how to create a Fully Responsive Footer Section using only HTML & CSS. In the earlier blog, I have shared how to create a Responsive Dropdown Menu Bar using HTML & CSS and now it’s time to create a Responsive Footer.

You may have seen a footer on every website that you’ve visited because the footer on any website is now compulsory. Footer is always set on the bottom of the main page or last of the page. The latest version of HTML5 has introduced a separate tag for the footer and that is <footer>.

A few years ago, the footer is only used to giving copyright information but nowadays the footer is in trend and all websites have a big footer section with more information and social media accounts or icons.

In our footer, as you can see in the preview image, there are some categories of footer with some social media icons, short description, location info, and a contact form. This footer is fully responsive for all devices including mobile phones. On the pc, these footer categories are aligned horizontally but when you open it on small devices like mobile phones, each category of footer aligned vertically and it’ll automatically adjust its height and width according to the device height and width.

Video Tutorial of Responsive Footer Section

 
In the video, you’ve seen the responsive footer section and how it shows on mobile devices. I hope your all doubts and problems are solved after watching this video tutorial on the footer design. I think you’ve understood the basic codes of this footer design. To create this footer I used only HTML & CSS so if you’re a beginner then you can also easily understand the codes and can create this type of footer design.

You can use this responsive footer section code on your website or project after a few changes according to your requirements and you can also redesign this footer and take this to the next level. If you like this footer and want to get source codes then you can easily copy the codes from the given copy boxes or you can also download source files of this footer design. I believe this responsive footer code can help beginners to know CSS in depth.

<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Responsive Footer Section | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="content1">
      <div class="text">Fully Responsive Footer Section</div>
      <div class="p">HTML and CSS (Flexbox)</div>
    </div>
    <footer>
      <div class="main-content">
        <div class="left box">
          <h2>About us</h2>
          <div class="content">
            <p>CodinNepal is a YouTube channel where you can learn web designing, web development, ui/ux designing, html css tutorial, hover animation and effects, javascript and jquery tutorial and related so on.</p>
            <div class="social">
              <a href="https://facebook.com/coding.np"><span class="fab fa-facebook-f"></span></a>
              <a href="#"><span class="fab fa-twitter"></span></a>
              <a href="https://instagram.com/coding.np"><span class="fab fa-instagram"></span></a>
              <a href="https://youtube.com/c/codingnepal"><span class="fab fa-youtube"></span></a>
            </div>
          </div>
        </div>

        <div class="center box">
          <h2>Address</h2>
          <div class="content">
            <div class="place">
              <span class="fas fa-map-marker-alt"></span>
              <span class="text">Birendranagar, Surkhet</span>
            </div>
            <div class="phone">
              <span class="fas fa-phone-alt"></span>
              <span class="text">+089-765432100</span>
            </div>
            <div class="email">
              <span class="fas fa-envelope"></span>
              <span class="text">[email protected]</span>
            </div>
          </div>
        </div>

        <div class="right box">
          <h2>Contact us</h2>
          <div class="content">
            <form action="#">
              <div class="email">
                <div class="text">Email *</div>
                <input type="email" required>
              </div>
              <div class="msg">
                <div class="text">Message *</div>
                <textarea rows="2" cols="25" required></textarea>
              </div>
              <div class="btn">
                <button type="submit">Send</button>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="bottom">
        <center>
          <span class="credit">Created By <a href="https://www.codingnepalweb.com">CodingNepal</a> | </span>
          <span class="far fa-copyright"></span><span> 2020 All rights reserved.</span>
        </center>
      </div>
    </footer>
  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  color: #d9d9d9;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.content1{
  position: relative;
  margin: 130px auto;
  text-align: center;
  padding: 0 20px;
}
.content1 .text{
  font-size: 2.5rem;
  font-weight: 600;
  color: #202020;
}
.content1 .p{
  font-size: 2.1875rem;
  font-weight: 600;
  color: #202020;
}
footer{
  position: fixed;
  bottom: 0px;
  width: 100%;
  background: #111;
}
.main-content{
  display: flex;
}
.main-content .box{
  flex-basis: 50%;
  padding: 10px 20px;
}
.box h2{
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
}
.box .content{
  margin: 20px 0 0 0;
  position: relative;
}
.box .content:before{
  position: absolute;
  content: '';
  top: -10px;
  height: 2px;
  width: 100%;
  background: #1a1a1a;
}
.box .content:after{
  position: absolute;
  content: '';
  height: 2px;
  width: 15%;
  background: #f12020;
  top: -10px;
}
.left .content p{
  text-align: justify;
}
.left .content .social{
  margin: 20px 0 0 0;
}
.left .content .social a{
  padding: 0 2px;
}
.left .content .social a span{
  height: 40px;
  width: 40px;
  background: #1a1a1a;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  border-radius: 5px;
  transition: 0.3s;
}
.left .content .social a span:hover{
  background: #f12020;
}
.center .content .fas{
  font-size: 1.4375rem;
  background: #1a1a1a;
  height: 45px;
  width: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  transition: 0.3s;
  cursor: pointer;
}
.center .content .fas:hover{
  background: #f12020;
}
.center .content .text{
  font-size: 1.0625rem;
  font-weight: 500;
  padding-left: 10px;
}
.center .content .phone{
  margin: 15px 0;
}
.right form .text{
  font-size: 1.0625rem;
  margin-bottom: 2px;
  color: #656565;
}
.right form .msg{
  margin-top: 10px;
}
.right form input, .right form textarea{
  width: 100%;
  font-size: 1.0625rem;
  background: #151515;
  padding-left: 10px;
  border: 1px solid #222222;
}
.right form input:focus,
.right form textarea:focus{
  outline-color: #3498db;
}
.right form input{
  height: 35px;
}
.right form .btn{
  margin-top: 10px;
}
.right form .btn button{
  height: 40px;
  width: 100%;
  border: none;
  outline: none;
  background: #f12020;
  font-size: 1.0625rem;
  font-weight: 500;
  cursor: pointer;
  transition: .3s;
}
.right form .btn button:hover{
  background: #000;
}
.bottom center{
  padding: 5px;
  font-size: 0.9375rem;
  background: #151515;
}
.bottom center span{
  color: #656565;
}
.bottom center a{
  color: #f12020;
  text-decoration: none;
}
.bottom center a:hover{
  text-decoration: underline;
}
@media screen and (max-width: 900px) {
  footer{
    position: relative;
    bottom: 0px;
  }
  .main-content{
    flex-wrap: wrap;
    flex-direction: column;
  }
  .main-content .box{
    margin: 5px 0;
  }
}

That’s all, now you’ve successfully created a Responsive Footer Section Design with HTML & CSS. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.