Design Summary
This page is included with our Custom Theme and Fancy design options. It anchors our overall unique-to-you design choices. Part of beauty is consistency. It represents all the global, or consistent, design elements and choices used in the design of your website. Compare this approach to our Theme Starter option where we design each page on the fly.
*** Design Elements ***
(Until Elementor implements global styles for elements, copy styles from this page.)
Divider Notes:
- Sold Color Divider: arrow inverted 20px
- solid to white divider: Mountains 30px (squished to resemble air flow).
New Logo
Old Logo
N/A
Site Icon
Old Site Icon
N/A
About Forms
Advanced forms implemented including capturing all data to the database with an admin interface available in the WP Dashboard. You can rely on the emails sent, and/or use the WP Dashboard interface.
H6 = Hero Title+font with red underline.
Form Example Title
Please complete the form
Simple Divider
Sometimes a simple divider within a page is called for. For this website we chose: 12% width, double line.
Fancy Divider
None implemented for this design.
Icons
Icon Box
This is the heading
Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Animated heading: h6, charcoal pencil underline!
H6 = Hero Title widget+H6=Dancing Script font with red underline.
Duel Color Header: H3, gradient
Header Before Highlight and after!
UAE Fancy Heading: H3, line icon
Design is a funny word
Typography
Set in Appearance > Customizer > Typography > Base Typography. A common approach is to use a Sans Serif / Serif for contrast. Sans Serif is generally considered more modern than Serif, but serif fonts are used in books and therefore are a good choice for body text–unless inspired. One approach is to use Serif fonts only with traditional industries such as law firms, journalism, etc. and only Sans Serif for modern industries. Personally I like to use Sans Serif for headers and Serif for body text, or Sans Serif for both.
- Headers & Title: Cabin
- Content & Body: Georgia
- H6 Highlight Font: Dancing Script 40px bold
Capital X Typography Test
XX
Heading 1
In general, Heading 1 is for page titles, and major sections of pages.
Next Paragraph: The gap between paragraph lines and paragraphs is also part of typography. For ease of reading, we try to avoid long sentences by arranging page layout to favor text that ranges from 30 to 90 characters wide.
Text, abc, ABC, 123, link, ! @ # % $, bold, italic, bold & italic, underline. The quick brown fox jumps over the lazy dog!Â
Heading 2
Heading 2 is generally skipped over except with our Fancy design where it is used as a highlight font.
Heading 3
Heading 3 is the primary heading for page sections. In fact, I usually have many pages and posts that use ONLY body text with no, or a few H3 headings. Although you should break up text using headers, not every page works with lots of levels. Simple is usually better.
Heading 4
Heading 4 is the header for sub-sections of a section in a page.
Heading 5
Text
Heading 6=Dancing Script font.
Bold-Text-Only Sub-Header
Instead of using H5 and H6 below H4, my style is to use plain text bold header in their place. Optionally, I like to define H5 and H6 the same “size” as body text.
Bold-Text-Only Soft-Return Example
I actually have two styles of this, one with a hard return like above. And a soft return, Shift+Return, like this example here. Whichever I go with, I try to be consistent within the page or post itself.
Indented: This is what indented text looks like.
Numbered list example:
- one
- two
- three
Preformatted text example
“Block quote example.”
Colors
(This chart is included only with our Fancy design option.)
{color:#3a3f45}
{color:#5e6770}
{color:#83888d}
{color:#a59e8f}
{color:#cec8bd}
{color:#e8e5df}
{color:#6d8840}
{color:#6ba410}
{color:#90d71f}
{color:#c0d1a5}
{color:#3e7a90}
{color:#03678b}
{color:#09a1d8}
{color:#a2c3cf}
Web Page Flowchart
(This chart is included only with our Fancy design option. In this case you do have a fancy design, but the menu matches so refer to the menu for flow.)