How to Create a Gold Chain Pattern Brush With Illustrator

How to Create a Gold Chain Pattern Brush With Illustrator

1,200+ courses and ebooks

Design, code, video editing, business, and much more.

  • Adobe Photoshop, Illustrator and InDesign
  • Graphic, Logo and Print Design
  • Sketch, Adobe XD & Figma
  • WordPress
  • Javascript, PHP & Python
  • Adobe After Effects & Premiere Pro
  • Much More

Millions of creative assets

Design templates, stock videos, photos & audio, and much more.

  • Graphic Templates
  • Stock Photos
  • Music Tracks
  • Video Templates
  • Web Templates
  • Design Assets
  • WordPress Themes & Plugins
  • Much More

How to Create a Vertical Sticky Timeline Layout in Divi

How to Create a Vertical Sticky Timeline Layout in Divi

Creating a vertical sticky timeline can be extremely useful for categorizing content by year and/or month as the user scrolls down the page. The sticky date elements remain fixed beside the content for a convenient UX boost that users will appreciate.

In this tutorial, we are going to show you how to create a complete vertical sticky timeline layout in Divi. The keys to this design are (1) to give your columns a custom width so that the date elements don’t take up too much horizontal space on mobile and (2) to make the year and month sticky, with sticky limits on the section (for the year) and row (for the month).

Although this layout has multi-faceted applications, we are going to build a timeline layout for showcasing photo galleries categorized by month and year.

Let’s get started!

Sneak Peek

Here is a quick look at the design we’ll build in this tutorial.

Download the Layout for FREE

To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

To import the section layout to your Divi Library, navigate to the Divi Library.

Click the Import button.

In the portability popup, select the import tab and choose the download file from your computer.

Then click the import button.

Once done, the section layout will be available in the Divi Builder.

Let’s get to the tutorial, shall we?

What You Need to Get Started

expanding corner tabs

To get started, you will need to do the following:

  1. If you haven’t yet, install and activate the Divi Theme.
  2. Create a new page in WordPress and use the Divi Builder to edit the page on the front end (visual builder).
  3. Choose the option “Build From Scratch”.

After that, you will have a blank canvas to start designing in Divi.

Part 1: Building the Stick Heading

The first element we are going to design is the sticky heading that will remain fixed at the top of the page on scroll.

Add Row

To get started, add a two-fifths three-fifths column layout to the section.

divi vertical sticky timeline

Left Heading Text

In the left column, we are going to add the heading for the timeline that will be on the left side of the page. To do this, add a text module to the left column.

divi vertical sticky timeline

Then add the text “Timeline” to the body of the text module.

divi vertical sticky timeline

Under the design tab, update the following text styles:

  • Text Font: Oxygen
  • Text Font Weight: Bold
  • Text Font Style: TT
  • Text Text Color: #666666
  • Text Size: 50px (desktop), 30px (tablet), 18px (phone)
  • Text Line Height: 1em
  • Text Alignement: right

divi vertical sticky timeline

Then update the padding as well:

divi vertical sticky timeline

Right Heading Text

To create the heading for the gallery content on the right side of the page, copy the text module in the left column and paste it into the right column.

divi vertical sticky timeline

Then open the duplicate text module settings and update the following:

  • Text Text Color: #c22969
  • Text Alignment: Left (desktop), Left (tablet)

divi vertical sticky timeline

Row Settings

To give us the room we need on mobile, we need to update the row settings as follows:

  • Gutter Width: 1
  • Width: 100%
  • Max Width: 1280px
  • Padding: 10px top, 10px bottom

divi vertical sticky timeline

Under the advanced tab, add the following custom CSS to the Main Element on tablet:

display:flex;
flex-wrap:nowrap;

divi vertical sticky timeline

Left Column Settings

Because we are using a row gutter width of 1, there is no spacing between columns. To add sufficient spacing, open the settings for column 1 and update the padding as follows:

  • Padding (desktop): 10px top, 10px bottom, 20px left, 20px right
  • Padding (tablet): 10px bottom, 10px left, 10px right

divi vertical sticky timeline

Next, we want to override the default left column width on tablet and phone so that it is 30% of the row’s width. This will match the column width we are going to add to the columns in the timeline below.

To do this, open the settings for the left column (column1) and add the following CSS to the Main Element on Tablet:

width: 30% !important;

divi vertical sticky timeline

For the right column, we want to add the same padding as we did in column 1. And we will add a left border to the column to serve as a divider as follows:

  • Padding (desktop): 10px top, 10px bottom, 20px left, 20px right
  • Padding (tablet): 10px bottom, 10px left, 10px right
  • Left Border Width: 2px
  • Left Border Color: #333333

divi vertical sticky timeline

We also want the width of the right column to be 70% of the row’s width. To update the column width, open the settings of column 2 and add the following CSS to the Main Element on tablet:

width: 70% !important;

divi vertical sticky timeline

Section Settings

To finish off the heading design, open the section settings, and update the background color:

  • Background Color: #222222

divi vertical sticky timeline

Then update the section padding:

  • Padding: 0px top, 0px bottom

divi vertical sticky timeline

To make the section sticky, go the Advanced tab and update the following:

  • Sticky Position: Stick to Top

divi vertical sticky timeline

Part 2: Creating the Sticky Timeline

This next part of the design is where we create the sticky timeline portion of the layout. The key here is to design the first section, row, and modules with all of the elements in place. Then we can duplicate each section or row as needed.

Add Section

To start, add a new regular section under the heading section we just finished.

divi vertical sticky timeline

Before we start adding our rows and content, open the section settings and update the following:

  • Padding: 0px top, 0px bottom

divi vertical sticky timeline

Add the Row, Row Styles, and Column Structure

Next, create a one-fifth one-fifth three-fifths column row to the section.

divi vertical sticky timeline

To jumpstart the design of the row, copy the styles of the row in the heading section above and paste it into the new row.

divi vertical sticky timeline

Then open the settings of the new row and update the following:

  • Padding: 50px top, 50px bottom

divi vertical sticky timeline

Then add the custom CSS to the Main Element on tablet as follows:

display:flex;
flex-wrap:nowrap;

divi vertical sticky timeline

Creating the Sticky Year

The first sticky date element for the timeline will be the year. This “year” text element will stick to the top of the section on scroll.

To create the year text element, add a new text module to column 1.

divi vertical sticky timeline

Then add the text “2020” to the body.

divi vertical sticky timeline

Under the design tab, update the text styles as follows:

  • Text Font: Oxygen
  • Text Font Weight: Bold
  • Text Text Size: 40px (desktop), 24px (tablet), 18px (phone)
  • Text Alignment: right

divi vertical sticky timeline

To make the year stick to the top of the section, update the following:

  • Sticky Position: Stick to Top
  • Sticky Top Offset: 50px
  • Bottom Sticky Limit: Section

divi vertical sticky timeline

Creating the Sticky Month

To create the sticky month text, copy the text module containing the sticky year and paste it into column 2.

divi vertical sticky timeline

Then open the settings for the new text module in column 2 and update the text body with “dec” (the month abbreviation).

divi vertical sticky timeline

The month text needs to stick to the top of the row instead of the section, so update the sticky limit as follows:

divi vertical sticky timeline

Adding the Gallery Content

In the far right column (column 3), we are going to add the content that correlates to the specific month/year. In this case, we are going to add a gallery module to display a gallery of images.

To create the gallery, add a gallery module in column 3.

divi vertical sticky timeline

Then add at least 6 images to the gallery (or however many you want) and update the following:

  • Image Count: 6
  • Show Title and Caption: NO
  • How Pagination: NO

divi vertical sticky timeline

Under the design tab, update the following:

  • Padding: 3% left, 3% right

divi vertical sticky timeline

To create some custom spacing between the gallery items, add the following custom CSS to the Gallery Item CSS:

padding: 0 1% 2% 1%;

divi vertical sticky timeline

Update Column Widths and Spacing

Like we did for the columns in the heading section, we are going to give our columns custom spacing and widths (one mobile) so that they line up with the headings and look good on tablet and phone.

Column 1

Open the settings for column 1 and update the following:

  • Padding: 1% left, 2% right

divi vertical sticky timeline

Under the advanced tab, add the following custom CSS to the Main Element on tablet:

width: 15% !important;

divi vertical sticky timeline

Then open the settings for column 2 and add the same padding and CSS as follows:

  • Padding: 1% left, 2% right

Main Element CSS (tablet):

width: 15% !important;

divi vertical sticky timeline

Then open the settings for column 3 and update the padding and Main Element CSS as follows:

  • Padding: 1% left, 2% right

Main Element CSS (tablet):

width: 70% !important;

divi vertical sticky timeline

Duplicate the Row for Additional Months

Once the first row is complete, we can duplicate the row for additional months.

Duplicate the row.

divi vertical sticky timeline

In the duplicate row, take out the text for the year. We only need one year per section since the year will stick to the top and bottom of the section.

divi vertical sticky timeline

Then open the text for the month and update the month abbreviation with a new month.

divi vertical sticky timeline

Duplicate the Section for Additional Years

In the same way we duplicated the row for additional months, we can duplicate the entire section for additional years.

Go ahead and duplicate the section we just created for 2020 content.

divi vertical sticky timeline

In the duplicate section, update the year text in row 1, column 1 with the year “2019”.

divi vertical sticky timeline

You can continue this process to build addition years and months as needed for your timeline layout.

Final Result

Check out the final result.

Final Thoughts

The brunt of the design work for this timeline layout is to make it responsive by giving the text sizes and column width mobile-specific styles. But, the sticky positioning of the date elements is extremely easy with Divi’s built-in options. Hopefully, this will come in handy for future projects. I can see this being helpful for showcasing a history timeline for an about page or even for a resources page, downloads page, or product updates.

I look forward to hearing from you in the comments.

Cheers!

How to Create Custom Taxonomies in WordPress

How to create custom taxonomies in WordPress

Do you want to create custom taxonomies in WordPress?

By default, WordPress allows you to organize your content with categories and tags. But with custom taxonomies, you can further customize the way you sort your content.

In this article, we’ll show you how to easily create custom taxonomies in WordPress with or without using a plugin.

While creating custom taxonomies is powerful, there’s a lot to cover. To help you set this up properly, we have created an easy table of content below:

  • What is a WordPress Taxonomy?
  • How to Create Custom Taxonomies in WordPress
  • Creating Custom Taxonomies With A Plugin (The Easy Way)
  • Creating Custom Taxonomies Manually (with code)
  • Displaying Custom Taxonomies
  • Adding Taxonomies For Custom Posts
  • Adding Custom Taxonomies to Navigation Menu
  • Take WordPress Taxonomies Further

What is a WordPress Taxonomy?

A WordPress taxonomy is a way to organize groups of posts and custom post types. The word taxonomy comes from the biological classification method called Linnaean taxonomy.

By default, WordPress comes with two taxonomies called categories and tags. You can use them to organize your blog posts.

However, if you are using a custom post type, then categories and tags may not look suitable for all content types.

For instance, you can create a custom post type called ‘Books’ and sort it using a custom taxonomy called ‘topics’.

You can add topic terms like Adventure, Romance, Horror, and other book topics you want. This would allow you, and your readers to easily sort books by each topic.

Taxonomies can also be hierarchical, meaning that you can have main topics like Fiction and Nonfiction. Then you’d have subtopics under each category.

For example, Fiction would have Adventure, Romance, and Horror as sub-topics.

Now that you know what a custom taxonomy is, let’s learn how to create custom taxonomies in WordPress.

How to Create Custom Taxonomies in WordPress

We will use two methods to create custom taxonomies. First, we’ll use a plugin to create custom taxonomies.

For the second method, we’ll show you the code method, and how to use it to create your custom taxonomies without using a plugin.

Create Custom Taxonomies In WordPress (Video Tutorial)

If you prefer written instructions, then continue reading.

Creating Custom Taxonomies With A Plugin (The Easy Way)

First thing you need to do is install and activate the Custom Post Type UI plugin. For details, see our guide on how to install a WordPress plugin.

In this tutorial, we’ve already created a custom post type and called it ‘Books.’ So make sure you have a custom post type created before you begin creating your taxonomies.

Next, go to CPT UI » Add/Edit Taxonomies menu item in the WordPress admin area to create your first taxonomy.

Creatig custom taxonomy using plugin

On this screen, you will need to do the following:

  • Create your taxonomy slug (this will go in your URL)
  • Create the plural label
  • Create the singular label
  • Auto-populate labels

Your first step is to create a slug for the taxonomy. This slug is used in the URL and in WordPress search queries.

This can only contain letters and numbers, and it will automatically be converted to lowercase letters.

Next, you will fill in the plural and singular names for your custom taxonomy.

From there, you have the option to click on the link ‘Populate additional labels based on chosen labels’. If you do this, then the plugin will auto-fill in the rest of the label fields for you.

Now, scroll down to the ‘Additional Labels’ section. In this area, you can provide a description of your post type.

Labeling your WordPress taxonomy

These labels are used in your WordPress dashboard when you’re editing and managing content for that particular custom taxonomy.

Next up, we have the settings option. In this area, you can set up different attributes for each taxonomy you create. Each option has a description detailing what it does.

Create custom taxonomy hierarchy

In the screenshot above, you’ll see we chose to make this taxonomy hierarchical. This means our taxonomy ‘Subjects’ can have sub-topics. For instance, a subject called Fiction can have sub-topics like Fantasy, Thriller, Mystery, and more.

There are many other settings further down your screen in your WordPress dashboard, but you can leave them as-is for this tutorial.

You can now click on the ‘Add Taxonomy’ button at the bottom to save your custom taxonomy.

After that, go ahead and edit the post type associated with this taxonomy in the WordPress content editor to start using it.

Using taxonomy in post editor

Creating Custom Taxonomies Manually (with code)

This method requires you to add code to your WordPress website. If you have not done it before, then we recommend reading our guide on how to easily add code snippets in WordPress.

1. Creating a Hierarchical Taxonomy

Let’s start with a hierarchical taxonomy that works like categories and can have parent and child terms.

Add the following code in your theme’s functions.php file or in a site-specific plugin (recommended) to create a hierarchical custom taxonomy like categories:

//hook into the init action and call create_book_taxonomies when it fires

add_action( 'init', 'create_subjects_hierarchical_taxonomy', 0 );

//create a custom taxonomy name it subjects for your posts

function create_subjects_hierarchical_taxonomy() {

// Add new taxonomy, make it hierarchical like categories
//first do the translations part for GUI

  $labels = array(
    'name' => _x( 'Subjects', 'taxonomy general name' ),
    'singular_name' => _x( 'Subject', 'taxonomy singular name' ),
    'search_items' =>  __( 'Search Subjects' ),
    'all_items' => __( 'All Subjects' ),
    'parent_item' => __( 'Parent Subject' ),
    'parent_item_colon' => __( 'Parent Subject:' ),
    'edit_item' => __( 'Edit Subject' ), 
    'update_item' => __( 'Update Subject' ),
    'add_new_item' => __( 'Add New Subject' ),
    'new_item_name' => __( 'New Subject Name' ),
    'menu_name' => __( 'Subjects' ),
  ); 	

// Now register the taxonomy
  register_taxonomy('subjects',array('books'), array(
    'hierarchical' => true,
    'labels' => $labels,
    'show_ui' => true,
    'show_in_rest' => true,
    'show_admin_column' => true,
    'query_var' => true,
    'rewrite' => array( 'slug' => 'subject' ),
  ));

}

Don’t forget to replace the taxonomy name and labels with your own taxonomy labels. You will also notice that this taxonomy is associated with the Books post type, you’ll need to change that to whatever post type you want to use it with.

2. Creating a Non-hierarchical Taxonomy

To create a non-hierarchical custom taxonomy like Tags, add this code in your theme’s functions.php or in a site-specific plugin:

//hook into the init action and call create_topics_nonhierarchical_taxonomy when it fires

add_action( 'init', 'create_topics_nonhierarchical_taxonomy', 0 );

function create_topics_nonhierarchical_taxonomy() {

// Labels part for the GUI

  $labels = array(
    'name' => _x( 'Topics', 'taxonomy general name' ),
    'singular_name' => _x( 'Topic', 'taxonomy singular name' ),
    'search_items' =>  __( 'Search Topics' ),
    'popular_items' => __( 'Popular Topics' ),
    'all_items' => __( 'All Topics' ),
    'parent_item' => null,
    'parent_item_colon' => null,
    'edit_item' => __( 'Edit Topic' ), 
    'update_item' => __( 'Update Topic' ),
    'add_new_item' => __( 'Add New Topic' ),
    'new_item_name' => __( 'New Topic Name' ),
    'separate_items_with_commas' => __( 'Separate topics with commas' ),
    'add_or_remove_items' => __( 'Add or remove topics' ),
    'choose_from_most_used' => __( 'Choose from the most used topics' ),
    'menu_name' => __( 'Topics' ),
  ); 

// Now register the non-hierarchical taxonomy like tag

  register_taxonomy('topics','books',array(
    'hierarchical' => false,
    'labels' => $labels,
    'show_ui' => true,
    'show_in_rest' => true,
    'show_admin_column' => true,
    'update_count_callback' => '_update_post_term_count',
    'query_var' => true,
    'rewrite' => array( 'slug' => 'topic' ),
  ));
}

Notice the difference between the 2 codes. Value for hierarchical argument is true for category-like taxonomy and false for tags-like taxonomies.

Also, in the labels array for non-hierarchical tags-like taxonomy, we have added null for parent_item and parent_item_colon arguments which means that nothing will be shown in the UI to create parent item.

Taxonomies in post editor

Displaying Custom Taxonomies

Now that we have created custom taxonomies and have added a few terms, your WordPress theme will still not display them.

In order to display them, you’ll need to add some code to your WordPress theme or child theme.

This code will need to be added in templates files where you want to display the terms.

Usually, it is single.php, content.php, or one of the files inside the template-parts folder in your WordPress theme. To figure out which file you need to edit, see our guide to WordPress template hierarchy for details.

You will need to add the following code where you want to display the terms.

<?php the_terms( $post->ID, 'topics', 'Topics: ', ', ', ' ' ); ?>

You can add it in other files as well such as archive.php, index.php, and anywhere else you want to display the taxonomy.

Custom Taxonomy Displayed

By default your custom taxonomies use the archive.php template to display posts. However, you can create a custom archive display for them by creating taxonomy-{taxonomy-slug}.php.

Adding Taxonomies For Custom Posts

Now that you know how to create custom taxonomies, let’s put them to use with an example.

We’re going to create a taxonomy and call it Non-fiction.

Since we have a custom post type named ‘Books,’ it’s similar to how you’d create a regular blog post.

In your WordPress dashboard, go to Books » Subjects to add a term or subject.

Adding a term for your newly created custom taxonomy

On this screen, you’ll see 4 areas:

  • Name
  • Slug
  • Parent
  • Description

In the name, you’ll write out the term you want to add. You can skip the slug part and provide a description for this particular term (optional).

Lastly, click the ‘Add New Subject’ button to create your new taxonomy.

Your newly added term will now appear in the right column.

Term added

Now you have a new term that you can use in your blog posts.

You can also add terms directly while editing or writing content under that particular post type.

Simply go to the Books » Add new page to create a post. On the post edit screen, you’ll find the option to select or create new terms from the right column.

Adding new terms or select from existing terms

After adding terms, you can go ahead and publish that content.

All your posts filed under that term will be accessible on your website on their own URL. For instance, posts filed under Fiction subject would appear at the following URL:

https://example.com/subject/fiction/

Taxonomy template preview

Now that you have created custom taxonomies, you may want to display in your website’s navigation menu.

Go to Appearance » Menus and select the terms you want to add under your custom taxonomy tab.

Adding terms to navigation menu

Don’t forget to click on the Save Menu button to save your settings.

You can now visit your website to see your menu in action.

Adding custom taxonomy in navigation menu

For more detailed, see our step by step guide on how to create a dropdown menu in WordPress.

Take WordPress Taxonomies Further

There are a ton of things you can do with custom taxonomies. For instance, you can show them in a sidebar widget or add image icons for each term.

You can also add enable RSS feed for custom taxonomies in WordPress and allow users to subscribe individual terms.

If you want to customize the layout of your custom taxonomy pages, then you can check out Beaver Themer or Divi. They’re both drag and drop WordPress page builder that allows you to create custom layouts without any coding.

We hope this article helped you learn how to create custom taxonomies in WordPress. You may also want to see our guide on how WordPress works behind the scenes, and how to create a custom WordPress theme without writing any code.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create Custom Taxonomies in WordPress appeared first on WPBeginner.

Create a Learning Management System for WordPress with (LMS) Plugins

The first question that an expert creating an online course LMS asks himself is where to conduct it. Social Networking Groups? Perhaps, but terribly inconvenient, because you get lost in the stream of posts and notifications. Votsap’s chat? Well, that. Suitable to feel online teaching. But not ideal for severe long-term work. Today we are considering platforms for creating online courses: free and paid. Let’s talk about the pros, cons, tariffs, and features of testing each of the services.

Free platforms for creating online courses

If you think it’s impossible to create an online course for free, then this is not so. In addition to the apparent options with closed groups and accounts in social networks, we found several free or shareware sites. What do shareware platforms for creating online courses mean? So, the free tariff has limitations. Most often in terms of functionality or the number of participants.

So, let’s start with the free ones.

Google Class

Google Class is a free service for online learning. It was initially designed for schools, so teachers and students share files and information online in a paperless way.

Creating and distributing tasks based on Google Class is easy. You can create documents, presentations, and spreadsheets, Google Mail for communication, and Calendar – for planning. The mobile application of the service helps users take photos and attach them to tasks. You can share files from other applications, comment on lessons, and complete homework.

2. LearnPress

LearnPress is a free plugin for online courses, which is a comprehensive plugin for WordPress Learning Management System (LMS). Several free add-ons are available to extend the functionality, as well as some premium add-ons (starting at $ 19.99).

3. Zippy Courses

As a course creator, you need both. And until now, you had to piece it together yourself. But Zippy gives you the best of both worlds. It’s one piece of software, optimized for creating, selling, and running your online course.

4. LearnDash

LearnDash is a feature-rich, premium LMS (from $ 199 for a single site) that has industry-standard LMS integrations such as the Tin Can API. If you need true LMS integration, this is an obvious choice.

5. LifterLMS

LifterLMS is a new addition to the online course. This is a free plugin, but the premium version ($ 99 per year) offers additional support, graphics, and premium themes. Premium extensions add powerful functionality to the site courses.

6. Tutor LMS

Tutor LMS – a new plugin in the LMS market. It has a free version, but the premium version ($ 149 per license for one site) offers features such as an external interface builder, advanced course builder, and email notifications.