Siteglide Spotlight

It’s time to talk about Studio.

You may have heard about Studio by Siteglide, or maybe you haven’t. 

Stay tuned and we’ll run through all of the basics about Studio to help you get started and take advantage of this time-saving tool.

• What is Studio and what is it made up of?
• The benefits of Studio and why you should use it
• Looking to the future
• Process & one step to get you started
  

What is Studio?

Along came Studio, our all-in-one - design and development tool.

Studio by Siteglide offers a best practice, Bootstrap 5 based, using FontAwesome v5.15.2, design and development process to rapidly build far more than just websites.

Studio is broken down into four components:

• Figma - The latest design tool - Build out your wireframes using ready-made blocks, layouts and templates
  
• Layout Library - Utilise a collection of fully responsive, best-practise layouts
  
• Visual Page Builder - Match your Figma designs by adding in exact layouts used and edit without writing a line of code
  
• Studio Assets - Based on core Bootstrap 5, modify created variables by changing font styling, primary colours and more within minute
  

Why Studio?

Studio is not only easy to use but comes with a whole host of benefits to boost your sites’ designs, code and performance:

With an ever-growing library of fully responsive layouts, you never have to start from scratch again. Start building from this library to rapidly wireframe pages and customise the look and feel. Using best practices, you can work with high-quality code without any excess bloat.

With our Figma file matching our layout library, all teams can collaborate with ease using the inspect feature in Figma to adapt existing pages.

Website Owner Benefits

With a drag and drop Visual Page Builder and a built-in layout library, you will never write a line of code ever again. Drag and drop layouts to build out your pages, and add customisations all in one place.

Did you know that using a high-bloat library can damage your SEO efforts?

Studio utilises best practices and never has any excess bloat. Keep your page speeds and performance high, while still rocking a beautiful design.

When code can be too overwhelming for non-developers, Studio enables you to still make quick edits in seconds, without fear of damaging any custom-built functionality.

Developer Benefits

You have the choice of working only in code or in combination with the Visual Page Builder, you can still utilise the fully responsive library of layouts.

Copy and paste, the solid foundations are already set up. Modify using Figma’s inspect tool showing colour codes, sizing, spacing and more!

Build quicker than ever + complete more projects in less time = 💰💰💰

As Studio is built with Bootstrap5, you can remove even our styling and still have the Bootstrap base to work from. Experience fully responsive layouts and use custom Bootstrap styling.

Global variables are already set up, all you have to do is edit!

Listed in Code Editor are the ready-to-go global variables. Change the primary colours and this will reflect everywhere primary colours are used. Customise to match branding, quicker than ever.

Designer Benefits

Welcome to Figma!

Work with the latest design tool by yourself or with your team.

Components, blocks, and templates are already built and ready to use. Wireframe these together, add your design flare and pass over to the developer.

Figma’s inspect tool ensures less back and forth between designers and developers. Carry on with your next projects

Design using ready-made components + Figma providing developers with all that they need = Quicker designs + more projects!

Have we piqued your interest yet?

The Process

We’ve told you that it’s easy and that it saves you time, but how do we actually use this?

1. We begin in Figma

Beautiful replicas of our layouts reside within Figma, the latest design tool, with building blocks, components and even example pages.

Choose to collaborate with your team or work alone.

Wireframe your pages by moving ready-made blocks together and adding your own branding on top.

Now that you have your designs ready to go:

• Export your images with help from the toolbar on the right
• It's time to switch to 'Inspect' mode

2. Hello Admin!

There’s a few checks we need to do before we begin replicating our designs on our site, so let’s get going.

• Create a new Site with Studio included
• Apply a Studio template to your Pages
• Upload all exported images to File Manager

3. Let’s get building

Heading to our pages, we jump into the ‘Studio’ tab.

Opening our menu on the right, we can begin pulling out the base layouts matching those used in Figma.

Wireframe these pages, add your branding on top.

It’s time to add your content and swap out those images for yours. Don’t forget to use the provided editing toolbar to match those styling changes. 

4. Hello? Yes, let’s overhaul this styling

It’s time to loop in your developers and let the magic begin.

Jumping into Code Editor, we can head to our scss files and get to work.

Our variables are already set up, let’s modify these to match our branding. Change our main colours here, typography there.

By changing even just a few variables, can dramatically change the look and feel of this site.

Within minutes, you can see your website has transformed before your eyes.

Future of Studio

Saved development time, always fully responsive pages, aesthetic layouts; without sacrificing page speeds and quality of code.

How can this get better?

What if we told you that we’re removing the need to write code for the global variables?

With the recent release of Studio Variables UI, you can now choose and manage your branding colours without even writing code. Soon to come will be more variables added in this area for you to take advantage of.

Do you have ideas for layouts?

With the ability for a partner layout library: you can now submit your own designs and layouts; save your favourite layouts to your sites in their own folder; and choose other agency layouts. This will soon evolve, and you will be able to add your layouts to our upcoming marketplace. This will be a home for Siteglide and agency site templates, themes, modules and so much more.

Let’s get started today!

Now that you know why we love Studio, why don’t you try it yourself?

Simple, quick and easy; with many possibilities and benefits for everyone.

• Brand new to Siteglide and eager to try out Studio? You can sign up free here to get started today!
• Did you follow on and need extra help getting started? Check out our academy here.
  
  

We look forward to seeing the beautiful and speedy sites that you're making with Studio!