Page Visualization

The "Page Visualization" module is your portal's ultimate command center. It gives publishers the power to instantly transform the website's look, seamlessly manage widgets, and fine-tune the advertising grid - all from one intuitive interface.

The module is organized into five main tabs:

  1. Templates: A list of templates for specific page types.
  2. Template Appearance: Default appearance settings for templates.
  3. Header: Tools for editing the appearance and content of the Header.
  4. Footer: Tools for editing the appearance and content of the Footer.
  5. Homepage Planner, which allows for better control over the order, timing, and specific articles displayed on the homepage in widgets such as: Slider, News, Popular, and Most Read.

Templates The CMS 4media system allows for the personalization of the appearance of every page type on the portal (e.g., article pages, company directory lists, subpages, etc.). Thanks to this, the publisher has complete influence over which widgets appear in a given location, deciding on the number of widgets, their content, appearance, and layout on the page.


Homepage Widget Configuration

Managing the homepage takes place in the "Page Visualization" module ("Templates" -> "Homepage"). New components are added using the "Add element" button, selecting them from the list (e.g., Weather, News). The column layout (e.g., 50/50 or the new layouts: 1/3 and 3/4, or 1/4 and 3/4) is defined within the widget panel, and their arrangement is changed using the "drag and drop" method after clicking "Change position". Every change must be confirmed with the "Apply" button, and then "Save" for the entire portal.


Mobile View Management 

Editing the mobile version is launched in "Page Visualization" via the "Change position on mobile devices" button. This allows for independent vertical sorting of elements. To hide an element that doesn't fit a small screen, you must uncheck the "Visible on mobile devices" icon. For full optimization, you can duplicate a widget and set the original to be visible only on desktop (monitor icon) and the copy only on mobile (phone icon).


Advanced Element Styling

To go beyond standard settings, enter the editing mode of a specific widget in the template and click the "Widget appearance" button (top right corner). This opens advanced options, such as the "Header style" or "Element content" sections. This enables changing background colors, adding shadows, editing typography, and defining visual effects on hover.


Ad Grid Implementation

Banner slots (type B and C) are defined in the "Ad campaigns" or "CMS4Media Portals" module. Then, in "Page Visualization", drag the named ad slot into the template structure. Managing the graphics themselves is done in the "Ads" module (uploading files), and their broadcasting is launched by creating a new campaign and assigning "ad inserts" to the previously created slots.


Header Personalization

Visual changes (logo, bar colors, search bar style) are made in the "Page Visualization" module under the "Header" tab. However, content is managed separately: the menu structure is built in the "Categories" module ("Main menu" tab), and functional icons (e.g., social media) are edited in the "Top Menu" module, where you can manage their status and appearance.


Footer Editing

Configuration is performed in the bottom section of the "Page Visualization" module. There, you can enable "Footer menu", "Address data", or the Paywall module, as well as set the background (solid or gradient). For footer links to work correctly, you must first create appropriate content in the "Subpages" module, and then link them in the "Categories" module, from which the footer pulls the navigation structure. Additionally, the system allows you to disable the default layout and replace it with your own custom HTML code, available for both desktop and mobile versions.

More about the author/authors:
Share
Rate