PHP-Fusion 9 - Mobile Single Page

This article describes how to make the most simple site on CMS PHP-Fusion 9, sharpened for mobile devices - smartphones and tablets. The so-called "one-page" site, or a business card site, or a landing site ... I will tell you in detail where there may be bugs, errors, how to avoid this and get the best result.

- We will focus primarily on smartphones, if everything will be fine on them, then on tablets and even more so.

- The term "one-page site" does not mean at all that it physically consists of one page - pages can be 2, 3, or 100.

+ Click on the photo to enlarge!

Stage 1

So, a freshly installed site on the PHP-Fusion 9 engine with a default theme. It looks normal on a desktop PC or on a laptop, it is convenient for visitors on it ... At the top there is a heading with a logo ... The left column is navigation points, they are also heading in the heading ... Below is the information panel about users and guests on the site. On the right is the authorization panel - the entrance to the site. In the middle of the main page is a greeting. Below is the basement of the site, there again the site logo and copyright. This is the standard block design of the PHP-Fusion site. Themes can change the appearance a little, but the essence usually remains. All plugins are disabled here, if we enable them, new panels and menu items will appear - Articles, Latest Articles, News, Blogs, Forum ... and so on. We do not need this at the moment. Now we are making a one-page business card site.

We look how it will look on the smartphone screen. Yes, the site is adapted for mobile devices, but in its present form it is not suitable. To the right of the logo, the three bars is a collapsible navigation menu, and at the same time, under the logo, the Navigation panel ... it is absolutely not needed here. Then comes the Users panel on the site - this is the more unnecessary element for a mobile site. And just now the panel is coming - Welcome, which should be immediately below the logo and in which you can indicate our basic information so that the user immediately sees it as it opens the site on his smartphone. And under this panel there is again an authorization panel or user data, and even lower than the basement of the site ... All this is cumbersome, difficult, inconvenient. The likelihood that a guest will immediately leave our site is almost 100%.

Stage 2

We go to the Adminpanel site, here we select the System - Panels. Here we see the current panels: on the left, Navigation, RSS - it is disabled, and Online Users - Users on the site. On the right is User Info - Information about the user, which is also the Login to the site. In the center is the Welcome Message panel.

Disable unnecessary panels - Click on Navigation, select - Disable in the drop-down menu. So turn off everything except the central panel of Welcome Message.

Now we open the site and see what happened. Now our main page looks like this: there are no columns on the left and right, navigation in the header of the site. Welcome panel in the middle (and we will work with it).

Of course, we are watching how the site will now be displayed on the smartphone. Now it’s much better ... We try to click on these three stripes near the logo - the navigation menu opens. Okay.

Again Adminpanel - System - Panels. Click on Welcome Message - Change.

The panel management interface opens - directly configuring the Welcome Message panel. The name and file of the panel are indicated here - it’s better not to touch it. Panel Placement - Center at the top. You can move it anywhere, but it will be terrible. Access - Guest. That's right - the panel is visible to everyone, as it should be. The language of the panel is Russian (if you have a different language for the site, or if several languages ​​are installed, put the right one). Then - where will this panel be displayed? Since we are doing a one-page page, we indicate - display only on the main page. Carefully and competently fill in the fields - Description of the site and Keywords, Search engines will find us by them. If you changed something, click on Save.

Now we need to fill in the field in the welcome panel. Adminpanel - Settings - Basic settings. Here, of course, we indicate the name of the site, for example, "The best, white and fluffy!", Then indicate your email address, your name is a nickname ... The front page is usually home.php. We indicate the protocol of your site http or https, your domain name of the site - it is already put down by default ... Well - Greetings to visitors, here we will write!

By the way, on this page of the Main Settings, we turn off the left and right panel - columns in general. We find - Exclude left panels: - register home.php here, we find Exclude right panels: home.php. Save changes.

Now we write a short greeting, for example: "Welcome to our website! We provide services for laying brick, reading poetry and flying into space during dreams ... Our phones: +7 777 888 99-99", in fact, for A one-page website focused on mobile visitors has a lot of text and is not needed: briefly about your product and services (remember that these are also keywords), phones, Skype, WhatsApp and other things that you need to contact you. Well, it is desirable to have one picture - very many cling to the picture and then read the text ... so the picture is an important element!

We take a picture, in the example that I describe - this is a 772x360 photo. Be sure to optimize it - for example, in Photoshop, save it for the Web, and with 320 Kb we get 56 Kb.

Then in the admin panel, open the Content - Images. Here - upload the image, upload the photo to the site.

Then go to the first tab - Images, here our photo - destination-1.jpg

Click - View image. The uploaded photo will open. Right-click on it, select "Copy image link", or "Copy image URL" (in different browsers in different ways).

Now go back to Settings - Basic Settings. We create a greeting for visitors ... Yeah, it's not so easy! Of course, we will enter the text without problems, but its formatting ... The built-in editor is primitive and has some kind of curve! Paste video is, insert image - no!

Therefore, we open a third-party html editor - for example, Frontpage. And in it we type the text, insert the picture, format. The code is as follows:

<h1 align="center">Welcome to our website!</h1>

<p align="center">We provide services for bricklaying, reading poetry and flying into space during dreams ...</p>

<p align="center">

<img src="https://YOUR_WEBSITE/images/destination-1.jpg" longdesc="With us more fun and faster!" alt="We are the best white and fluffy!"></p>

<p align="center">Our phones: +7 777 888 99-99</p>

And so we copied it from the editor - everything between the <body> and </body> tags, and pasted it onto our site. Saved.

We open the site in a browser and see what happened. On the computer, everything seems to be fine. The picture in the middle, the text ... of course, you can refine it a little ...

We look how the site now looks on a smartphone. Everything works, but our photo destroys the integrity of the site - it does not scale, because horizontal scrolling appears below. This means - no good! Anyway - in capital letters "Welcome" is completely out of place!

Stage 3

We refuse to use the ready-made Welcome Message welcome panel. Adminpanel - System - Panels, right-click on the Welcome Message and turn it off. Click - Add panel. Fill in the fields: Panel name - Greeting, for example, it still will not be visible. Panel file - nothing. Panel type - display only on the main page. Access - Guest, panel language - (language of your site).

Below is the contents of the panel. As you can see, the editor here is much richer than in the first case ... If we paste the code that we did earlier in Front Page, the result will be the same - the picture will break the integrity of the site ... The code for inserting the picture in FrontPage is to blame ... I then highlighted with a yellow stripe.

Therefore, we type the text of the Greetings in a new way. The inscription Welcome to our site - highlighted with the tags <h1> and <center> - the title and alignment in the middle. Short description - We provide services ... Highlighted by <h2> and again <center> tags.

We insert the image - in the editor we see the Insert image, click on it and a list of downloaded images opens. There we select ours - destination-1.jpg - in the appeared code you need to fill in the value of the alt = tag (image title). I introduce again - "We are the best white and fluffy!". We also highlight the image with the <center> tag.

Phone - you need to make it clickable. So that a visitor, clicking on it on your site, starts a call - this is an important point! In the screenshot you can see how this is done (I have a conditional phone number).

<a href='tel:+77778889999' target='_blank'>Call us +7 777 888 99 99</a>

And this again stands out with the <h2> tags and again with <center> ... We save everything.

The panel should also turn on! Do not forget.

Here is a general view of the panel we created ...

We open the site in a computer browser - everything is displayed normally. When you hover over a phone number, a phone number appears in the lower left corner ...

We open the website on the smartphone. Everything works perfectly. The image is scaled, and the site does not fall apart. The text is highlighted with normal tags, size, color - all this is selected individually. The phone is clickable - clicking, it immediately dials and calls the subscriber ...

It remains only this logo below - but in other design themes it is not ... And copyright. You can remove it, generally remove the entire basement, or clean it and leave there only the counters and codes from Yandex and Google ... But - copyright is not allowed to remove.

In the end

- All plugins are disabled here, they are not needed for this type of site (but they can be turned on at any time). The site has a Home page, an authorization or registration page, and feedback.

- You can create separate pages - for example, for a detailed description of a product or service, price, catalog, etc. Then hyperlinks from the Main page are given to these separate pages. The design can be anything - there is a wide field for imagination! You can insert small pictures, tables, videos ...

- In some topics, the inscription will appear at the bottom of the Basement: Content modules are not installed. Please install at least one module for text content or change the start page in the “Basic Settings” section. I have not yet found a way to deal with this. Therefore, you will have to include, for example, News, or Articles. However, for the site this only benefits. If you post some news, Search Engines will appreciate this favorably.

This is where I finish.

Mikhail Dmitrienko - WASP.kz - 2020.