DJ-Electronics WordPress. Installation from scratch
Contents:
- What's in the package?
- What item do you need to download separately?
- Do we recommend any other components to use?
- How to install everything from scratch?
- - Step #1WordPress installation
- - Step #2 Plugins instalation
- - - WooCommerce
- - - Advanced Custom Fields
- - - Yootheme PRO
- - Step #4 Yootheme Builder
- - - Images
- - - Child Theme
- - - Home Page
- - - Basic builder configuration
- - - Recover theme settings
- - - Home page appearance
- - - Set up the menu
- - - Loading layouts
- - - Set up pages
- - - Set up shop page
What is the djelectronics-wp-elements-*.zip package?
It is a set of files that allows you to install a website based on the DJ-Electronics template from scratch or install it on an existing website
What's in the package?
![package included](/templates/yootheme/cache/04/djelectronics_n_01-042655af.jpeg)
![package included](/templates/yootheme/cache/64/install_n_woo_001-64edc407.jpeg)
What item do you need to download separately?
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?
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
![](/templates/yootheme/cache/40/install_n_woo_01-4045a3e3.jpeg)
![](/templates/yootheme/cache/34/install_n_woo_03-34494a1c.jpeg)
Then activate it
![](/templates/yootheme/cache/17/install_n_woo_04-17ada986.jpeg)
![](/templates/yootheme/cache/17/install_n_woo_04-17ada986.jpeg)
2. Advanced Custom Fields:
![](/templates/yootheme/cache/8b/install_n_woo_002-8b8128fb.jpeg)
3. Yootheme PRO:
Go to Apperance / Themes
![](/templates/yootheme/cache/80/install_n_woo_05-80dedd8e.jpeg)
Then Add new
![](/templates/yootheme/cache/04/install_n_woo_06-046f6140.jpeg)
![](/templates/yootheme/cache/06/install_n_woo_08-069aee0d.jpeg)
![](/templates/yootheme/cache/e1/install_n_woo_09-e1a55ed9.jpeg)
4.Max Mega Menu
Go to plugins / Add new
![](/templates/yootheme/cache/f0/djelectronics_n_08-f0fe45f0.jpeg)
Find the Max Mega Menu plugin in the list of available plugins and install it
![](/templates/yootheme/cache/47/djelectronics_n_09-47d344a1.jpeg)
Then activate it
![](/templates/yootheme/cache/01/djelectronics_n_10-017de18c.jpeg)
And set the plugin according to your needs. You can preview the settings in our demo if you install our quickstart in a separate location.
![](/templates/yootheme/cache/ef/djelectronics_n_11-eff41d73.jpeg)
Step #4 Yootheme Builder Configuration
1. Images:
![](/templates/yootheme/cache/87/install_n_woo_14-8755063a.jpeg)
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
![](/templates/yootheme/cache/9d/install_n_woo_003-9dcb48f3.jpeg)
3. Home Page:
![](/templates/yootheme/cache/be/install_n_woo_10-be26905b.jpeg)
![](/templates/yootheme/cache/e0/install_n_woo_11-e0cdd084.jpeg)
![](/templates/yootheme/cache/1a/install_n_woo_12-1accaff4.jpeg)
![](/templates/yootheme/cache/97/install_n_woo_13-97445216.jpeg)
3. Default theme:
Set Child Theme as your default theme.
Go to Apperance / Themes and and activate the child theme
![](/templates/yootheme/cache/46/djelectronics_n_02-468ff79f.jpeg)
4. Basic builder configuration
Now start to configure your theme. Just click the customize button
![](/templates/yootheme/cache/1f/djelectronics_n_03-1feecb74.jpeg)
5 Recover template settings from a JSON file:
![](/templates/yootheme/cache/09/install_n_woo_17-09b3f177.jpeg)
![](/templates/yootheme/cache/a8/install_n_woo_18-a88af6cd.jpeg)
![](/templates/yootheme/cache/25/install_n_woo_19-25020b2f.jpeg)
![](/templates/yootheme/cache/58/djelectronics_n_04-5866edea.jpeg)
6. The appearance of the home page
Go to the builder tab
![](/templates/yootheme/cache/f5/install_n_woo_21-f5b74ea4.jpeg)
![](/templates/yootheme/cache/b4/install_n_woo_22-b480243e.jpeg)
![](/templates/yootheme/cache/61/install_n_woo_23-61ca15fd.jpeg)
Then select DJ-Electronics - Layouts.json from your computer. After doing this, you will see a list of available layouts that we use in our demo
![](/templates/yootheme/cache/11/djelectronics_n_05-11e8f0fd.jpeg)
7. Set up page:
Try to set up your home page now. Select the appropriate layout - "DJ-Electronics 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)
![](/templates/yootheme/cache/f0/djelectronics_n_06-f0b5bf96.jpeg)
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
![](/templates/yootheme/cache/aa/install_n_woo_26-aa825f89.jpeg)
![](/templates/yootheme/cache/27/install_n_woo_27-270aa26b.jpeg)
![](/templates/yootheme/cache/c8/install_n_woo_32-c8bc99fd.jpeg)
![](/templates/yootheme/cache/63/djelectronics_n_12-63f00fdf.jpeg)
![](/templates/yootheme/cache/a1/djelectronics_n_13-a13964fa.jpeg)
![](/templates/yootheme/cache/62/djelectronics_n_14-62086e7e.jpeg)
![](/templates/yootheme/cache/cb/install_n_woo_36-cb28afb9.jpeg)
![](/templates/yootheme/cache/ba/install_n_woo_37-baed9593.jpeg)
![](/templates/yootheme/cache/30/install_n_woo_38-30fd1172.jpeg)
![](/templates/yootheme/cache/b8/install_n_woo_39-b81cca46.jpeg)
![](/templates/yootheme/cache/ab/djelectronics_n_15-ab941392.jpeg)
![](/templates/yootheme/cache/a3/djelectronics_n_16-a3aaf9cc.jpeg)
![](/templates/yootheme/cache/b3/install_n_woo_42-b3105800.jpeg)
![](/templates/yootheme/cache/0c/install_n_woo_43-0c44fe21.jpeg)
![](/templates/yootheme/cache/40/install_n_woo_44-4073f737.jpeg)
![](/templates/yootheme/cache/94/install_n_woo_22-94125875.jpeg)
![](/templates/yootheme/cache/a2/djelectronics_n_17-a2c33b1c.jpeg)
![](/templates/yootheme/cache/d9/djelectronics_n_18-d9ebf5db.jpeg)
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.