fbpx

    Get Started

  • What is Billa Studio?
  • Setup Steps
  • Icon Glossary
  • Billa Studio Guide

  • Email Marketing Tool
    • Understanding Email Marketing Editor
    • Using Email Rich Text Editor
  • Landing Page Marketing Tool
  • Integrating with Marketing Automation Platform

  • Mailchimp
  • Marketo
  • Active Campaign
  • HubSpot
  • Oracle Eloqua
  • Editor Glossary

  • Email Marketing Editor Tools
  • Landing Page Tools

What is Billa Studio?

Billa Studio is a Marketer’s workspace to create the marketing collateral you need.

Do I need to know how to code?

Absolutely not! Start using it in minutes and discover the tools for yourself.

What can I do in Billa Studio?

  • Email Marketing Editor
  • Landing Page Editor
  • Integrate with your choice of Email Automation Platform
  • Design your own work

Do I need to learn how to use all the tools?

Billa Studio is super user-friendly to use! Learn as you go, and you’ll be able to piece together the different functions.

Welcome to Billa Studio!

Before you get your hands onto Billa Studio, there are a few steps to complete.

1. Setup your account

Home > Billa Studio > Billa Studio Login

Sign up to a new account here.

2. Login

Login with your username and password here.

3. Forgot password

Fill out your details to retrieve your password.

Email Marketing Editor Icons

Icon Name
Dashboard HOME
My DESIGNS
Create New EMAIL
Create New LANDING PAGE
Elements
Property
Blank Page
Undo
Redo
Load Template
Collapse Menu
Save
Preview
Export
Save Template
Load Template
Send Mail
Other Devices

Welcome to the Email Marketing Editor

Billa Studio Login > Create New EMAIL

Start building out your Email Marketing collateral here.

Left Side Menu

Customise your email marketing template with the side menu on the left.

You can build your email exactly how you want! Here you can find a range of different elements.

Typography: page headers, paragraphs, image and text layouts, lists and more

Simply begin by dragging and dropping the elements into the workspace.

Media: Image, 2 Images & Video

Drag any of the Media elements across to the workspace.

Select the blank image filler on the workspace so that it is highlighted.

The left side menu should change once the image filler is selected.

On the Left Side Menu, select Change Image

Once selected, you can upload the image you need for your email marketing campaign.

You can also adjust the image width and height.

Padding: Edit the padding according to the size needed.

HOT TIP! Type in your padding size in the big square and it will automatically link all sides to have the same measurements.

Border Radius: Make the corners of your images rounded using this tool

HOT TIP! Type in your border radius size in the big square and it will automatically link all edges to have the same measurements.

Background: Choose the colour of the background and adjust accordingly. In this example we’ve created a pink background.

Layout: Add any type of dividers – standard, dotted or dashed. Break up your content with dividers and give your customers a chance to for the email to be Viewed in Browser.

Button: Add as many Call-to-Action buttons you need – 1 button, 2 buttons or 3 buttons.

Customise the following – Button background, Text, Add links and more!

Social: Add your Social Media channels to your email campaign and choose from a range of designs.

Turn on/off the social channels you need and add links to your social channels.

Footer: Place your address onto the email campaign with the footer option.

Edit the address and add in your location at the bottom of the page.

Choose a design, from one-line or stacked.

Blank Page

To start fresh, select Blank Page and a pop-up box will appear to remind you that you are leaving your work behind unsaved.

HOT TIP! Make sure you save your work in between to avoid any loss of data.

Underneath the Blank Page option you can also find UNDO and REDO

Load Template

If you’ve got an eDM that you want to upload and edit this is the option to choose.

Here you can load any of the templates that you have saved in your My Designs section.

Icon Name
Font Family
Font Sizes
Bold
Italic
Underline
Strikethrough
Insert/Edit link
Align Left
Align Centre
Align Right
Justify
Text Colour
Background Colour
Remove Link
Clear Formatting
  • Understanding Landing Page Editor
  • Usign Landing Page Rich Text Editor

Welcome to the Landing Page Editor

Billa Studio Login > Create New LANDING PAGE

Start building out your Landing Page here.

Landing Page Templates

Scroll down your Dashboard and choose from a range of ready-to-go landing page templates available at your finger tips!

Create new LANDING PAGE

To createa a new landing page:

Select Create new LANDING PAGE, and it will load up the Landing Page Editor

Left Side Menu

Customise your landing page template with the side menu on the left.

You can build your landing page exactly how you want! Here you can find a range of different sections, styles, typography and pages.

Sections Default Styles Typography Project Pages

SECTIONS

Navigations

Pick from a range of Navigation Menu Bars.

Simply drag and drop it into the workspace.

Access the options to edit the Navigation Bar by hovering over it.

Backround settings
  • Background Colour: customise using the options available
  • Opacity: slide from left (0%) to right (100%)

 

Choose the type of Background colour you want:

  • Default colour
  • Solid colour
  • Radial gradient
  • Vertical gradient
  • Horizontal gradient
  • Angle gradient

 

Change the colour using the Colour picker.

Navigation setting
  • Type: choose the type you want
  • Skin: change the skin from Light to Dark

Section Code Editor

Add, edit or remove  your coding in this space

Delete a Section

Not sure you want the specific section?

Press the trash can to delete the section you want to remove.

Headers

Select from a range of different Headers available in the Landing Page Editor.

Hover over the desired Header (it should turn blue) , and drag it into the workspace.

Edit your header by changing images, text, links etc.

Edit the text with the Rich Text Editor features:

  • Bold
  • Italic
  • Capitalize
  • Underline
  • Strikethrough
  • Mirror
  • Align Text

Buttons

Edit by changing the text, colour and link of the buttons

Descriptions

Add a new section with different tiles, choose the design you need.

Hover over the desired Description section (it should turn blue) , and drag it into the workspace.

Replace the image simply by hovering over it and selecting the image editor.

Edit the Elements settings of the image by selecting the mixer.

In Element settings you can adjust:

  • Margins
  • Skin
  • CSS Style
  • Visibility

 

Edit the text by hovering over the text. Different options will appear e.g. H1, H2, H3 & H4

 

Benefits

Add a new section from the Benefits option, choose the design you need.

Hover over the desired Benefits section, and drag it into the workspace.

The Benefits section is the ideal space to add your own icons and text.

 

Call to Action

Add a new section from the Call to Action option, choose the design you need.

Hover over the desired Call to Action section, and drag it into the workspace.

Icon Editor

Change the icon on your Call to Action button. Pick from a wide range of icons available.

 

Link Editor

Link your button to the desired URL

HOT TIP! Tick the box to Open in new tab

 

Text Grid

Add a new section from the Text Grid option, choose the design you need.

Hover over the desired Text Grid section, and drag it into the workspace.

Duplication tool

Replicate your elements with the Duplication tool

 

Galleries

Add a new section from the Galleries option, choose the design you need.

Hover over the desired Galleries section, and drag it into the workspace.

To change the current images in the template, select Image path.

Select Upload and pick the new image from your files.

Text Align

Change the text alignment according to your preference

  • Left
  • Centre
  • Right

 

Step by Step

Add a new section from the Step by Step option, choose the design you need.

Choose from a range of steps, edit the text for your landing page.

Hover over the desired Step by Step section, and drag it into the workspace.

Diagram

Add a new section from the Diagram option, choose the design you need.

Hover over the desired Diagram section, and drag it into the workspace.

 

Element Animation

Animate your elements with this tool

Edit each part of your element using the following:

  • Animation
  • Timing function
  • Duration
  • Delay
  • Repeat

 

Pick from a variety of Animation options

 

Counters and Timers

Add a new section from the Counters and Timers option, choose the design you need.

Hover over the desired Counters and Timers section, and drag it into the workspace.

 

Bar Graph Editor

Work inside the CSS Style to edit the height and width of your graph

Subscription

Add a new section from the Subscription option, choose the design you need.

Hover over the desired Subscription section, and drag it into the workspace.

 

Contact Form Settings

Edit the form and make it your own.

  • Choose your preferred email automation platform.
  • Enter your subject
  • Enter your email address
  • Choose your preferred confirmation method

 

 

Team

Add a new section from the Teams option, choose the design you need.

Hover over the desired Teams section, and drag it into the workspace.

Replace the images with the people from your team.

Add details such as:

  • Name
  • Title
  • Description

 

Testimonials

Add a new section from the Testimonials option, choose the design you need.

Hover over the desired Testimonials section, and drag it into the workspace.

Replace the text and images with your own testimonials.

 

Clients

Add a new section from the Clients option, choose the design you need.

Hover over the desired Clients section, and drag it into the workspace.

Showcase the brands and partners you work with.

 

Background Setting

Customise the Background Settings and edit:

  • Background path
  • Background repeat
  • Background position
  • Background colour
  • Parallax
  • Opacity

 

 

Special Sections

Add a new section from the Special Sections option, choose the design you need.

Hover over the desired section, and drag it into the workspace.

Here you can find ready-made 404 Pages if you want to disable any links.

 

Videos

Add a new section from the Videos option, choose the design you need.

Hover over the desired Videos section, and drag it into the workspace.

 

iFrame Settings

  • Select Default Style
  • Hover over the video template
  • Insert new video URL

 

 

Pricing Tables

Add a new section from the Pricing Tables option, choose the design you need.

Hover over the desired Pricing Tables, and drag it into the workspace.

Change the prices for your landing page.

 

Forms and Maps

Add a new section from the Forms and Maps option, choose the design you need.

Hover over the desired Forms and Maps, and drag it into the workspace.

 

Background settings

Change the colour of the background

 

Form Constructor

Create a form using:

  • Text field
  • Email field
  • Select field
  • Text area
  • Radio button
  • Checkbox
  • Date
  • Text
  • Attach file

Build out the form by dragging and dropping each section into the workspace inside the pop up window.

 

Map settings

Insert the latitude and longitude of the set location.

 

Modal popups

Add a new section from the Modal popups option, choose the design you need.

Hover over the desired Modal popups, and drag it into the workspace.

HOT TIP! Select the box in the top right corner.

 

 

The pop up box should appear on the page

 

Form Constructor

Build out the form that you need by dragging and dropping the fields into the workspace inside the pop up box.

 

Footers

Add a new section from the Footers option, choose the design you need.

Hover over the desired Footers, and drag it into the workspace.

 

Link settings

Link all your social channels to your landing page.

Insert your URL here.

Icon Name
Font Family
Font Sizes
Bold
Italic
Underline
Strikethrough
Insert/Edit link
Align Left
Align Centre
Align Right
Justify
Text Colour
Background Colour
Remove Link
Clear Formatting

Guide for Mailchimp template integration

Before you get started, to make sure you are equiped for a smooth integration follow the steps below: Step 1: Create an account on Billa Studio. Step 2: Select from over 100+ templates, elements and layouts. Create and design your email marketing campaign. Step 3: Export and download your email marketing campaign template file. Step 4: Integrate your email marketing template with MailChimp.  

Now you’re ready to go, it’s time to integrate with Mailchimp!

Click the Brand drop-down and choose Templates. brand-dropdown-templates Click Create Template. Cursor Click - Create Template On the Code your own tab, choose Paste in code. button-codeyourown-pasteincode On the Edit Code tab, replace or edit the example code, and click Save in the editing pane. Cursor Click - Save - Import Custom HTML When you’ve finished editing your template, click Save and Exit. button-editcode-saveandexit In the Save Template pop-up modal, enter the name of your template and click Save. modal-savetemplate-clicksave You can access your custom template on the Templates page and as a saved template in the Campaign Builder. Source: https://mailchimp.com/help/import-a-custom-html-template/

Guide for Marketo template integration

Before you get started, to make sure you are equiped for a smooth integration, please follow the steps below: Step 1: Create an account on Billa Studio. Step 2: Select from over 100+ templates, elements and layouts. Create and design your email marketing campaign. Step 3: Export and download your email marketing campaign template file. Step 4: Integrate your email marketing template with Marketo.  

Now you’re ready to go, it’s time to integrate with Marketo!

Export your Email Template design from the Email Template Editor. Click Export on the bottom left corner. Your file will automatically download.  Once it has downloaded, open up Marketo with the campaign you are working on. Click Edit Code on the top navigation bar.  Copy and paste your html/css code into the workspace. Click Save.  It will redirect to this page which showcases your email.  If you need to make any changes after the upload, you can easily edit the text. 

Guide for ActiveCampaign template integration

Before you get started, to make sure you are equiped for a smooth integration, please follow the steps below: Step 1: Create an account on Billa Studio. Step 2: Select from over 100+ templates, elements and layouts. Create and design your email marketing campaign. Step 3: Export and download your email marketing campaign template file. Step 4: Integrate your email marketing template with ActiveCampaign.  

Now you’re ready to go, it’s time to integrate with ActiveCampaign!

Custom HTML in Designer Templates within ActiveCampaign. To add an HTML block to your email, drag it from the menu on the right under the Insert tab Simply drag and drop in where you want your HTML code to go.    When you click on the block you’ll see the options appear in the menu. For small blocks of code, you can paste them right into the Custom HTML field. If you are working with a larger piece of code, you have the option to bring up a modal window by clicking the maximize icon in the upper right-hand corner of the field:  Source: https://www.activecampaign.com/blog/custom-html-in-email-templates
Image result for hubspot logo transparent

Guide for Hubspot template integration

Before you get started, to make sure you are equiped for a smooth integration please follow the steps below: Step 1: Create an account on Billa Studio. Step 2: Select from over 100+ templates, elements and layouts. Create and design your email marketing campaign. Step 3: Export and download your email marketing campaign template file. Step 4: Integrate your email marketing template with Hubspot.  

Now you're ready to go, it's time to integrate with Hubspot!

In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools. Create a new file by clicking File > New file. You may need to click the folder icon folder to expand the finder. In the dialog box, click HTML & HUBL Code editor Enter the details of your new file:
  • Select Template or Template Partial.
  • Select the type of template you're coding (page, blog, or email).
  • Give your file a name.
Click Create
  • Copy and paste your HTML for your page or email template
  • To preview how your HubL will render, click to toggle the Show output switch on. A panel will open on the right with the rendered preview.
design-manager-show-output-toggle Any errors in your code will be flagged in an error message when you try to publish changes. The error console at the bottom of the code editor will display the error or warning details, as well as suggestions on how you can fix these errors and warnings error-console Source: https://knowledge.hubspot.com/cos-general/build-a-custom-coded-template-in-hubspot

Guide for Oracle Eloqua template integration

Before you get started, to make sure you are equiped for a smooth integration, please follow the steps below: Step 1: Create an account on Billa Studio. Step 2: Select from over 100+ templates, elements and layouts. Create and design your email marketing campaign. Step 3: Export and download your email marketing campaign template file. Step 4: Integrate your email marketing template with Oracle Eloqua.  

Now you’re ready to go, it’s time to integrate with Oracle Eloqua!

You can upload an HTML file or a ZIP file that contains your HTML as well as any associated content (images). If you have created an email outside of Oracle Eloqua using HTML, you can upload the file to Oracle Eloqua then edit the content in the Source Editor.

Before you begin:

  • Make sure your code adheres to the code requirements for HTML email uploads.
  • Do not use JavaScript. It is not supported on most email clients and Oracle Eloqua will prevent uploading HTML emails that contain <script> tags.
  • You can upload an HTML file or a ZIP file. If you upload a ZIP, Oracle Eloqua will extract the files during the upload process.
  • The maximum file size you can upload is 2.5 megabytes.

To create new emails or templates using the HTML upload wizard:

  1. Navigate to Assets An image of the Assets icon, which is represented by a black pencil., then click Emails.
  2. Click Upload an Email.

    An image of the Upload an Email option.

  3. Choose what you want to upload.

    An image of the Upload Email and Upload Template options.

  4. Click An image of the upload icon and browse to the HTML or ZIP file you want to upload.The upload wizard continues to the next step.
  5. Review the list of images and other files and choose to either use existing files or upload new ones.

    An image of the Process Files step.

    Choose one of the options listed beside each image:
    • Use Suggested Image: Choose this option if the image is already in the image library. If an image is available that matches the title of the image file in the HTML code, the application will automatically suggest that file as the correct mapping.
    • Upload New Image: Choose this option if the image is not in the library. Click Upload New and upload the image. Once uploaded, a thumbnail of the image is shown.
    • Do Nothing: Choose this option if you do not wish to change the image shown in the thumbnail.
    When you are finished, click Next Step.
  6. In the Process Links step, all hyperlinks in the uploaded email are listed. If you want to track these hyperlinks and ensure that clickthroughs are reported in Oracle Eloqua, enable the Track Link check box next to each hyperlink. If you wish to track visits to all links in the email, enable the Track All button in the upper-left hand corner. Repeat as required, then click Next Step.

    An image of the Process Links step.

  7. In the Finish step of the upload wizard, name your HTML document and select the destination folder where you want it to be stored. This is an optional step, the location can be changed at a later time if required.

    If you chose to upload an email, there is a field on this screen in which you can specify the email group. If you do not specify a group here, you will be required to do it later before the email can be sent.

    An image of the Finish step for uploading an email.

    If you are uploading a template, there will not be an email groups option. Instead, you will see a description field, in which you can provide details about the email. You can also choose an image to represent this template in the Template Chooser.

    An image of the Finish step for uploading a template.

    Select the Use Thumbnail check box if you want a thumbnail image of your template to be shown in the Template Chooser. If you clear this check box, you are presented with the option to select either a generic (blue) icon, or by clicking Change Icon, you can choose one of the available icon designs shown below.
  8. Click Finish to complete the upload process. The upload wizard closes and the Source Editor opens. Here you can perform any additional editing and styling if required. Learn more about the editing HTML emails using the Source Editor.

  9. Click Save.
Source: https://docs.oracle.com/cloud/latest/marketingcs_gs/OMCAA/Help/EmailEditing/HTMLEmail/CreatingNewEmailsByUploadingHTML.htm
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled 1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled 1