Web Page Basics
This section will provide you with a very basic overview of how a web page is constructed, a little about what’s going on behind the scenes and how you can manage your content through Cadenza. By having some understanding of how a web page works, you’ll have a better understanding of how to write content and add images or how to use the Page Builder to create interesting, interactive pages.
The Anatomy of a Web Page
Every page on your site has three major sections: the Header, the Body, and the Footer. The Header and the Footer are “global” page sections, meaning they are the (usually) same on every page of your site. This means you only need to edit or update the information in these sections in one place, and they are updated everywhere.
Header & Footer
Your Header contains some important information, like your site name or logo, and your main navigation menu. If you include your logo, it is in the form of an image file. If you only use your site name, then it’s just plain text, and can be any one of the included, supported Google fonts. Both your logo or text site name link back to your home page.
Your navigation menu contains all of the links to main pages of your website, like content pages, News archive page or your Events Calendar.
You may also add a “Top Bar” header element, which is a narrow area above your main header that may also contain additional content or links, like social media icons, phone number, email link or other text.
Your Footer contains information like your site’s copyright mark, or other credentials.
Editing and managing your logo, menu links and other information in your Header and Footer is all done through your Cadenza Customizer. Not only can you edit the information, but you may also select different layout configurations for many elements, like repositioning the menu or adding columns to your Footer or Top Bar.
Body Content
The body area of your page is where all of your content is displayed, whether it’s paragraphs of text, image galleries, your calendar, staff directory or anything else. All of these examples present information in different ways, but they are all considered “content”.
Content is a general term that applied to all of the examples above, but this content may be managed in many different ways, from the simple Visual/Text Editor, to the Page Builder Content Modules, to plugin settings.
Rows & Columns
The arrangement of a web page structure – the header at the top, the footer at the bottom, and the body in the middle – represents the basic underlying concept of a row structure that exists on a web page.
Within your body content area, you may also create rows of content. If you use the Visual/Text Editor to create a page or write a post, then most of that content will exist in a single row.
Some plugins, such as the Staff Directory pages, generate content that is placed in multiple rows automatically.
When using the Page Builder, you can literally drag & drop empty rows to begin constructing your content pages, or drag & drop modules to create new rows. Rows are simply horizontal containers that hold blocks of content to keep page elements together.
Columns divide rows into vertical containers. A row may be divided up into several columns and each column may have a different width, or a different percentage of a whole row.
Padding & Margins
Every element on your page, whether it’s your Header, a row, column, image or paragraph, will usually have some amount of padding and/or margin. Paddings and margins are invisible, but provide some some amount of spacing between items on the page. It is possible to have zero padding and zero margin, but this would cause elements to bump up against other elements.
If you think of every page element surrounded by a box, padding is the spacing between the outer edge of the element, and the inside of the box. Margin is the space surrounding the outside of the box. If you wanted a border around an element, then the border would be the box itself, and can be thin or thick, as well as dashed, dotted, double lined or even of different thicknesses on different sides and with rounded corners,and different sized rounded corners.
Basically, padding separates the element from the box, and margins keep boxes apart. Sometimes, you need more or less margin or padding to make things look good, and sometimes, you don’t need any at all. It all depends on what type of content you are working with.
The TOTAL width or height that any element takes up on the page is all of these values added together!
Responsive Design
Responsiveness means that your web page adapts its layout to fit the screen on which it is being viewed. This means that whether you’re viewing your site on a desktop, a tablet or a smart phone, you are still able to navigate to all areas, view and interact with the content, although the layout of the site will vary, depending on the screen size.
Cadenza is built on the underlying Bootstrap framework, a set of styles and definitions that, among other things, instruct page elements how to adapt depending on screen sizes. The Page Builder also relies on Bootstrap, so content modules will automatically resize and shift around for viewers using smaller devices.
It is important to understand how your content rows and columns will reposition based on what device the viewer is using to visit your site, and plan accordingly when placing information in your pages. Generally speaking, the Bootstrap framework instructs elements to fill your column widths according to how you define them when building your page on a medium to large screen, but when your site is viewed in a small screen, like a smart phone, to restack top to bottom, and fill the entire screen width.
Fortunately, the Cadenza Customizer and the Page Builder both give you preview modes to test your site before you publish live! Toggling into a responsive mode preview, will give you a good idea about how things will look on different devices and let you see if you may need to adjust widths, position, padding or margins.