3D Elements on Your WordPress Template

Using 3D Renderings to Add Depth

When it comes to presenting your website in the best light, most people would agree that the aesthetics and features that are on the site are the number one contributing factor. We first judge with our eyes, allowing only 1.0 second before we make our assumptions of whether the content is worth reading or not. As the designer of your site, it is critical that you include elements which will stimulate the viewer while at the same time having elements which do not slag the load time. And while Plug-ins and stock animations may seem appealing, having 3D models and renderings which are curated for the web is more apt to produce the results you desire.

Parallax Pages and Cascading Content

If you have a parallax WordPress template, then the next step is to have content to go into the parallax part of the page. There are a few rules which you should follow when setting up your visuals for this part of the page. First, ensure that all of your images are in PNG format so that you get transparencies where needed. Those who wish to have a shadow should do so within Photoshop. However, it is not advised that you add this effect as some browsers do not support the opacity settings and the shadow will be a harsh black.

Secondly, ensure that the images for the Parallax are not high-intensity files. Low MB is what you are looking for. Keep in mind that you will be having a great deal of code, content, and animation on the page. This alone will cause the load time to be longer than that of a static page. Keep the files compressed, the size down, and avoid FX settings if possible.

Finally, have content that does not compete with the text or main theme of your WordPress template. If the parallax content is overlapping the frames of your page, if you have trouble in controlling the cascading content, or if it causes the page to look cluttered, simplify the design.

3D Integration into Videos

Whiteboard animation, as well as 3D animations, have become increasingly popular amongst e-commerce sites and businesses. The issue with such animations is when people use content from non-professional pages. When this occurs, the content can quickly run into the Gigs. And while the video may be embedded on a third party’s website, there is still the association with a mega-huge file. Using a professional 3D site, such as CG Trader, ensures the developer that the models and the scenes are optimized for web-rendering. While you may have to render the scene yourself in some cases, generally the artist will provide you with the best settings for obtaining quick online loading and smaller file sizes.

Those who have used 3D software and have created their own videos should compress the material down. Raw AVI and MP4 videos should not be used in a WordPress template. Buffing can only do so much for a large file. Compress it down, put it on YouTube or such site, and then embed the link on your site.

Customizing the Non-Customizable

For users who choose to take advantage of the free templates offered by WordPress, you will find that often there is a limitation to the customizable features of the site. Using 3D renders and 3D models can add a level of detail to give it a custom look, even if major customizations are limited. For example, If the template allows for an image to be chosen for the header, using an architectural interior 3D render as opposed to a static image may give a bit of depth to the page. Background images which are static renders can also add depth and aesthetics to the page.

Should the template be very restrictive on the content, you may be able to import JPG of 3D characters and content into the text of your site. As WordPress is Blog based, you may have to use a plugin to add the content to the text.

Use Content According to Your Needs

Apart from knowing where to put content, and in what format to place it, web designers must know what is expected. Game sites, video sites, and architectural sites will demand a higher level of detail. We live in an HD world. Sites which are a focus on products should have more user interaction 3D elements, such as 360 scrolling of a product than to be concerned with hyper realistic renders. Determine the functionality of your site, address the primary aesthetics of your site, and then build up the content accordingly.

Remember that 3D content is shareable content. SEO and tag the elements you use appropriately and your site is sure to have more visitors.