Do you want to create a one page website?

I’ve got your covered.

Designing a one page website is easy and simple, and the best part is that your website will be modern.

One page websites have become popular recently and its easy to see why. These days everyone is on their phone or tablets and with a one page website, all of your content fits on a single page. Your content is only separated with sections.

A one pager is just that, a single page website with no additional pages. As you can see on Sajah’s Design Studio, if you click on the menu options at the top, you will be redirected to a different page. With a single page website there are no separate pages. All of your content will be on the same single page and the reader’s will scroll down the layout to view more of the content.

Click here to view the one page author website, that we are going to recreate today.

What you will find below:

  1. Why you should consider a one page website
  2. Let’s create a one page author website

How To Create A One Page Author Website

Why you should consider a one page website

Look, I love a beautiful website as much as any web designer. The process and designing it all, is my happy place and I will never agree that social media is a better alternative to a website.

As an author, or any business big or small, owning a website is one of the most important investments. A website will help you stand out from competition, and it is your space to do what you want, without limitations.

However, I understand that not every author wants to spend the time designing a full website, with all the bells and whistles. I get it. There is a learning curve and it can be time consuming, depending on your goals and schedule.

A single page website will only show your readers the perfect amount of information. Everything is organized and you can promote a new book, or a sale. Reader’s can navigate easily. Collect subscribers and it’s easier to optimize your website for mobile devices.

Note: If you want to display your entire backlog of books, a one page website will not work. You should consider one of my Author Packages. A one page website is perfect if you want to showcase a new release or have specific goals in mind. As you can tell on the one page website, the readers have only a few choices purchase books, subscribe to newsletter and follow on social media accounts.

Are you ready to get started?

Let’s Create a One Page Author Website

We can’t create the one page website without a few important services/products. Before we begin you need a web host and a domain name. You can get both when you purchase a web host.

Next, we are going to build this one page website with the Avada theme. This theme has over 800,000+ downloads. It’s easy to use, design modern websites, mobile friendly, and you don’t need to know any coding: HTML, PHP, Java, CSS, nada nothing.

Siteground is a perfect web host to install and set up your Avada theme.

How To Create A One Page Author Website

What you get with SiteGround’s Startup plan:

  • Unmetered Traffic
  • Free WP Installation
  • Free WP Migrator
  • Free SSL
  • Daily Backup
  • WordPress Autoupdates

That’s just a few of their amazing features, check them out.

SiteGround and Avada are an excellent duo. On the sales page for Avada, they also recommend SiteGround.

For this step-by step guide you need the Avada theme. You cannot build our one page author website, without it and you won’t be able to build it with the default WordPress editor. The Avada theme has a powerful Fusion Builder, with their drag-and-drop feature. I love it because you can easily customize, any layout without coding knowledge.

Avada gives you the ability to build any design style with the only limiting beliefs being your imagination

We’re going to recreate the one page author website with step-by step instructions.

How To Create A One Page Author Website

Table of Contents

The steps below will guide you to create a one page author website with Avada:

Note: The instructions below is intended for a brand new installation of WordPress. No prior WordPress website. The step-by-step guide will work if you had another WordPress website previously, however the instructions below may look slightly different on your end.

Install/ Activate and Insert Avada License Code

At this point, I’m assuming that you completed the following tasks:

  1. Bought a web host.
  2. Purchased the Avada theme.

If you need help with installing a WordPress theme, click on the link for help.

Once the Avada theme is activated and license code inserted, you have to now install the Fusion Builder.

Do NOT skip this section. If you do, your theme and the design will NOT work properly.

Import Customization Code

The code that you will copy and paste is for the site customization, which means: coloring, font styling, page size etc

The Avada options are a unique and advanced system of options. This option panel allows you to configure virtually every section of your website. The options are organized into logical tabbed sections, and each option has a description of what it will do.

You can easily access the Avada Options on your website:

WordPress Dashboard > Avada > Options

However, I am providing you with the Import URL so you don’t have to manually go through all of these options and configure them to your website.

http://onepageauthor.sajahsdesignstudio.com/wp-admin/admin-ajax.php?action=fusionredux_link_options-fusion_options&secret=a648cfa1a8066c6d01b361b93dc9b1e6

Once you import the above code into your Avada theme, there is going to be very little configuration within the Avada Options panel.

Follow the below directions:

WordPress Navigation > Avada > Options > Import/Export

Click on Import URL.

How To Create A One Page Author Website

Copy and paste this code into the empty text box.

http://onepageauthor.sajahsdesignstudio.com/wp-admin/admin-ajax.php?action=fusionredux_link_options-fusion_options&secret=a648cfa1a8066c6d01b361b93dc9b1e6

How To Create A One Page Author Website

Click on the blue button: Import.

Create a Homepage

WordPress Navigation > Pages

*You can also click on All Pages. It all leads to the same section.

How To Create A One Page Author Website

On this page, you will see two default WordPress page: Privacy Policy and Sample Pages.

Under Sample Pages, you will see a set of links. Click on Trash.

How To Create A One Page Author Website

Under the page title; Pages, you will see the link Trash appear and click on it.

How To Create A One Page Author Website

Hover over the page Sample Page and click on Delete Permanently.

Under the page title; Pages, click on All.

How To Create A One Page Author Website

Hover the mouse over Privacy Policy and click on Edit.

How To Create A One Page Author Website

On the right side, click on the blue button that says Publish.

How To Create A One Page Author Website

At the top of the page, beside Edit Page, click on Add New.

When the page loads, add page title: Homepage.

How To Create A One Page Author Website

On the right side, click on the blue button that says Publish.

How To Create A One Page Author Website

We are going to come back to this page later.

WordPress Settings

WordPress Navigation > Settings

  1. Site Title: Add Your Site Title (Example: Your author name)
  2. Tagline: Add Tagline (Romance Author, USA Best Selling Author. Keep it short and sweet etc )
  3. Administration Email Address: Your best contact email (This field will be automatically filled out, when you had installed WordPress. You can change it now or leave it. This section is only if WordPress needs to email you, and not for the public.)
  4. Scroll down and click on Save Changes.

WordPress Navigation > Settings > Reading Settings

  1. Select Static Page.
  2. Select Homepage.

How To Create A One Page Author Website

Scroll down and click on Save Changes.

WordPress Navigation > Settings > Discussion

Edit the following:

  1. Allow link notifications from other blogs (pingbacks and trackbacks) on new posts
  2. Allow people to submit comments on new posts

How To Create A One Page Author Website

Check the box to the below options:

  1. Comment author must fill out name and email
  2. Show comments cookies opt-in checkbox, allowing comment author cookies to be set
  3. Enable threaded (nested) comments

How To Create A One Page Author Website

Email me whenever check the box to the below options:

  1. Anyone posts a comment
  2. A comment is held for moderation

How To Create A One Page Author Website

Before a comment appears, check the box to the below options:

  1. Comment must be manually approved
  2. Comment author must have a previously approved comment

How To Create A One Page Author Website

Avatars

  1. Uncheck show avatar

How To Create A One Page Author Website

Scroll down and click on Save Changes.

WordPress Navigation > Settings > Permalink

  1. Select: Post Name

How To Create A One Page Author Website

Scroll down and click on Save Changes.

Return to Menu ↑

Add Page Title

WordPress Dashboard > Pages > Homepage

Click on Avada Builder.

How To Create A One Page Author Website

Click on Container.

How To Create A One Page Author Website

Select the 1/1 Container.

How To Create A One Page Author Website

Rename this container: Page Title.

On that same blue bar, to the right click on the Pen Icon.

Scroll down and edit the following:

  1. Name Of Menu Anchor: home.
  2. Bottom right side, click on Save.

*No capitols. 

 

Click on +Element.

Within the Element box, scroll down until you get to H Title and click on it.

You can also type into the search box Title (Not H Title, HTitle, just Title.)

Type Title: select Highlight.

Scroll down and change the settings:

  1. Highlight Effect: Doubleunderline.
  2. Highlighted Text: NEW BOOK RELEASE (You can rename this. All capital letters.)

Top blue bar, click on Design.

Scroll down and change the settings:

  1. Alignment: Center.
  2. HTML Heading Size: H1.
  3. Font Color: Color 6.
  4. Highlight Shape Color: Color 4.

Don’t worry, if you don’t like the colors you can change them to whatever colors that you want. I will show you how to do that a little later, or you can skip to Avada Settings now.

Return to Menu ↑

New Release Information

Hover your mouse, near the bottom of the white space of that container. Stay within the white space, and at the bottom you will notice two white buttons appear. +Container and +Columns.

Click on +Container.

Choose the 1/3 2/3 Containers.

Rename this container: New Book Release.

On that same blue bar, to the right click on the Pen Icon.

Container settings, blue bar and click on Design.

Edit the following:

Margin: 35px

 

Add Book Cover

Edit the 1/3 Column by select +Element.

Within the Element box, scroll down until you get to Image and click on it.

You can also type into the search box Image.

Click on the white button Upload Image.

Click on Select files and find the book image to upload.

Note: The image should be of high quality. Dimensions 1,000 x 625 pixels. Anything less may look blurry. The best way to tell is by uploading it and previewing the page.

Once the image uploads, to the right of the screen Attachment Details, scroll down until you get to Size and select: Full Size. If that option is over looked, WordPress will shrink your images even if they are the correct dimensions.

Select the blue button Insert Into Page.

Scroll down to Image Link URL and if you have a universal link for this book you can insert it now. Or a KindleUnlimited link. You can leave this section blank.

If you inserted a link, beside Link Target select _Blank.

Selecting _Blank opens a separate tab. Just in case the reader wants to come back to your site late. It keeps visitors on your site longer and improves most of your metrics: bounce rate, conversion, pages visited. Mostly it’s good for SEO and ranking within search engines.

Click on the blue button Save.

Save this page by clicking on the blue button: Update.

Return to Menu ↑

Insert Book Title/Subtitle

Edit the 2/3 Column by click on +Element.

Within the Element box, scroll down until you get to H Title and click on it.

You can also type into the search box Title (Not H Title, HTitle, just Title.)

  1. Scroll down to the text box and type in: Insert Your Book Name Here.
  2. Blue bar and click on Design.
  3. Alignment: Left.
  4. HTML Heading Size: H3.
  5. Font Color: Color 6.
  6. Margin: ↓0px.
  7. Separator: None.

Click on blue button: Save.

Add Series Title

Underneath the book title, click on +Element.

Within the Element box, scroll down until you get to H Title and click on it. You can also type into the search box Title.

  1. Scroll down to the text box and type in: Insert series name or book # placement etc
  2. Blue bar and click on Design.
  3. Alignment: Left.
  4. HTML Heading Size: H4.
  5. Font Color: Color 4.
  6. Separator: None.

Click on blue button: Save.

Return to Menu ↑

Add Book Summary

Underneath the second title, click on +Element.

Within the Element box, scroll down until you get to Text Block and click on it. You can also type into the search box Text Block.

  1. Scroll down to the text box and type: SUMMARY.
  2. Highlight the text, and click on Paragraph and select Heading 5.

  1. Hit Enter on your keyboard.
  2. Copy and paste the book summary below.

Click on blue button: Save.

Return to Menu ↑

Add Buy Button

Underneath the book summary, click on +Element.

Within the Element box, scroll down until you get to Button and click on it. You can also type into the search box Button.

  1. Button URL: Insert URL to your book. This can be a universal link, KindleUnlimited any link that you want.
  2. Button Text: Type in the button text Example: Read On Kindle Unlimited, Buy Now, Read Now etc You can write in small caps because all buttons will have all capitols.
  3. Button Target: _Blank.
  4. Blue bar and click on Design.
  5. Typography: AB
  6. Click on Save.

Save this page by clicking on the blue button: Update.

Return to Menu ↑

Within this section I would recommend only featuring three books. No more or less. As stated before, one page websites aren’t meant to display your entire book log. Showcase the most recent releases.

Other ways you can utilize this section is displaying a Duet or Trilogy.

You can even place the 1st book in every series and then link to the Amazon Series page.

*Feel free to skip this section entirely and move on to Create a Blog

 

Let’s Add More Books

Hover your mouse near the bottom of the white space of the container. Stay within the white space, and at the bottom you will notice two white buttons appear. +Container and +Columns.

  1. Click on +Container and select 1/1.
  2. Rename this container: Featured Books.
  3. On the same blue bar, click on the Pen Icon.
  4. Scroll down until you get to Name Of Menu Anchor and beside it insert: featured-books.
  5. Blue bar, click on Design.
  6. Margin: 60px.
  7. Save the settings.

Within the Element box, scroll down until you get to H Title and click on it. You can also type into the search box Title.

  1. Scroll down to the text editor and type in BOOKS. (Or add whatever title that works for you).
  2. On the blue bar click on Design.
  3. Alignment: Center.
  4. HTML Heading Size: H1.
  5. Font Color: Color 8.
  6. Separator: None.
  7. Click on Save.

If you’re creating the 3 book feature, then proceed below. If you want to recreate the duet feature from the One Page Author Website, click here.

Add Image Gallery

  1. Click on +Element and select Gallery.
  2. To upload many images, beside Bulk Image Upload click on Select Images. Find your images on your computer and upload them. It’s a good idea to make sure that they are all the same size and make sure that your images are high quality.
  3. Order By: DESC.
  4. Number Of Items: 3.
  5. Pagination Type: Infinite Scrolling.
  6. Gallery Layout: Grid.
  7. Picture Size: Default.
  8. Image Lightbox: No.

Scroll back to the top of the Gallery box and you will see your images to the left side.

You can drag the images to reorganize them how you want. To link these images to a Universal link or KindleUnlimited, select the pen icon.

Scroll down to Image Link and paste your book link. If you leave this blank, when a reader clicks on your book cover it won’t take them anywhere.

Beside Link Target select _Blank.

Selecting _Blank opens a separate tab. Just in case the reader wants to come back to your site late. It keeps visitors on your site longer and improves most of your metrics: bounce rate, conversion, pages visited. Mostly it’s good for SEO and ranking within search engines.

Click on the blue button Save.

Now go through and edit the links for the rest of your book covers. You do this by selecting the pen icon. When you are done, bottom right side and click on Save.

Save this page by clicking on the blue button: Update.

Since you created the 3 book feature, you don’t have to recreate the duet feature. Click here to skip to the next step.

 

Two Book Feature

*This section is featuring your duet series. In other words 2 books.

Hover your mouse near the bottom of the white space of the container. Stay within the white space, and at the bottom you will notice two white buttons appear.

Click on +Columns and select 1/6.

*Repeat the above step to create two 1/6 columns.

Click on +Columns and select 1/3.

*Repeat the above step to create two 1/3 columns.

Now, your editor should look like the below image:

Click on the 2nd 1/6 column and drag it to the right corner. That will force the two 1/3 columns into the center. Your editor should now look like the below image.

Within the first 1/3 column click on +Element and select Image.

You can also type into the search box Image.

Click on the white button Upload Image.

Click on Select files and find the book image to upload.

Note: The image should be of high quality. Dimensions 625 x 1000 pixels. Anything less may look blurry. The best way to tell is by uploading it and previewing the page.

Once the image uploads, to the right of the screen Attachment Details, scroll down until you get to Size and select: Full Size. If that option is over looked, WordPress will shrink your images even if they are the correct dimensions.

Select the blue button Insert Into Page.

Scroll down to Image Link URL and if you have a universal link for this book you can insert it now. Or a KindleUnlimited link. You should not leave this section blank.

When you insert the link, beside Link Target select _Blank.

Selecting _Blank opens a separate tab. Just in case the reader wants to come back to your site later. It keeps visitors on your site longer and improves most of your metrics: bounce rate, conversion, pages visited. Mostly it’s good for SEO and ranking within search engines.

Click on the blue button Save.

Add the last book cover, by repeating the above steps within the second 1/3 column.

Update your page.

Return to Menu ↑

Create The Blog

As I stated, this is a one page blog. However, you have the option of adding a blog to talk about author news/giveaways. This does not require you to edit or customize any pages. As you can see from the One Page Author Website, when they click on Blog they are brought to that section. When they click on the title of your post, they are brought to the full article. These are not pages, and require nothing else from you except your news/author content.

On the left side menu of that page, you will see your most recent posts and blog archive. All you will do is write a post and publish. Nothing else.

If you want this blog section to your website continue below. If not, skip to About Author.

Let’s Move On

Before we begin, make sure that you save the page by clicking on Update.

WordPress dashboard > Posts > Categories

We are going to keep this simple.

  1. Right side, you are going to see Uncategorized and hover over that category. Underneath, three links will appear and click on Quick Edit.
  2. Change Name and Slug to: Blog.
  3. Click on Update Category.

WordPress > Pages > Homepage

Scroll down to the last container you edited, and hover your mouse near the bottom of the white space. Stay within the white space, and at the bottom you will notice two white buttons appear. +Container and +Columns.

  1. Click on +Container and select 1/1.
  2. Rename this container: Blog.
  3. On the same blue bar, click on the Pen Icon.
  4. Scroll down until you get to Name Of Menu Anchor and beside it insert: blog.
  5. Blue bar, click on Design.
  6. Margin: 60px.
  7. Save the settings.

Within the Element box, scroll down until you get to H Title and click on it. You can also type into the search box Title.

  1. Scroll down to the text editor and type in BLOG. (Or add whatever title that works for you).
  2. On the blue bar click on Design.
  3. Alignment: Center.
  4. HTML Heading Size: H1.
  5. Font Color: Color 8.
  6. Separator: None.
  7. Click on Save.

Click on +Element and select Blog and edit the following:

  1. Blog Layout: Grid.
  2. Number of Columns: 2.
  3. Categories: Blog.
  4. Show Thumbnail: No.
  5. Show Title: Yes.
  6. Title Size: H4.
  7. Link Title To Post: Yes.
  8. Content Alignment: Left.
  9. Content Display: Default.
  10. Excerpt Length: 60.
  11. Show Meta Info: No.
  12. Pagination Type: No.
  13. Grid Box Color: Color 1.
  14. Grid Element Color: Color 1.
  15. Grid Separator Style: No Style.
  16. Save this element.

Save this page by clicking on the blue button: Update.

Return to Menu ↑

About Author

Scroll down and hover your mouse near the bottom of the white space. Stay within the white space, and at the bottom you will notice two white buttons appear. +Container and +Columns.

  1. Click on +Container and select 1/1.
  2. Rename this container: Author.
  3. On the same blue bar, click on the Pen Icon.
  4. Scroll down until you get to Name Of Menu Anchor and beside it insert: author.
  5. Blue bar, click on Design.
  6. Margin: 60px.
  7. Save the settings.

Within the Element box, scroll down until you get to H Title and click on it. You can also type into the search box Title.

  1. Scroll down to the text editor and type in AUTHOR (Or add whatever title that works for you).
  2. On the blue bar click on Design.
  3. Alignment: Center.
  4. HTML Heading Size: H1.
  5. Font Color: Color 8.
  6. Separator: None.
  7. Click on Save.

Scroll down and hover your mouse near the bottom of the white space. Stay within the white space, and select +Column.

Select the 1/3 2/3 Column.

Add Author Image

Edit the 1/3 Column by select +Element.

Within the Element box, scroll down until you get to Image and click on it.

You can also type into the search box Image.

Click on the white button Upload Image.

Click on Select files and find the book image to upload.

Note: The image should be of high quality. Dimensions 500 X 500 pixels. Anything less may look blurry. The best way to tell is by uploading it and previewing the page.

Once the image uploads, to the right of the screen Attachment Details, scroll down until you get to Size and select: Full Size. If that option is over looked, WordPress will shrink your images even if they are the correct dimensions.

Select the blue button Insert Into Page.

Scroll down to Image Link URL and you can insert your amazon profile here. You can leave this section blank.

If you inserted a link, beside Link Target select _Blank.

Selecting _Blank opens a separate tab. Just in case the reader wants to come back to your site late. It keeps visitors on your site longer and improves most of your metrics: bounce rate, conversion, pages visited. Mostly it’s good for SEO and ranking within search engines.

Click on the blue button Save.

 

Add Author Biography

Edit the 2/3 Column by click on +Element. Within the Element box, scroll down until you get to Text Block and click on it. You can also type into the search box Text Block.

  1. Scroll down to the text box and type in/paste: Insert Your Author Biography. It can be as long or as short as you want. If you need help with writing your author biography click here.
  2. Save this section.

Underneath your biography click on +Element, and Social Links.

Scroll down and add your social media links. If you don’t have them at the moment, click on Save and move to the next section. You can always complete this section another time.

Save this page by clicking on the blue button: Update.

Return to Menu ↑

Insert Newsletter Container

For this section, you need to have an email provider: Mail chimp, Mad mimi, ActiveCampaign, Flo Desk etc

Your newsletter form may look different, from the One Page Author Webste, depending on the email provider and their forms/styling/layout.

Depending on who you are with, you may need to install a plugin to connect to your email provider. You can always skip this section and come back when you have figured out what you need.

For the One Page Author Website, I used Flodesk.

If you don’t have a newsletter provider, you should check them out. They offer beautiful predesigned templates. Plus, everything is unlimited and if you sign up through me you will receive 50% off your first year. They are $39/M.

If you don’t have your newsletter information at the moment, or you need to figure out what plugins you need to connect WordPress to your email provider, that’s okay. We should at least create this section and then come back later.

If you don’t want a newsletter section, skip it.

Scroll down and hover your mouse near the bottom of the white space. Stay within the white space, and at the bottom you will notice two white buttons appear. +Container and +Columns.

  1. Click on +Container and select 1/1.
  2. Rename this container: Newsletter.
  3. On the same blue bar, click on the Pen Icon.
  4. Scroll down until you get to Name Of Menu Anchor and beside it insert: newsletter.
  5. Blue bar, click on Design.
  6. Margin: 60px.
  7. Save the settings.

Within the Element box, scroll down until you get to H Title and click on it. You can also type into the search box Title.

  1. Scroll down to the text editor and type in NEWSLETTER (Or add whatever title that works for you).
  2. On the blue bar click on Design.
  3. Alignment: Center.
  4. HTML Heading Size: H1.
  5. Font Color: Color 8.
  6. Separator: None.
  7. Click on Save.

Click on +Element and choose Text Block.

Scroll down until you get to the text editor and copy and paste the below text:

Subscribe to my newsletter, I would love to keep in touch with you!

When you do, I’ll send you Insert Book Name Here the 1st book in the duet for FREE.

You can also write whatever you want here. It does not have to be the above verbiage.

  1. Highlight text and center everything.
  2. Save this element.

Scroll down and hover your mouse near the bottom of the white space. Stay within the white space, and select +Column.

  1. You are going to select the 1/1 Column.
  2. Click on +Element and then select </>Code.
  3. Click on Save. Yes, I understand that the area was blank.

Save this page by clicking on the blue button: Update.

Open a separate tab, and sign into your Flodesk account.

  1. Click on Forms. Or if you need to create a new form and go through the options.
  2. Select a form, you are going to display on your website.
  3. Click on EMBED at the top.

There are two code boxes.

The Header Code was already inserted, when you copy and pasted the Avada code at the beginning of this step-by-step guide.

You will copy the second code box, Inline Code by clicking on Copy.

Return to previous tab, where you were editing your Homepage.

Hover over the </>Code element and click on the Pen Icon.

Insert/paste the FloDesk code into the code box.

Click on Save.

Save this page by clicking on the blue button: Update.

Congratulations, you created the page and added the content. We are almost done, just a few more steps.

Return to Menu ↑

 

Create Menu(s)

WordPress Dashboard > Appearance > Menus

We are going to create two menus.

Once the page loads, let’s create your first menu by typing in a tile: Main Menu.

Bottom right side, click on Create Menu.

Left side of the screen, you should see a set of menu items. Under Pages, you should see Homepage and select the empty box beside that option. Click on Add To Menu.

*If you do not see your Homepage, click on View All and select your Homepage.

When the menu item loads to your right, click on the item.

Edit the title: HOME.

Left side, scroll down and click on Custom Links.

Under this option you should now see two sections:

  1. URL.
  2. Link Text.

You are going to create 4 different menu options.

*Where it shows capitol letters, you must insert text with capitol letters.

Author

  1. URL: #author
  2. Link Text: AUTHOR

Books

  1. URL: #featured-books
  2. Link Text: BOOKS

Blog

  1. URL: #blog
  2. Link Text: BLOG

Newsletter

  1. URL: #newsletter
  2. Link Text: NEWSLETTER

Bottom right side, click on Save Menu.

 

Create Secondary Menu

Near the top of the page, you should see the verbiage Create a New Menu, click on it.

  1. Name this new menu: Other Menu.
  2. Click on Create Menu.
  3. Select the check mark beside Homepage.
  4. Click on Add to Menu.

Left side of the screen, you should see a set of menu items. Under Pages, you should see Homepage and select the empty box beside that option. Click on Add To Menu.

*If you do not see your Homepage, click on View All and select your Homepage.

When the menu item loads to your right, click on the item.

Edit the title: RETURN HOME.

Bottom right side, click on Save Menu.

Return to Menu ↑

Add Headers/Menu

WordPress Dashboard > Avada > Layouts

Create a layout by adding the title: Header and clicking on Create New Layout.

*The names don’t matter, as long you remember which header is which for the website.

Repeat the above steps to create a second header, and name this one: Other Header.

Your editor should now look like the below image:

We are going to edit the Header Layout, by click on the gray gear to the right.

Select the check mark beside Front Page.

It will automatically, save and you can click on the X top right.

Within the Header Layout, click on Select Header.

  1. Name this section: Main Header.
  2. Click on Create New Section.
  3. When it loads, click on the pen icon beside Main Header.

A new tab will open up and here is where we are going to edit the header, menu, and add logo.

  1. Click on Avada Builder.
  2. Click on +Container and create a 1/6 2/3 1/6 Container.

Within the 2/3 Container, click on +Element and find Social Links.

Add your social media links. If you don’t have them at the moment, click on Save and move to the next section. You can always complete this section another time.

When you are done adding your social media links, top blue bar and click on Design.

  1. Alignment: Center.
  2. Margin: ↑25px.
  3. Boxed Style: No.
  4. Color Type: Custom.

Custom Color Section

Icon Color: Color 1. 

Click on Hover.

Icon Color: Color 4.

Bottom right side, click on Save.

Hover over the Social Links Element and click on the third Icon to save this element.

We are now going to save this container:

Name this element: Social Media Header.

  1. Click on Save Element.
  2. Right side of the page click on Update.

 

Click here to edit your logo within Canva.

Are you familiar with Canva? For anyone wanting to design anything, on your own or with others. No design experience required, and it’s free forever.

  1. Click on Edit Design.
  2. When it opens click on File and scroll down to Make a Copy.
  3. After Canva creates your copy of the image, now you can start editing the logo.

Change the logo as you desire: edit the colors, fonts, size etc.

  1. When you are finished, top right and click on Share.
  2. Scroll down and click on Download.
  3. Click on the purple button Download.

When it’s downloaded to your computer, return to your WordPress tab.

Within the Element box, underneath the Social Links element, scroll down until you get to Image and click on it.

You can also type into the search box Image.

Click on the white button Upload Image.

Click on Select files and find the logo image that you downloaded from Canva. Upload it to your website.

Note: Whether you are creating your own image, whether through Canva or another program, the logo should be of high quality. Dimensions 700 x 300 pixels. Anything less may look blurry. The best way to tell is by uploading it and previewing the page.

  1. Once the image uploads, to the right of the screen you will see the title: Attachment Details.
  2. Scroll down until you get to Size and select: Full SizeIf that option is over looked, WordPress will shrink your images even if they are the correct dimensions.
  3. Click on Insert Into Post.
  4. Bottom right side, click on Save.

Hover over the Image element and click on the third icon.

We are now going to save this container:

  1. Name this element: Logo Header.
  2. Click on Save Element.
  3. Right side of the page click on Update.

 

Insert Menu

Click on +Element, underneath the Image element and scroll down until you get to Menu and click on it.

You can also type into the search box Menu.

On the right side, drop down menu and click on Main Menu.

Click on the following:

Menu Arrows: Main.

Top blue bar click on Main.

Main Menu Typography:

  1. Font Family: Montserrat.
  2. Variant: Normal 400.
  3.  Font Size: 25px.
  4. Text Transformation: AB.
  5. Main Menu Item Spacing: 4%.
  6. Main Menu Item Text Color: Color 4.
  7. Click on Hover/Active.

  1. Edit Main Menu Item Hover / Active Text Color: Color 5.
  2. Bottom right side, click on Save.
  3. Right side of the page, click on Update.

Hover over the Menu element and click on the third icon.

We are now going to save this container:

  1. Name this element: Menu Header.
  2. Click on Save Element.
  3. Right side of the page click on Update.

 

Return to Menu ↑

Edit Other Header

We are going to edit the Other Header Layout, by click on the gray gear to the right.

Select the check mark beside Privacy Policy.

It will automatically, save and on the left side there are a few menu links.

Click on Archive.

Select the following options:

  1. All Archives Pages
  2. FAQs Archive Types
  3. Portfolio Archive Types
  4. All Date Pages

Top right, click on the X.

Within the Other Header Layout, click on Select Header.

  1. Name this section: Other Header.
  2. Click on Create New Section.
  3. When it loads, click on the pen icon beside Other Header.

 

Let’s Add The Header Content

  1. Click on Avada Builder.
  2. Select the blue button +Container.
  3. Create a 1/6 2/3 1/6 Container.

  1. Within the 2/3 Container click on +Element.
  2. Top blue bar and click on Library Elements.
  3. Click on Social Media Header.

Now you going to repeat the above steps another two times.

  1. +Elements > Library Elements > Logo Header.
  2. +Elements > Library Elements > Menu Header.

Your page should look like the below image:

  1. Hover over the Menu element, and click on the pen icon.
  2. Beside Menu, select Other Menu.
  3. Bottom right side, click on Save.
  4. Right side of the page click on Update.

Return to Menu ↑

Configure Blog Sidebar

WordPress Dashboard > Appearance > Widgets

Right side, the Blog Widget, and click on the first down triangle.

Bottom left, click on Delete.

Left side, you will see widgets to display.

Hover over Archive and drag it into the Blog Widget.

This is how the Blog Widget should look so far:

*You can drag and drop the widgets to look like the below image.

Scroll down until you get to Recent Posts and drag it onto the Blog Widget.

This is how your Blog Widget should now look:

*You can drag and drop the widgets to look like the below image.

Edit the first Block widget:

Copy and paste the below code:

<H4>Recent Posts</h4>

Edit the Recent Posts:

  1. Leave Title Blank.
  2. Number of posts to show: 5.
  3. Click on Save.

Edit the second Block:

Copy and paste the below code:

<H4>My Archive</h4>

Scroll to the top of your page, and top left click on your author name.

On the image below, it says One Page Website but on your website it should display your author name.

Once you click on that link, the front end of your website will load and you can now browse through your one pager and see how it will look.

TADA!

That’s it, you’re done =)

 

Does it look similar to the One Page Author Website

Do you like how everything turned out? I’m curious to see your results and how the process was for you?

Feel free to leave your website links, questions or concerns in the comment box below and I will try to respond within 24 to 48 hours.

 

Return to Menu ↑