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.
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!
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.
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.
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.
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”
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!