Maishaby Anariel Design

Header Image

header image
Navigate to Customizer → Header and upload your header image, which will appear above the site title and menu in the header area.

headerimage1

Site Title, Tagline and Logo

menu
Navigate to Customizer → Site Identity. A custom site logo is supported in Maisha. You can have a site title and tagline with your logo, a logo on its own (like the demo site), or a title and tagline without a logo.

Menu

Navigate to Customizer → Menus and add your menu. You can name it “mainnav” or use any other name. In the Theme Locations check Primary Menu and save it.

If you want to have a orange button for the menu item, navigate to the Customizer > Menus, click on the menu item you want to have a orange button and inside “CSS Classes” write “color”.

Menu Item
Menu Item

 

Header Options

headerimage1

headerimage21

Navigate to Customizer → Theme Options → General → Header Options and choose the Standard or Alternative header layout. The standard layout features logo, site title, and tagline on the left side and menu on the right. The alternative layout centers the logo, site title, tagline, and menu.

header options

Creating Your Front Page

sketch

By default, the front page displays your latest posts on a new site. If you don’t want to use blog posts for your homepage you can set up a static front page following this step-by-step guide. Once you’ve created your static homepage, assign it the Front Page template.

 

How to add content to the Front Page?

Navigate to the Pages and create a new page named “Front Page” or whatever you want to call it. Front page uses “Front Page” template from the “Page Options.”

Front Page options

Top Content Block

front

1. To add image as a background just upload the featured image. The image we used in the live demo is 2600 x 955px.

2. Add content into the editor.

3. If you want to have clickable button to open the right panel like in the demo, navigate to the Customizer → Theme Options → Front Page inside Front Page – Button Text to open Slide Panel add your button text.

front

4. Navigate to the Customizer → Theme Options → Front Page and inside Front Page – Opening Slide Panel Content add your panel content.

front-top3

If you don’t want to have opening right panel just ignore steps 3 & 4

First Content Block

front 1
This block consists of 2 separate sections. Main section “Donate for charity & stop war !” that is a parent page and optional block that includes 3 child pages (First Cause, Second Cause, Third Cause).

1. Navigate to the Pages and open a new page. In the demo we named it “Donate for charity & stop war !”. Inside the editor add the content you want to show in the main area. See below:

front23

2. Once you are done with editing, navigate to the Customizer → Theme Options → Front Page and inside the “First Content Block” choose the page you created and it will show up on the front page.

front 5

3. If you want to show three column child pages block under the main content you’ll need to open three different child pages (First Cause, Second Cause, Third Cause).

front5

4. Inside the editor add the content you want to show and upload featured image (optional).

5. Inside the Page Options module, choose Parent Page: Donate for charity & stop war! or the name of the page you created above.

Second Content Block

frotn

1. Navigate to the Pages and open a new page, we named it “About Maisha.” Inside the editor add the content you want to show in the main area. Upload your featured image if you want image as a background. See below:

front24

2. Once you are done with editing, navigate to the Customizer → Theme Options → Front Page and inside the Second Content Block choose the page you created and it will show up on the front page.

block 2

Third Content Block

block 3
This block consists of 2 separate parts – the left and right content part. “Our Programs” is a parent page and optional block includes child pages (Program One, Program Two, Program Three, Program Four).

1. Navigate to the Pages and open a new page, we named it “Our Programs.” Inside the editor add the content you want to show in the main area. See below:

front25

2. If you want to show list of the child pages on the right you’ll need to open different child pages (Program One, Program Two, Program Three, Program Four).

front16

3. Inside the editor add the content you want to show and upload featured image (optional).

front26

4. Inside the Page Options module, choose Parent Page: Our Programs or the name of the page you created above.

5. Once you are done with editing, navigate to the Customizer → Theme Options → Front Page and inside the Third Content Block choose the page you created and it will show up on the front page.

front19

Featured Content

featured
To show the Featured Posts content at the bottom of your front page, choose a specific tag and assign it to up to 20 posts that you want to display. Add the tag you selected under Customizer → Featured Content.

Screen-Shot-2015-07-17-at-4.16


The front page consists of five different content blocks that can be differently combined to create unique looks. You can decide which one you want to show. In the live demo we show all blocks, but feel free to build your own. A couple of ideas are presented below to show you what is possible.

front pages

Fixed Social Menu Bar

social
1. Navigate to the Customizer → Menus and add your menu. You can name it “Social Menu” or choose any other name.
2. You can add social media accounts inside the “Links” menu. Inside the “URL” field add the social page url and inside the “Link Text” add the name of the social account, for example “Facebook.” After you add it to the menu, the social icon will automatically show up inside the social media bar.

 

Available Icons: CodePen, Digg, Dribbble, Facebook, Flickr, GitHub, Google+, Instagram, Linkedin, Pinterest, RSS Feed (urls with /feed/), Tumblr, Twitter, Vimeo, WordPress, YouTube. Linking to any of these sites will automatically display its icon in your social bar.

Page Templates

This theme offers four different page templates like Grid Page, Full Width Page, Default Page and Full Background Image Page template.

Grid Page

  1. Create or edit a page, and assign it to the Grid Page template from the Page Options box.
  2. The Grid Page Template displays all child pages of the page, in a grid. Learn more about creating sub-pages (or child pages).
  3. The featured image, the title, and content from each sub-page creates a grid item.

You can learn more about it here

Full Width Page

Create or edit a page, and assign it to the Full Width Page template from the Page Options box. You can learn more about it here

Default Page

Create or edit a page, and assign it to the Default Page template from the Page Options box. You can learn more about it here

Full Background Image Page Template

Create or edit a page, and assign it to the Full Background Image Page template from the Page Options box. You can learn more about it here

slie1

slie2

slie3

slie4

Blog Page Settings

blog layout

Navigate to the Customizer → Theme Options → General and inside the Blog Layout choose the best layout for your site. You can change the position of the sidebar, select a grid layout or full-width layout without sidebar. This layout applies to archive pages.

blog

Inside the Customizer → Theme Options → General you can hide items like post author and date.

blog1

For more in-depth instructions click here.

Widgets

Maisha supports two widget areas: Sidebar, and Footer Widget Area. Sidebar will be displayed on pages that are using the “Default Page” template and Footer Widget Area will be displayed on all pages of your website if you added widgets. See full instructions.

CSS Styles – For Advanced Users

To style your pages individually, you can use extra CSS styles in your page text/HTML editor.
Button:

<a class="button" href="">Read More</a>

Orange Text:

<span class="color">happiness</span>

Pullquote Left:

<blockquote class="pullquote">
<p>Lorem Ipsum has been the industry’s standard dummy text</p>
</blockquote>

Pullquote Right:

<blockquote class="pullquote alignright">
<p>Lorem Ipsum has been the industry’s standard dummy text</p>
</blockquote>

Online Documentation can be found inside the demo site.