This page is intended to document how the site is built, so as to guide future maintenance.
Page Layout and Styling
The site is built using Elementor Pro page and template builder.
Each page has its own Header template, with a background image, the site logo, and the menu options.
Each page is displayed within the “Page with Left Buttons” template, which manages the fixed Volunteer/Donate buttons on the left but otherwise just displays the full page content. There are two sets of buttons, in different sizes so one displays on desktops or tablets and the other on phones. The buttons are turned sideways and stuck to the left via custom CSS on the sections.
A consistent feature of all pages is content within color-background Sections. Each section is defined as Full-Width, Stretch, Minimum Height of 100% vh. This makes the section take up the full screen top-to-bottom and edge-to-edge within the current device screen space. Each section is also set for a 50px padding on the left, to leave room for the Volunteer/Donate buttons.
Within a Section are usually two Columns of content. The columns are all defined with 20px padding on all four sides to give consistent look throughout the site.
The text links to “Read More”, “Donate”, etc are actually defined as Elementor Buttons. Their background color is the same as their section color, and there are no visible borders. The makes the button function as the link without actually looking like a button. (Buttons are used instead of text with hyperlinks because the link address is more easily maintained. Buttons show the link more clearly in the editor compared to text.)
The color scheme used on the site can be found at coolers.co. The general page background is “Columbia Blue” (color code c6dfe7). Content sections are also colored “Pewter Blue” (a5bdc7) or “Eggshell” (ebe8d6). Eggshell is also used for light text on dark backgrounds like “Vivid Burgundy” (b1233d) and “Prussian Blue” (073448). Prussian Blue is use as the font color for headings and text content.