Lay Theme – Design your Portfolio Website 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
    • Support Forum
    • Key & Files Manager
  • 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

Use our free "3D Logo" Plugin.

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

Make your Websites load "instantly"
and manage your own Server

Increase your response time to less than 0.2 seconds.

Read more

Create a Desktop Burger Menu

A Desktop Burger Menu is an overlay that slides on top of a website.

Read more

Create a Splitscreen Website

A splitscreen website is split into two, using custom CSS.

Read more

Add a 3D Logo to your Website

Use our free "3D Logo" Plugin.

Read more

Lay Theme Basic Setup

How to set up and build a website with Lay Theme.

Read more
    © Lay Theme
  • Legal Info
    • Privacy Policy
    • Terms and Conditions
    • Refund Policy
  • Version History
  • Instagram
  • Lay Theme by 100k Studio