Creating Stylish Salesforce Projects with Titan

Alice M.

Hawk-eye editor with a passion for trailblazing Salesforce experiences

Updated: Feb 12th, 2024

Web Design at its Finest

With Titan Web, there’s always something new to learn.

Our platform for Salesforce continues to grow as we add cool yet professional features to help you transform your web page into an engaging, stylish, and interactive canvas for your users.

To keep you on your toes so you can turn dry content into smart yet sophisticated web pages, we have put together a string of articles and webinars to help you take advantage of Titan’s full suite of products for Salesforce.

Making Web Projects Come Alive

In our webinar, our Creative Director is joined by Yaron Ollech, our very own tech wizard from the Professional Services team, to demonstrate how you can make your web project in Salesforce come alive with Titan Web and Titan Styling.

Sometimes, being different and getting creative with your web page is okay.

You can build and design custom forms, landing pages, and portals in Titan Web to launch a fully responsive web page directly from Salesforce using our drag-and-drop web page builder.

By following some fantastic tips, you should be able to create a vibrant Salesforce project that will leave your end users wowed.

Robust Titan Solutions that you can Trust

The webinar commences with a sneak preview of Titan’s interactive suite of products that offers a powerful bi-directional sync with Salesforce so you can stop coding and start building. Take a look at some of the Salesforce – example projects below:

Titan Forms – Create customized forms for your business with our no-code form builder.

Titan Web – Drag and drop to turn your ideas into intuitive web portals.

Titan Docs – The leader of the pack to generate branded custom documents with live Salesforce data.

Titan Sign – Easily share, manage, and track the progress of eSignatures directly from Salesforce using Titan’s code-free signature builder.

Titan Survey – Connect with your end users by creating a dynamic survey to gain valuable insights. A powerful no-code survey builder made for Salesforce teams.

To learn more about how you can utilize Titan’s no-code form builder to your advantage and the many more products on offer, go onto our Titan website and book a demo today.

Unrivaled Creativity at your Fingertips

Yaron provides a rundown of the topics, such as the ins and outs of Titan’s no-code structure, personal styles vs. project styles, and ensuring your forms are aligned and well-spaced. Giving you tips, best practices, and how you can make the most of the Titan Styling for projects in Salesforce.

So, let’s get creative!

We believe in Creativity

What is the Web Builder Structure?

The builder is divided into five main areas, namely:

The Left Panel, where all the elements are listed, can be easily dragged and dropped onto your canvas.

Project Settings can be found on the left panel.

In the top menus, you can find functionalities such as Save, Preview, and Publish.

An exciting part of the builder is the Floating Panels – each element has floating panels, one for Style, another for Settings, and most importantly, our Layer List.

The Canvas is the main area where users create their masterpieces.

The Importance of the Layer List

The Layer List is a nifty widget that makes up every detail required in designing a web page, i.e., Strip, Columns, Container, and the elements within the strip, container, etc. Users can name the element, making it easy to search and identify.

Each layer in the list has an eye icon that allows you to control its visibility; you can hide or unhide the elements.

The order in which layers appear corresponds to the layer order on your canvas, allowing you to change the order of layers on the canvas.

Web design changes like fashion, so creating a web project with fewer bold, innovative, and exciting elements is essential.

The Canvas Explained

Using our professional web design features, you can customize the canvas, which means you can design your website exactly how you want.

From color to backgrounds to innovative features like images and videos, you have plenty of options. Think of the canvas as your company’s online art piece – everything from the written content to the colors and fonts you use should reflect your brand identity.

Note: Several interface levels are presented to the end user. A user can add elements to the canvas but not the area outside of the canvas. The Canvas lies above a Window, a separate screen area that can overlap, resize, and control depending on screen size and resolution.

The canvas is divided into strips – use strips to structure your web page and break it into horizontal sections, creating a more professional look and feel.

Add a strip by clicking on the + icon or through the element panel, choose a blank strip, or why not choose one from our template library, and insert a video or image or even change the color of your strip to create a stunning effect.

Styling

Personal Styles

You can add Styling and create a unique web project with Titan Web.

Let’s start with Personal Styles. All the elements in Titan Web have the same basic structure, including the element itself and a label.

Once an element is selected on the canvas, its style settings are displayed in the “Properties” panel on the right.

Inside the Style tab, the style properties are divided into the same categories in each element: Font, Background, Size & position, Padding, Border, etc.

Users can apply Style changes to multiple elements. For example, you can also change the “label” color to green and the element background color to red. You can customize and personalize the element’s Style by changing these properties.

Style Classes

Amp up your web project with Style Classes, which lets you customize its layout, fonts, colors, and more.

A recommendation given is to use Global styles to save time and help users change the overall Style across their entire project without having to edit individual projects or pages.

Tips: The color picker is Titan Web’s ultimate web design tool. We allow users to choose their colors according to the company branding and save the palette before they begin working on their canvas. Once you have them saved, it eliminates the hassle of copying and pasting.

Fill

Adding a background to your web project is essential and the most popular to make it look captivating. 

A simple way to add a background is using the Fill feature in Titan Web.

You can use a solid, textured, or gradient background to create contrast and depth, allowing your web page to stand out and get noticed. Gradients are a more subtle approach than solid colors.

Instead of using color, add an image as the background that allows you to grab the visitor’s attention and immediately relate your message visually.

If you dislike color or images as your background, choose a video and add it as a background. It will encourage visitors to stay and increase their browsing time.

Note that you can only apply the video background to a web project’s container or strip.

Alignment & Spacing Tools

You may experience minor alignment and spacing variations on your web pages, such as text rendering and overlapping elements.

By adding them to containers, columns, and repeaters, you can adjust your elements in just a few clicks to ensure their alignment on different browsers.

Is Spacing an issue due to the page design or the height of the page? No worries, you can easily have the spaces removed by adjusting the design or height.

Project (Customize) Style

With so many layouts, themes, and backgrounds, you can customize any web project with your color scheme with just a few clicks by using the Customize Style feature in Titan Web.

It’s important to note that Customize Style in Titan Web applies to elements by their type. For instance, an input field, like a number, a URL, or a text, is considered one type of element.

If you need more content, watch our webinar to learn how to use Styling options to create an engaging online presence.

So, now that we’ve walked you through styling web projects. It’s time for you to start designing and styling projects to rapidly grow your business.

We look forward to hearing from you soon!

• Twitter
• Facebook
• YouTube
• LinkedIn

Disclaimer: The comparisons listed in this article are based on information provided by the companies online and online reviews from users. If you found a mistake, please contact us.