Lay Theme – Design your Portfolio Website ⭐️ Free Version Buy Here
  • Lay Theme – Design your Portfolio Website
  • Installation
  • Documentation
    • Getting Started Video
    • Tutorials
    • Documentation
    • Shop Setup
    • Troubleshooting
  • Addons
    • Carousel
    • Image Hover
    • Fullscreen Slider
    • Lightbox
  • Support
  • ⭐️ Free WordPress Theme
  • Buy Now

How to add a 3D Logo to your Website

9th December 2022

In this article: Introduction Step 1: Get the Addon Step 2: Install the Addon Step 3: Get a 3D Model Step 4: Add the 3D Model to your Website

Introduction

Adding a 3D Logo to your website can be done using our new "3D Logo" Addon. And it's free!

What is a 3D Logo?
It's a real 3D object that is added to your website using "WebGL" and the "canvas" element.

The 3D Logo follows your mouse

Next up, see how to get the 3D Logo Addon!

Step 1: Get the Addon

There is only one way to get the Addon.

Go to laytheme's Instagram.

Now add this post ⬇️ to your story and tag @laytheme.

1: Add this post to your story (top left, the pinned one)
2: Tag @laytheme

Now wait for a DM by us, we'll send the download link to you!

Step 2: Install the Addon

Go to "Plugins" → "Add New".

Now click "Upload Plugin" and upload the .zip file you just got.

Install the Addon here

Step 3: Get a 3D Model

Get any 3D model in .gltf format.

Sketchfab.com has 3D models, many of them are free!

Find free 3D models on sketchfab.com

You can also let a 3D artist create your 3D logo for you. I'm sure you can find someone on fiverr.com or ask Celina Eggers: @cc.cylo.

Step 4: Add the 3D Model to your Website

Go to "Lay Options" → "3D Logo Addon". Now follow the instructions there.

Find settings for your 3D logo here

There may be jpegs or pngs in a "textures" folder. In that case take them out of the folder and put them in the same folder as the .gltf and .bin files.

Now open the .gltf file in a texteditor, find the jpegs and change their uri's so they don't contain the "textures" folder. The uri's should look kind of like this:

Afterwards, upload all of these files. Now set the .gltf file using the "Set file" button.

Set your .gltf file here

Additionally you can configure your 3D Logo using all kinds of settings!

These are the settings that are currently available

  • Position for Desktop & Phone
  • Z-Index
  • 3D Model Size for Desktop & Phone
  • Container Size for Desktop & Phone
  • Offsets for Desktop & Phone
  • Rotation around X, Y, Z Axis
  • Light Colors
  • Show/Hide on Phone

Congratulations! 🥳

That's it. You just added a 3D logo to your website!

Take a look at our Instagram for more tips.

This is kind of what it should look like now

More Tutorials

Create a Free Portfolio Designer Website

How to set up and create a Portfolio Website for free. Using our free WordPress Theme.

Read more

Create a Splitscreen Website

A splitscreen website is split into two. Creating a split screen website with Lay Theme is pretty easy!

Read more

How to add a 3D Logo to your Website

Adding a 3D Logo to your website can be done using our new "3D Logo" Addon. And it's free!

Read more
    © Lay Theme Legal Info
  • Affiliates
  • Version History
  • Instagram
  • Lay Theme by 100k Studio