We create visual experiences that inspire and engage

whitedownarrow

Notice, the H1 above has a class "bigcenter70" added to it. I created 3 classes, bigcenter60, bigcenter70 and bigcenter80. These set the max-width of the heading text to 60%, 70% or 80% respectively. They also go back to 100% on mobile. Another option to control spacing would be to put text in two H1 tags, breaking it where you want. Note this text is set to bigcenter60.

If there is a featured image, it will show at the top like the blog. It is optional, you don’t have to have one.

 

Basic font stuff on white:

Header 1- Large Black

Header 2 – Smaller POP color (quotes will be black but h2 is pop)

Header 2 – forced black, add class forceblack

Header 2 – add class mediumgrey

Header 2 – add class mediumblack

Header 3 – same as h2 forceblack

Header 4 – Large POP Color

Header 5 – uppercase black
Header 6 – uppercase pop color

PADDING NOTE: Some blocks have padding check boxes for top, bottom, left, right so that you can have padding on 3 sides and have the image touch on one side. Padding is 50px until the browser is 700px wide and then it is 20px. PADDING DOES NOT show in the backend of the website, only the frontend.

centered blackbtn

class blackbtn

class popbtn

class whitebtn

class poparrowbtn

(the arrow will show on the front end for the poparrowbtn)

To add a black down arrow, add any text and add a link to any page. Then add the class blackdownarrow to the “a href” tag. On the front end of the website it will convert to an arrow that will click to scroll down to the next block. If you want the arrow centered, center the text.

class blackdownarrow

Basic font stuff on black:

Header 1- Large White

Header 2 – Smaller POP color

Header 2 – forced white, add class forcewhite

Header 2 – add class mediumwhite

Header 3 – same as h2 forcewhite

Header 4 – Large POP Color

Header 5 – uppercase white
Header 6 – uppercase pop color

class blackbtn

class popbtn

class whitebtn

class poparrowbtn

(the arrow will show on the front end for the poparrowbtn)

To add a white down arrow, add any text and add a link to any page. Then add the class whitedownarrow to the “a href” tag. On the front end of the website it will convert to an arrow that will click to scroll down to the next block. If you want the arrow centered, center the text.

class whitedownarrow

Latest Article Download

Content here, just testing

Awesome!

Testing a quote block

Notice that I adjusted the size of this image by changing the
width and height (by half) under text view.
This technique doesn’t work inside the visual columns.

“They bring new ideas to the table and challenge us to think about how we communicate our message, which we value greatly."

The Author Here, Then Their Title

“I've worked with Ink Factory a couple of times, and they have never disappointed. In fact, I keep coming back. Courteous, professional and awesome to work with. They do a stellar job!”

Jennifer McAteer, Mindshare North America

“Learned about visual note-taking with the nice folks @the_ink_factory. They are amazingly talented! Thanks guys!”

Tony Landek @tonyland

We work with awesome clients

 

autodesk
Barilla
Cisco
ComEd

Disclaimer here…. I added an inline style in text view to make the font smaller.

Testing a news block

“CT1 There are many ways to incorporate these graphics into your event that go beyond the standard whiteboard on an easel.”

Read Article

"BB1 No Link... Lorem ipsum dolor sit amet, ad vel accusamus ullamcorper, quod utinam eligendi ex nam, usu choro aliquid sadipscing no. Vel te vocibus pericula, dictas numquam volutpat ea sed."

"CT2 Ne decore democritum mei. Sea accumsan torquatos ei. Nemore veritus an sit, feugait qualisque te eam. Ipsum legere salutatus sea cu. Dico recusabo constituto has te, no graeci accusamus duo, ad praesent corrumpit pri."

Read Article

"CT3 Nibh labores accumsan ne qui, nominavi dignissim vix ex. Libris feugiat posidonium est eu. Amet ferri has ex, fierent dissentiunt eos ad, an essent temporibus vel. Mea discere electram te, eum in equidem antiopam."

Read Article

"BB2 Ad vel accusamus ullamcorper, quod utinam eligendi ex nam, usu choro aliquid sadipscing no. Vel te vocibus pericula, dictas numquam volutpat ea sed."

Read Article

Some text introducing the simple link block below

Link text that doesn't have a link

 

Testing a black bg block.

Padding is on top, bottom and right, but not left. At mobile size the left padding gets added back in. This example has an extra column in the middle to add extra space.

Another test.

This example doesn’t have the extra column so no extra middle space. Notice the button below on mobile 320 – the button text is too long.

Here is a poparrow BUTTON

 

The image below we want to fit the page and NOT scale. So let’s wrap the image in a div with the class “noscale”.

Add this without spaces before the image tag: “< div class = “noscale” >
And add < / div > without spaces after the image’s closing tag / >

On the frontend it will stay the same size, center, and cut off any extra left and right. Note that in order for this to work, the block needs to have no left & right padding. After 1900 pixels wide, the image will stretch in width to handle really big monitors, so only use this for wide images.

Small centered images in the visual columns layout

The visual columns layout stretches images to fit the width of the column, this is because most images you load in are larger than the area they fill. In the case below, the images are smaller, so I added a class “nostretch” to each <img tag. This keeps the images from scaling up in size.

 

Engaging

Visuals stimulate the emotional centers of our brains, exciting people about your content.

Clarifying

Drawing information helps us understand it, clarifying problems that were once cloudy.

Memorable

It’s scientifically proven that pairing text with visuals helps you remember information longer.

Accessible

Most people are visual learners, making it easy for everyone to get on the same page.

 

Testing an alternating layout like on the homepage.

The key here is getting the images to be on top when the site is at mobile, so we need to start with the image on the left.

poparrowbtn

 

So here’s what you do.

Load in your text and images into the visual column layout with the image on the left and text on the right. Then go to the text view and add the class “floatright” to the columns. You need to add it to all columns in that row. The columns already have two classes, so just add floatright in the quotes with them. One class is a span# and the other is rhcol.

poparrowbtn

 

You’ll see the layout in the backend.

I added the class floatright to the backend so you’ll see the columns align in your editor window as you make your changes. They have an extra left space only in the editor window.

poparrowbtn

 

Heading here

Animated gifs reload when a user scrolls.

If you don’t want them to, add the class “noreload” to their img tag.

a white button

 

Testing a 21x9 video

Ok, Videos do not reload on scroll. They should loop.

 

testing a wide image

Black editor after an image. What if I want them to touch?? Image above has no bottom wiggle. Black editor has top wiggle and no top margin.