Changing front page content.
The landing page of any website is critical. It's the first impression you give a site visitor, and it may be the deciding factor if that site visitor continues to explore the content on your site or if they move on to the next thing. The content on your front page should be eye-catching to get site visitors interested in exploring more. As a Site Manager, you can customize the content of the front page to be engaging and timely.
Using the In-Place Editor.
The In-place Editor is a tool on Granicus Open Data designed to make it easy to add, change, and move around content elements directly on the page. You can use Granicus Open Data’s In-place Editor to add new content, drag-and-drop content that already exists, and see changes on the page in real-time. From the front page, click the Customize page button at the bottom of the page to open the In-Place Editor and access the existing content. You may want to leave some elements, like the search bar, or you may want to start completely new.
Using the In-place Editor gives you flexibility in the way content is displayed and curated. You could add simple content types like images, videos, links, and text or you can add more dynamic content like visualizations and slideshows. Because this feature shows you changes in real-time, it's well-suited for testing how content will look before clicking the Save button. You can play with the placement of content on the page in which regions, the styling of the region, and keep tweaking until the page looks just right.
Add new content (+). You can add always new content to any of the regions. The add content button is represented on the In-place Editor by a + icon. Click on the + button to add a new piece of content to the region. A new screen will appear with the same options for creating content. You can add as many pieces of content to a region as you want. The content will fit to the region of the layout regardless of how many pieces of content are added. As you’re adding different types of content, there are additional fields for advanced settings. In general, you can leave those settings to their default and only change what’s in the Content Settings section.
Which content, where? Choosing the right content type will depend on the information and the overall arrangement of the different pieces of content. Visual content, like slideshows (a collection of rotating images), videos, maps, and visualizations grab attention and so they do well near the top of the page. Other content, like text, files, and tables add density to a page so less is more. They're best used for quick bites of information and as complements to visual content.
Some content fits better in certain regions and not others. A visualization that is horizontally-oriented will look compressed in a narrow region. In the same way, content that is vertically-oriented might not look right in a region that is wider. Use the drag-and-drop capability on the In-place Editor to test how content looks before publishing. When you move content between regions, it will automatically adjust and show a real-time preview of how the content will look on the page to site visitors. You can see how this functionality works in the example below.
In the example below, the Site Manager is using the In-place Editor to move content from region to region and delete irrelevant content. the placement of the content is previewed in real-time so you can see how the page will look once the changes are saved and published to the public site.
Edit existing content. To access the In-place Editor for content that is already published, Site Managers can click the Customize this page button at the bottom of any page where the button appears. For existing content in a region, you can edit it by clicking the gear icon. Each pane can be edited individually by clicking the gear icon for the specific pane you want to edit. A menu will appear to edit the content that currently exists. Once in the editing menu, use the Content settings section to make changes. Save your changes by clicking the Finish button at the bottom of the screen.
Remove content. To remove the entire pane and all its contents click the trash can icon to remove the pane in one click. Once you choose to remove a pane it cannot be undone, so be careful when removing content.
Style a whole region or a single pane. Styling gives you even more control over the experience a site visitor has going through the site. You can style an entire region to affect all the panes within the region to have the same styling. Alternatively, you can choose a style for single panes within a region. The style button is represented by the paintbrush icon in the top-right corner of the region or pane. Use this button to change the style of the region as a whole or an individual pane. Styling might just affect the appearance (like adding rounded corners to the region) or the user experience (like making a region and its content collapsed or exposed by default).
In the image below, none of the panes have any styling applied.
In the image below each pane has a style different from the others in the same region (from left to right): rounded corners, collapsible (not by default), no style, collapsible (by default).
In the example below the Site Manager is changing the style for the entire region on a page. The Site Manager chose rounded corners for the style. This style groups together a set of information to help guide the site visitor and create a clear differentiation from the other sets of information. When adding styling, you want to think about how it can improve the experience a site visitor has on your site rather than choosing a style based solely on the aesthetic.
Choose your fonts.
As a Site Manager, you can control what fonts are used for the text across your Granicus Open Data site. By setting fonts, the text is formatted automatically rather than leaving it to individual users to decide. This maintains a consistent style throughout your site which is important to the site visitor’s ease in navigating content. User experience can’t be emphasized enough. It can make the difference of a person going exploring through your content or leaving after clicking on just a couple pages.
While Granicus Open Data defaults to a certain font for text styles, you have control over fonts to best match the overall look and feel of your organization. You can mix and match which fonts are used for specific text areas. Choose one font for text in description and summary boxes, choose another for all headers or a specific size of header or add your own font specifications.
Before making font selections, you first have to enable fonts. From the Admin Menu, find the Site Configuration menu link. On the drop-down, click the Fonts menu item to access your fonts and set defaults.
From here, you can see a list of fonts that have been enabled as well as browse fonts to either enable or disable. By default, Granicus Open Data does not have any fonts enabled and simply uses the default font set by the Granicus Open Data theme. Before making selections, you'll enable fonts by clicking on the Browse all fonts tab and making some selections.
Fonts might be familiar to you from using other text editors, and you’ve probably noticed that choosing a different font affects how the text appears on the page. Enabled fonts are the options you can select from when deciding on the default settings. You can browse from a list of over 3000 font options provided by Google fonts. The tiles have the name of the font as well as a preview, and tiles in green mean that the font is currently enabled. Switch to a list view of fonts you’ve already enabled (if applicable) by selecting the Enabled fonts tab.
Once you've enabled fonts, they will appear on the fonts main page and you can set defaults with these fonts. You can quickly and easily disable fonts from either the Enabled fonts menu or while looking for new fonts in the Browse all fonts menu.
Selecting default fonts.
Once your fonts are enabled, you can make selections for how text appears on the site by default. From the Enabled fonts menu, you can make selections based on the font or based on the CSS selector. CSS selector is a technical term that refers to headers, body text, and any other selectors you might have added.
Find the font you want to apply and use the drop-down menu in the CSS Selector section to choose the right selector. This is good for quick changes to your font selections. Click the Save applied CSS selectors to finalize your choices.
Alternatively, you can apply fonts to CSS selectors by clicking the By CSS Selector tab. Here, you can make several changes to the different selectors and apply font changes. This is a good option when you have many changes to make to your font selections. You can also add fonts to the Fallbacks column for your primary font selections. By adding a font in this field under the Fallbacks menu section next to the primary selection the fallback font will appear if the primary font is unable to display. You can select multiple fallback fonts by using commas; if none are selected then the default Granicus Open Data font will display. Click the Save applied fonts button at the bottom of the page to save your selections.