Loading

Soma Theme Documentation

How to install soma theme in your wordpress site

Step 1) Go to Appearance-> Themes
Step 2) Click on Add New button at top
Step 3) Click on Upload Theme button
Step 4) Find the soma.zip file from the choose file option and click Install Now
Step 5) After installation click on Activate Theme

How to add Logo

Step 1) Click on Appearance->Customize. You will see list of tabs in left section
Step 2) Click on General Settings tab
Step 3) Under the Logo section, click on Select Image button and upload your logo in the media gallery either by drag and drop or by using the tab Upload files. After selecting an image click on Choose Image button on right.
Step 4) Wait for the customizer to load preview
Step 5) Once you see your logo in preview click on Save & Publish button on Top.

How to create pages

Step 1) Click on Pages. You will see list of pages if there any
Step 2) Click on Add New button on top
Step 3) Enter your page title and content in the editor
(Note : To use the page builder feature, do not add content in the editor)
Step 4) Click on Publish button on right.
Step 5) Create as many pages as you want using the steps above

How to choose frontpage and blog posts page

Front page is the homepage of your site whereas the blog posts page is the page which shows up your blog posts. So how wordpress would come to know what page should it serve. Here are the few steps to do it

Step 1) Click on Settings->Reading. You will see list of Reading Settings
Step 2) On Front Page Display settings, Select a static page radio button
Step 3) Now you will see 2 options. Front page and Posts Page.
Step 4) Select your pages
Step 5) After selection click on Save Changes button below

How to create menu

Note : To create menu, you need to have pages.

Step 1) Click on Appearance->Menus
Step 2) Enter a menu name(eg. Top Menu or Main Menu etc) and click on Create Menu button
Step 3) Now from the left side Pages Section, Select your pages you wish to see in your menu and then click on Add to Menu button below. This will add pages to the right. Drag pages to the order you prefer. You can even create subpage by dragging to the right more under a page
Step 4) After rearranging the order of pages, you will see Display location under Menu Settings
Step 5) Select Primary for top navigation menu and select Footer Widget also if you want the same menu structure in the footer menu in widget, or you can create a separate menu for footer widget and then select this option
Step 6) Click on Save Menu

How to add top bar phone number and social icons

Step 1) Click on Appearance->Customize
Step 2) Click on General Settings tab
Step 3) After Footer copyright section, you will see Topbar Phone Number section. Enter your phone number
Step 4) Wait for customizer to preview changes
Step 5) Click on Save & Publish button at top

How to use drag drop page builder

To use drag and drop page builder feature you need to create a page first. After creating a page (for eg Home). You need to select a uniqueTemplate for that page. Make sure the page do not have any content in the editor. Following are the steps to make a page ready for drag and drop page builder

Step 1) Click on Pages
Step 2) You will see list of pages. click on the page you want to have this feature, or create a new page
Step 3) From Page Attribute section at right. Select a unique Template from dropdown (You will see 10 page templates names as Page1 Template to Page10 Template)
Step 4) Click on Update or Publish

Note : This free theme has only 10 page templates. It means you can use this feature for only 10 pages. However this can be extended by request. Although you can create any number of pages as you want and add normal content through editor

How to add slider background image and content

Step 1) Click on Appearance->Customize. You will see list of tabs in left.
Step 2) Click on Widgets. You will see list of tabs again along with the page template you have selected when creating a page. (for eg. Page1 Template)
Step 3) Click on the page template( this is the one you have selected in your page for eg Page1 Template)
Step 4) Now add a widget using Add a Widget. Click on Add a Widget button
Step 5) When you'll click on button you will see list of widgets on the right side which you can use. Choose Soma: Slider Section from these.
Step 6) Fill the fields
Step 7) Wait for the customizer to preview
Step 8) Click on Save & Publish button on Top

Note: This widget will only work if you have selected a page template for your page.

How to add three icon boxes

Step 1) Click on Appearance->Customize. You will see list of tabs in left.
Step 2) Click on Widgets. You will see list of tabs again along with the page template you have selected when creating a page. (for eg. Page1 Template)
Step 3) Click on the page template( this is the one you have selected in your page for eg Page1 Template)
Step 4) Now add a widget using Add a Widget. Click on Add a Widget button
Step 5) When you'll click on button you will see list of widgets on the right side which you can use. Choose Soma: Icon Boxes Section from these.
Step 6) Fill the fields. You will see 3 blocks there. Click on any block it will collapse down and will show text fields to fill
Step 7) For icons in blocks (Linearicon Font icon). Please visit this link Linear icons and copy the code of icon you like (for ex lnr-home) and paste in the textbox
Step 8) After filling all fields, wait for the customizer to preview
Step 9) Click on Save & Publish button on Top

Note: This widget will only work if you have selected a page template for your page.

How to add call to action section

Step 1) Click on Appearance->Customize. You will see list of tabs in left.
Step 2) Click on Widgets. You will see list of tabs again along with the page template you have selected when creating a page. (for eg. Page1 Template)
Step 3) Click on the page template( this is the one you have selected in your page for eg Page1 Template)
Step 4) Now add a widget using Add a Widget. Click on Add a Widget button
Step 5) When you'll click on button you will see list of widgets on the right side which you can use. Choose Soma: Call to Action Section from these.
Step 6) Fill the fields.
Step 7) After filling all fields, wait for the customizer to preview
Step 8) Click on Save & Publish button on Top

Note: This widget will only work if you have selected a page template for your page.

How to add testimonial section

For testimonial section. First you need to create a post type. Follow these steps to create a post type

Step 1) Click on Toolset->Dashboard
Step 2) Click on Add new post type button. You will now see list of options.
Step 3) Under Name and description, fill these fields as below mentioned
Name plural (required) : Testimonials
Name singular (required) : Testimonial
slug (required) : testimonial
Step 4) Change the icon if you want by clicking Change icon button
Step 5) Next you need to scroll to section Sections to display when editing Testimonial. Here Title and Editor are checked by default. You need to add few more options to this list.
Step 6) Check Thumbnails and Custom Fields. That's it
Step 7) Click on Save Post Type button. Now you can see a Testimonial link in your dashboard menu. Click on that.
Step 8) Click on Add New button on top.
Step 9) Next Enter Title and Content in editor Add a Feature image from right( this image will show up as a client image. Please use same width and height image).
Step 10) If you scroll down a little, you will see a Custom Fields section. Add client_name as it is and under Name enter your client's name for ex John doe under Value.
. After that click on Add Custom Field Step 11) Click on Publish button.
Step 12) Add more testimonials using this process

Now we will add this to our page builder. Follow these steps
Step 1) Click on Appearance->Customize. You will see list of tabs in left.
Step 2) Click on Widgets. You will see list of tabs again along with the page template you have selected when creating a page. (for eg. Page1 Template)
Step 3) Click on the page template( this is the one you have selected in your page for eg Page1 Template)
Step 4) Now add a widget using Add a Widget. Click on Add a Widget button
Step 5) When you'll click on button you will see list of widgets on the right side which you can use. Choose Soma: Testimonial Section from these.
Step 6) Select Background Image and Number of posts to display for eg 3 (it will show 3 testimonials)
Step 7) Wait for the customizer to preview
Step 8) Click on Save & Publish button on top.

How to add client images

Step 1) Click on Appearance->Customize. You will see list of tabs in left.
Step 2) Click on Widgets. You will see list of tabs again along with the page template you have selected when creating a page. (for eg. Page1 Template)
Step 3) Click on the page template( this is the one you have selected in your page for eg Page1 Template)
Step 4) Now add a widget using Add a Widget. Click on Add a Widget button
Step 5) When you'll click on button you will see list of widgets on the right side which you can use. Choose Soma: Clients Section from these.
Step 6) upload all the 6 logos
Step 7) After filling all fields, wait for the customizer to preview
Step 8) Click on Save & Publish button on Top

Note: This widget will only work if you have selected a page template for your page.

How to add 4 footer widgets

Step 1) Click on Appearance->Widgets. You will see Footer Column1, Footer Column2, Footer Column3 and Footer Column4 on right.
Step 2) Now Drag Soma:Aboutus Footer Section and drop to Footer Column1. You will see some textfields
Step 3) Fill form fields
Step 4) Click on Save button

Step 5) Next Drag Soma:Blog Footer Section and drop to Footer Column2. You will see some textfields
Step 6) Fill form fields
Step 7) Click on Save button

Step 8) Next Drag Soma:Menu Footer Section and drop to Footer Column3. You will see some textfields
Step 9) Fill form fields
Step 10) Click on Save button

Step 11) Next Drag Soma:Contactus Footer Section and drop to Footer Column4. You will see some textfields
Step 12) Fill form fields
Step 13) Click on Save button

Note : You can drag and drop widgets to any of the footer columns. Its not necessary to follow the sequence i mentioned above

How to add footer social icons

You can add Footer social icons by using Soma:Contactus Footer Section in any of the Footer Columns. Just drag and drop this section to any of the Footer Columns. You will be presented with Social Icons section inside. You can add upto 7 Font awesome icons. Google it if you want more info how to add fontawesome icons, its super easy

How to add copyrights information

Step 1) Click on Appearance->Customize
Step 2) Click on General Settings
Step 3) Scroll down to Footer copyright text
Step 4) Add your content
Step 5) Wait for the customizer to preview
Step 6) Click on Save & Publish button at top.

How to modify page title section

Step 1) Click on Appearance->Customize
Step 2) Click on Page Settings
Step 3) Choose background color(if you want only color for your background in page title section) or background image( if you want a background image in page title section). If you choose background color then you need to also set background color from Select Background Color and if you choose background image you need to upload background image from Select Background Image.
The last option Add Dark Overlay over background Image is to highlight the text by adding dark overlay to image. This option will work only if you have selected the background image.

How to add small page description along with page title

You can also add small page description in your page.

Step 1) Open your page by clicking Pages
Step 2) Your page will now open. You need to add a custom field to add page description. By defaults custom fields are hidden. In order to show the custom fields, click on Screen Options in top right and check Custom Fields
Step 3) Now Custom Fields section is visible. Under Name enter page_description as it is and under Value enter your text and then click on Add Custom Field
Step 4) That's it. Click on Update

How to add dark overlay in background image

There are times when your background image is too bright and the text is not clearly highlighted. To overcome this situation soma has an built in option. Below steps are for the homepage slider image
Step 1) Click on Appearance->Customize.
Step 2) Click on Widgets.
Step 3) Click on the page template( this is the one you have selected in your page for eg Page1 Template)
Step 4) Now open your widget Soma:Slider Section by clicking on it.
Step 5) Scroll down to Enable Dark Overlay to background image and click on Yes
Step 6) Wait for the customizer to preview
Step 7) Click on Save & Publish button at top.

How to add text with rounded image

Step 1) Click on Appearance->Customize. You will see list of tabs in left.
Step 2) Click on Widgets. You will see list of tabs again along with the page template you have selected when creating a page. (for eg. Page1 Template)
Step 3) Click on the page template( this is the one you have selected in your page for eg Page1 Template)
Step 4) Now add a widget using Add a Widget. Click on Add a Widget button
Step 5) When you'll click on button you will see list of widgets on the right side which you can use. Choose Soma: Text Widget With Rounded Image from these.
Step 6) Fill the fields
Step 7) You can even swipe left and right sections with Show Image on Right option
Step 8) After filling all fields, wait for the customizer to preview
Step 9) Click on Save & Publish button on Top

Note: This widget will only work if you have selected a page template for your page.

How to add text with rectangle image

Step 1) Click on Appearance->Customize. You will see list of tabs in left.
Step 2) Click on Widgets. You will see list of tabs again along with the page template you have selected when creating a page. (for eg. Page1 Template)
Step 3) Click on the page template( this is the one you have selected in your page for eg Page1 Template)
Step 4) Now add a widget using Add a Widget. Click on Add a Widget button
Step 5) When you'll click on button you will see list of widgets on the right side which you can use. Choose Soma: Text Widget With Image from these.
Step 6) Fill the fields
Step 7) You can even swipe left and right sections with Show Image on Right option
Step 8) After filling all fields, wait for the customizer to preview
Step 9) Click on Save & Publish button on Top

Note: This widget will only work if you have selected a page template for your page.

How to add text only section

Step 1) Click on Appearance->Customize. You will see list of tabs in left.
Step 2) Click on Widgets. You will see list of tabs again along with the page template you have selected when creating a page. (for eg. Page1 Template)
Step 3) Click on the page template( this is the one you have selected in your page for eg Page1 Template)
Step 4) Now add a widget using Add a Widget. Click on Add a Widget button
Step 5) When you'll click on button you will see list of widgets on the right side which you can use. Choose Soma: Text Only Section from these.
Step 6) Fill the fields
Step 7) You can also add heading and subheading by Include Heading and Subheading option
Step 8) After filling all fields, wait for the customizer to preview
Step 9) Click on Save & Publish button on Top

Note: This widget will only work if you have selected a page template for your page.

How to add meet our team section

Step 1) Click on Appearance->Customize. You will see list of tabs in left.
Step 2) Click on Widgets. You will see list of tabs again along with the page template you have selected when creating a page. (for eg. Page1 Template)
Step 3) Click on the page template( this is the one you have selected in your page for eg Page1 Template)
Step 4) Now add a widget using Add a Widget. Click on Add a Widget button
Step 5) When you'll click on button you will see list of widgets on the right side which you can use. Choose Soma: Team Members Section from these.
Step 6) Fill the fields
Step 7) There are 8 team member blocks. you can add at max 8 team members. Clicking on Block will open up fields. Fill the fields. Add icons through Font Awesome (eg fa-facebook).
Step 8) After filling all fields, wait for the customizer to preview
Step 9) Click on Save & Publish button on Top

Note: This widget will only work if you have selected a page template for your page.

How to change the background color of any section

Soma provides built in option to change the color of any section. Below are the steps for 3 icon boxes
Step 1) Click on Appearance->Customize.
Step 2) Click on Widgets.
Step 3) Click on the page template( this is the one you have selected in your page for eg Page1 Template)
Step 4) Now open your widget Soma: Icon Boxes Section by clicking on it.
Step 5) Scroll down to the option Select Background Color and select the color you want
Step 6) Wait for the customizer to preview
Step 7) Click on Save & Publish button at top

How to create a contact form and generate a shortcode

To create a Contact Form. Follow these steps
Step 1) Click on Contact
Step 2) Click on Add New button
Step 3) Enter your title and under the form tab you will see some html markup. This is the default one. We will edit this markup to make our contact form more beautiful.
Step 4) Create your markup like this
soma
Step 5) Click on Save button
Step 6) You will now see a shortcode under the title field. Copy this code, this is your shortcode
Step 7) This code should be pasted on the Soma : Contact Widget widget

How to add contact info and add contact form

Step 1) Click on Appearance->Customize. You will see list of tabs in left.
Step 2) Click on Widgets. You will see list of tabs again along with the page template you have selected when creating a page. (for eg. Page1 Template)
Step 3) Click on the page template( this is the one you have selected in your page for eg Page1 Template)
Step 4) Now add a widget using Add a Widget. Click on Add a Widget button
Step 5) When you'll click on button you will see list of widgets on the right side which you can use. Choose Soma: Contact Widget from these.
Step 6) Fill the fields
Step 7) Paste the shortcode in Contact Form Shortcode
Step 8) After filling all fields, wait for the customizer to preview
Step 9) Click on Save & Publish button on Top

Note: This widget will only work if you have selected a page template for your page.

How to add different styles to headings (mix of bold and light font)

You might have seen in live preview of Soma, the mix of bold and light fonts in heading. You can also do that. By default the headings are bold. Adding a <span> tag will make the word to show in light font.
Example : WHO<span>WE ARE</span> .
In this WE ARE will be rendered in light font

How to integrate google map in contact page

Step 1) Click on Maps
Step 2) Click on Skip intro and create a map
Step 3) Next there will be a message like this Google Maps now require an API key to function
Step 4) Click on Create an API key now (free) and follow steps to create an API
and copy the API code
Step 5) Paste this API code in the field and click on Save button
Step 6) After successful integration click on the Map link (My First Map) and open it
Step 7) There will be a marker already placed on map. You need to delete this marker from Your Markers section.
Step 8) Next you need to create your own marker. So Go through the Map and select your location through Map and right click to place the marker on it. The markers location will be shown on the left side under Markers
Step 9) Click on Add Marker
Step 10 ) After this copy the shortcode above

Now we will paste this shortcode in our page.
Step 1) Click on Appearance->Customize
Step 2) Click on Widgets. You will see list of tabs again along with the page template you have selected when creating a page. (for eg. Page1 Template)
Step 3) Click on the page template( this is the one you have selected in your page for eg Page1 Template)
Step 4) Now add a widget using Add a Widget. Click on Add a Widget button
Step 5) When you'll click on button you will see list of widgets on the right side which you can use. Choose Text from these.
Step 6) Paste the shortcode in the content field without any title
Step 7) Wait for the customizer to preview
Step 8) Click on Save & Publish button on top