Every report can look the way you want. The settings change the report you have open, and each report remembers its own look, so the Overview, the AI searches report and every site can all be styled differently.
Edit mode
A report can be changed only in edit mode. Press the blue Edit mode button in the top right corner to turn it on. The settings open beside the report, and now a click on a section picks it, so you can change it, move it and drag its handles. The report’s title, text and logo can be clicked to change them too.
Outside edit mode the report just does what it says: a click does not pick anything, and a click on a widget shows that number’s history (see Dashboards & reports). Press Exit edit mode, the close button of the settings or Esc to leave edit mode. It stays on while you open other reports, so you can style several one after another.
Each group in the settings has its own Reset button, which returns that group to its default.
Widgets
Choose what each of the four widgets shows:
| Setting | What it does |
|---|---|
| Show graph | The small graph of how the number moved. |
| Show comparison | The change compared with the dates you compare with. |
| Show title | The name of the number, such as Clicks. |
| Show icon | A small icon next to the title. |
| Show data source | The name of where the number comes from. |
Graph position sets whether the graph is below, to the left or to the right of the number, and Gap sets the space between the widgets. Widgets per row sets how many are side by side: four unless you change it (one to six). Others start a new row, and a narrow report has fewer on a row. Card style puts each widget on a surface of its own, with a line round it and rounded corners; the graph then reaches the edges at the bottom of the card. In edit mode, drag a widget to move it to another place, and click its title to rename it. Under Widgets, at the top, you also choose which widgets are on the page: the two of the positions, Position changes and First positions, are there for a site’s report (see Dashboards & reports).
Tables
Every table has its own switches, but a table has only the ones that mean something for it. The first table says what each switch does, the second which table has which.
| Setting | What it does |
|---|---|
| Show title | The heading above the table. |
| Show graphs | The small trend lines in the cells. |
| Show comparison | The arrows and changes after the numbers. |
| Show filters and export | The buttons above the table: Filters, Columns and Export CSV on the search queries table; Filters and Export CSV on the websites table; Export CSV alone on the others. |
| Show tabs | The row of tabs over a table of queries – all of them, ranking, type, worth a look, new & lost, and your lists. Off, the table shows every query. It needs Show filters and export to be on too. |
| Show page controls | The page size and the arrows under the table. |
| Show favicons | A website’s own small icon beside its name (the websites table). |
| Table | Switches it has |
|---|---|
| Search queries, and AI searches on a site’s Overview | Title, graphs, comparison, filters and export, tabs and page controls |
| Websites (the Overview of all your sites) | Title, graphs, comparison, filters and export, favicons |
| AI searches report, Top pages, Countries, Search appearance | Title, filters and export, page controls |
| Devices | Title, filters and export |
Switch them off for a calmer report, for example in a report you share with a client.
Look of a table
At the top of a table’s settings are presets: ready-made looks, each with a small picture of itself, so you do not have to set everything one by one.
| Preset | What it looks like |
|---|---|
| Plain | Just the text, no lines or stripes. |
| Lines | A thin line between the rows. |
| Striped | Every other row tinted. This is how every table starts. |
| Boxed | A frame, lines between the rows and a tinted header. |
| Brand | The accent color on the header, with stripes and a frame. |
| Spreadsheet | Grid lines, a frame and a tinted header, close together. |
| Compact | Small text and tight rows: as many rows as possible. |
| Easy to read | Large text, roomy rows and stripes. |
A preset only changes the look: what the table shows stays as it is. After picking one you can fine-tune it under Look. Plain takes you back to a table with no lines at all, and Reset under Look to the striped look every table starts with. A table whose look you set before keeps it.
Apply to all tables, under the presets, gives the other tables of the same report this table’s look (lines, stripes, header, row height, text size and the rest). Each table keeps what it shows: its title, graphs, filters and page controls. It asks first, and is dimmed when the other tables already look the same.
The Look group of a table (all of them but the devices list) is for readability and for the brand. It is drawn in the colors of the section the table is in, so a dark section gets dark stripes and the section’s accent color paints the header.
| Setting | What it does |
|---|---|
| Lines | None, a line between the rows, or a grid with lines between the columns too. |
| Alternating row colors | Every other row has a faint background, so the eye can follow a row across a wide table. |
| Frame around the table | A rounded line round the whole table. |
| Header row | Plain, tinted (a tint of the text color) or accent (the section’s accent color, with light or dark text, whichever reads). |
| Row height | Compact, normal or roomy: the space above and below the text of a row. |
| Text size | Small, medium or large. |
| Highlight the row under the pointer | Lights the row the pointer is on. |
A table with lines, stripes, a frame or a colored header fills the width of its section. Without them it is only as wide as its content, with the query and the page’s address taking more room the wider the report is. The numbers are always aligned to the right, and the query and the page to the left.
Tables in a narrow section
A table fits the room it has, so two tables side by side, a small window or a phone do not scroll sideways. The less room, the more it gives up, in this order: the small graphs in the search queries table; then the link to Google; then the intent; then the top ranking page of a query (the labels of the columns wrap too); then, under about half a report, each change goes under its number and the arrows of the columns that are not sorted are left out (the column’s menu sorts just the same). On a phone held upright the query, page or country wraps onto more lines, the boxes to tick queries are left out while you work with queries (the stars stay), and so is the CTR of the pages, countries and search appearances (the clicks and impressions it comes from are still there). The websites table of the Overview gives up its small graphs first and then puts each change under its number. With the large text size each step comes a little sooner. Only a screen narrower than any phone sold today would still scroll a table sideways.
Design
Choose a font for the headings and a font for the text. The fonts are taken from Google Fonts, so there are plenty to pick from.
Colors
Four colors define a report:
- Report background
- Report accent, used for highlights and graphs
- Report heading
- Report text
Start from a preset – Light, Dark or Alternating, each shown as a small picture of a report in its colors – and change any color from there. The scrollbars follow your colors as well.
The Alternating preset
Alternating is a report that shows what can be changed. Every other section is dark and every other one light, starting with the hero. Two tables share a row in a checkerboard of dark and light (the queries keep a row of their own), the hero is centered and roomy, the history chart is wider than the report, and the headings use a serif font. Everything it sets is an ordinary setting of the page, the sections and the design, so you can change any of it afterwards.
It sets the colors, width and space of the sections that are on the page, and their rows. Light and Dark take it back: the section colors, the rows, the width and space, the centered hero and the heading font go back as they were shipped. A background image you gave a section stays.
Sections and the header
The parts of a report are sections, and each section has its own settings. In edit mode, click a section to pick it: it is outlined, its name appears in a tab at its top-left corner, and its settings open in the sidebar. Pointing at a section does not outline it; only a click does. You can hide a section with Show on the page.
The header of the report can show your own logo: choose the logo image, its size and its alignment: left, center or right. The alignment is also that of the title and the text.
The bar at the top of the window, with the date picker and the Edit mode button, is fixed: it stays in view while the report scrolls under it. It takes the report’s colors, so a dark report has a dark bar.
In edit mode, the picked section shows a fine grey outline, its space above and below lightly hatched, and small light handles for the space and the width, so the report itself stays what you look at. A widget’s remove button turns red only when you point at it.
Adding sections
You are not limited to the sections a report comes with. In edit mode, point between two sections: a line across the page and a round + button appear (there is one at the top of the page and one under the last section, too). Press the + and choose what to add right there:
| Choice | What it is |
|---|---|
| Text | A heading and a few paragraphs. Click the text in the report to write it where it is: Enter starts a new paragraph, Ctrl+Enter saves. In the sidebar you set its alignment and size. |
| Image | A picture, such as a logo, a screenshot or a photo: its width, alignment, a description for those who cannot see it, and a link if a click on it should go somewhere. |
| Button | A link such as “Book a call”: its label, its address, filled or outline, its alignment, and whether it opens in a new tab. It takes the accent color of the section. |
| Space | Empty room between two sections. In edit mode it is marked with a hatching and its height. |
| Divider | A line across the page: its thickness, its width and whether it is solid, dashed or dotted. |
| Bring back | A section of the report that is not on the page now (one you hid, or a history chart such as Clicks history), put back where you pressed the +. |
A new section is picked straight away, so its settings are open. A new text starts empty: the grey words in it only say what to write, and they never show in the report. A section with nothing in it yet (a text not written, an image not added, a button without a link) is only there in edit mode: whoever reads the report sees no gap where it is. It is a section like any other: drag it, put it beside another one, give it its own colors, a background image, its own width and space, or hide it with Show on the page. Delete this section, at the bottom of its settings, takes it away for good (it asks first). A page can have 40 sections of its own. Links can be web addresses (https://), e-mail (mailto:) or phone (tel:) links; anything else is not accepted.
Moving a section
Drag the picked section by the grip at the left end of its tab (or by its name) and drop it where you want it:
- Above or below another section: drop it on the upper or the lower half of that section. A line shows where it will land.
- Beside another section: drop it on the left or the right side of that section, the outer third. The two then share the row, half each. A row has two sections at most.
The page scrolls along when you hold the section near the top or the bottom of the window, and Esc puts it back. You can also move a section with the arrows on its tab (a section in a pair steps out of it, to a row of its own), by dragging it in the sidebar’s list of sections, or with the Side by side group in its settings: Beside the section above or below, and Put on its own row. On a narrow screen, two sections that share a row stack, one above the other.
If you hide one of two sections that share a row, the other one takes the whole row. They go back beside each other when you show it again.
Taking a section off the page
The picked section’s tab has a trash button after the arrows. On one of the report’s own sections it removes it from the page – nothing is lost: the + brings it back (Bring back). On a section you made yourself it deletes it, after asking “Delete?” in the tab itself: Delete or Keep.
The “+” and the handles
The + between two sections shows when the pointer is in the middle of the edge between them (and always on a touch screen). The handles of the picked section’s space above and below sit at the right of the section, so the two never get in each other’s way. The widgets’ Add widget opens a list of the widgets that are not on the page, in the same look as the other menus.
The section and its content
A section is a band right across the page, from one edge to the other. Its colors and its background cover all of it. What is in the section, its content, sits in a box in the middle of the band. When a section is picked, the band is outlined and the box of its content is dashed.
Width
The content is as wide as the report by default. To change that, use the Content width slider in the section’s Size settings, or drag one of the handles on the sides of the content. With the keyboard, focus a handle and press the left or right arrow key to change the width by one percent, or by ten with Shift.
- Narrower: from 30% of the report’s width. Narrower content sits in the middle; Position puts it on the left or the right side of the report instead.
- Wider: past 100% the content reaches out of the report on both sides, as far as the page goes: the end of the slider is Edge to edge. The report width in the Design settings is only the default; the content of a section can be as wide as the window, while the section itself always is.
What is in the content fits to its width. Two sections that share a row have half each (each section’s colors and background cover its half of the page), and their content sits next to the middle, so together it is as wide as the report.
Space above and below
Every section has some space above and below its content. Change it with the Space above and Space below sliders, or drag the handles in the report: the space is lightly hatched while the section is picked, the top handle sits where the content starts and the bottom one where the section ends. Drag either one down to make more space (up for less); arrow keys move a handle a pixel at a time, or ten with Shift.
Link space above and below is on to start with: the two spaces are then one, and changing either – with a slider or a handle – changes both. Switch it off to set one of them alone. A section whose two spaces you made different keeps them apart until you link them again (linking gives the space below the size of the space above). Reset in the Size group puts the space back as every section has it.
The space you set is all there on a screen 1000 pixels wide or wider. On a narrower one it shrinks with the screen, down to half of it (a space of 32 pixels or less stays as it is), so a roomy layout on a computer doesn’t leave half of a phone’s screen empty. The same goes for the height of a Space section, and the headings of your own texts are a little smaller on a phone.
On a phone or a tablet
Reports work on phones and tablets as they are; nothing needs to be set for them. On a narrow screen (under 900 pixels) the navigation slides over the page instead of pushing it aside: tap outside it, press Esc or pick a page to close it. On a phone, Edit mode opens the settings as a sheet over the lower part of the screen, with the report above it: tap a section to pick it, and the page scrolls so the section you pick in the list comes into view. On a touch screen the controls have room for a finger, and the + between the sections is always there in edit mode, not only under a pointer.
Colors
A section can have colors of its own: Background, Accent, Heading and Text. Switch one on and choose the color; a color you leave off is the report’s own. They cover the whole section, edge to edge, and everything inside follows them: its text, tables, charts and the shades made from them, so a dark section works in a light report.
Background
Every section can have a Background image, behind its content and across the whole band, on top of its background color (see Colors):
- Image size: cover the section, fit the whole image inside it, or keep its original size.
- Image position: one of nine places.
- Image repeat: no repeat, tile it, or repeat it across or down.
- Overlay color and Overlay opacity: a color laid over the whole background, such as black at 40%, to keep text readable on a busy image. At 0% there is no overlay.
Reset in each group puts its settings back as they were.
Printing and PDF
The printer button in the bar at the top prints the report – or saves it as a PDF: choose Save as PDF in the browser’s print window. The printed report keeps its own look: its colors and backgrounds, images, cards, fonts and charts, edge to edge on the page, so a dark report is dark on paper too. The period its numbers cover is at the top. What belongs to the app is left out: the navigation, the bar, the settings and edit mode’s handles, and the controls of the tables and charts (tabs, filters, page buttons, stars and boxes, the links to Google). A widget, a chart, a recommendation or a row of a table is not cut in two at a page break. The layout is the one for a page that wide: three widgets to a row at most, and the tables give up their least needed columns as they would in a narrow window. In the print window you can turn the page sideways (Landscape) for more room.
Client view
The client view button, beside the printer, shows the report alone, as a client sees it: without the navigation, the settings and the tools to work with the queries (the boxes to tick, the stars, filters and export, the links to Google). The bar at the top only says the period the numbers cover. The numbers still open their history, and the tables still sort and page. Exit client view, or Esc, brings the app back. It is meant for showing a report on your screen, for example in a meeting; links that clients can open themselves come with sharing (see Sharing & white label).
The look of the app itself
The app’s own menus, panels and buttons are in Susanna Dashboard’s colors and fonts, with its dog in the middle of the bar at the top. The Dark mode switch at the bottom of the left sidebar changes them to dark. Neither changes the colors or fonts of your reports, which follow the settings above.
Tip: to hand a client a report that looks like it comes from your agency, combine your own colors and fonts with a logo. See Sharing & white label.