New to DJ-Extensions?

DJ-BeOrganic WordPress. Installation from scratch

What is the djbeorganic-wp-elements-*.zip package?

It is a set of files that allows you to install a website based on the DJ-BeOrganic theme from scratch or install it on an existing website

What's in the package?

DJ Organic - Settings.json: A special .json file containing all settings for Yootheme Pro along with main styles.

DJ Organic - Layouts,json: A special .json file for Yootheme Builder contains the most essential views (layouts) used on our demo site

uploads.zip: contains all the illustrations used to build our demo site

wp_djslideshowtimeline-1.1.1.zip: It is a plugin developed by us that widens Yootheme with the possibility of creating a timeline - e.g. company history. The plugin comes with the theme only.

yootheme_child.zip: This is a child template for Yootheme containing specific CSS styles, overrides, YOOtheme elements.

What item do you need to download separately?

DJ-Flipbook: If you need to present your PDFs fancy and comfy way, this is a solution for you. The well-known flipbook solution is now brought back with new web technologies.

Download the latest version from https://dj-extensions.com/my-account/downloads/dj-flipbook-wp

Yootheme Pro: This is a third-party extension. Download them from https://yootheme.com/page-builder

Attention!

Yootheme Page Builder is required for proper system operation, which must be purchased and downloaded from https://yootheme.com/page-builder. Yootheme Page Builder is a commercial component from a third party and cannot be bundled with our extensions due to proprietary rights.

Do we recommend any other components to use?

Yes. Of course, we have our favourite must-have kit from a third party. Consider installing these additional components:

Akeeba Backup PRO: https://www.akeeba.com/products/akeeba-backup.html

RSFirewall!: https://www.rsjoomla.com/joomla-extensions/joomla-security.html

Zoolander's Essential for Yootheme Pro: https://www.zoolanders.com/essentials-for-yootheme-pro

How to install everything from scratch?

Step #1 WordPress installation

Install WordPress downloaded from https://wordpress.org/download/. If you already have your installation working, you can skip this step.

Step #2 Installation and configuration of plugins

1. WooCommerce WordPress eCommerce plugin::

Download the latest version from https://wordpress.org/plugins/woocommerce/ and install it.

Go to Plugins / Add new

Upload and install it

Then activate it

Configure the plugin according to your needs. The documentation available here will help - https://woocommerce.com/documentation/

- add your categories

- add attributes(necessary for filtering products and creating variants)

- add your products

- add payment methods

- add shipping methods

- configure tax rates and tax rules

Also set the default store page

2. Advanced Custom Fields:

If you intend to use additional options, e.g. in the product description, download from https://www.advancedcustomfields.com/ and install the Advanced Custom Fields plugin. This will allow you to extend the descriptions with additional fields

3. Yootheme PRO:

Download from https://yootheme.com/page-builder and install like a regular theme. Remember that this is an add-on from a third party, and you need to buy a license from them. There is a wealth of documentation available for Yootheme PRO on their website - https://yootheme.com/support/yootheme-pro/wordpress/introduction. You can handle this web builder.

Go to Apperance / Themes

Then Add new

Upload the Yootheme Builder and install it

The next step is activation

5. DJ-FlipBook:

We also added a great plugin that presents PDF files in the form of a FlipBook. Thanks to this, you can show the latest product catalogues, documentation, etc., in an interesting form.
You can download the add-on here https://dj-extensions.com/my-account/downloads/dj-flipbook

6. DJ-SlideshowTimeline:

his plugin adds a timeline element to the Yootheme builder. The element was designed for our quickstarts and is delivered with the package. You can use it, e.g. on the on the website and show your company's history. Install wp_djslideshowtimeline-1.1.1.zip like a standard plugin, and then activate it.

This item allows you to display slideshow grouped on the timeline. You can also use dynamic content as a data source.

Step #4 Yootheme Builder Configuration

1. Images:

If you like pictures from our quickstart, extract the images.zip archive and add them to your media library

2. Child Theme:

Unpack the 'yootheme_child.zip' file and transfer the whole folder via FTP to the '/wp-content/themes folder in your WordPress Installation. You can learn more about child themes from the Yootheme documentation https://yootheme.com/support/yootheme-pro/wordpress/developers-child-themes

3. Home Page:

Configure your start page. Go to Pages, add a new one and name it like "home"

Then go to Apperance / Customize

Go to homepage setings and set your homepage

3. Default theme:

Set Child Theme as your default theme.
Go to Apperance / Themes and and activate the child theme

4. Basic builder configuration

Now start to configure your theme. Just click the customize button

5 Recover template settings from a JSON file:

Go to "Settings" / "Advanced", then scroll the Yootheme toolbar to the bottom and select "Import Settings"

Click and select - DJ-Beorganic - Settings.json from the disk on your computer

Publish your changes

Once the settings are loaded, save them. The builder sometimes needs to refresh its cache, close it and reopen it.

6. The appearance of the home page

Go to the builder tab

Then to the library

select my leyouts and then upload layout

Then select DJ-Fashionstore - Layouts.json from your computer. After doing this, you will see a list of available layouts that we use in our demo

7. Set up page:

Try to set up your home page now. Select the appropriate layout - "DJ-BeOrganic Homepage" and click.
Now you have a start page, just like in our demo (of course, if you added our pictures. If not, you can use your own. Complete them on each element in the web builder)

8. Set up shop page:

Add a menu item for the store page. To do this, go to the menu, create a new menu, name it (e.g. Main Menu), pin it to the Navbar area, add item and then select the type for this item: Products / All Products

Then publish it.

Now we have "All Products" menu item in Main Menu located ad position Navbar

Publish this menu to Mobile Dialog as well

Don't forget to publish your changes

If you have previously introduced products, go to the menu item for the store and configure the menu for the store; go to the menu item "All Products".

Your website is not looking excellent right now. But you can quickly correct it in the following steps.

Go to the "templates" tab in the main builder menu and click the "New Template" button.

Name this template e.g. "Product List". Then click the "Save" button

Now you can create a new template by clicking the "Builder" button

As you did on the home page, go to the library and select the layout that suits this page. Try DJ-BeOrganic - Products Full

The Layout will load, and you will see a beautifully formatted product listing page. Save it.

Save layout.

You should define your own widgets here, e.g. filters and list of categories and arrange the items according to your needs,

Then click on any product item.

As you can see, the situation is similar. You need to create a template for the product.

Go to the "templates" tab in the main builder menu and click the "New Template" button. Name this template e.g. "Single Product Page". Then click the "Save" button

Then go to "Single Product Page" by clicking the "Builder" button

And choose the proper layout from the library - "DJ-BeOrganic Products - Single product."

The product sheet is also ready and looks great

Save layout.

Using ready-made layouts, you will build other subpages. Of course, you can modify the views as you wish. You can create layouts on regular articles or page templates depending on the context you are in at the moment. Yootheme documentation will be helpful in this.

Advice

It is a good practice to have a complete quickstart copy somewhere else, allowing you to see the different settings used there.