Ask a Question ?
Design & Publish Websites Faster

Breakdown & Remix of an eBook Landing Page

Today we’re gonna show you how to create a great and easy to use eBook landing page also known as a book splash page!, we are gonna do this by quickly mimicking Chords For The Piano, but also, we’re gonna add a  twist to it and change a few things just so you can see what other cool things you can do with our web design app.

This is how the site will look at the end, of course, you can do your own version or do something from scratch.

sample ebook splash page

This is how your site will look at the end!

Building-It Video

Here is a quick video on how this happened, you can see it now in HD!

Building Our Layout

We are going to star by  using the Styles tools on our editor (Also called Bulk Style Editorand that we will call BSE from now on), click on the Styles tab at the Shelf  at the bottom of the editor and go to the Page tab, hit the Color box and click on the plus symbol, add the hex code you see on this picture!

Shelf & Page Color

This is how our BSE looks like, make sure all transparency boxes are checked!

Once you have done this the background will look a little bit different. Now it’s time to set our layout, on the next picture you will see how our page is gonna be arranged, to get an idea on how to use the Layout Builder just click here. Now, see how we have four blocks and how many sections and columns we have, each one of those columns will contain at least one app.

Layout & App Arrangement

This is how our layout will be arranged, each row is one block that contains one, two or three columns.

Go to the Apps tab on the Shelf at the bottom of the editor and install each one of the apps as it says on the image above. Once they’re all installed we’re gonna modify the content of each one of them.

Our Header, Making A Statement

Let’s start by the image app, double click on it, a modal will show up that will allow you to change the image, click on the replace button and choose my computer, this will let you choose the image that you want to upload.

Image Replacement

See how we’ve already changed the image, try it yourself too!

Now it’s time to go to the next column on the same block, this one has three apps; two text apps and a button one, which is really important.

Text & It’s Tags

Editing the text apps is really easy, double click on them and write or paste the content, a toolbar will show at the top as a EIP editor. Once every piece of text has been written it’s time to add  H Tags to them for future editing. Do this by selecting the text that you want to tag as a heading and select the heading that you want to attach to it, see the image below for further explication on how it is done and what tags we used.

Text Tagging

See how we added an H2 Tag to the text, indicated at the beginning of each sentence we show how is it that we have tagged each piece of text for future editing.

Calling To Action

Now it’s time to edit our button just a little bit, the first thing we are gonna do is double click on the white default text and change it for ours, once that’s done we will remove the Slogan under the previous edited text, to do this hover your mouse over the app, a toolbar will show floating, click on the wrench icon and a list of settings will appear, set Display Slogan Text as “No”

Slogan

Remember to hit the Save button after doing this!

Once this is done we have to change the target of our CTA Button, redirecting it to the page where the product can be bought. Hover over the app again and under it you’ll see a small tooltip that says “Form Settings”, click on it, a modal will show up and over there you can change a lot of settings, set the button to redirect you to a link once clicked and set it to a new window.

Form Settings

Once this is done hit Save and Close!

Introduction & Important Information

Once that content and settings for the previous apps have been edited, it’s time to move onto our next block, the Intro one. We’ll start by editing our Text + Photo Block App. We will use this app to add the Author’s bio (now we are actually remixing the original site). We are going to replace the main title with the author’s name and place an H2 Tag to it, we’ll remove the subtitle and replace the content on the description, and also, as we’ve done before, we will replace the optional image with one of the author, all this steps are done the same way that we have. Use the resizer corner to drag and rezise the optional picture on the app, you can see it surrounded by a red circle on the next picture.

Text + Photo Block

We used the resizer corner on the picture to do just that, rezise the author’s photo.

On the next app we will change a few settings using the wrench icon again. Set the app to use an Accordion instead of Tabs and hit save.

Accordion

See how you can change from Tabs to Accordion. Remember to hit save!

Once settings have been established, it’s time to add content, double click on the accordion sections or hover the app and lick on the Pencil icon, this will open a CMS (Content Management System) that will allow you to edit each tab title and content and add new ones, once you do this hit save to save your changes.

CMS

This is how the CMS looks like, remember to double click the text or the pencil icon to acces it.

On the next App we will add some reviews and opinions of the book, this adds importance and sets a more reliable mood for the customer, to do this we will use the Carousel App that we already installed. We will start by removing the optional image on the entry, change the title and add content, once this is done, you’ll need to add another entry for the next review, do this by hovering over the app and clicking the New Entry icon.

New Entry

Hover over the app to add new entries.

Once all entries are added we have to make the app show only one, hover over the app, click on the Wrench icon and edit it’s settings for the app to only show one entry at the time.

Entries 2

Settings being edited, hit save after this!

The Main Quote

Now that the main aspect of our second block is done, we’ll move onto the Body block, this one is fairly easy. Double click on the Text App at the middle  to add content, center it and leave it as it is, we will add style to id later. Replace each one of the images at both sides of the text with quotation marks, this will give focus and importance to the text in the middle, on the next picture you get a fair look on how it will look like after this.

Quote

This is how it will look like, see one of the first image to check how this arrangement was already planned.

Last But Not Least Block

Once this is done we are onto the last block, our Footer, here we are going to add our navigation app to place a few links and also a copyright mark and text. Hover over the links of the app and click on the dot that you see on the next picture.

Dot

Click on this dot to open a modal with a few nav app settings!

Once you’ve donde this a modal will show up that will allow you to change a few of the navigation app settings, click on the separators option, choose bars and set their color.

Separator

Some of the options shown!

Now it’s time to actually edit it’s content, hover over the app and click on the pencil icon to open the navigation app CMS, edit links and names trough it.

CMS Nav

This is the CMS that handles the nav app content, remember to hit save and close!

For the last part is quite simple, now place text on the remaining app by double clicking it, assign a tag to hit for future editing.

Working Headings Out Trough Our Bulk Style Editor

Now it’s time to edit our text trough the BSE, open the tab that says Styles at the bottom of your editor and make sure the  Merge All Selected Blocks box is checked, go to the text tab and edit regular tex; we are using Georgia, font size is 14px, font line height is 21 px, color is #333333, there is no shadow, boldness or any other effect.

BSE

See how we are using the BSE to edit regular text on the page, every text that has no tag on it will be getting modified.

Do this with each Heading and tag, on the next picture I’ll show you the values that we used for each one of the headings and  how it should look at the end.

Headings

H Tags and Headings values being used, check the video to see how it was done one by one!

Design Is In The Details Too

Once text has been edited, it’s time to add and remove borders, if you take a look at the page that we did there are a few borders showing around and we also have to remove some default ones, to do this click on a dot that border needs to be added and scroll down do the border section, activate and remove the ones that you want.

Borders

See how we added a gray small border to three of our apps on the Intro block and aligned them.

One small but important thing before going into details is spacing, make sure margins, paddings and spacings show properly, do this by hovering over dots and managing spacing, see one of our examples in the picture.

Spacing

We added spacing at the top and on the sides to make the text align with the image of the book.

Finally work on the details, as making the text on the button white and adding shadow to it and aligning the rest of the elements, if you see anything that you don’t like open a dot and style it, and in case you get stuck just watch the video at the beginning,

That was all folks!

If you have any questions go to our How To section or place a comment here, thank you for checking this tutorial!

Menu