This article is the beginning of a three-part series of tutorials that will describe the admin panels we develop for our projects. This one describes the admin panel of an information website based on ours.
Our website is built on sulu cms, a content management system based on the Symfony framework.
The admin panel has several main sections: page management (web space), snippets, media management, users, and settings. We have also developed a separate module that collects all feedback from the website.
This module is the main one in the admin panel, because the basic content is edited in it. On the screenshot, you can see that there are three columns on the page: the first one contains only one element - Skylex. This is your website, and you can edit the content of the main page here. You can have several websites that will be managed from one admin panel, we currently have only one. The next column contains a list of next-level pages, for example, "About Us" and so on, as many subpages as you need.
The system automatically understands how pages are nested within each other and generates page breadcrumbs and URLs accordingly.
You can also see that there is a switch between languages in the upper right corner. SUlu cms allows you to add several language versions for each website, and you can customize your links for each of them. For example, for the "About us" page for the Ukrainian version of the site, the link will be "/pro-nas", but if you add an English version, the link to the "About us" page may be different - "/en/about-us". The prefix "/en" can be any, but it must be unique for one localization.
The module for editing a single page has several controls. Let's take a look at the actions for the entire page. In the page header, you can see that you can "Save as Draft", "Save and Publish" or remove from publication, select a page template, delete the entire page or only the current localization, copy content from the main localization to the current one.
To customize the page, you can use additional actions: SEO, Extraction and taxonomy, Settings, Access rights, Event.
In this form, you can configure standard meta tags, set the "no index" and "no-follow" tags for the page, and remove the page from the sitemap.
By the way, the system automatically adds all published pages on all locales to the sitemap.xml.
In this form, you can customize the information that is shown in the preview when the page is displayed in lists or other blocks. You can also select the categories to which the page belongs, specify labels, and add media for the preview.
The main thing that may interest you in the settings is the ability to specify which menus a page will be displayed in. In our case, we have the Main Menu and the Footer Menu. The number of such menus is unlimited, programmers can add many different menus if it is necessary for the design of the website, and you, accordingly, can specify pages for these menus.
On this page, you can change access rights for each user group. We did this when we sent a page to a client for proofreading before publishing it. We created a separate user who had no access other than to view the page and provided him or her with a link to the preview. Later, we closed access to the website for this user.
On this page, you can see all the events that have happened to the page, the name of the user who performed an action with the page, and the date when it happened.
The content of the page is edited within blocks. In general, the very idea of sulu cms is that all content in the admin panel can be presented in separate blocks. There can be a lot of different blocks, they can be a part of other ones, they can be added to the lists of blocks. Within one block you can use many different widgets, for example, "text fields", "single page selection", "multiple media selection", "text with editor", and you can create your own lists with your own data in them. By combining all these features, we create an admin panel that does not require any programming knowledge from the content manager, no understanding of HTML or CSS, no knowledge of how FTP works, because everything is done as simply as possible with the mouse. This gives developers a clearer project markup, which reduces the number of errors and "file polishing". In the picture below you can see how many blocks we have on our website. For example, in the Aquamen project, there are 56 such blocks, and some of them contain other ones, but none of the content on the Aquamen website is edited through code, everything is done with the mouse.
Websites often have information that is repeated on every page. For example, information about opening hours, address, phone number, and a link to the User Agreement. For this purpose, we use snippets. This is a separate type of blocks on the website where you can customize the content in the same way as the page content. Then the information from the snippets will be used on all pages. Snippet content, just like page content, can be translated into several language versions of the website.
The Media module is designed to manage all static content on the website - images, videos, documents.
This module has the ability to update a picture or document, i.e. change its version, which allows you to automatically change the version of the file on the entire website. The file will be automatically updated in all places where it is used. You can view the history of changes for each file.
In the settings, you can do the following: set user roles and role permissions; manage page categories; control page labels; handle redirects (301, 302, 410); view site-wide events; and view deleted content (like in the trash on your computer).
We can develop informational websites with user-friendly admin panels that allow administrators to manage content in a comfortable and understandable way. Our websites are SEO optimized and have all the necessary tools to manage SEO optimization.
If you enjoyed this article, you can check out the website that was built on the basis of the same technologies as those described in this one.
Or write to us using the feedback form and we will provide you with more detailed information.
We use cookies to improve the site's performance. By staying on our website, you agree to the terms of use of cookies.