How to Create a Website with Optimizer

In this tutorial, we are going to create a dummy website with Optimizer Free version. Our goal will be to create a Beautiful Website with Brand identity for a dummy business.

If you have't already installed Optimizer WordPress theme, you can do so by going to Appearance > Themes > Add New and search for "Optimizer" in the search bar and then Install and activate the theme.

Go to Appearance > Customize > Frontpage > Static Frontpage page and set your Frontpage to "Your latest Posts".

Optimizer requires you to set your frontpage to your latest posts to make your site look like the demos. Although you are setting the frontpage to your latest posts, we will not actually be using the latest posts. We will replace the latest Posts with widgets.

Next thing we will do is, change our basic font, which is set to "Open Sans" to a font of our liking. Since its not possible to browse through the 600+ fonts through the backend of Optimizer. It's a good idea to go to fonts.google.com and see all the fonts at once and find a font that we like and then go back to Optimizer's Basic Fonts section and set the font to our selected font.

In our case, we will set the font to "Raleway", since it's the one we like for this website.

When you activate Optimizer you will notice the header is transparent on frontpage. You can disable it from Customize > Header > Header and turn off the "Make Header Transparent on Frontpage" option. For this website, we will disable the transparent header and make it have a solid color.

So After disabling the transparent header, we will notice that the header color has changed to white. We can change the color of the header with the "Header Background Color" option, which is located right under the transparent header color option.

Since we don't have a logo created for this dummy site, we will create one the easiest way. To create a beautiful logo for free and within few minutes

1. First Go to logomakr.com
2. Then click the "T" icon from left and write down your Business name. In our case, its "Optimizer"
3. Then select the text and set the font to "Amaranth" since it looks professional in our opinion.
4. Then Click the "Browse All Logos" icon. And select an icon of your choice. The icon will be imported next to your Text. Drag It and position it left to your text and resize the icon and the text so that they are both aligned correctly.
5. Then click the Logo to select it and change the color to yellow from the bottom right corner of the screen.
6. Now lets crop our logo by clicking the crop button located on bottom right corner of the screen. After setting the crop dimension by resizing the crop handles, press "Enter" key from your keyboard.
7. To download the logo, click the "Save" button from the top right corner of the screen.

Now that we have created our awesome logo, we will go to Customize > Header > Site Tittle and Logo and click the "Image" tab and click the "Upload Image" button to add your logo.

We can also disable the Site tagline that appears under the logo, by disabling the "Hide tagline" option.

By default, WordPress displays all the pages you created as your menu. If you want to override it, you will have to create custom menu which is always recommended. To Setup Menu,

1. let's go to Customize > Menus and click the "Add Menu" button.
2. Name your menu; you can name it anything you want. We will name it "Header Menu".
3. Since we are going to display this newly created menu to our header we will set the "Menu locations" option to "Header Navigation".
4. Now we will add menu items to our menu. To do that, we will click the "Add item" button and we will add some pages to our menu. To do that, we will click the "+ Pages" button and select the multiple pages by clicking the + button before each page item.
5. Needless to mention here, that if we want to add a home button to our menu, we will just click the + button before the "Home" item. The home item will let our visitors go to the frontpage of our site by clicking it.

You can easily display social links with Optimizer. To do that Lets go to Customize > Miscellaneous > Social Links and first make sure the Social Links Position option is set to "Header" and then add our social links in the Link1, Link2, Link3 etc field. The Social Links are automatically decteted and displayed on your site.

We have selected a free public image from Pixabay.com . When selecting an image make sure the image is relevant to your business.

After Selecting a Slider image, we will have to resize it to make it fit better in Optimizer slider area. The recommended size for the slider image is 1920px x 900px . Since our downloaded image is 1920px x 1100px, we are going to resize it with a free tool called Pixlr. Alternatively, You can also resize the image in Photoshop or GIMP.

1. irst we will go to pixlr.com/editor/
2. From top left corner of the screen, click the "File" button and click on "Open Image" button and select the downloaded image.
3. Then from the toolbox on left, click the "Crop" button. Now from the top of the screen, set "Constraint" to "Output" size and set width to 1920 and height to 900.
4. Now click and drag your mouse over the image to create crop box. Make sure the box is full width of the canvas. Press enter key from your keyboard to crop the Image.
5. Now lets save and download the image by clicking the "File" button from top of the screen and click save. Your image will be downloaded and ready to be used as your slider image.

In this step we will create a ark overlay over our Image so that the Slider text is much visible on our slider image.

1. To make our slider text standout more over our image, let's create a dark overlay over our image.
2. First click the "Layer" button from top of the screen and select "New Layer".
3. From the toolbox on left, click the "Paint Bucket" icon and then click on your image once. Your image will turn black.
4. Now to make the image visible, from the right of the screen inside the "Layers" box, you will notice an "Opacity" option. Change it to 70 to make the image visible.
5. 5. Now lets save and download the image by clicking the "File" button from top of the screen and click save. Your image will be downloaded and ready to be used as your slider image.

Now that we have optimized our slider image, let's add it to our site by going to Customize > Frontpage > Slider and then click the "Upload Image" button from the "Image" tab and upload our slider image.

let's go ahead and add the content to our Slider:

1. Go to Customize > Frontpage > Slider and click the "Edit Content" and remove the default content by selecting all of it and then pressing the backspace key of our keyboard.
2. Then we will paste in our content and we will make the text centered by selecting the text and click the "Center Align" button from the Editor Toolbar.
3. Now, we are going to make sure the tagline stands out. We are going to select the "We do amazing things with words" line and click the "heading 1" from the toolbar.
4. Then we will click the "Save & Close" button to update the slider content.
5. Now we will change the button to our need. To do that we will scroll down to the "Cta Button 1" section and change the cta button 1 text to "Get a Quote". Since we do not have a contact page yet, we will keep the link field empty.
6. Then we will remove the 2nd button that we don't need for our site. To remove it, we will simply expand the "CTA button 2" section and remove the cta button text and it will be automatically hidden.
7. Now that we have our content setup we will make sure the content is vertically centered for better visual, to do that we will adjust the "Content Box Vertical Position" option accordingly.

After the slider, what we want to display a section that lists all our services. To do that, we will use Blocks widget that comes with Optimizer.

1. First, go to Customize > Frontpage > Frontpage Widgets and click the "+ Add Widget" button to expand the widget library and select the "Blocks Widget".
2. You will notice that the default Posts are replaced with a blocks widget.
3. The blocks widget has 6 blocks. Since we provide 3 types of services, we will add images content to the first 3 blocks.
4. In the blocks Image field we will add images that are related to our service. We can find relevant images on flaticon.com for this dummy website we have selected 3 images that we will insert in each block's Image field.
5. Then we will replace the dummy content by clicking the "Edit Content" of each blocks field. If you want you can create text link and link it to your inner page you can do so by clicking the "Insert/Edit Link" button from the toolbar.
6. After adding the content, we will change the background color to white and keep the other style settings as is.

1. Go to Customize > Frontpage > Frontpage widgets and click the "+ Add Widget" button and then the "About Widget" button.
2. Clear out the "Pre Heading" field.
3. Click the the Edit Content button and then click the "Add Media Button" and upload the 1,2,3 images that we created using logomaker.
4. Now click the first image with number "1" and on right make sure the Alignment option is set to "left" and then click the "Insert into Post" button to insert the image.
5. Now write down the step 1's Details right next to the image.
6. Now press enter once and insert the second image and write your content beside the image.
7. Follow the same steps to create as many steps you want. For our dummy site, we will add only 3 steps.

Now we will add a section to display the latest blog posts of our site. To do that we will

1. Go to Customize > Frontpage > Frontpage Widgets and click the "+ Add Widget" button and then the "Posts Widget" button.
2. Change the Title Divider to "Underline". You can change it to anything you want from that list.
3. Change the layout to Layout 2
4. Change the widget title's text to "From Our Blog" and clear out the "Subtitle" field.
5. To replace the default blank image, we will make sure that our blog posts images have "Featured Image" assigned to them.

A "Call to Action" section is where you motivate your visitors to take an action, eg: get in touch with us. We will add the CTA section to the bottom of the site because after visitors are aware of what we do, we want them to take an action without scrolling to top to click the "Get a Quote" button. CTA section usually contains a convincing tagline and a button much like the content of our slider.

1. Go to Customize > Frontpage > Frontpage Widgets and click the "+ Add Widget" button and then the "Posts Widget" button.
2. Click the "Advanced Text" button.
3. Change the background color to light grey and change the text color to black.
4. Next add in your convincing text.
5. Now we will add a button. Unlike Optimizer PRO, adding a button with Optimizer free is not possible out of the box, we will have to use custom html to add a button. To do that,
   1. First we will write "Get a Quote" in a new line and select the text and click the "Align Center" button.
   2. Then we will click the "Add/Edit Link" button while the text is selected and paste in the link to our contact page. If you don't have one, don't worry we will create one in "Setting up a Contact Page" section.
   3. Now we will make some HTML code change to our link to make it look like a button. To do that click the "Text" button of the editor and scroll down to chunk of code that looks something like this:
      <a href="http://yoursite.com/get-a-quote/">Get a Quote</a>
   4. Simply replace this line with:
      <a class="static_cta1 cta_flat lts_button" href=" http://yoursite.com/get-a-quote/"> Get a Quote</a>
   5. This will turn the link in to yellow button similar to the one in our slider.

To Change the color Copyright area, let's go to Customize > Footer > Copyright Area and change the color to light grey with "Copyright Area Background" option.

Then we will Replace the Copyright message with your own by clicking the "Edit Content" button and remove the default dummy copyright text with our own.

1. First Go to Customize > Footer > Copyright Area and enable the "Display Menu in Copyright Area" option.
2. Then To replace the default menu with our own, Go to Customize > Menus and click the "Add Menu" button.
3. Name your menu; you can name it anything you want. We will name it "Footer Menu".
4. Since we are going to display this newly created menu to our footer we will set the "Menu locations" option to "Footer Navigation".
5. Now we will add menu items to our menu. To do that, we will click the "Add item" button and we will add some pages to our menu. To do that, we will click the "+ Pages" button and select the multiple pages by clicking the + button before each page item.

Optimizer Theme comes with 3 Page templates. One of which is Blog page temple that lets you display your latest posts in a blog page layout. To create a Blog page with Optimizer

1. We will create a new page from our Dashboard and name it "Blog".
2. Then from The Right of edit page edit screen where the "page Attributes" box is, select "Blog Page Template" from the "Page Template" dropdown list.
3. Now publish the page.
4. To Customize how many Posts it's shown on the Blog Page we will Go to Customize > Post & Page and change the "Blog Page Posts Count" to "5". You can skip this step if you are satisfied with the default value.
5. Now to add the blog page to your menu, Go to Customize > Menu and add the Blog page to the "Header Menu" we created earlier.

Take a glimpse at all the amazing features of Optimizer PRO.

After Purchasing Optimizer PRO, activating it is very easy. All your theme and widget settings of the Free verison will be intact. Let's see how we can activate Optimizer PRO.

1. First Go to Optimizer WP Dashbaord and download the theme. You will get a "optimizer_pro.zip" file.
2. Then, from your website's dashboard, go to Appearance > Themes > Add New > Upload and upload the zip file and click "Activate" to activate the PRO theme.
3. Then Go back to the Optimizerwp Dashboard and click the "eye" icon to view your license key. Copy the License key and go back to your website's dashboard and then Appearance > Themes > Optimizer License and paste the license you just copied.
4. Then click the "Save Changes" button and then Click the "Activate" button to activate the license.
5. Now go to Appearance > Widgets and scroll down to the "Inactive Widgets' area and drag and drop all the widgets from this are to the top, where the "Frontpage Widget" sidebar is located.

With Optimizer PRO, you it's very easy to make the header sticky, so when your visitors scroll, the header stays fixed and visible all the time. To achieve that simply go to Customize > Header > Header and turn on "Make Header Sticky" option.

Since we want to make our slider more attractive, we will add a 2 more images to our slider so the slider background images moves like a slideshow. To do that

1. We will first remove the slider Image that we added earlier by going to Customize > Frontpage > Slider and click the "Remove" button from the "Image" tab.
2. Then click on the "Slideshow" tab and then click the "Add Slides" button. The Media Library popup will appear.
3. Click the "Add to Gallery" button and upload or select existing images by clicking on them.
4. After selecting your images, click the "Add to Gallery" button and on the next screen, click the "Update Gallery" button.

We want to have different pages for different services we provide, where we will describe the services in details. We have already created the pages and now we will link them to our frontpage with buttons inside the blocks. Optimizer PRO comes with an inline editor that makes the process very easy by directly let us edit the content.

1. While inside the customizer, we will click the First block and a inline editor will appear press enter to go to next line.
2. Click the + button and then click the first button [B] and a button will be inserted.
3. Click on this button and a button editor will popup.
4. Let's change the text and link according to our needs and set the style to "Square Hollow" to make It a bit different.
5. Click the Update button to update the changes you just made.
6. Now click on the block text again to bring up the tiny editor and click the blue "Save" button to save your changes.

Adding a testimonial section has shown to improve the conversion rate of your lead collection. In this section we will see how we can add a testimonial section with Optimizer PRO./

1. First go to Customize > Frontpage > Frontpage widgets and click the "Add widget" button.
2. Then click the "Testimonials" button to insert the testimonial widget.
3. Now we will add a testimony by clicking the "Add New" button inside the widget. A new tab will be created.
4. Click the new tab and enter the Name, website (optional), occupation (optional), Testimony and the Image of the client.
5. Follow this method to add as many testimonials as you like.
6. After adding the testimonials, scroll down and click the "Apply" button to see the change.

In this section we will add a Contact form to our frontpage to Contact process easier so, users do not have to go to our contact page to get in touch. With Optimizer PRO, you can add any number of Contact widgets on any page. Let's see how we can easily add Contact Page with the Contact widget that comes with the theme.

1. First go to Customize > Frontpage > Frontpage widgets and click the "Add widget" button.
2. Optimizer PRO comes with various widget presets. These presets are predefined settings of each widget. Most widgets have predefined widgets. We can access them by clicking the + button beside each widget. Let's click the + button beside the "Contact" widget.
3. All the Predefined settings of the contact widget will appear. We will select the last one for our page.
4. Wait a few seconds after selecting the preset to apply the preset.
5. We will clear out the title field and add our Convincing text to the "Subtitle" field of the widget.
6. Then we will change the Widget background to one of our own image.

In this step we will see how we can link our Slider button to Our Contact widget that we just added, so when visitors click the "Get a Quote" button from the slider, they are scrolled down to the Contact form of the bottom of the frontpage where the contact page is located. Let's get started:

1. To link a widget to our slider button, we will first need to find out the id of the widget. To do that, hover your mouse over the Contact Widget and a blue edit icon will appear. Hover your mouse over the edit button and the widget id will show up. Take note of the id. In our case it is #optimizer_front_map-4
2. Now we will go to Customize > Frontpage > Slider and click the "Cta Button 1" box to reveal it's options and clear out the "Button link" field.
3. Now we will construct and add our new link that will link to the Contact Widget. To create a widget link, first add a "#", then the id of the widget then an "=" sign and then add a text that you want to display when visitors hover over the button.
4. Our link should look like this: #optimizer_front_map-4=get-a-quote
5. Save all your changes and test the button. When clicked, it should take you down to the Contact widget.

1. To assign the newly created page header image to all of our pages, we will go to Customize > Post & Page > Page Header Settings and add the Image from "Page header Default Image".
2. The Best Image size for page headers are 1920px x 300px - 500px.
3. We can change the color of the Page header Text to Black with the "Page Header Text color" option to make the Page Title stand out.
4. If you want to display different Page Header Image for different Page, take a look at this instruction.

Optimizer PRO comes with a Contact page template which contains a Contact Form and Interactive Map. You can easily create a contact page by following these steps:

1. Go to Pages > All Pages and select the "Get a Quote" page and remove the shortcode from the Editor and simply Set the Page template from the "Page Attributes" box to "Contact Page Template".
2. Preview the Page and you will notice that a nice Contact page with a map has been created.
3. After Creating the page, the map won't show up right away. We will have to acquire and activate the Google Map Api License to Customize > Miscellaneous > Other.
4. Since the Map is displaying a default location, we will need to change it. To do that, let's head over to Customize > Post & Page > Contact Page Settings and add the latitude and longitude value of our location. To find out your location's latitude and longitude, go to latlong.net and find the location and collect the latitude and longitude value of our location.
5. If you want to hide the map, just clear the "latitude and longitude" field.

With Optimizer PRO, you can easily add widgets to any pages you want. To add widgets to a page, You will first have to make it widgetzed:

1. Go to Pages > All Pages. Click any page. Now in the page edit screen, click the "Customize" button above the editor.
2. Click the activate button to make the page widget friendly.
3. Click the Add/Edit Widgets button and you will be redirected to customizer and will be able to add edit widgets on that page.

Note: If you decide to remove all the widgets and get back to the page's default state, Click the "Remove Widgets & Switch Back to Editor" button.