Website Header Design (What To Include In Your Header)

website header design

Your website header design is essential to having a successful website (or blog).

Your header is the first thing that your visitors see and play a key role in grabbing their attention. More importantly, it should establish a strong connection with your users.

Remember, there is never a second chance at a first impression so pay close attention to making a good first impression to your website visitors.

The following post is what I have found in my time marketing small businesses and hours of research.

When someone visits your website, research has found that their eyes look over your website like a book. Left to Right… Top to Bottom… So as we go through the rest of this post and discuss your website header design, please keep this in mind.

When it comes to your website header, there are a few things that are AN ABSOLUTE MUST!

What Your Website Header Design Should Include

  • Logo
  • Navigational Menu
  • Social Media Links
  • Call-To-Action

This can be done very easily. Once again, I need you to understand that your header will either help or hurt your conversion from website visitor to potential customer.  So keep your customers in mind and think like your visitors when designing your header. My #1 tip is to keep it simple and easy to use/navigate.

You should also keep in mind that the only thing you NEED is your logo & navigation. So you can choose to not have a “Top Bar”.

Top Bar – This is normally where I would put things like social media icons that link out to my social media profiles, phone number, a call-to-action button or maybe an address if you have a physical location.  You also want to think about if you want a specific background & font color.

Header Hero Section – This is where you will normally have your logo & website navigation.  Remember you want to keep it simple so I wouldn’t do much more than those two things. At most, you can include a third column If so it should be something that is clean and easy to understand/use.

Overall, your website header design can include anything you want. The elements you include are up to you. Remember, only you know your target market and if you used canned advice your conversions from visitor to being a customer, may not be what they should be.

You will find some of the elements you can include in your header in the list below. (Use your best judgement when including these elements)

  • Brand Logo
  • Brand Tagline
  • Telephone Number
  • Email Address
  • Physical Address
  • Navigation Menu
  • Search Field
  • C.T.A. (Call To Action)

Keep in mind that these are examples of what you can include in your website header design. Not all of these need to be used. Remember, just like I said earlier, only you know your target market so keep them in mind when deciding which of the elements mentioned above to include in your header.

Website Header Design Tutorial

Now that we have an understanding of the website header and what to put in your site header, let’s jump into the tutorial!

Along with the “Blitz” training, we are using the WordPress Plugin Elementor Pro to design our website header.

(If you are not familiar with Elementor you should check out the “Elementor Guide“.)

The first thing we are going to do is go to the Elementor Tab in the sidebar within your dashboard and click on “My Templates”

Elementor My Templates Header

Once you get to the “My Templates” library you need to click on the “Header” tab at the top of the page to get to the header section.

Then the next step is to click on “Add New Header”

create your first header

Once you do that you will see the create new template panel where you need to “Select Your Template Type” (which should already be set as “Header”) and then you need to name your website header design (for this tutorial I’m using “Website Header”).

After you finish that step then click on “Create Template”

This will bring up a blank canvas for you to design your header. You can use templates if you want, or you can create your website header by adding one element at a time.

If you want to have a custom website header design then start by closing out the template window and start designing your header.

If you want to use a template then you are already viewing the available free header templates for WordPress which comes with Elementor. Some of the templates are exclusive to only the Elementor Pro premium plugin.

Take a second and browse through the available header templates and when you want to see it in full resolution just click on the image of the template.

Once you have the website header template selected that you want to use, all you need to do is click on “Insert” & it will import your template so you can start customizing your header with your content.

If you are using the “site logo” setting for the image element then you need to work on your “WordPress Customize Settings” if you haven’t already.

After you have designed your website header the way you want it (you can always come back and fine tune it later) you’ll need to click on the “Publish” button. After you do that you will then set the “Conditions” for your header.

Click on “Add Condition” then be sure it “Includes” the “Entire Site” and then click on “Publish”.

And just like that your website header design is complete.

How To Create & Delete WordPress Users

wordpress users

Go down on the left sidebar and go to Users > Add New

Username: This needs to be around 6-10 characters and needs to be original. DO NOT USE “ADMIN”, “WEBMASTER” or anything else like that. Feel free to use your name or nickname.

Email: Put in a valid email address. Your new email address we created earlier would be

Fill out your First Name & Last Name.

In the “Website” section you need to include the full link so it should look something like this ( https://uronlinebrand.com )

Password: This is a touchy subject. I know how much you may want to create a password that you can remember, but that could cost you in the end. You need a secure password

Click on the “Show password” button to edit & show your password.

I’d recommend you create a password that is 10-15 characters long that includes lowercase (a,b,c), uppercase (A, B, C), numbers (1,2,3) & special characters (!, @, #).

I highly recommend that you use the “Password Generator” and just remember to WRITE IT DOWN! OR… Find a creative way to remember it!

Check the box to “Send User Notification” • Then set the “Role” to “Administrator”

Then click on “Add New User” & that is it!

If you don’t like the fact of writing down your passwords you can use something like LastPass (http://litl.me/lastpass) which is an awesome password manager that is secure. It stores all of your passwords on an encrypted server that you can access with one master password that you can create and remember.

You will notice that there is an Avatar or “Profile Picture” section within your user profile if you want to customize this, you will need to create a WordPress.com & gravatar.com account and update your image there. It will automatically update everywhere else on your site and when you comment on other WordPress sites.

***IMPORTANT NOTE***

You need to do two more things.

First is in the upper right-hand corner you need to hover over “Howdy, start” and click on “Log Out”.

Now that you are back on the login page you need to log in with your new username & password.

Next thing on the list is to delete the old username. You can do this by going to Users > All Users

Hover over the old user “start” and click on “Delete”

On the next page, you need to check “Delete all content.” and then click on “Confirm Deletion”

how to delete a wordpress user

How To Create A Coming Soon & Under Construction Page

coming soon elementor

There’s a good chance that you are familiar in some way with a Coming Soon Page or “Under Construction Page”. 

In this post we are going to walk through how to create a “Coming Soon Page” with the awesome Elementor page builder plugin.

At this point, if you are following along with the “Blitz” we’ve now Installed WordPress for our domain and set up everything we need to do including installing the recommended plugins and all that fun stuff.

Now, while we build our website it is time to get started with a Coming Soon Page so people who visit your website know how to contact you until your website is finished.

If you are not familiar with the “Under Construction Page” or Coming Soon Page, it is basically a single landing page that visitors visit, regardless of what URL they visit that is associated with your website.  So while you are designing the “Contact Page” if your visitors go to uronlinebrand.com/contact it will be redirected to this page until you are ready to launch your website.

Ready? Let’s Go!

The first thing we are going to do is to get started with creating our first “Template” with Elementor. You get to this section by going to the “Elementor” section within your Dashboard sidebar.  Then click on “My Templates”. This will take you to the “Create Your First Template” page that you see below.

Once you are here you just need to click on “Add New” in the upper left corner or the “Add New Template” green button. This will bring up the New Template panel. 

The settings you will need to use is “Page” in the drop-down menu and then the name of your template … I’m going to use “Coming Soon Page”. Then you just need to click on “Create Template”

At this point if “Elementor” isn’t loading you may want to make this change.

Now your page should be “up” but we have some designing to do …

The first thing we need to do is get the page template set so it doesn’t look cheap…

Start by clicking on the “gear” icon on the bottom left of the screen and then change the page layout to “Elementor Canvas”.  This will help make sure only what we are doing now is the only thing showing.  That way your Header or Footer won’t show.

After you have that finished you will now build out your coming soon page.  For this example, I’m going to stay basic and just use one of the Elementor Coming Soon Page Templates.

All you need to do in order to view the available templates is to click on the gray folder icon.

This will open up all of the available page templates. You can use the “Search Box” at the top of the pop up window for “Coming Soon” or you can browse through the results.

You will see a small [PRO] icon in the top right-hand corner for some of the templates. These are just templates that are only available to the people who have a licensed copy of Elementor Pro.  When you see that, don’t worry you can use those once you get your copy of Elementor Pro. (It is only $49 for a year with unlimited updates and support) 

***For more information about Elementor Pro – Check out the Elementor Guide***

Coming Soon Page Templates

You can custom build your page without a template but to save time and get started building our website, we’re going to use a template.

You can see more of the design by clicking on the image of the design. If you don’t like the design, all you have to do is click on “Back to Library” and continue browsing until you find the template you want to use for your page.

Once you find the right design for your page, all you need to do is click on the Insert button to have the template inserted into the page.

Now, all you need to do is replace the content with your content… If you need help with using Elementor, please take the time to go over the Elementor Guide.

Once you have your page updated with all of your content all you need to do is click on the Green “Publish” button on the bottom of the page.

Now that you have your page “designed”, it’s time to tell WordPress & Elementor that you want to use that page for your “Coming Soon”, “Under Construction” or “Maintenance Mode” page…

 In order to move on to the next step you will want to exit back to your dashboard.

Once you are back on your dashboard you need to go to the Elementor section on the left menu and click on “Tools”

Once you land on the “Tools” page you will need to click on the “Maintenance Mode” tab.

coming soon page

You will make two adjustments to this page 

The first thing you need to do is “Choose Mode” … We are going to change this to “Coming Soon” by selecting it in the drop-down menu.

After you do that you will need to go down to “Choose Template” and in that drop-down menu you need to select the coming soon page that we just created. 

Now for the most important part of this tutorial … Don’t forget to SAVE YOUR CHANGES!! 🙂 

You are now free to build your website!

Just don’t forget to come back to these settings and disable your coming soon page when you are ready to launch the website! 

Hope this has helped! Shoot me a tweet or a dm if you have any questions and I’ll be glad to help

What To Do When Elementor Won’t Load

elementor wont load

Sometimes you may find that Elementor won’t load. It may be because it is not compatible with the current version of WordPress or might be an issue with your server.  I’ve used Elementor for years and this doesn’t happen often but when it does, most of the time it is a quick fix!

If you are having issues with Elementor loading or you get that dreaded white page you can likely fix it in a few quick steps …

The first thing you are going to do is go to your Elementor “Settings” tab. 

The next step is to click on the “Advanced” tab to access the Advanced Settings for Elementor.

Now that you are on the Advanced Settings page you need to go to “Switch Editor Loader Method” and change it to “Enable”.

And just like that you have the function to load Elementor again.

If you need some more help with Elementor then check out the Elementor Guide!

If you have any questions feel free to shoot me a message on my personal Twitter or Instagram account.

I hope this has been helpful!

Talk Soon…

How To Create An Addon Domain | cPanel

how to create an add on domain inside of cpanel software

Aside from your primary domain, if you plan on having multiple websites hosted on your HostYak Ultimate cPanel hosting plan, you will need to create an “Addon Domain”.

This is not anything complicated.  Basically, all you are doing is telling the hosting side of your account that you are building a new website.

In order to create an Addon Domain, just follow these simple steps…

Click on the Addon Domains icon

Enter your domain name.  Once you enter in your domain name you want to use, click off to the side of the page in the grey space and it will populate the rest of the information that is needed to create the addon domain in cPanel.

Now that you have all the information in, all you need to do is click on “Add Domain” and just like that … The addon domain has been created.

I hope this helped! If you have any questions, feel free to shoot me a tweet on my personal account @cjhallock 

Ultimate Elementor Guide • WordPress Page Builder Plugin

elementor guide

Ultimate Elementor Guide Last Updated: 12/17/2018

This is an ongoing project and I will be updating this with videos, images and more.

When it comes to building a website with WordPress there are a lot of different ways to get the look you want. For years as a professional freelance website designer, I’ve used widget based WordPress themes, free page builders, premium page builders and just about anything else you can think of.

For the longest time, I used the Salient WordPress Theme that came with the Visual Composer plugin. After hours of research trying to find the easiest way to build a website with WordPress I came across an awesome FREE plugin called “Elementor”.

I used the free plugin for months before buying Elementor Pro. Since then, I refuse to even consider building a website without using Elementor, for myself or my clients.

Elementor is a visual page builder plugin for WordPress enabling the creation of web pages in a live, visual way.

Get more information about Elementor Pro Here. http://BuyElementor.com

If you follow along with this guide you will learn what you need to know about using Elementor.

Next thing we are going to do is going into the process.

When you are building your pages with elementor you will click “Edit With Elementor” from the basic editor page.

Once you are in the Elementor page editor you have two different options “+” which will add a new section & “Add Template” which is a file icon. We are going to cover the sections, once you understand the sections then you’ll know how to edit the templates.

ADD NEW SECTION”

When you click on “Add New Section” you will then need to decide what structure you want. Better way to look at it is, how many columns you want inside of this “section” or “row”.

While you are deciding how many columns each section will have you need to think about the content you are using and if it will look good within the row width.

Once you select your structure, it will add a blank structure. With the section selected (hover over the section and click in the middle of the blue tab in the middle at the top of the section), you will see the “Edit Section” on the left side of the page.

There are three different sections at the top of the “Edit Section”.

Layout

Inside of the “Layout” section you can change the basic features.

Stretch Section: With this enabled, it will give you the “full width” look. This will stretch the background to the edge of the page.

Content Width: Unless you are looking for a specific look I’d recommend that you keep this “Boxed” with the default settings. (You can also use full width and edit the padding/margins if you want the content to be full width. We’ll cover that in a bit.)

Columns Gap: This will let you have a space between the different columns. For simplicity I’d recommend leaving this Default.

Height: This works for sections that you want basic elements in with the background being bigger than just the element.

Content Position: This allows you to have the content positioned within the section at the top, middle or bottom of the section.

The next section is the “Structure” and since we already have that set when we added the section we can move on.

Style

Background: This is where you can set the color of the background along with setting a background image. If you are wanting to edit the background all you need to do is to click on the paintbrush icon.

Once you’ve activated the background section you will see a section where you can change the background color.

Underneath that, you can upload the background image. If you decide to use images for the background you should be sure that the width is 1200-1500px. Once again I also urge you to optimize your images. (TinyPNG.com)

When you set the background image you have a few options to customize.

Position: There isn’t many reasons to change this unless you want a specific section to show for a parallax effect or something like that. For most instances I’d recommend leaving this as Default.

Attachment: This is where you can get the parallax scrolling effect where the content of the section will scroll and the background will stay fixed/stationary or scroll.

Repeat: If you are wanting a “tiled” background, this is the option.

Size: You can test the different settings for this but I’d strongly advise the “cover” setting.

Background Overlay: this has the same basic options but with an Opacity scroll bar. This is to set how transparent the image or color overlay will be.

Border: Should you decide to use a border you can chose the different border types. If you decide to use a border then the next option, after you select your border type, is to set the Border Radius.

Border Radius: This type of setting box is something you will see more of moving forward so please pay attention to this. On the right side of the box you will have a link button. This will link all of the sections together. So if you set the “Top” section to 45 then it will automatically change the other three sections. If you un-check the link button then you can set each of the sections separately. When it comes to borders, most of the time 3-5px works.

Box Shadow: This will allow you to add a drop shadow to this section. Use this to add a depth to your page.

Shape Divider: This is going to be how you add the fun transitions on your page. This can add a geometric feel to your website pages. You can customize each setting with a shape divider on the top or bottom.

Typography: This is another section you will see many times moving forward but it may be a bit different for the different elements. But for this, you will be editing the parent settings for all of the typography within this section.

Advanced

Margin: This will add spacing on the outside of the section. You will use this to add spacing above or below the section

Padding: This section will allow you to add a spacing to the inside of the section displaying more of the background and less of the content.

Unless you know what you are doing I’d recommend you not touch the Z-Index/CSS ID/CSS Classes.

Entrance Animation” is the last and final setting in this section. This will add an animation as the chosen section displays above the fold.

Responsive: This section is where you will change how this section will be displayed on the different devices.

Reverse Columns: When you design your pages you may have a page that has two columns and when it pulls up on mobile or on a tablet the wrong widget is on top. Using this will do just as it says, it will reverse the columns.

Visibility

Hide On Desktop: Use this when the section is for your mobile or tablet visitors.

Hide On Tablet: Use this when the section is for your mobile or desktop visitors.

Hide On Mobile: Use this when the section is for your tablet or desktop visitors.

Custom CSS

If you are using this tutorial and know how to write CSS then by all means, use this section. If you don’t know what CSS is, then I highly recommend that you do not touch this section or any other custom CSS section you come across moving forward.

Column Settings

In order to edit the column settings you will need to select the column by hovering over the column and clicking on the grey “edit column” button in the upper right hand corner of the desired column.

Layout

For this you can change a few settings but we’re going to keep this very basic.

Column Width(%): This is in case if you want the selected column to be a different percentage than what it is currently. Just keep in mind that the column width settings need to total at 100%

Content Position: Once again, just like the section settings you can chose to have the content inside of the selected column positioned at the top, in the middle, or towards the bottom of the column.

Widgets Space & HTML Tags are not needed for doing our sites. If you are more advanced and know how to use these, by all means go ahead.

Style

This section is very similar but your only options here is your background, background overlay(only displays when you have customized your background), border, and typography.

Advanced

Margin: This will add spacing on the outside of the column. You will use this to add spacing on the top, bottom, or the sides of the column.

Padding: This section will allow you to add a spacing to the inside of the column displaying more of the background and less of the content.

Elementor widgets

Elementor Widget Walk-Through

Since you know how the sections(rows) and columns work, now is the time to get comfortable with the different elements and what each of them does. I am going to be covering the Elementor Pro elements, along with the elements that are specific for the theme that we are using.

We are going to be walking through each of the elements within elementor and covering what they do. Some of this will seem very repetitive, so you might find that the further down the list I go I may not cover everything as I don’t want to make this just a compilation of copy & paste. So, please take the time to make yourself familiar with each of the elements before you move forward.

Basic Elements

Columns: This element is to add additional columns under another column. For example: you may want a “Hero” section on your home page with a headline at the top and underneath it, have two separate columns to have your logo on one side and some text with a button on the other. This is where you would add additional columns inside of the single column section.

Inside of the “Edit Section” you will be able to change out the structure as well as the basic “Layout” settings. The “Style” tab will work the same here as before and the Advanced will as well.

Heading: This is for your page headings. Think of this as your page titles and headings that need to stand out on the page.

Title: In the “Edit Heading” section on the left of the page you can add your title in the text box.

Link: If you want your heading to link out to a landing page or something else you would put the desired link in this section.

Size: You can change the basic size of your heading here via Small, Medium, Large, or XL.

HTML Tag: When it comes to the HTML Tag, the best way to look at a page is that it should only have ONE H1 tag then from there I’d recommend you layout the rest of the page like a pyramid, with the most important headings being H2 & H3 and go down the list as you need.

NOTE: DO NOT FORCE YOUR “KEYWORDS” INTO YOUR CONTENT JUST FOR SEO. BUILD YOUR PAGES WITH YOUR CUSTOMERS/VISITORS IN MIND FIRST. THEN WORRY ABOUT THE REST.

Alignment: This is the same as the word processors on almost every computer. You can chose to align left, center or right. You can also chose to “justify” your text.

Style/Title

Text Color: This is an easy one. You can customize your color to an exact color code if you need to match up with your brand colors.

Typography: This is one of the sections that we’re going to be skipping a lot moving forward so please pay close attention now.

The typography settings consists of a decent amount of features.

Family: This is where, if you want, you can change the font that the text will display in. Because there are a lot of different fonts, not all fonts are available. You can however, use any of the basic fonts along with any of the google fonts.

Size: Remember that you need to set this to make it big enough for people to read. Don’t make the font size below 14, it makes it hard to read and makes people leave the page without consuming your content. You can make your font fairly large just make sure you test the responsiveness for the size. (We will cover how to do responsive design later on)

Weight: This is the thickness of the font. You can chose Default, Normal & Bold. You can also select the thickness based on a scale of 100-900 with the lower the number the thinner the letters and the higher the number the thicker the letters & numbers.

Transform: This feature has a few different settings. Default (depending on if you kept the default settings) will leave everything just as you type it. The next option is Uppercase which will make every letter uppercase. Lowercase will make all letters lowercase. Capitalize will make the first letter of each word uppercase. Normal will also leave everything just as you type it.

Style: This is where you can change the style to Normal, Italic or Oblique.

Decoration: This is where you can add an underline, over-line or a line through the text.

Line-Height: This will make the line higher, so it will add space to the top and bottom of the text, making the space in between the lines of text larger.

Letter Spacing: This adds space in between each letter that will stretch out the text to fit a larger section.

Text Shadow: Very Basic, it adds a shadow behind the text.

Blend Mode: This will change how the text is displayed. There are a lot of options for this, I’m not going to go into these here, feel free to look around and see what they do & if any of them will work for you.

Advanced: Same as before.

Image: This is how you add images to your page. When you add the image element, it will automatically add a placeholder image. Simply hover over the image in the sidebar to the left and click on “Delete” Then upload your new image.

Image size: As long as you upload images in the size they need to be displayed then you can set this to “Full” if not then just make the setting that displays the best for you.

Alignment: Select how you want the image aligned.

Caption: If you want to add a caption under the image you can do so here.

Link to: This is where you can chose to link to the media file or link the image to a specific URL.

Style

Width: you can choose to only display your image to a specific width

Max Width: This is where you can set a default that will keep the Max Width set to a specific %

Opacity: You can use this to display the image at a specific % transparency.

Border Type: You can select the type of border that you want along with the width which is the thickness of your border should you chose a border.

Border Radius: This will allow you to round out the corners of the image. If you upload a square image you can use the border radius to round out the corners and make it a display as a circle.

Box Shadow: this will add a box shadow to the image. Don’t worry, if you set the border radius then it will show the shadow appropriate to the radius you set.

Advanced Settings are the same and from this point forward I will only be covering the Style & Advanced Settings when they are specific to the element.

Text Editor: This is for bodies of text. The editor will run just like the majority of word processors.

Video: This is an easy way to embed videos into your WordPress website. Once you add the element, chose the source (YouTube, Self-Hosted, etc.) then enter the URL to the video you want to embed/display on your page.

Start/End Time: If you only want a small portion of the video to show then you can set the start and end time that will ensure you can control exactly what is shown.

The other video options include: Auto play, Mute, Loop, Player Controls, Video Info, Modest Branding, Suggested Videos, and Privacy Mode.

If you feel like it you can also add an Image Overlay to the video.

Style

When you are selecting your video you may need to change the ratio in order to match the video you’re embedding. You can also control the Play Icon that overlays on your video.

Button

Remember this element! In my opinion, the button is the most under utilized element in all of the page builders available for WordPress.

I normally don’t do anything with the “Type” I’d rather customize everything.

Text: This is the text that displays on the button. “Click Here” for example.

Link: This is the URL that the button will link to.

Alignment: Align left, right, or center. If you chose “Justify” it will stretch the button to the width of the column it is in.

Size: You can chose basic settings here for the size of the button.

Icon: This allows you to add an icon in before or after the text on the button.

Icon Spacing: This only displays when you have an icon selected. This will adjust the spacing between the icon and the text on the button.

Style: The options here are pretty self explanatory so we’re going to move forward.

Divider: This will add a line to separate sections on your website. You can chose if you want a solid line, double, dotted or dashed. Then the rest of the settings is to customize the look of the divider.

Spacer: This just adds blank space. If you want a large area to just display the background or want some extra space in between the different elements you can use this to add that space, if you don’t want to edit the margin for the element.

Google Maps: This is an awesome element for local/”Brick and Mortar” businesses. By just putting in your address you can embed a map without any coding and it also will let you control the “zoom level” for the map along with “height” which will be the size it displays on your page.

Icon: This is simple, it displays the icon of your choice either plain or with a frame/background. You can use the Link section to enter a URL you want it to link to.

PRO Elements

Posts: This is for building a “spotlight” for bog posts within a page. For example: you may want to show a spotlight of three or four of your most recent blog posts on your home page. The settings for this is very detailed so hang in there I’ll try not to go into anything you don’t need.

Layout

Skin: There are two options here.

The first is Classic which displays the Featured Image at the top, blog post title, date/comments, summary with a “read more” link. This looks more like the traditional layout you might have seen hundreds of times over the last few years.

The second option “Cards” is a clean and modern look. It showcases the featured image with a badge that shows the category. You can also display the Gravatar (Image of the author, setup via gravatar.com). This also displays looking like “cards” with all the info just sitting on the page with the default settings it adds a drop shadow.

Columns: This is where you select how many columns you want to display your blog posts. You can display more than just the amount of columns by utilizing the Posts per page setting below just a quick heads up. Keep it clean and don’t go over three or four columns.

Posts Per Page: Like I said above you can have separate rows of posts. Depending on what you are using the section for you can set up with three columns and set the (PPP) to six which will display two rows of three.

Show Image: This will allow you to display the featured image for each post or not.

Masonry: Using the Masonry setting will allow you to display the entire featured image and will have the cards/posts display like the Masonry layout. Kind of like bricks are laid sort of uneven.

Image Size: You can customize your image size here if you feel the need to. Once again, be sure to optimize your images for mobile. (TinyPNG.com)

Image Ratio: If you are not seeing the full image you can use the image ratio to display the full image depending on the ratio of your image.

For the rest of the settings you can turn on or off each of the features within the element. I don’t want to fill you up with fluff so please click around and make yourself familiar with the settings.

Portfolio: This will work the same as the Posts element. Only difference is that it only shows the image.

Slides: Just as it sounds, this a “Slider” element.

Form: This is my top reason for my recommendation to buy the Elementor Pro plugin. With this element, it allows you to create extremely professional looking forms with integration to software like MailChimp and GetResponse. You can also use this just as a basic contact form that just sends the submissions to your email. There are a lot of different settings and ways to customize your forms. I recommend that you take a look at the Elementor channel on YouTube. There is a great collection of videos including an amazing walk-through on how to customize your forms with Elementor.

Note: From this point moving forward, you should have a good understanding of the editor section. I will be covering the basic features of each element and if you need any more information on the elements, feel free to check out the Elementor Docs overview page located at: https://docs.elementor.com.

Login: For most websites you wouldn’t want a login form because you can use the default login page. But if you are building something like a membership site, you can create a login form for your members/users.

Nav Menu: This will be used to display a horizontal menu for your header & footer. (We kind of already covered this.)

Animated Headline: This is used just like the Headline in the basic elements we discussed earlier but this adds fun animation effects to a specific part of the headline. For example: It can add an animated text effect like a keyboard typing, flipping and other animation intros. You can also select to add an animated circle, underline, strike through and others to a specific part of the text by entering the animated part of the headline into “Highlighted Text”. To change the color of the animated circle, underline, etc., you can do so under the “Style” tab.

Price List: this has a restaurant menu style to list products, brief descriptions along with prices. Items can be added, duplicated or removed via List edit section in the left sidebar.

Price Table: This is the fancy graphic that you see on sales pages that list the product along with the price and the benefits with a call-to-action button.

Flip Box: This is the box you see that has a flip style animation when you hover over it, revealing different content on the back of the box.

Call To Action: This is a clean box that has an image(for the product/service) with a headline, small summary, and then a button to send traffic to a specific URL.

Media Carousel: This helps you make a fancy slideshow of images, a scrolling image carousel and a few other options. You can also use this to display video’s. The best option is to upload videos you want to use on YouTube then use the YouTube link in the video link options.

Testimonial Carousel: Just as it sounds. The only thing I would recommend is keep the testimonials limited to no more than four. You don’t want the animations to slow down the loading speed of your site and not to mention, almost no one will spend the time to scroll through that many testimonials. I’d also suggest you link to your reviews tab on your Facebook page.

Countdown: This is a fun element. You can use this inside of blog posts to show an expiration of a deal or special you are running. You can also have a countdown to an event you are hosting, along with a lot of other uses.

Share Buttons: These give you share buttons for the different platforms like Facebook, Twitter, Pinterest, LinkedIn, and others.

Block Quote: This showcases a quote that includes an optional Tweet Button to share the quote from your website.

Facebook Button: This adds a “Like” button to your page for people to like the page they are on.

Facebook Comments: This will add a comment section on your page that is fully integrated with Facebook.

Facebook Embed: This is how you embed an individual post from your Facebook page. You can also embed a specific Facebook comment or video.

Facebook Page: This is the “traditional” Facebook Like Box. It displays your page in a condensed layout.

Template: This is where you can embed the templates you design within the Elementor settings. (You access this via Dashboard>Elementor>My Templates)

General Elements

Image Box: This is a simple content box with an image, title, and description.

Icon Box: This is the same as the image box but with an icon instead of an image.

Image Gallery: This is a basic image gallery.

Image Carousel: This is similar to the media carousel but with a cleaner look (in my opinion)

Icon List: This is great for listing benefits or contact information. You can have a bullet list that will just have icons for the bullets so you can chose the icon you want displayed instead of just the boring bullet. (•)

Counter: An animated number with a title. Good for listing how many projects you’ve worked on.

Progress Bar: Simply displays a title with a progress bar with name and %.

Testimonial: This is a basic testimonial element that showcases a testimonial.

Tabs: Using this element will allow you to have multiple tabs displaying different content within your page. There is no limit to tabs you can have but I’d recommend keeping to where there is only one row of titles in the tabs.

Accordion: Similar to the Tabs element, the Accordion will be a drop down with content between the titles. This opens up each section one at a time.

Toggle: A similar look and feel as the Accordion but allows the visitor to toggle all “tabs”

Social Icons: This is a clean element that will let you display the different social media icons to represent your different profiles and accounts.

Alert: This will give a semi-temporary alert to visitors that they can close out. This works for good call-to-action’s and news for your business.

SoundCoud: For musicians this allows you to embed a song from your SoundCoud account.

Shortcode: This is for putting shortcodes on your page. Shortcodes are used by WordPress, Themes & Plugins to reference different content & normally look like [this].

HTML: This is where you are able to put in raw HTML code.

Menu Anchor: This is to link to different parts on your page. Please reference the Elementor Docs for more information.

Sidebar: This allows you to put in a sidebar into your page to display widgets.

Site Elements & WordPress Elements

These elements are self explanatory so we will not be going into these elements.

Use these elements for basic edits in adding content throughout your page. You will find a lot of different things you can use in customizing your page.

Now that you have a decent understanding of the different elements and now we are going to go over the four icons that are at the bottom of the edit sidebar.

The first is General settings which allows you to edit the page title, publication status, featured image, You can hide the title and also select your page layout.

The second icon is the responsive icon: More on this in a little bit

The third icon is to go back in “history” and undo edits. So be careful with this one.

The fourth icon is to view a preview of the page.

Last but not least is the Publish Button. If you click on the arrow to the right you will be able to save it as a draft or as a template.

Responsive Website Design

Now we are going to go over our pages in Tablet and Mobile mode to test the responsiveness of your website.

Responsive Web Design is about using HTML and CSS to automatically resize, hide, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).

Lucky for you, Elementor allows you to do this without having to write or edit any code.

In order to view and edit the website to make it responsive you will need to go to the bottom of the edit sidebar and click on the responsive icon. It is an icon of a computer monitor.

This will open up the options for you to view your website in Desktop, Tablet, or Mobile.

Since we are doing the full build in Desktop by default, the next thing we are going to do is to select the Tablet preview.

Now you need to look over the content and make the changes need to font sizes, padding and margins in order to make it look the way you want it to. After you make the changes needed you need to do the same thing with the Mobile preview.

How To Bulk Install The Recommended WordPress Plugins FREE!

wordpress plugins

Before we install any plugins you need to delete the default plugins. Visit Plugins > Installed Plugins & on that page you can select them by checking the box next to the word Plugin to “Select All” then in the drop-down “Bulk Actions” box, select Delete. Then click “Apply”. It will bring up a “pop up” asking if you are sure … go ahead and agree to delete the plugins.

how to delete wordpress plugins

This first plugin we’re going to install will help us “Bulk Install” all of the needed plugins.

NOTE: This is a shortcut. If you would like to skip this step and do the installations one at a time, then by all means, go ahead. (Seriously, I’d recommend that you use the shortcut and save yourself about 10-15 minutes.) We will be covering each of them below so don’t worry about that!

Start by installing Wp Favs – Plugin Manager by searching for the plugin via:

Dashboard > Plugins > Add New

bulk install wordpress plugins wp favs

Install & Activate by clicking on “Install Now” then “Activate” once it installs. Once the plugin is “Active” go to the settings via: Dashboard > Tools > WP Favs

Insert the Quick Key & click on “Quick Load” Quick Key (QK):

DwsDsjH5N92QXgHwNQWoKovAWHo0du

Once you have clicked on Quick Load you will want to click on “Run this List”.

This will take you to our magic list of WordPress Plugins. These are the recommended plugins for this tutorial. (Image has been cropped to save space)

Click on the drop down over the plugins labeled “Bulk Options” and then select “Install” Check the first box (to the right of Plugin column label) to Select All Plugins.

Then Click Apply to install all plugins.

After it installs you will see a success page:

All Installations have been completed.

Click on “Return to WPFavs Installer”, underneath that message, and move onto the next task. If you wish to do this manually you can be installing and activating each plugin one by one.

Use your judgment in using the recommended plugins. Only you know what you are doing and what you need. The plugins you are going to Activate will depend on what you will need for your website.

To “Activate” your plugins you need to check the box next to the plugins you wish to use and once all your plugins are checked in the drop-down menu (Bulk Actions) select “Activate” and “Apply”.

This will “Activate” all of your desired plugins.

We are not going to be using all plugins, all of the time so we will be deactivating a few. Also, feel free to close any of the warning messages you see on your dashboard.

Recommended WordPress Plugins For Every Website

I’m also going to cover the settings you need to change for each of the recommended WordPress plugins.

Autoptimize – This is a very important plugin for the success of your website. This is (in my opinion) the most important plugin you can use for your WordPress website.  This will cache your website and help with the website speed. 

Optimize HTML Code – Check This Box

Optimize JavaScript Code – Check This Box

Optimize CSS Code – Check This Box

Then click on “Save Changes and Empty Cache”

Click on the “Extras” tab within the Autoptimize settings page.

Check the box before “Removes WordPress’ core emojis’ inline CSS, inline JavaScript, and an otherwise un-autoptimized JavaScript file.”

Check the box before “Removing query strings (or more specifically the ver parameter) will not improve load time, but might improve performance scores.”

Now “Save Changes” and you are finished with this one!

Blackhole for Bad Bots – This puts all bots in a “Black Hole” so they don’t use your server’s resources. Once active, the plugin does all the hard work. No settings needed here.

Elementor “Page Builder” – This is the WYSIWYG (What You See Is What You Get) page builder we are going to use to build/design your website. For this tutorial, I’m also going to be using the “Elementor Pro” paid version. It isn’t a must but it does give you a lot more options when it comes to designing your pages. Check Out The Elementor Guide.

Elementor Pro – This is the only plugin that is not included with the bulk install step.  While you can continue building your website without Elementor Pro but I would highly recommend against it.  I’ve used many different page builders and honestly, Elementor Pro is the ONLY page builder I will ever use unless WordPress improves Guetenburg to replace it but it’ll probably be 2022 before they get close. Check Out The Elementor Guide. Buy Elementor Pro Here.

Far Future Expiry Header – This assists in your page load speed. Go to Settings > FarFutureExpiry & check to Enable Far Future Expiration. Set the Number of Days to 7 and click all file types. Click to Enable Gzip Compression & click on “Save”

Heartbeat Control – It’s hard to explain but this completely controls the WordPress heartbeat which basically means … it speeds up your website. Click on “Modify Heartbeat” in the drop-down menu within the Heartbeat control settings. Click the button for “Select All” so it selects the 3 options, WordPress Dashboard, Frontend, Post Editor. Then take the slider from 15 to 300. Click “Save Changes”

Limit Login Attempts Reloaded – I already kind of covered what this plugin does but basically it makes sure if someone tries a bruit attack on your site this will lock down your website after 5 failed attempts to login. No need to adjust any settings.

Pretty Links – This is like bit.ly for your website. For example, if I want to create a short link for my new YouTube channel, instead of it being that really long link that might look like this youtube.com/channel/XXXXXXXXXXXXX

I can use Shortlinks and make it look like this: http://testedurl.com/yt

Yoast SEO – This is the best SEO plugin on the market. The settings for the plugin itself is decent for now without having to customize. The power of this plugin will come when using it while creating posts & pages within WordPress.

How To Upload A WordPress Plugin

For this section, we are going to be uploading the Elementor Pro Plugin. If you do not have the plugin you can skip this step but the tutorial will include using this plugin.  You can buy it here.

Once you have the plugin file (.zip) you need to go to Plugins> Add New. Once you are on the install plugins page you will see a button at the top of the page that says “Upload Plugin”. If you click on that button you will start the process.

The first thing you need to do is to click on “Choose File” and select the plugin file on your computer. Once you have the file selected, simply click on “Install Now”.

This will automatically take care of installing the plugin, leaving the only thing for you to do is to “Activate Plugin” by clicking on that button.

install wordpress plugin elementor

Once Elementor Pro Plugin is Active, you will see a banner in the top of your website

activate elementor pro

If you click on the Activate License button this will take you to the activation page. This is where you will put in your license key. If you do not know how to gain access to your Elementor License key you can sign into Elementor.com & from your Elementor account you will see the “Download Plugin” to download your copy as well as your License Key.

buy elementor pro my account

Simply copy your license and paste it into WordPress & click on “Activate”

activate elementor

What Are Permalinks? Recommended WordPress Permalinks Settings

wordpress-permalinks

If you are building your own website, PAY ATTENTION, because the WordPress permalinks are very important. Luckily, it is very easy. Before I go into the changes I just want to let you know the answer to the question you might be thinking right now…

What is a Permalink?

Basically, it is a link to a specific page on your website. As an example, I’ll highlight it in the link below… if you want to subscribe to my podcast the link for my podcast page is https://cjhallock.com/behind-the-grind-podcast/  

wordpress permalink description

My Recommended Permalinks Settings

You need to go under “Settings” and click on “Permalinks” Then you need to select “Post Name” and click on “Save Changes” … That is it! 🙂 It may seem like a small step but you will appreciate this as we move forward building our website.

wordpress permalink settings
wordpress permalinks saved settings

How To Install WordPress With cPanel

how to install wordpress

It’s time to install WordPress. For this step, you are going to need to log into your HostYak account & access your cPanel.

Once in your cPanel, you will need to go down to the “Web Applications” panel and click on the WordPress logo. This will take you to the install WordPress page.

Click on “Install this application” and now you are on the “Installatron Install” page.

Location

Choose your domain. If you are using a larger plan from HostYak you may have added some “Add-On Domains” in which case you will have multiple domains to choose from. If not then just make sure your domain is selected.

The next section is for your “Directory”, you will need to keep this empty. This will install WordPress on your actual domain instead of uronlinebrand.com/blog. Which is what the directory is for.  /blog is the directory used for that example.

Version

This section is easy … don’t touch anything! 🙂

Settings

Leave the “Enable Multisite (WPMU)” checkbox unchecked

This panel is going to be used to create your “User Account”. So fill in a username & password.

Username: This needs to be unique … 

Two Usernames to NEVER USE

  1. admin
  2. webmaster

You also want to make sure you do not use any other very basic usernames

Password: this is very important, be sure that you have a secure password

Administrator Email: you want to be sure that this is an email that you have access to and that you check on a regular basis. If you don’t have an email address, I recommend you use Gmail.

Website Title: This is the Name of Your Online Brand.

Tagline: This is important and you need to spend some time creating your tagline. When you do finish coming up with a tagline, put it in here.  You can change this later inside of you “WordPress Dashboard”

Two-Factor Authentication is a plugin that forces a security protocol to have two-factor authentication to keep your website login page secure.

Limit Login Attempts is a plugin that you want to keep checked.  If someone is trying to log into your WordPress account it will lock the account for 15 minutes when they enter the wrong password multiple times. 

Enable Multi-Site is going to be left on “No”

As far as the advanced settings you just need to leave this as it is by default to automatically manage the advanced settings for you.

The next thing you need to do is simply click on “Install” and you have now successfully installed WordPress on your domain.

Congratulations! You Have Successfully Installed The WordPress Software On Your Site!

Unfortunately, we are far from being finished. Moving forward there are some more boring steps, but don’t worry. We are going to be into the design part of our website project soon enough.

9 Things Every Home Page Should Have

home page design

When it comes to your home page, it is king! (or queen) Most of the traffic to your website will be funneled through your home page. So you need to make sure when you are building your website, that it is clear in what you do along with where you want your visitors to go. Here are some things you should have on your homepage.

These are my list of 9 things that every homepage should have:

  • Headline – A successful website should always have a clear and simple “headline” to tell it’s visitors what it is about and it should be at the top of the website or “Above the Fold” which basically means they can see it without having to scroll. You can get some great info about page titles for your headline & sub-headline here.

  • Sub-Headline – This is simply a supportive headline that offers a brief description of what you do and/or what you have to offer.

  • Primary Call-to-Action (CTA) – This is why you are building a website! You want to have something that tells people what to do in order to do business with you. (IE. Call Us For A Free Estimate, Schedule A Consultation)Your Primary CTA should be “Above The Fold” Keep in mind you may want to have 2-3 supportive CTA’s spread throughout the rest of your page as well.

  • Benefits – What you do is important but if your visitors don’t know the benefits of working with you then they are likely to do business with someone else.

  • Social Proof – People do business with people they know, like, and trust. If they do not know, like or trust you yet, a testimonial is a great way to show that you can be trusted and helps you close the gap on people wanting to know and eventually like you. Let’s hope 🙂

  • Bonus Offer Opt-In – This is the hardest thing because it means more work. But having a bonus/download for your visitors will show that you know what you are talking about and can be looked at as the expert in your field.

The “Bonus” offer can be an exclusive video (that is only available to people who opt-in) or an e-book/report/white-paper that covers questions they may have. (IE: What Every Home Owner Should Know About Home Owners Insurance., 21 Health Benefits Of Smoothies!, 5 Things Everyone Should Know Before Buying Their Next Car.)

The Last 3 Things Your Homepage Needs

  • Features – In support of the Benefits, it is helpful to give people more of an understanding of what’s provided by using your products and/or services.

  • Industry Resources – There is a good chance that a first-time visitor to your website isn’t ready to do business with you yet. Offering a link to a resource page or even a small resource section on your homepage where they can learn more, will help you establish your credibility as the go-to expert and the thought leader in your industry.

  • Supportive Images/Visuals – All images/videos/icons should be supportive of the content on the page. Remember that these need to be optimized for page speed (TinyPNG.com) as well as for SEO (Don’t forget to fill in Alt Tag & Description for your images)

The next page you want to focus on is your About Page.