New to DJ-Extensions?

DJ-PreSchool. Installation from scratch

What is the djuniversity-en-elements-*.zip package?

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

What's in the package?

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

dj-preschool - settings.json: A special .json file containing all settings for Yootheme Pro along with main styles.

dj-preschool - layouts.json: A special .json file containing all layouts prepared in the template

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

What item do you need to download separately?

DJ-Accessibility : DJ-Accessibility is a plugin that helps to provide accessibility compliance with WCAG and ADA standards

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

DJ-Popup: Popup plugin for Yootheme Pro. Download the latest version from - https://dj-extensions.com/my-account/downloads/dj-popup

Dj-AudioList: Plugin that allows you to post lists with audio content. Download the latest version from - https://dj-extensions.com/my-account/downloads/DJ-AudioList-Joomla

DJ-ContentFilters: A plugin that allows you to create search filters based on additional fields. Download the latest version from - https://dj-extensions.com/my-account/downloads/DJ-ContentFilters

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 Joomla installation

Install Joomla! 5.x or 4.x downloaded from https://downloads.joomla.org/. If you already have your installation working, you can skip this step.

If you are using Joomla version 5.x, make sure the backward compatibility plugin is activated. If not turn it on. To do this, go to plugins, find the backward compatibility plugin and enable it.

Step #2 Initial configuration

There are some necessary settings that you should make right after installation:

1. SEO:

In the global configuration, set:

- Site Meta Description

- Content Rights

- Search Engine Friendly URLs - set to "Yes."

- Use URL Rewriting - set to "Yes" (don't forget to rename htaccess.txt to .htaccess)

2. Other settings according to your needs

Step #3 Installation and configuration of extensions

1. Yootheme PRO:

Download from https://yootheme.com/page-builder and install like a regular extension. 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/joomla/introduction. You can handle this web builder.

2. DJ-Accessibility:

Adds tools to help people with disabilities navigate and operate the site

Download the latest version of the integrator from https://dj-extensions.com/my-account/downloads/dj-accessibility and install it as a regular extension

Go to plugins and activate it. Then go to the modules and activate the DJ-Accessibility module. Set it on toolbar-left position and make it active for all pages of your website.

3. DJ-Audiolist:

Install the DJ-Audiolist plugin downloaded from https://dj-extensions.com/my-account/downloads/DJ-AudioList-Joomla and activate it.

4. DJ-Popup:

Install the DJ-Popup plugin downloaded from https://dj-extensions.com/my-account/downloads/DJ-AudioList-Joomla and activate it.

5. DJ-ContentFilters:

Install the DJ-ContentFilters plugin downloaded from https://dj-extensions.com/my-account/downloads/DJ-ContentFilters and activate it.

Step #4 Yootheme Builder Configuration

1. Images:

If you like pictures from our quickstart, extract the images.zip archive and copy everything via FTP to the images directory on your Joomla installation

2. Child Theme:

Unpack the 'yootheme_djex.zip' file and transfer the whole folder via FTP to the 'templates' folder in your Joomla! Installation. You can change the _djext in the directory name to your own. You can learn more about child themes from the Yootheme documentation https://yootheme.com/support/yootheme-pro/joomla/developers-child-themes

3. Default template:

Set Yootheme as your default template.

Go to the System tab and select Site Template Styles from the Templates section

Then set Yootheme as the default template

4. Basic builder configuration

In your admin menu, select Yootheme

5. Base style

Set the "Fuse" theme as the base style. To do this, go to the "Styles" tab and select the "Fuse" theme

6. 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-preschool-settings.json from the disk on your computer

After loading the settings, save them. Builder now needs to refresh its cache, close it and reopen it.

7. Child Theme:

Go to "Settings" / "Advanced" and select the child theme. Save the settings

8. Set up the menu:

Close the web builder. Make sure your default start menu leads to a single article. If not, change it to SIngle Article and attach an article (create it if necessary)

Then go to a builder, go to the "Menus" tab and set your menu to Navbar and save it.

Do the same for the "Mobile Dialog Position" item. Use the mobile preview to make sure everything is ok. If so, save it.

9. Loading layouts:

Go to Yootheme Pages. Then to Builder

Go back to the Yootheme Pages. Then main menu and select the "Builder" tab. Then click the "Library" button

On the "Library" select the "My layout" tab and click the "Upload Layout" button

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

10. Set up pages:

Try to set up your home page now. Select a home from the menu and then go to the library in the builder. Now select the appropriate layout - "DJ-Preschool Home" and click.

Now you have a start page, just like in our demo.

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 and DJ-Catalog2 Integrator documentation will be helpful in this.

Let's try to add the "Songs" subpage

Go to menu. Then Main menu and add a new menu item

Then add a new menu item and name it "Songs". Select articles/single article as the menu item type

From this position you can immediately create an article and associate it with a menu item

So create it and save it

Now save your menu item and close dialog window

This way you have added an item to the main menu without leaving the webbuilder. Now click on this item.
Go back to pages/builder and click the library button

Select the "songs" page from your library

Advice

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