The O.B.Office template

This document's purpose is to shed some light on how to edit "tricky" parts of this template.

INFO

Elementor PRO needed? For the contact form only!
Elementor version? 3.2.5 (3.2.2 PRO)
Any 3rd party plugin(s) required? "Steroids for Elementor" only (version 1.7.7)!
Which WordPress theme to use? HELLO ELEMENTOR

How to install properly?

Please use Elementor’s “Import / Export Kit” in order to import the template itself along with the Site Settings (Global Colors, Global Fonts, Theme Style settings, Layout Settings, etc.)

How to use Elementor's "Import / Export Kit"?
  1. from the Admin Dashboard select Elementor > Settings
  2. select the “Experiments” tab (image #1)
  3. activate “Import Export Template Kit” option
  4. Save Changes!

…a few seconds later…

  1. from the Admin Dashboard select Elementor > Tools
  2. select the “Import / Export Kit” tab (image #2)
  3. hit the “Start Import” button
  4. drag & drop the template ZIP file (or browse to it)

Please NOTE! The template Site Settings (Global Colors, Global Fonts, Theme Style settings, Layout Settings, etc.) will be appended to any existing ones!

Hero section

How to change the background image?
  1. highlight the top Column for Edit
  2. select the “Style” tab
  3. expand the “Background Overlay” panel
  4. select different image from Media Library

Intro

Both “Heading” and “Image” widgets rely on the “Widget-Stalker” extension that allows the widget position manipulation. The GREEN OUTLINE is characteristic for that very extension.

How to manage the decor (image)?

The decor behind the main photo (and the call-out text on the left-hand side) has been set by using the “PoopArt” extension of “Steroids for Elementor”.

  1. highlight the main photo for edit
  2. select the “Advanced” tab
  3. expand the “PoopArt” panel
  4. select different image from Media Library if needed, or use the available options to update the decor position, size, etc.
How to change position of the dark background?
An entire Intro Section uses the Background Overlay instead of just a background color! The Background Overlay element can be moved (up, down or sideways) by using the “Overlaiz” extension!

This is how we can make the main photo peek out at the bottom.

  1. highlight the top Section for edit
  2. select the “Style” tab
  3. expand the “Background Overlay” panel
  4. use the “Overlaiz” options to change position or size of the Background Overlay element

Call to Action

Call to Action has been animated by using the “HoverAnimator” extension. In order to be able to animate widgets inside of the particular Column, you need to:

  1. enable “HoverAnimator” for the target Column itself (image #1)
  2. enable “HoverAnimator” for every widget that you plan to animate

Info Section

How to manage the decor (image)?

The decor behind the main photo (and the text) has been set via the Background Overlay element this time. The size and position of the decor can be manipulated by using the “Overlaiz” extension!

  1. highlight the left Column for edit
  2. select the “Style” tab
  3. expand the “Background Overlay” panel
  4. select different image from the Media Library if needed
  5. use the available options of “Overlaiz” to update the decor position, size, etc.
How to manage the main photo?

The main photo height depends on the amount of text in the opposite column. This is the main reason to set it up like a Background Overlay element background.

  1. highlight the right Column for edit
  2. select the “Style” tab
  3. expand the “Background Overlay” panel
  4. select different image from the Media Library if needed
Created by OoohBoi, one day of the year 2021. In case you have a question, drop me an email.
Contact