• About us
  • Contact
  • Rules
  • Privacy Policy
I love wordpress
  • Home
  • WordPress
  • Theme WordPress
  • Plugin WordPress
No Result
View All Result
  • Home
  • WordPress
  • Theme WordPress
  • Plugin WordPress
No Result
View All Result
I love wordpress
No Result
View All Result

How to Customize Header Footer and Background WordPress Simple

haikv121 by haikv121
Tháng Tư 7, 2022
in Wordpress
0


WordPress is a flexible source code with an intuitive interface. You can customize Header Footer and Background easily.

Using the website previously required users to equip themselves with complex programming knowledge and skills to design, repair or change established components. However, the arrival of WordPress has completely removed those limitations and naturally, it has become the most popular source code today.

For Customize Header and Footer on WordPress, first you need to log in to the website’s admin account. Specifically, we will take the Newspaper theme as an example in this case because this is a theme with a relatively complex custom Panel, but in return, Newspaper is very popular thanks to its beautiful, impressive interface, many integrations. support feature.

One of the biggest advantages mentioned is: users can Customize WordPress Header, Footer or Background easily and simply follow the instructions below.

However, the above advantage is also the disadvantage because if you enable (start) all the features – even if not used, the website will become heavy, taking a long time to wait for users to load.

Table of Contents

  • How to Customize Header in WordPress
    • How to Customize WordPress Header Style
    • How to Customize WordPress Top Bar
    • How to Customize the WordPress Main Menu Item
    • Logo & Favicon
    • Logo for Mobile
    • Footer Settings
    • How to Customize the WordPress Footer Template
    • Instagram
    • How to Customize Footer Info Content WordPress
    • How to Customize Footer Background WordPress
    • Sub Footer Settings
    • Why create Widget Header for WordPress website?
    • Instructions on how to create a Widget for WordPress Header
      • Step 1: Create a widget area
      • Step 2: Put the newly created widget on the website
      • Step 3: Add CSS for the widget
  • How to Create and Customize WordPress Background
    • What is WordPress background?
    • How to set up and customize the WordPress Background>
    • Related posts:

How to Customize Header in WordPress

Theme Panel area of ​​the Newspaper theme
Theme Panel area of ​​the Newspaper theme

Starting from the Header, after logging into the admin account, the command will take you to the Theme Panel. This is the area where the interface configuration features are available. Each theme will support different respective functions, but high priced themes often bring more features.

How to Customize WordPress Header Style

First, select the Header item to change the Header Style (interface style for the website header). Theme Newspaper will provide 12 different styles for you, after changing, press SAVE SETTINGS and refresh (F5) the website to experience the results.

How to Customize WordPress Top Bar

Top bar adds information when there are too many items
Top bar adds information when there are too many items

Top bar is also a part that can be changed by the user when Customize Header. You can understand this area is where the categories are, similar to the menu bar. The position of the Top bar will be at the top of the menu and is often used when the website has too many categories.

Therefore, unlike the menu, themes that support Top bar always come with a button to enable/disable. If not used, disable this feature to reduce page load time.

How to Customize the WordPress Main Menu Item

Newspaper theme menu configuration area
Newspaper theme menu configuration area

Main Menu is the menu configuration area, websites using WordPress source code can be designed quite complex. At this point, it is not unusual to use multiple menus in the same website. Theme Newspaper is a good example, below is the caption for the features in the Main Menu.

Select the main display menu in the website.

When selected, the submenu will drop down from the main menu bar. This style is not really popular so you should choose “No Preloading” to turn off the function.

Customize Header in Sticky Menu allows the menu bar to move according to the scroll bar when the user drags and drops. You can choose “Always Sticky => SAVE”, refresh the website and drag the slider to see the effect.

Select the logo on the Sticky Menu. Please choose “Mobile logo” to shorten the logo, a smaller version than the main logo has a large size.

Example of logo template on Header and Sticky Menu
Example of logo template on Header and Sticky Menu

Logo & Favicon

Logo upload and Retina Logo upload: Upload logo for website, pay attention to use .png image format.
Favicon: A small image that will be displayed on the left side of the browser tab. The recommended image format is .png, size 20×20 pixels.

Favicon is small and located on browser tab
Favicon is small and located on browser tab

Enter a description for the logo, these lines are not displayed on the website, so they are often used to support SEO.

Enter a name for the logo, the logo name will appear when visitors visit the website from a web browser.

Hover over the logo on your web browser to see the name of the logo
Hover over the logo on your web browser to see the name of the logo
  • Text logo and Text Logo Tagline

Can be understood as descriptive information for the logo, some menu types can put this information on the web. Please pay attention to complete and correct for both items.

Logo for Mobile

  • Logo Mobile & Retina Mobile Logo: Logo for mobile version.
  • iOS Bookmarklet: Logo or any image will appear in Bookmark of Safari browser on IOS.
Configuration area for Footer of Newspaper theme
Configuration area for Footer of Newspaper theme

Manipulation Customize Footer also has many similarities with the process of changing the Header above. However, because Footer is often used to add information to the website, located at the bottom of the page, so you need to determine to divide the layout so that it is reasonable.

Footer Settings

At the Theme Panel, select Footer, the Footer Setting area is where the layout settings, contact information, social network addresses, copyright ownership …

How to Customize the WordPress Footer Template

Theme Newspaper will support you with some interface templates for Footer. This way you can split columns, edit the content in each column… while Customize Footer. However, not many WordPress themes have this function, usually you have to incorporate editing in the Widget area.

Instagram

Connect directly to your Instagram account and display featured images in Footer. This feature is not common, and uploading multiple images can take a long time.

How to Customize Footer Info Content WordPress

Footer for website with logo, info and social icon
Footer for website with logo, info and social icon

Users can also Customize Footer In the Footer Info Content section:

  • Footer Logo & Footer Retina Logo: Allows to upload logo in the first column of Footer.
  • Logo ALT Attribute & Logo Title Attribute: Similar to the information for the logo in the Header. Here, enter all required fields completely and correctly.
  • Footer text: The content below the logo in the first column of the Footer.
  • Your email: Enter the email address to display in the Footer or you can fill it in the Footer text as shown in the image.
  • Show Social Icon: Use social network icons by inserting links.

How to Customize Footer Background WordPress

You can Customize Background Footer in the following sections:

  • Footer background: Choose a background image for Footer, should limit the use of images to reduce website size.
  • Repeat, Size, Position and Background Opacity: Customize the size, effect for the Footer background image. If you don’t use images, you don’t need to configure these sections.

Sub Footer Settings

The plugin helps you to insert additional information and menus
The plugin helps you to insert additional information and menus

In the Sub Footer Setting area, you can also Customize Footer:

  • Show Sub-footer: Add more information to the website below the Footer.
  • Footer Copyright Text: Information about copyright eg: abc.com 2008 – 2009.
  • Copyright symbol: Show more copyright symbol.
  • Footer Menu: Add any menu below the Footer.

In WordPress, in addition to themes that support many features, there are still some themes that lack basic features, such as not supporting Widgets for Header. However, with just a few simple steps you can create a Widget yourself.

Why create Widget Header for WordPress website?

The Widget Header area is often placed advertising banners
The Widget Header area is often placed advertising banners

Creating a Header widget is very useful, especially when you want to insert prominent banner ads on your website or important announcements to send to visitors. The biggest reason is because this location is very attractive, users will “notice” them first as soon as the website is uploaded. So consider creating a Header Widget for your website right away.

See also: Instructions for editing WordPress Menus

Instructions on how to create a Widget for WordPress Header

Step 1: Create a widget area

Add the below code to the file functions.php of the theme at Appearance => Editor.

function wpb_widgets_init() {

register_sidebar( array(

‘name’ => ‘Custom Header Widget Area’,

‘id’ => ‘custom-header-widget’,

‘before_widget’ => ‘

‘,

‘after_widget’ => ‘

‘,

‘before_title’ => ‘

‘,

‘after_title’ => ”,

) );

}

add_action( ‘widgets_init’, ‘wpb_widgets_init’ );

<

div class=”wp-block-image size-full wp-image-26247″>

New widget appears after inserting code into function.php
New widget appears after inserting code into function.php

Save and search to “Appearance => Widget”you will get a new Widget named “Custom Header Widget Area” as shown in the image – the process of creating Widget Header has been successful. The usage is similar to other Widgets, you can drag and drop widgets such as calendars, ads, etc.

Step 2: Put the newly created widget on the website

At this point, even though you can configure the Widget for the Header, you still cannot see it appear on the website. Call the widget using the command line below, copy and paste it into the header.php file at “Appearance => Editor”. Note, where you want the widget to appear, insert the code at that position.

if ( is_active_sidebar( ‘custom-header-widget’ ) ) : ?>

Widget appeared below the header after inserting the code
Widget appeared below the header after inserting the code

Refresh (F5) the website again to check the newly created widget. If the Widget appears successful, otherwise, try another location in the header.php file. For banners, you need to insert an image link into the widget or choose another object such as a calendar to check.

Step 3: Add CSS for the widget

In the above example, we have a banner ad but the display image is not optimized. You can add CSS to help with alignment and neater placement. Copy and paste the code below into the style.css file under “Appearance => Customize => Additional CSS”.
After that, save and refresh the website again to check.

Adding CSS to help the banner become appropriate and balanced for the website
Adding CSS to help the banner become appropriate and balanced for the website

How to Create and Customize WordPress Background

What is WordPress background?

WordPress Background is the background image for the website, this image will be below the objects in the web page.

So the background is large and usually only the corners and edges can be seen. In WordPress, you absolutely can Customize Background at will.

How to set up and customize the WordPress Background>

Step 1: Access the WordPress background settings area at “Appearance => Background”.

Customize Header Footer and Background
WordPress supports the function of setting the background for the website

Step 2: Continue to click “Select Image”, choose an image from your gallery or upload from your computer.

Select an image or upload an image from your computer
Select an image or upload an image from your computer

Step 3: After the setup is complete, refresh the website and you will see the background image appear below.

The background will appear behind the objects in the website
The background will appear behind the objects in the website

It can be said that WordPress is one of the most capable source codes Customize Header, Footer and Background website easily today. If the site is built on the foundation WordPress Hostingwe hope that the article has brought you useful information.

Website design standard SEO

See more articles in the Series

Instructions to retrieve WordPress website admin password >>Instructions to Vietnameseize WordPress using Loco translates. >>



Click to rate this post!
[Total: 0 Average: 0]

Related posts:

  1. Review Mythemeshop to store premium themes and plugins for wordpress
  2. Review ShopEngine – The Perfect Toolkit for Elementor?
  3. How to remove Powered by WordPress in the footer of the website?
  4. Instructions to completely remove WooCommerce
  5. Instructions for installing localhost with XAMPP to learn WordPress
Tags: learn WordPresswordpresswordpress tutorial
Previous Post

How to Edit WordPress Menus

Next Post

Instructions to Vietnameseize WordPress using Loco translates.

Related Posts

[WOOCOMMERCE] A SIMPLE PRODUCT ADDED
Wordpress

[WOOCOMMERCE] A SIMPLE PRODUCT ADDED

Tháng Năm 7, 2022
[WORDPERSS] MORE SIMPLE NEW ARTICLE
Wordpress

[WORDPERSS] MORE SIMPLE NEW ARTICLE

Tháng Năm 7, 2022
Lesson 2: How to add, delete and edit wordpress woocommerce products
Wordpress

Lesson 2: How to add, delete and edit wordpress woocommerce products

Tháng Năm 7, 2022
Lesson 3: Instructions for managing members on wordpress website
Wordpress

Lesson 3: Instructions for managing members on wordpress website

Tháng Năm 7, 2022
Next Post
Instructions to Vietnameseize WordPress using Loco translates.

Instructions to Vietnameseize WordPress using Loco translates.

Theo dõi
Đăng nhập
Thông báo của
guest
guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận

[WOOCOMMERCE] A SIMPLE PRODUCT ADDED

[WORDPERSS] MORE SIMPLE NEW ARTICLE

Lesson 2: How to add, delete and edit wordpress woocommerce products

Lesson 3: Instructions for managing members on wordpress website

HOW TO USE WIDGET IN WORDPRESS

How To Mount Facebook Pixel On Your WordPress Website Easily

  • About us
  • Contact
  • Rules
  • Privacy Policy
Contact: Haidesign010596@gmail.com

© 2021 Cepke.info

No Result
View All Result
  • Home
  • WordPress
  • Theme WordPress
  • Plugin WordPress

© 2021 Cepke.info

wpDiscuz
0
0
Rất thích suy nghĩ của bạn, hãy bình luận.x
()
x
| Reply