Changing The Wrap Border

Using Wrap BordersHello, and welcome to the first “Feature of the Week” post here on the Dynamik Theme blog page.

Our aim here is to introduce you to some of the great features that the Dynamik Child Theme provides and to give you a flavour of what possibilities they offer you for developing your sites.

Maybe you’ve seen the list of features detailed elsewhere on this site and would like just a little more information on how Dynamik works, or maybe you’ve just recently started using Dynamik as your child theme and think there are features and options you’re missing out on.

Sometimes it will be a purely Dynamik Feature that is covered, other times it’ll also likely include some Genesis Framework functionality too.

I’ll also be covering a range of functionality from fairly basic options that help newer users get to grips with it, through to more advanced concepts that really show the power that Dynamik provides.

Either way, over the coming weeks and months, I hope this series will provide you with some great information that is both interesting and useful to you and help you make the most of Dynamik on your sites.

Ok, so enough of the intro… let’s dive in…

This week’s feature is a nice easy starter that shows how typically easy it is to make changes to the site using the Dynamik Theme.

Changing the Wrap Border

The Wrap Border is where the main site itself meets background area that it sits on.

The border interface between these two components can have a dramatic effect on how the site appears and its appeal to visitors.

We can adjust this border in several ways with Dynamik – very easily and very quickly – and with no coding required.

Here’s an example site with a light grey background and white wrap area. No border has been set at all.

No-wrap-borderExample Site with No Wrap Border

The settings to adjust the Wrap Border can be found in the Dynamik Design Options under the Wrap tab.

Here they are:

wrap-settingsDynamik Design Wrap Border Options

Here we can now add a simple border to either the top and bottom, sides, or a full border around the Wrap area with a variety of style available, in any thickness and any colour.

Lets add a 1 pixel solid border in dark red all the way round the site to get this effect.

 site-with-wrap-borderSite With Wrap Border Added

Now we can add a shadow effect as well.

The settings for the shadow effect comprise 4 main values, for example:

2px 2px 5px #FFA382

These represent (in order);

The horizontal displacement of the shadow (+ve numbers shifts it to the right)

The vertical displacement (+ve numbers shifts it down)

The amount of blur (bigger values give a greater blur, smaller values gives a sharper result)

The colour code

Here we’ve added a shadow around the whole border (with no displacement). It helps lift the page off the background a little.

 site-with-added-box-shadowWith Shadow Added

And here’s a close up so you can see it a little more clearly in this post.

 site-with-added-box-shadowClose up of Shadow Effect

And finally we can select and add a radius, providing nicely rounded corners to the wrap.

 site-with-added-rounded-cornersSite With Wrap border, Shadow and Rounded Corners

All that was done just by adjusting these few values in the Dynamik Design > Wrap Settings

 wrap-settingsDynamik Settings for Wrap Border

With the Dynamik Child Theme, you’ll probably find it takes longer deciding what looks best than actually implementing it.

No coding. Just easy design!

Well, that’s it for this week’s introductory Feature of the Week Post.

Hope you found it useful and I’ll be back with another next week!

Have fun

David

David Pritchard is the author of the Dynamik Theme Cheat Sheet – the 250+ page guide that helps users make the most of the Dynamik Website Builder. Licenced Dynamik Theme users can get their FREE copy in the downloads section of the Dynamik Theme forum. David also has a site with guides to using WordPress, SEO, internet marketing techniques and other topics at http://www.FastStepInternetMarketing.com

Follow & Share:

Leave a Reply