Modules, Layouts and Themes Part 2

Modules, Layouts and Themes Part 2

let’s move into some more detail on using the modular layout theme system, today I’m going to show you some more intricate ways to use the system to design things on your site. Let’s return to this screen from last time


 

now I want to explore some ways to stack and use the basic features on the right to create a far more modern, clean looking website.

 

First lets look at a web page to design our web page after, I am going to use the home page for one of our clients, Indy String Theory
 


 

it’s clean, it works well on a tablet or phone, and all the pictures pop. Let’s look at each part of this one by one, let’s start with the top square.

 

First let’s drag and drop a single column into our grid


 


 

the first thing I want to do is add a picture that will sit behind everything. To do this I will go to Decoration, and scroll down to Background.


 

Then I will upload the picture in question and make it the background of this section.


 

now it doesn’t look the way we think it should, but don’t worry we will fix that as we go on. Now when we look at the main image above we see 4 or 5 lines of text on the left side. Let’s add those, I am going to now drag a text box ONTO our column we just put a background on

which will look like this


 

now that looks almost nothing like the picture above, so, let’s change that.

 

Let’s change the txt by clicking on it, and clicking on typography on the right hand side


now, let’s make the text a bit bigger, make it a bit bolder, and make it white


 

that looks a lot better, but it still doesn’t pop. A lesson I learned while working as a graphic designer is white text with a black border will pop on any surface, that’s why its such a common choice for type, and in Saleturf you can do that, by adding a small shadow. Let’s click the plus sign on text shadow and add a small shadow behind our text


 

there, that looks a lot better. Now, let’s make this one line of text into 4 or 5 lines.

By clicking this button on ANYTHING inside of this editor you can duplicate it and any of its contents.


 

So let’s click that 5 times, I always like to have more then I need as I can always just delete them later.


 

There that looks great, now I am going to edit each line using the previously mentioned typography tab to better match our source material.

it looks better, but not great, the repair appointments should be on two lines and everything feels a bit too crowded, and maybe that shadow shouldn’t be on everything, maybe just the parts that we want to pop.

To fix the repair appointments area you can click on layout, and go to padding, we want a bit of padding on the right, so it pushes the text into two lines instead of one.


and I am going to adjust the size of the fonts and the shadow on the other two to better match our source material.


 

we’re getting closer, let’s remove those insert your text here place holders

and let’s get into adding those buttons at the bottom of the screen, for this example I’ll just add one, but you can add as many as you need.

 

So if you’re like me your first thought would be, let’s just drag and drop a link block like this


 

but if you do that, it will actually align the whole block right up against the left side of the screen, which can look a bit crowded as seen by its outline.


 

so instead, I like to put down a new column inside of our current column, and put the link block in there instead.


the block will now look like this instead


 

we now need to put the text into said link box, so drag a text box, into the link block that we just put into that new column.


 


 

now let’s make it look correct, first let’s put a light blue background on that link block, just like we did at the start go to decoration, and then to background but instead of an image, let’s just pick a color here


if you are having trouble clicking the link block, and you keep clicking the up arrow here, until it is selected.

 

now all we have to do is adjust the text on the link block, and adjust the background so it looks correct.

 

We adjust the text as we did before by highlighting the text and changing it to white and bold.

 


 

And now let’s fix that background, start by going back to that initial background decoration


 

now let’s adjust the background position and the background size until it fits, this is what worked for me


and there we go, we have more or less designed the top to that web page, we will create the bottom section with its product lists and half page spanning picture in part 3