Menu items are essential in any Joomla installation. Individually they represent a link to a page such as contact, home, about us, blog, etc.

Is highly recommended to understand more deeper its importance in order to have more control over the modules and the urls mainly, but is not limited to only that.

Continue reading this post to see what it's this about.

What is a menu item?

A menu item is a link to a component; represent a page in your website. Being more general, the menu items allow us to create and manage the site structure and the urls.

The most important features are title, alias and type.

joomla menu items

Menu title. Is the visible name.

A few examples:

  • About Us
  • Blog
  • Contact

 

Alias. Is the string that works as path in the url; doesn’t include spaces.

A few examples:

  • www.mysite.any/about-us
  • www.mysite.any/blog
  • www.mysite.any/contact

 

Menu item type. Choose a component view in this pattern: Component > View

A few examples:

  • Articles > Single article
  • Articles > Category blog
  • Contacts > Single contact

 

How many menu items can I have?

There is no limit in the number of menu items you can create. Actually you can split all your menu items in different menus from Menu > Menu manager for organizational purposes.

By default, any new Joomla installation include a Main menu that would become the visible menu for your visitors. You can add more menus to handle more menu items "invisble", providing a comfortable url management based on the alias.


Why should I care about menu items?

I can think in three big reasons:

1. Modules

Modules can be linked to menu items. In a practical situation when you want to display a block of content only in specifics pages, the only way to make it happen is by assigning to specific pages, which are represented by menu items.

joomla menu items modules

2. Access

Create pages that will be available for specific users groups after the login. Very useful for sites that sell memberships or access to paid contents.

3. Short urls

Let’s think in an article that contains our “About us” information.

By default the link would look like:

  • www.mysite.any/99-uncategorized/99-about-us - where 99 means the category and article ids

Having a menu item we can get a short and friendly url:

  • www.mysite.any/about-us

This same behavior apply to other components in general.

There are more advantages about using menu items. I shared the ones I personally consider important for general purposes.
 

Inherited menu items

A Menu item type Articles > Category blog generate the following result:

  • www.mysite.any/blog - where "blog" is the alias

Automatically the articles from that category will inherit the parent alias in the url:

  • www.mysite.any/blog/id-article-alias


Conclusion

The more content we have associated to menu items, the more control we have in a website.


Read more about menu items in Joomla docs.

 

Author

Valentín García image image

Read more

Joomla is charged with many options to make your website flexible and powerful. Those features are ready to cover specific needs, integrate new capabilities and make the content much easier to manage.

In this post I will share with you some tips that are worth taking the time to learn.

Speed up your website

joomla speed up

Improving the speed is part of the list of basic requirements from any developer. We are talking about the time a website can take to load.

This result depends on many factors, such as number of images, CSS files, javascript files, and other files that a site loads for every page.

Try the following tip to enable cache and page compression:

Go to System > Global configuration > System > Cache: ON (start with Conservative caching then try Progressive)

System > Global configuration > Server > Gzip Page Compression: yes

Save and close

The improvement is not specific for all the sites; but is possible to make your site load 50% faster.

 

Protostar with full page width layout

joomla protostar full width

By default, the protostar template comes with a boxed layout. To use the full width version, go to:

Extensions > Template manager > Protostar - default > Advanced > Fluid Layout: fluid

Save and close

 

Header tag for module titles

joomla module title

To change the tag that wraps the module title:

Extensions > Module manager > Your module > Advanced > Header tag. Choose: h1, h2, h2, h4, h5, h6, p or div.

Save and close

Note: this feature may work or not depending on the template you are using.

 

Save javascript in Custom HTML modules

Do you want to include javascript or iframe tags without getting stripped out after saving? Try this:

System > Global configuration > Default Editor: CodeMirror or None

Save and close

Then edit your module from Extensions > Module manager > Your custom HTML module.

 

Language overrides

If you need to customize the text from buttons or labels, look to the language manager:

Extensions > Language manager > Overrides > New

  • In the search form type the text you want to translate, for example: “Read more”
  • Click in the search button
  • Locate the string you want to customize from the results
  • In the left side of the screen edit the Text field
  • Save and close

joomla language overrides

 

Versions: Ctrl + Z for articles

joomla versions

Joomla 3 allows to switch back to a previous version of an article.

Content > Article manager > Your article > Versions (button on top)

  • Check one of the available versions
  • Click restore
  • Save and close

 

Enable menu editing in frontend

joomla menu item edit frontend

Edit your menu items starting from the public site:

System > Global configuration > Mouse-over Edit Icons for: modules & menus

Save and close

  • Login in your frontend with a super user account.
  • Place the cursor over the menu item, for example: “Home”.
  • Click on the pencil icon to be redirected to the edit page in backend.

 

Voting for articles

joomla article voting

Your articles can receive ratings. To enable that functionality go to:

Content > Article manager > Options > Show voting: show

 

Author

Valentín García image image

Read more

Create a website can be fun and easy when you are using the right tools. If your goal is build a very basic website and take your first steps into Joomla, this tutorial is for you.

Continue reading to learn how to create a website in 3 steps.

 

Recommendations

For this tutorial is recommend to have a hosting plan with a domain name.
For example: yourdomain.com

However if you don’t have a hosting plan, use LAMP software to host the website in your computer. In this scenario the installation process would be different. For more details read:


Step 1. Install Joomla

Let’s install Joomla. Go to yourdomain.com/cpanel and login.

cpanel

Be aware not all the hosting plans include CPanel, if that is your case ask to your hosting provider for assistance or try the regular installation process.

Back to CPanel, find the auto installer for Joomla; the location of this option may depends on your hosting provider and the CPanel version.

installer

Fill all the information required such as database, site settings, language details and admin account. Pay special attention to admin account details, which consist in the username and password to login once Joomla is installed.

Find a reference for "Import sample data" if exist, as we don’t need the demo content set this option to none.

When you’re done click in "Install" button and wait for a successful message. If everything is fine, you will have a working Joomla site after a minute.


Step 2. Create the content

Go to yourdomain.com to see an empty website that needs to be feed with information.

empty

Login in the backend to make it happen from yourdomain.com/administrator

login

In this point you already know what content must be added. We will create articles that would become in pages later.

Go to Content > Article manager > Add new article

article steps

I created the "About us" article by typing the title and the content.

article

Optional: you can add images from Images & Links > Intro Image / Full article image

images

Click "Save & close" button when you’re done. Repeat the same process for every article you need.
 
In my list I have 5 articles, including "Welcome" that will be displayed in homepage by doing click in the star icon as the next screenshot displays:

home


Step 3. Create the menu

We have articles, we need menu items to link to them.

Go to Menus > Main menu > Add new menu item

menu steps

I created the "About us" menu item linked to the article with the same name.

  • Choose the Menu item type: Articles > Single article
  • Choose the article named "About Us"

menuitem

Click "Save & close" button when you’re done. Repeat the same process for every menu item you need.

Be aware the only exception is your home page (i. e. "welcome" article), you already have a menu item for that page.

In my list I have 5 menu items for my menu.

mainmenu

The last part is visit your public website to see the end result: the articles are loaded in the left, the menu in the right.

final

 

Author

Valentín García image image

Read more

There is a big misunderstanding about what really is web design. We may think is how cute or colorful a site can be, how many cool pictures can display, and even worst: how much content can a single page allow. I must confess I used to be one of those people who thought that was the point of design; imagine a lot of media elements and text everywhere. No control, just a site crowded of anything.

Web design is also about User Experience (UX).

The focus of Web Design should be how useful a website is. If the user enjoy, if the text is easy to read and the colors are polite with the eye. That is UX: how positive is the interaction of users with an specific website.

In the next paragraphs I list 5 terms that are relevant to the topic, be aware even when this post is about design I plan to show you ugly screenshots in cases when one of the design features are missing. In that way I can explain visually its importance.

But first take a look to how looks the design of Protostar, a great and easy to use core template:

1

This design cover very well the following aspects of design. Let's remove one by one some design aspects for experimental purposes.

 

Spacing

A website contain several pages, those pages contain images, video, text, etc. In order to keep every of these pieces in place, spacing takes special importance to define where a paragraph, a module, an image ends and where the next block of information start.

Let’s remove spacing to see how badly design may looks:

1

As you can see the spacing between modules, text and the main container is gone. All the paragraphs gives the impression there is only one set of text.

 

Font

Reading is what makes internet the “information highway”. When you visit a site, how hard or easy is to read the content? Imagine if the designer decided for a font not comfortable to read:

1

In this example, we show a wrong font choice for all the content; we use a Google Font that looks cute but is hard to read.

 

Color

Contrast is the key, use in text an opposite color to the background. Black and white are the popular combination but is not the only one.

What happens if we don’t care about the colors and just add random choices? See the next example to answer that question:

1

The contrast between gray text and a lighter gray background is not enough for a pleasant reading experience.

 

Responsive

In order to visit a website from a smartphone or a tablet to access the same content available from desktop, responsive is mandatory.

In the old days (in many cases still now) the developer used to create at least two websites: one for the people who visit from desktop screens, and another for mobile. This means 2 separate installations to maintain, which means double work.

Try visiting a non responsive website from your smartphone. The content will be so small that a big zoom would be required; a poor UX I may say.

 

CSS

CSS is the technology for design that makes possible the previous 4 terms, I share some  example properties from each one:

  • Spacing: margin and padding.
  • Font: font-family and font-size.
  • Color: background and color.
  • Responsive: media queries.


Conclusion

We may think design is done automatically and certainly the modern browsers take care of some default aspects, however there is a lot of work to cover the basics. A bit of makeup is needed to make it happen.

 

Author

Valentín García image image

Read more

Open source is a development model about share and innovate. Joomla is based on that philosophy; that’s one of the reasons of its success.

In this post you will discover 6 reasons that answer why Joomla is the best software to build websites.

 

#1. Joomla is free

The 3 most popular CMS are free. This is the only reason on the list that is not exclusive to this software.


#2. Joomla already include the common features

Once you install Joomla, your website will be ready to support SEO, contact forms, RSS, blog, media, multi language, etc.

Experienced users may need 1 minute to do the installation and 45 minutes to publish the content. That means a ready working website in less than 1 hour.

Which other platform makes possible that performance for free?


#3. Joomla Extensions Directory

Do you want to build a big website with features that are not included in the default installation?

Do a quick search in the Joomla Extensions Directory (aka JED) to find the right piece of software to match your needs.

  • Want to build an ecommerce site? - Got it!
  • A membership site? - Got it!
  • A gallery site? - Got it!
  • A directory site? - Got it!
  • Do you need an extension to do backups? - Got it!
  • An extension to increase security? - Got it!
  • An extension that does nothing? - Got it! wait.. what??

Those are a few examples that proves the JED will support you when the core is not enough.


#4. Joomla is supported by volunteers

The Open Source Matters; is an honest effort to create software to share with the world.

The code is build and maintained by people who voluntarily donate their time, skills and knowledge. The passion volunteers print by contributing with code, design, support, blogging, training, marketing is very positive!

The power of a community is based on the people who support it.


#5. Joomla is international

You can build websites not only in english, you can do so in Chinese, Portuguese, Spanish, Hebrew, Catalan, French, etc. The list of available languages is huge; there is no better alternative [period]


#6. Joomla is well coded

The framework behind is well organised to keep every layer in place by implementing the Model View Controller standard (MVC), having that level of separation is important when you need to create your own extensions or customize the design.

As example:

modify the code for the view by doing template overrides without touching the logic. That means flexibility in a safe way.

About extensions, which basically are addons to extend the functionality. You have access to 3 types:

  • Components. Create and manage the main content of a page.
  • Modules. Create and manage blocks of content around the component.
  • Plugins. Add extra features to components and modules.


Conclusion

Socially and technically this is the best software to build the future of the web.

 

Author

Valentín García image image

Read more

© 2019 Extly, CB - All rights reserved.