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 just look at other pages of the website and strive for consistency.

*** Design Elements ***

(Until Elementor implements global styles for elements, copy styles from this page.)

Particle + divider

Use the full-width particle plus our gray divider to separate top pricing info from detailed info–and pages like that.

Prestwood IT Grey Divider 300px

Fancy in-page section header (for simple use H1 or H3)

Tech Example In-Page Full-Width Header

The only difference is that full-width separator is width=100%, colum=90%.

Particle background…

Business Hosting

cPanel control panel on Linux with dedicated resources (not shared).

Virtual Private Server

cPanel control panel on a dedicated virtual private Linux server with full root access.

Dedicated Server

Dedicated Linux or Windows server with full access to your single-tenant VM.

 

Download PDF style…

What We Do Flyer

We do three things: computer network support, website development & marketing, and coding. We work with you either on a project basis (call us when you need us), or an ongoing basis with our proactive discounted monthly plans.

 

Call-to-action “Hero” section example:

To qualify, simply fill out this form and we’ll email you a coupon and all the details today.

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.

Section or area first title underlined text.

Regular underlined text.

Duel Color Header: H3, gradient

Header Before Highlight and after!

UAE Fancy Heading: H3, line icon

Design is a funny word

This is a test.

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. 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 Serif for headers and Sans Serif for body text, or Sans Serif for both.

  • Headers & Title: Merriweather
  • Content & Body: Merriweather Sans
  • H2 Highlight Font: not used (same font as other headings).

Heading 1: abc, ABC, 123, link, bold, italic, bold/italic, underline

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: Highlight Font, abc, ABC, 123, link, bold, italic, bold/italic, underline

Heading 2 is generally skipped over except with our Fancy design where it is used as a highlight font.

Heading 3: abc, ABC, 123, link, bold, italic, bold/italic, underline

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: abc, ABC, 123, link, bold, italic, bold/italic, underline

Heading 4 is the header for sub-sections of a section in a page.

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:

  1. one
  2. two
  3. three
Preformatted text example

“Block quote example.”

Colors

(This chart is included only with our Fancy design option.)

.Creole-black
{color: #0E0302 }
Compare to pure white 
on pure black
{color: #FFFFFF on #000000 }
.VistaWhite
{color: #FEFCFC }
Compare to pure black 
on pure white
{color: #000000 on #FFFFFF }
.Linen
{ color: #FAE6E4 }
White text looks unreadable.

.Terracotta
{ color: #E3695D }

White text looks great too.
.OldBrick-primary { color: #96251A }
Black text looks okay too.
.Bright-Red
{ color: #AE1000 }
Black text looks okay too.
.Cherrywood
{ color: #641912 }
Black text not so good here.
.Aubergine
{ color: #380E0A }
Black text unreadable.
.Bianca { color: #FCF9F2 }
White text looks unreadable.
.Sidecar {
color: #F1DEB9 }
White text looks great too.
.HarvestGold {
color: #E4C07A }
Black text looks okay too.
.Marigold-secondary {
color: #B48324 }
Black text looks okay too.
.Russet {
color: #745418 }
Black text unreadable.
.Olive Drab-hero
{color: #779E20 }
Black text looks great too.

Web Page Flowchart

(This chart is included only with our Fancy design option.)

[slick-sitemap sitemap_menu=’topnav’ utility_menu=’’ column=5]

Managed Backup Service

Cloud Backup plus

Onsite Backup

Full HD Image

plus file-based key files!

And profesional MONITORING!

Scroll to Top