Crafteria

Created on : November 11, 2017
Latest Update : January 21, 2018
Buy Now

Install Theme

After download the Genesis Framework then download the Crafteria child theme.

Then login to your WordPress dashboard and follow steps below :

  1. Go to Appearance > Themes
  2. Click Add New
  3. Click Upload Theme > Find Genesis.zip
  4. Click Install now
  5. After install process finished don’t activate it
  6. Repeat step 1 – 3. But instead of Genesis.zip now open Crafteria.zip
  7. Click Install now.
  8. After install process finished click activate it.

Plugins to install

OPTIONAL PLUGINS:

If you are not going to have a shop on your site, you will NOT need to install these plugins.

  • WooCommerce – This is the eCommerce area of the site. If you are not using this feature, do not install this plugin.
  • Genesis Connect for WooCommerce – This is used in conjunction with the WooCommerce plugin to work nicely with Genesis.

AUTOMATIC PLUGIN INSTALLATION

Crafteria comes pre-packaged with the recommended plugins listed above.

If you are already using another one of our themes, this section might not be applicable; however, if any of the required plugins have not been installed, they will appear at the top of your dashboard as shown below. 

Note: WooCommerce plugins are not included; these need to be installed separately, following the  How to Install and Set Up the Shop tutorial.

To begin activating these plugins, click on the  BEGIN INSTALLING PLUGINS option, as shown below.

A new screen with each plugin listed will be displayed. If you already have these plugins installed, they will show as active. 

Check the box for each plugin to install and then select  INSTALL from the dropdown box, as shown below.

The successful installation screen will be displayed. At the bottom, click on the  RETURN TO PLUGINS option. Again select each of the plugins that you just installed to activate them.

Click  ACTIVATE and then follow the instructions throughout the rest of this tutorial to configure them like the demo.

Setup Homepage

Note: If you are building a new site and have gone through the One Click Install, these widgets will already be in place. We do recommend that you go through this tutorial to become familiar with the placement, format and capabilities of these widgets.

Site Layout

Homepage is consist of 3 widgets area

  • Main slider
  • Main Call to action (CTA)
  • Featured page

These widget areas can be found by navigating to  Appearance > Widgets.

Here is an overview of the Home Page widget areas and what widgets can fit in them.

Genesis Settings

This is how we setup our genesis for demo. Go to Genesis > Theme Settings

 

Main Slider

The main slider widgets has three options to display :

  1. Slider
  2. Video
  3. Still Image

1. Slider

To setup slider you can drag “Genesis – Responsive Slider” widget to this area. Then go to Genesis > Slider Settings.

Our settings like the picture above.

2. Video

You can also use video as main key presentation to place on main slider widgets area. Drag the “Video” widget to main slider widgets area.

Click “Add Video” then choose your video source or url. You can input your Youtube video. Just paste your Youtube video URL to input bar.

After you’re finish the setup. The site will be like this:

3. Still Image

Like video, slider widget area can display still image too. Just drag “Image” widget to “Slider widget area”.

Select image the click “Add on widget”.

 

Main Call To Action

This is a crucial place to involve your visitors to get action on your site. You can lead them to subscribe your mailing list, download your content or any other actions. In our demo, our visitor was leaded to subscribe our dummy mailing list. Here’s how to setup it:

  1. Go to Appearance > Widgets.
  2. Drag “Genesis – enews extended” to Main Call to action widget area.
  3. Setup input fields, then click save.
If you have no experience to setup this form, you can read more about it here [link]

Actually you can put text or html widget too and modify it to fit your needs.

If you want to insert a button on html widget you can paste the code below

<a class="button" href="#your-target-url" target="_blank" rel="noopener noreferrer"> Button Name </a>

Featured Page

The Home Featured widget area appears directly below the Main Slider widget area. This space is ideal for featuring categories, blog posts, or pages. The demo displays three Genesis – Featured Page widgets, as shown below.

For each page featured, create/edit a page and upload a featured image to that page on the right column. Then return to Appearance > Widgets, click on the widget to edit and select the page to display.

Don’t forget to set Image Size to “page-featured”

Customization

This theme contains some elements that you can customize so it can suits to your branding.  Here’s the list:

  1. Logo
  2. Color
  3. Background image / color

 

Color

Logo is important element from website. To change logo in this theme follow the steps below :

  1. Appearance > Customize > Colors
  2. Select color you need to change.
  3. For solid background color it works when you select background image (we will explain it later).

Background

To change background please follow the steps below :

  1. Appearance > Customize > Background Image
  2. Upload your image
  3. Save

If you want solid background (not using image) you still need to upload image as background image with 1 px x 1 px dimension. Look the image below for sample setting:

After setup finished. Go to Appearance > Customize > Color. Pick your background color.

 

Image Size

We use few custom image size applied on this theme. Here is the list :

  1. Logo recommended size for retina : 600px x 160px
  2. Featured Image : 350px x 500px
  3. Page Featured : 450px x 330px

Blog

Basically genesis theme already set the blog layout. But if you want to be like our demo here’s the step :

  1. Go to Genesis > Theme Settings
  2. Inside Content Archive make sure to imitate our settings below
  3. Go to Genesis > Simple Edits. Make sure to imitate our settings below

After Entry Widget

We create widget on every single post content, located below the author box. You can put anything here such as display ads, notification etc.

Footer

Our footer is divided into 4 sections. Footer Widget, Footer Call to Action Widget,  Site Copyright and Instagram Widget.

Footer Widget

We put 2 widgets onto footer at our demo. Image widget and text widget. Here’s our code inside text widget.


Write your profile or jobs you did here. Just with few sentences you can let your visitors know who you are.
<a class="button" href="#your-target-url">Learn More</a>

Footer Call to Action Widget

How to use call to action is the same as front page like we mentioned before.

Footer Copyright

You can edit the credit text by go to Genesis > Simple Edits.

 

Instagram Widget

You can show your instagram photo by drag a text widget to Instagram footer widget area. But first you need to setup instagram by follow steps below:

  1. go to Admin dashboard > Instagram Feed.
  2. Get token access
  3. Click customize tab at Instagram feed page.
  4. Imitate this settings
  5. Don’t forget to click save changes. Then click Display Your Feed tab. Paste the shortcode “[….]” at your text widget placed on Instagram footer widget.