How to Create Typographic Magazine-Style Layouts

For a conversion focused website, there's nothing more important than text. Your words need to be convincing. If they aren't, nothing else you do on your site matters.

But words don't only have to be convincing. As you'll see in this tutorial, letters, words and typography can become a design element in their own right. Watch the video to see how you can create text layouts with a serious wow-factor!

The tool used in the video is the Thrive Architect plugin for WordPress. We've added a new template to the Thrive Architect template cloud, which includes all of the layouts shown in the video:

To get this, load a page with Thrive Architect, go to "page setup" (next to the save button), click "Change landing page template" and you'll be able to choose the "Typography Playground" template in the "Bonus Templates" set.

You can then save any element or layout on the page as a content template, to re-use anywhere on your site.

Why Real Text Layouts Are Better than Images

This tutorial (and the template) aren't just a way to show off some of the advanced features in Thrive Architect. There are good reasons to create layouts like this in Thrive Architect.

The alternative is to use an image editing tool like Photoshop to create such layouts and then save and upload the image to your site. This isn't a very good solution - building the layouts directly in Thrive Architect is better because:

• These real text layouts are more SEO friendly: the layouts consist of real text that can be read by search engines and count as part of your page's content.
• They are much smaller in data size than image files. As a result, they are faster to load.
• They are more mobile friendly than images. They can be made mobile responsive and real text at small sizes is crisper and more readable than an image of text, shrunken down.
• They are much faster to edit: want to change the wording? Just click and edit. No need to create, upload and replace an image.
• Real text layouts can be created directly in Thrive Architect, which means you don't have to learn how to use a complicated image editing tool and don't have to spend untold $$$ on Adobe's insane subscription prices (or on hiring a designer to do the work for you).

Video Highlights

The video covers many different details and features. Here's an overview of the highlights, so you can easily reference back to specific parts:

The Letter Outline Trick

​Starts at 03:55

In CSS, the design language of websites, you cannot add an outline effect to letters. This part of the video shows the trick we use to get around this limitation: we add multiple drop shadows and remove the "blur" effect from the shadows. The end effect is that we have an almost perfect outline around the letters.

To find the text shadow option, click onto the text element and then open the "Advanced" toggle in the text options:

To get the effect of a solid border, you'll need to add multiple shadows.

Add a shadow and:

• Give it a solid color (100% opacity)
• Set the angle to 0°
• Set the blur to 0px
• Set the distance to whatever you want the line thickness to be. A 2px distance results in a letter outline of 2px.

Now, add a new shadow with the exact same settings but with a 90° angle. Continue this 2 more times for 180° and 270°. Basically you're adding right, top, left and bottom shadows which creates the impression of a border around the letters.

To get the complete inside scoop on shadow effects in Thrive Architect, check out this tutorial.

Creating Overlap Nr. 1

Starts at 06:00

For our first overlap, we place the image below the text. Then, we apply a negative top margin to the image, in order to make it overlap the text. Note that negative margins almost always have to be compensated for on a neighboring element. In this case, we added a large top padding to the background section, to prevent the image with the negative margine to disappear beyond the top of the viewport.

Adjusting the Letter Spacing

Starts at 07:02

This is another neat trick, available to you in the advanced tab in the text options: you can change the spacing between letters in text. For our second line of text, we make use of this to create a very stylish looking effect.

Creating Overlap Nr. 2 and Changing the Stacking Order of Elements using Z-Index

Starts at 07:32

We are now creating another layer of overlap and things get a little more complicated. Once again, we added an element to the bottom and then used a negative top margin to move it into position.

However, the text appears behind the image. To change this, we go to the advanced tab in the Layout & Positon options and adjust the Z-index. You can think of the Z-index as the stacking order of elements, going from the screen towards your face.

You don't need to know the technicalities of this, because the basic rule is simple: the higher the Z-index value of an element, the further "up" in the stack it will show. So, if the image has a Z-index of 3, we just need to set a value of 4 or greater on the text element.

Important: Z-index only applies if the position of your element is set to relative or absolute.

Adding a Background Color Behind the Text

Starts at 8:18

To make the new line of text more readable, we add a semi-transparent white background to it.

To control exactly how wide and tall this background box is, we can use the max width setting in Layout & Position for the width and either the line height or top and bottom padding for the height.

Making the Entire Layout Mobile Friendly

Starts at 09:15

This is where one of the hidden powers of this typography layout comes into play: mobile responsiveness.

In this part of the video, you can see how the layout can be made to fit different screen sizes by quickly tweaking just a few factors: font size, letter spacing and margins. The result is that the layout looks great and is still fully readable on any screen size.

For more on mobile responsiveness in Thrive Architect, here's an in-depth tutorial.

Building a Whole Bunch of Other Layouts in Fast Forward

​Starts at 15:29

You can see a fast-forward recording of how all the other layouts in the Typography Playgound template were created. While not all the details are explained, you can see that we're using mostly the same techniques as in the first example to create many different and interesting layouts.

How do you like the layouts shown here? Do you have any questions or feedback about the tutorial video? Let me know by leaving a comment!