Tag Archives: HTML

Create a stitched effect using CSS

Leave a reply

This is a short, neat CSS trick to get a stitched effect around texts or buttons.

stitched_effect

HTML:

<div class=”stitched”>
CSS Stitched Effect
</div>

CSS:

.stitched {
     padding: 7px 20px;
      margin: 10px;
      background: #F8F8FF;
      color: #000000;
      font-size: 21px;
      font-weight: bold;
      border: 2px dashed #D3D3D3;
      border-top-left-radius: 3px;
      -moz-border-radius-topleft: 3px;
      -webkit-border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
      -moz-border-radius-bottomleft: 3px;
      -webkit-border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
      -moz-border-radius-bottomright: 3px;
      -webkit-border-bottom-right-radius: 3px;
      border-top-right-radius: 3px;
      -moz-border-radius-topright: 3px;
      -webkit-border-top-right-radius: 3px;
      -moz-box-shadow: 0 0 0 4px #F8F8FF, 2px 1px 4px 4px rgba(10,10,0,.5);
      -webkit-box-shadow: 0 0 0 4px #F8F8FF, 2px 1px 4px 4px rgba(10,10,0,.5);
      box-shadow: 0 0 0 4px #F8F8FF, 2px 1px 6px 4px rgba(10,10,0,.5);
      text-shadow: 1px 1px 2px #F8F8FF;
      font-weight: normal;
      float:left;
}

 

Skinning your DecoNetwork website

1 Reply

One of the great benefits of DecoNetwork is the ability to modify your sites look and feel. Otherwise known as skinning your site.

Before we jump into the details I’d like to explain a little about a web server, the HTML and CSS.

To best describe each of these and how they relate in DecoNetwork I’d like you to imagine your DecoNetwork website as a house. A house consists of the land (the webserver), the building frame (the HTML), and the bricks, tiles and paint that decorates the building (the CSS, or Casecade Styling Sheet).

In the case of DecoNetwork your subscriptions provides you with your block of land plus an initial house complete with frame and decorations that you can customize as your own.

Start with a template

When skinning your DecoNetwork website it’s usually best and easier to start with one of the predefined 28 store templates in DecoNetwork.

  • Browse to Manage Store > Appearance > Select Store Template
  • Select the template and color variation of the template you want and select Select Theme.

Paint first, build later

If you’re fairly new to the world of customizing a website we recommend you focus more on the colors (CSS) than layout (HTML) of your site. In other words, paint your house as a first project before building a complete new house from scratch.

There are two ways to modify some colors of your site.

  1. Use the Edit store appearance icon in the front-page of your website
  2. Modify your sites CSS

Edit Store Appearance

Edit Store Appearance is a simple tool to modify the colors of your website. Browse to the front-page of your website and select the paintbrush edit store appearance icon in the top-right corner:

Mouse over the item you want to modify and select it. A popup will appear allowing you to change some of the item’s colors.

When you are finished select the paintbrush icon again to close the Edit store appearance mode.

Modify your sites CSS

If you like to get into the nitty gritty of CSS then you’d want to customise the template CSS.

  • Browse to Manage Store > Appearance > Customize Template CSS
  • Select the Create Custom CSS tab
  • Paste in your custom CSS
  • Press Save CSS to save your changes

When pasting your custom CSS ensure you only include what you’ve changed. For example, the following CSS specifies the size, color and font of a H1 heading:

H1 {
 size: 18px;
 color: #000000;
 font-family: Arial;
 }

If you want to change your heading color from blank (#000000) to a red (#CC0000) then you would include the following in your Create custom CSS tab:

H1 {
 color: #CC0000;
 }

As the size and font will not change these are excluded.

My personal tip is to use FireFox and a browser plug-in called FireBug (http://getfirebug.com). This awesome little tool allows you to inspect your websites CSS and make live changes to preview the result right in the browser. With the changes made and preview looking correct, you can paste your changes directly into you DecoNetwork custom CSS tab. Check out the “Introduction to Firebug” video on their site.

Modify your sites HTML

While you can always return to the default DecoNetwork HTML, modifying the HTML of your DecoNetwork website should be avoided unless you have HTML knowledge.

To modify the HTML:

  • Browse to Manage Store > Appearance > Customer Template HTML
  • Select the Custom Layout tab
  • Check the Override default layout check box
  • Modify your HTML
  • Press Update to save your changes
Changes may include referencing external fonts, or creating your own unique DIV containers.
Your entire DecoNetwork website will use the layout you create in your HTML so any changes made must consider its impact across all pages of your site.

Need a helping hand?

DecoNetwork provides an additional service called DecoCoach which can design, setup and skin your DecoNetwork website for you. To find out more contact our DecoNetwork team: www.deconetwork.com/contact

Up-coming webinar

We have an up-coming webinar that walks you through the process of modifying your DecoNetwork’s CSS and HTML plus our DecoCoach service. To register for this free event visit:

Introduction to skinning your DecoNetwork website
Thursday, June 14 – 2pm US East / 11am US Pacific Register
DecoCoach – DecoNetwork’s custom skinning and setup service
Thursday, June 28 – 2pm US East / 11am US Pacific Register

Customizing your launch designer links

Leave a reply

When a customer on your DecoNetwork website views a blank product they can select one of the decoration process links to launch the designer and decorate your product.

By default these are standard links:

But with a little CSS styling you can make these links more attractive and increase the chance a customer will select them to decorate a blank product.

Below is some CSS you can copy and add to your DecoNetwork website to style your launch designer buttons.

Adding the CSS to your DecoNetwork website

First let’s sort out the important part – how to add the custom CSS to your DecoNetwork website.

  1. Log into your DecoNetwork website.
  2. Browse to Manage Store > Appearance > Customize Template CSS.
  3. Select the Create Custom CSS tab and paste your CSS changes into the window.
  4. Click Save CSS to save your changes.

Example button styles and colors

Here are some sample CSS you can copy to style your product’s launch designer links:

Blue with “Customize with” text:

Copy the following CSS into DecoNetwork:

/* Blue "Customize with" start*/
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background-color: #1682E2;
 background-image: url("/uploads/10343058/File/customize_1.png");
 background-position: 4px 2px;
 background-repeat: no-repeat;
 border-radius: 3px 3px 3px 3px;
 color: #FFFFFF;
 padding: 5px 5px 5px 100px;
 text-decoration: none;
}
.personalize .meta.categories h5 a:hover {
 background-color: #005DC1;
}
/* Blue "Customize with" end */

You may want to modify the “Customize with” text which is actually an image referenced in “background-image: url(“/uploads/10343058/File/customize_1.png”);”. Create your own small image no more than 20 pixels high as a PNG with transparent background and upload it to your DecoNetwork website.

  1. Log into your DecoNetwork website.
  2. Browse to Manage Store > Appearance > Customize Template CSS.
  3. Select the Create Custom CSS tab and upload your file using the Select File/Image button.
  4. Copy the image URL which will look similar to /uploads/10343058/File/customize_1.png and replace the value of the “background-image” property.

Blue button

Copy the following CSS into DecoNetwork:

/* Blue start */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #499bea; /* Old browsers */
 background: -moz-linear-gradient(top, #499bea 0%, #1a5fbf 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#499bea), color-stop(100%,#1a5fbf)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #499bea 0%,#1a5fbf 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #499bea 0%,#1a5fbf 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #499bea 0%,#1a5fbf 100%); /* IE10+ */
 background: linear-gradient(top, #499bea 0%,#1a5fbf 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#1a5fbf',GradientType=0 ); /* IE6-9 */
 border: 1px solid #1a5fbf;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #FFFFFF;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, 0.4) inset, 0 1px 3px rgba(0, 0, 0, 0.4);
}
/* Blue end */

Silver button

Copy the following CSS into DecoNetwork:

/* Silver button start */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #ffffff; /* Old browsers */
 background: -moz-linear-gradient(top, #ffffff 0%, #e1ebec 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e1ebec)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #ffffff 0%,#e1ebec 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #ffffff 0%,#e1ebec 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #ffffff 0%,#e1ebec 100%); /* IE10+ */
 background: linear-gradient(top, #ffffff 0%,#e1ebec 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e1ebec',GradientType=0 ); /* IE6-9 */
 border: 1px solid #DCE1E1;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #404040;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, 0.2) inset, 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Silver button end */

Orange button

Copy the following CSS into DecoNetwork:

/* Orange button */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #fff45e; /* Old browsers */
 background: -moz-linear-gradient(top, #fff45e 0%, #febf04 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff45e), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #fff45e 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #fff45e 0%,#febf04 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #fff45e 0%,#febf04 100%); /* IE10+ */
 background: linear-gradient(top, #fff45e 0%,#febf04 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff45e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
 border: 1px solid #FFE605;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #404040;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(255, 0, 0, 0.2) inset, 0 1px 3px rgba(255, 0, 0, 0.2);
}
/* Orange button end */

Charcoal button

Copy the following CSS into DecoNetwork:

/* Charcoal button start */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #505459; /* Old browsers */
 background: -moz-linear-gradient(top, #505459 0%, #000000 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#505459), color-stop(100%,#000000)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #505459 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #505459 0%,#000000 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #505459 0%,#000000 100%); /* IE10+ */
 background: linear-gradient(top, #505459 0%,#000000 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505459', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
 border: 1px solid #444444;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #F0F0F0;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(255, 255, 255, 0.6) inset, 0 1px 3px rgba(255, 255, 255, 0.6);
}
/* Charcoal button end */

Steel blue button

Copy the following CSS into DecoNetwork:

/* Steel blue button start */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #a7cfdf; /* Old browsers */
 background: -moz-linear-gradient(top, #a7cfdf 0%, #23538a 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #a7cfdf 0%,#23538a 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #a7cfdf 0%,#23538a 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #a7cfdf 0%,#23538a 100%); /* IE10+ */
 background: linear-gradient(top, #a7cfdf 0%,#23538a 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
 border: 1px solid #444444;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #F0F0F0;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, 0.2) inset, 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Steel blue button end */

Green button

Copy the following CSS into DecoNetwork:

/* Green button start */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #b6e026; /* Old browsers */
 background: -moz-linear-gradient(top, #b6e026 0%, #89bf24 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b6e026), color-stop(100%,#89bf24)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #b6e026 0%,#89bf24 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #b6e026 0%,#89bf24 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #b6e026 0%,#89bf24 100%); /* IE10+ */
 background: linear-gradient(top, #b6e026 0%,#89bf24 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6e026', endColorstr='#89bf24',GradientType=0 ); /* IE6-9 */
 border: 1px solid #89bf24;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #FFFFFF;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, 0.2) inset, 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Green button end */

Purple button

Copy the following CSS into DecoNetwork:

/* Purple button start */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #e570e7; /* Old browsers */
 background: -moz-linear-gradient(top, #e570e7 0%, #c85ec7 47%, #a849a3 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e570e7), color-stop(47%,#c85ec7), color-stop 
(100%,#a849a3)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* IE10+ */
 background: linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=0 ); /* IE6-9 */
 border: 1px solid #a849a3;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #FFFFFF;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, 0.2) inset, 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Purple button end */

Red button

Copy the following CSS into DecoNetwork:

/* Red button start */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #ff3019; /* Old browsers */
 background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* IE10+ */
 background: linear-gradient(top, #ff3019 0%,#cf0404 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
 border: 1px solid #a849a3;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #FFFFFF;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, 0.2) inset, 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Red button end */

Creating a round button

Sometimes you want something not so square, and round button is perfect for that! To turn your square button into a round button simple add the following property and value to the “.personalize .meta.categories h5 a” selector:

border-radius:99px;

Ensure this goes after the { and before the } on a new line in .personalize .meta.categories h5 a.

Content is king when it comes to SEO

25 Replies

Continuing our SEO topics we’d like to add a little more information about building great content for your site.

It’s quite depressing to see the massive effort and revenue poured into a website while the website owner ignores the most important element of ‘SEO’ which is great content.

Yes, you can tweak your website title. Yes, you can strategically place proper HTML headings on your site. But the ultimate goal of a search engine is to find the best content on the web. Therefore it makes absolute sense to have the best content to improve your search engine ranking.

In the end Google can be quite forgiving for ‘brain dead, stupid’ HTML and coding mistakes on a site IF the content is really awesome! (Source: http://www.youtube.com/watch?v=0JD55e5h5JM).

Before we jump into what good content is let me clarify some myths and bad habits that some website owner’s use in an attempt to trick Google and other search engines.

Hidden text

When it comes to content Google is basically referring to text on your site. Text it can read and text it can add to its giant search engine database. When a Google user searches using a keyword such as “t shirt” Google returns websites that contain the searched word. “In theory” the more the word is used on a site the more chance the site is about the word. So following this theory some rather silly website owners attempt to trick Google by using what’s referred to as “hidden text” on their site.

In Google’s view hidden text is:

  • Using white text on a white background
  • Including text behind an image
  • Using CSS to hide text
  • Setting the font size to 0

Using white text on a white background was an old trick to flood the bottom of a website page with hundreds of keywords in white text so it would not be visible to the user on a white background but, as the theory went, would be visible to Google. Well, they were right about that. Google will see the white text on a white background AND Google will remove you from their index. That equals REALLY BAD!

Source: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=66353

Meta tags

I covered this in a previous post which you can read here. But essentially the keyword meta tag is no longer used by Google and the description meta tag has limited use. Read my previous post for more information on this topic.

So what makes good content?

The content should match your products and service and suit your audience and what you expect your audience to search for. As much as possible the content should be rich text on your site. Don’t go overboard and produce a novel, but consider what people might want to search for. i.e. “custom t shirt printing”. “t shirts sydney”, etc.

Here are some tips for writing content that can assist Google and Google users in locating you website and learn a little more about your products and services:

Who are you?  “We are a custom t-shirt printing business…”

What do you do? “…specializing in t shirt, hoodie and custom apparel DTG digital and screen printing.”

Where are you? Remember many Google users include a town or city in their search queries so mention the local area you service. “We are located in Whittier, California…”

Where do you serve? Include names of local towns and cities that some of your local customer may search “… and ship nationwide from Los Angeles, Hawaii to New York and Florida.”

What do you sell? Mention common products and brands you sell. “Gildan, Hanes and American Apparel…”

Why are you good or important? Customers like assurances so give it to them! “With 30 year’s experience, we guaranty to ship your product within 3 days from order.”

Be truthful, concise and ensure it reads well. While the content you create will be used by Google it should be designed for the humans that visit your site.

Most important of all – SPELL CHECK! Copy and paste you text into Word and run the spell checker. Once you created the content on your site get other people who were not involved in the content’s creation to read it over and tell them to be brutally honest about what they read. You want to make sure it’s perfect!

Updating content on your DecoNetwork website pages

There are several places you can add value-building content to you site.

Website pages:

The ‘Website Pages’ section of DecoNetwork is a great first place to start to edit the content on your site.

  • Log into your DecoNetwork website
  • Browse to Manage Store  > Website pages
  • Select the page you want to modify such as your Home page
  • In the Body Settings below select Configure next to Body Content section.
  • Using the WYSIWYG (what you see is what you get) HTML editor you can enter the content you want to show on this page.
  • You can move the content section up or down by selecting and dragging the cross arrows up or down near the section title.
  • Click Save to save your changes.

Dedicated information pages

Content does NOT need to be on the homepage of your site. If you want to boost your website with great content about your printing processes don’t flood your home page with text that will be distracting to your website visitors. Make a secondary page (or landing page) dedicated to your printing process which will benefit you in different ways:

  1. Your homepage won’t be crowded.
  2. The landing page will with a dedicated URL with the page title included. i.e. http://www.yoursite/page/printing_process
  3. Even though a user may enter the landing page (in other words, searched for ‘printing processes’ in Google and ended up on your page www.yoursite/pages/printing_process) they can still click through to your home page or products from this page.
To create a new web page in DecoNetwork:
  • Log into your DecoNetwork website.
  • Browse to Manage Store  > Website pages.
  • Select Add page and enter a name for your page.
  • Configure the widgets and content you want to show on this page.
  • Click Save to save your changes.
Your page URL will reflect the page name. i.e. “Screen Printing Process” will become http://www.yoursite.com/page/screen_printing_process

Spend some time on your websites content and  don’t worry if you don’t get it right the first time. Your site is organic and can change at any time. Keep tweaking your content and monitor your website traffic to see if your changes lead to improvements.