Creation of a page on WordPress [From A to Z]

With more than 1.4 billion websites in the world in 2018, it is quite normal to have difficulties to stand out quickly . Of course the number is not the only factor to consider, you owe it to yourself to have an impeccable website to ensure your success on the internet . For this, the design ofeach page of your website should not be taken lightly. Indeed, visitors will not necessarily go through your home page before getting the information they are looking for. Moreover, all the indexed pages of your website are likely to benefit from direct traffic. You must therefore offer an optimal user experience on the home page as well as on all the other pages. And this obviously requires a proper and responsive design with relevant information. For this, I will show you the best practices and the different steps to create your first page from the homepage. In addition, I invite you to watch the video I added to this article to follow the process directly.

Create a page on WordPress

So for this, I made a quick presentation, so on powerpoint to show you the different elements I found:

Why is it important to design each page of your website properly?

Unless you have a one-page site, you have one or more pages that accompany your home page. These pages allow you to to bring much more information on your products, your services or on themes when you have a blog.

And once they are indexed by the search engines, they appear in the results when people search in relation to their themes.

Therefore, they are all gateway for your website and you must take care to design each of them well. Otherwise, you risk losing a lot of traffic because of poorly designed pages especially when your site starts to have authority.

Also, keep in mind that 57% of visitors who visit a website with a poorly designed page, do not recommend it. While your conversion rate can increase up to 5.5 with personalized recommendations.

If you want to quickly gain visibility and improve the performance of your website, you need to offer an excellent user experience and some practices can help you.

Best practices to have the best web pages

During the creation of a website, we tend to focus on its aesthetics, while it is its ergonomics that will allow you to improve its conversion rate. This implies that its structuring and design must be designed according to the user experience.

To do this, I have put together some good practices to adopt that will allow you tohave the best pagestaking into account the theme of your website.

Make a projection of your pages

The main advice I can give you is to first make a model of your website. It is a crucial step in the creation of your website because it allows you to take the time to think and propose the best website for your project.

At the end, you will have a precise result which will allow you to be much faster in the design of your website of your website.

Opt for simplicity

Your design is not the element that visitors of your website come to admire. Indeed, they want to find specific information or in some cases, perform a certain action. I suggest that you consider simplicity as a golden rule in order tooffer an easy and pleasant navigation.

To this extent, use only those elements that have a real function for the users and take care to avoid those that can make your site too complex. Otherwise, you risk damaging the user experience, which is likely to have a very significant impact on your website’s performance.

Set up a visual hierarchy

The different elements of your web pages must be well hierarchized and visually organized. Indeed, visitors must automatically pick up the most important elements of the page of the page so that they can, in a simple and fluid way, find what they are looking for.

Therefore, act on aspects such as size, colors, layout, buttons, call to action… to achieve your hierarchy and organization.

Offer an intuitive navigation system

If you don’t have a one-page website, I invite you to make it so that visitors can easily move from one page to another. The idea is that they can move from one point to another without any effort and without wondering where to click.

For this, opt for a very simple tree structure with a maximum of three levels and do not hesitate to use netlinking to link the pages of your website. In addition, make sure that your navigation menu is clearly visible and integrate if possible a navigation menu in the footer of your website.

Your site must be “coherent

In addition to an easy navigation, I invite you to ensure that all the elements of your pages or your entire website are consistent. Indeed, you need a logic and a coherence on each page, but it is also necessary when going from one page to another on your website.

This mainly concerns the graphic elements of your website namely:

• The fonts used ;
• The colors ;
• The illustrations ;
• Etc..

Indeed, it is not necessary to have exactly the same layout on all the website, especially when you have a large number of pages. The main thing is to find the right balance and not to confuse users when they leave one page to another.

Optimize accessibility on different media

Through one of its studies, Mobify found that 30% of Internet users abort a transaction if a website does not adjust properly to their mobile device. And when we know that this technological support is the first one that drains the most internet traffic with a share of 51,6 %it becomes important to look into the subject.

Indeed, the pages of your website must be able toadapt to the size of all screens in order to offer an optimal user experience. In addition, Google pays a lot of attention to the responsiveness of sites since it ranks first those who are at the expense of those who are not.

If you want your website to be responsive, check this article which shows you step by step how to do it.

Respect the conventions or standards of the web

The are already familiar with a certain number of to a certain number of conventions regarding web design and I advise you to respect them. These include :

• Place the logo at the top left or in the center of the page and add the link to the home page;
• Put the main navigation menu at the top or on the left side of the page;
• Configure the links so that they change color when users drag their mouse over them.
• And so on..

Although it is sometimes tempting to want to be original, do not make the mistake of changing these conventions. Indeed, changing them can waste visitors’ time or bring confusion, which is detrimental to the user experience.

Create relevant pages

A web page is created to provide a given information and you must make sure that it is. Indeed, if you plan to add pages to the homepage, it is probably because you want to give more information about your services, your products or a given element. For this, you need to provide answers to points such as:

• Relevance of the page to Internet users;
• What your visitors need to know;
• Information that is likely to make them feel confident;
• Information that will encourage them to take action.

Putting yourself in your visitors’ shoes

Because they feel that websites don’t care about their experience, 68% of visitors don’t convert, according to Vitamin T. When you think about the design of your website, you must put yourself in the shoes of your visitors put yourself in the shoes of your visitors because it is ultimately for them that you do it.

In this logic, you must first know the preferences of your target. But you can always proceed afterwards to tests or ask for feedbacks to improve the user experience. To do this :

• Ask your friends and family for their opinion;
• Ask for feedback from your visitors;
• Analyze the behavior of your visitors with tools such as Crazy Egg ;
• Etc…

After you have a clear idea of the presentation of your page, you can now move to the actual phase of its creation and here are the steps.

Creating the page Twaino SEO Agency: Steps to create your wordpress page

Before creating the second page of the website of my SEO Agency, Twaino.com, I had the opportunity to achieve two things including :

• The mock-up of my website pages;

• The home page of my website.

These two elements will allow me to quickly realize the second page of my site. And this, insofar as the model gives me a precise idea of the result and the homepage will serve me as a model or support.

In addition, I use the theme “Avada” which allows me to have the plugin “Fusion Builder” which will be useful to modify the new page of my website. Also note that for this process, I count three main steps including :

• The creation of a template from the home page
• The creation of blocks for display on medium and large screens
• The creation of blocks for display on small screens

However, you must first log into your Dashboard.

Log in to your website dashboard

To create the second page of your website, you must access the WordPress console.

To do this, simply fill in the “…./wp-admin” in your browser with the URL of your website. Mine is “https://twaino.com/wp-admin”.

On the login page, fill in the boxes with your login information and then validate to access the dashboard.

1) Create a template from the home page

This involves duplicating the structure of your home page in order to use it as a template on a new page.

1-1) Access the components of your home page

On the right sidebar of your Dashboard, click on the “Pages” section and then on “All pages”. You will have access to all the pages of your website among which there is the one with the title ” Home “: it is your home page.

Then click on ” Modify ” which appears as soon as you move the mouse over the title of the page.

On the following page, you have all the components or blocks of your homepage, and this, in the plugin “Fusion Builder”.

1-2) Create a template from the homepage

Make sure the Builder window is active and click on the third icon on the same line on the right side

You will then have five windows on this new interface, namely:

• Demos ;
• Templates ;
• Containers ;
• Columns ;
• Elements.

Select “Templates” if you have not already done so and create a new template from this page.

Name the template in the box provided and click on “Save Template”.

I name mine “Twaino Home Page” and save.

1-3) Create a new page

To create a new page, you can click on the “+ Create” window which is located at the top of the page and next to “View Page”.

You can also create a new page by clicking on the “Add” option in the “Pages” section located on the left sidebar.

Name the new page by writing its title in the first box just below “Add New Page”. I name mine “SEO Agency”.

You will notice that by default, “Fusion Builder” is not active. To activate it, click on the blue button “Edit With Fusion Builder” and its various options will appear.

1-4) Load the saved template on the new page

Click on the third icon on the same line as the “Builder” window. In the “Template” section, you have the template that you have saved and press the “Load” option.

A menu will appear allowing you to choose how to load the template in question. This is :

• Replace all page content: This replaces all the content that already exists on the page;
• Insert above current content: Insert the content above the current content
• Insert below current content: Insert the content below the content.

I take the first option for the template “Twaino Home Page”, which replaces all the content and brings me all the parts I had to create on my home page.

Then I publish it to see how it looks. To do this, click on the blue “Publish” button in the bottom right corner and then click on “Preview”.

At my level, I have the “SEO Agency” page with the URL https://www.twaino.com/agence-seo/and it looks exactly like the home page of my website.

2) Creating blocks for display on medium and large screens

“Fusion Builder” includes the various components of your web page and by scrolling down, you will see several lines in blue. These are the different blocks of the page and the changes you make at this level will be taken into account in the final rendering.

Moreover, since you have made a duplication, you only have to make modifications and not create each block from the beginning.

Also, I had the opportunity to create the “slider revolution” of this new page and I will simply load it. Indeed, it is the part of your web page that comes just below the navigation menu. It appears to users without them having to scroll to the bottom of the page.

If you want to make it, you can simply modify it from your homepage template. However, if you don’t know how to do that, I invite you to check out the creation of the ” Slider Revolution “. Follow the steps to create your own for each of your pages.

2-1) Modification of the first block

There are several blocks on for this template, including the divider block that I want to keep. In this case, I leave it and I will modify the other blocks taking into account my model.

I unfold the content of the second block “Agency” by clicking on the small arrow on the right.

2-1-1) Modify the text

To modify the text, click on the edit icon that appears when you drag the cursor over the text cell.

If you move down a little bit, you will see the text field where you can enter the new text and do the formatting.

Then click on “Save” to save the new text.

2-1-2) Insert an image

I had the opportunity to make all the images I will use in advance and you can do the same to move faster.

Click on the edit icon that appears when you drag the cursor over the image cell next to the text cell.

On the interface that appears, click on the “Edit” button located just below the old image.

You then have your “Media Library” in which you can directly select an image.

You also have the option of importing them by clicking on the “Upload Files” window located right next to the “Media Library”.

Press the “Select Files” button and browse your computer for the images you want.

At this point, rename your images, I name mine:

• Twaino the SEO Gardeners;
• SEO natural referencing ;
• Clients;

• Google expertise ;

• Alexandre MAROTEL ;
• Mariana Seiko Sakurada ;
• Join us.

Then, I insert the image of “Twaino the SEO gardeners” and I save to insert the second image in the third cell located on the second line

I also proceed to insert the second text “An excellent SEO” taking care to make the necessary formatting.

2-1-3) Insert other lines of text and images

At the layout level, there is a third line with an image and text. To save time at this level, duplicate the previous cells.

To do this, click on the second icon which follows directly after the editing icon and which appears when you drag the mouse over the cell concerned.

At my level, I duplicate a text cell and another image cell that I move to the bottom. I use the same principle as before to change the text and the image. So I have the third line which includes :

• The text: An SEO agency that listens to its clients;
• The corresponding image.

I still create a fourth line with :

• The text: A Google expertise;
• The corresponding image.

Save the changes and click on “Preview” to see the rendering. The rendering is good except for the “Google” image which is a bit too big.

2-1-4) Adjust the size of your images

When you notice that the size of an image is a little too big, click on the edit icon of its cell and press the “Edit” button.

On your “Media Library” interface, you’ll see the “Size” option to the right and just above the “Insert into Page” button. Choose a default item that might fit what you want.

At my level, I choose the “400 * 265” size from Avada. The rendering is much better and I take the opportunity to center the image.

For this last action, click on the edit icon and go to the “Align” option then select “Center” and save.

I also take care to center all the other images and reduce their size.

2-2) Add the second block

Just below the “Agency” block, I will add the “My Team” block. To do this, I rename the block that follows to “Our Team”. In this block, I modify the text cell already present by inserting the title “Our Team” with the accompanying text. I keep the same formatting since I want to have the same result.

I’m now going to insert the two images that follow each other vertically with their text.

2-2-1) Insert an image

I take the cell that I will use for my image and I delete all the other cells that will not be used.

Then I set its proportion to “1/3” by pressing the first icon in the upper right corner of the cell.

To add the image, click on “+ Element” in the cell and on the new page, look for the “Image” element. Then click on the “Image” button that will appear and press the “Select image” button that appears on the new interface. The “Media Library” will appear and you can choose the image you want.

2-2-2) Insert a text

To insert the text that follows this image, duplicate the cell and give it a proportion “2/3″. Then click on ” + Element ” and look for the ” Text ” button.

Click on the element and on the configuration interface that follows, add your text and proceed with its formatting.

For the next image and its text, simply duplicate the previous ones and proceed with the changes.

At this level, I have :

• My image and a text that describes me: ” Alexandre MAROTEL,……… “
• Mariana’s image and a text that describes her: “Mariana Seiko Sakurada,……”.

Save the modifications and make a preview to see the rendering.

2-3) Edit a block with a background color and a button

In order to save time, I invite you to take the old blocks that look the most like the ones you want to create. At my level, the “Join Us” block that I want to create has the same features as the “BLOG” of the template.

So I choose to modify the “BLOG” block and I delete the intermediate blocks that I no longer need. These are, for example, :

• Services;
• Mobile Services ;
• Separator.

2-3-1) Insert the text and image

For “Join Us”, there are three elements to insert:

• An image;
• A text with a title;
• A button.

First, I delete the cells I don’t need.

I insert my text by modifying the old content with the same principle.

I also change the image and I take care to give the proportion of ” ½ ” to each of the two cells.

Then I arrange the image cell on the left and the text cell on the right.

2-3-2) Insert a button

To insert the button, click on “+ Element” located on the text cell and search for the button element using the search bar. Click on ” Button ” which leads you to the configuration interface.

By default you have the options of the “General” window and if you already have the link of your button, you can put it in the box reserved for this purpose, in the “Button URL” option.

Enter the text that will be displayed on the button with the “Button Text” option.

Under “Alignment” select “Center” so that the text is centered on the button.

2-3-3) Add space between the button and the text

The distance between the text and the button is very small, so I’m going to put some distance between them. To do this, I will create a separator that will be placed between these two elements.

So click on ” + Element ” and look for the ” Separator ” element, then click on its button. On the interface that comes up, select for the “Style” option, the “No Style” menu in the “General” window.

Then select the “Design” window and in “Margin”, set the distance you want. I enter a value of 5% and place the separator between the button and the text.

I check afterwards if the rendering is pleasant by clicking on “Preview”, which is the case.

3) Creating the blocks for display on small screens

Note that the display on computers is not always optimized for cell phones. For this, you need to create blocks that will be dedicated to a mobile optimized display. You can use my my article on the subject which gives much more details.

To check the mobile display of the page, you can :

• Use your cell phone to see directly what it looks like;
• Reduce your browser tab to about “2/3” the width of your computer screen.

3-1) Duplicate and modify the first block

To go faster, just duplicate the blocks you created for the default view.

In my case, I duplicate the “Agency” block and rename the second one “Mobile Agency”. For this block that has just been created, I modify it by clicking on the small arrow on the right to display its content.

I then reorganize the texts and images of the block by separating each image with texts.

Also, I click on the icon for editing the text cells in order to reduce their size.

To do this, I set the size of the titles to “40 pixels” instead of “50 pixels”.

3-2) Activate the display on mobile

To see the changes made, you must activate the display on mobile. So click on the block’s edit icon and in the “General” window, scroll down to the “Container Visibility” level to see the three display options:

• Small Screen: For display on small screen media such as phones;
• Medium Screen: For media with medium screens such as tablets;
• Large Screen: For media with large screens like computers.

Select the first one and take care to deselect the two others. You will have the first option that becomes blue and the other two gray.

This action allows you to display this configuration only on small screens like phones.

Then save and make a preview to see the rendering.

3-3) Create the second mobile block

I want to create a new mobile block for “Our team”. To do this, I duplicate it and put it in phone mode with the same method as before.

At this point, my image is already too big for a phone display. To make it small, I’ll insert it directly into the cell of the text that accompanies it.

So click on the edit icon for the text cell and just above the text field, press the “Add Media” button.

Then choose the image you want and I take my image and align it to the left, taking care to reduce its size to “80 pixels”.

However, move the text just below the image in the field so that it looks nice. I do the same thing with the second image and its text while taking care to activate the display on mobile.

Also, the last block “Mobile Recruitment” already has a good layout and I don’t need to change it anymore. All I need to do is activate the mobile display.

4) Check your changes

After all these changes, take the time to check the page’s display on different media. This will allow you to detect any problems and make the necessary corrections.

And that’s it, you have just created the second page of your website.

Conclusion

After the creation of the home page, you must generally create the other pages of your website. These pages will provide your visitors with additional information about your products, your services or even present the articles of your blog. And once they are indexed by search engines, these pages become the gateway for visitors. For this reason, you need to make sure that each of them is well designed and offers an optimal user experience. In order to achieve this quickly, I suggest that you first create the perfect homepage that you will simply duplicate later on to use as a template.

See you soon for another article!