Quick feature showcase 1 (Non-narrated)
- Changing the content of individual cells
- Changing the content of multiple cells together
- Making basic styling changes (background color)
- Selecting cells of even and odd rows for separate styling
- Selecting a single cell for individual styling
- Keyboard navigation between cells
Quick essentials tutorial
Hey guys, WordPressaHolic here, welcome to the Accordion Tables Quick Essentials Tutorial.
In the left hand menu of your admin dashboard hover over the Accordion Tables label, and click on the ‘Add New’ option that appears.
This will lead you to a page with your new table. Give it a title, choose a preset, and let’s go about adjusting your table’s color theme.
In the Color Theme panel click the extract color theme button and adjust the colors in the color pickers that appear to preview them live.
Now let’s change the content of your cells. Hovering over your table cells brings up little blue dots close to their base. Hovering over these brings up a set of keys. Click the settings key, the one with the cog icon. This brings up the WPH Editor which will help you customize your selected cell.
In the settings menu at the top of the editor, click on ‘Content’. Next, select a component to edit from the ‘Components’ menu. Now you can edit the content of that component.
Repeat this process with all the other cells until you’re done editing your table. You can use keyboard navigation to significantly speed up the data entry process . Pressing the tab key cycles through the components while pressing control/command + alt + direction key lets you switch the editor’s focus to a neighboring cell.
Once you’re done, copy the table’s shortcode from the top of the preview window and publish it on a page or post to make the table appear on the viewer facing side of your website.
As long as you’re logged into your site, you can also make edits in a similar way on the front end as well.
And that wraps up this video. This plugin has much much more to offer, however like the video’s title says, it’s meant to cover just the essentials. For more comprehensive instructions check out the other tutorial series for Accordion Tables. Thanks for watching.
Getting started with the WPH Editor
To open the editor, click on the settings cog of any cell. You’re now editing that particular cell and you’ll find its blue key is lit up. Click the cog icon again and the editor disappears since it has no cells to edit.
If you want to select a group of specific cells for editing, you can do so via their tick icons. The editor now applies it’s changes to all cells in your selection. Empty your selection by clicking the settings icon of any cell in the selection.
Targeting Rows and Columns
The targeting system is convenient for selecting cells in patterns. For example, let’s select the first row of regular cells. For the columns option, select ‘All’, for the cells option, choose ‘First’, and for cell type, choose ‘Regular’. The first row is now selected and ready for editing. In a similar manner, we can easily select all the even or odd rows of a table for editing. We can even select by custom patterns. For example just the second and third rows, or the first and third columns.
Cells have 3 states – idle, hover and active. You can style these states individually, and the plugin will smoothly animate between them. While switching states in the editor, the cell’s actual state is also changed, so that you can preview your edits live on that state. Notice, it is clearly important for the editor and the cell to share the same state whenever you are editing. Which is why, even if you directly change the state of a current cell, hovering over the editor will set it back to the state the editor is showing.
While editing cell styles, notice that some cell components such as ‘Title Overall’ are parents of other components, in this case, ‘Icon’, ‘Title Text’ and ‘Value’. For the sake of convenience, adjusting font related settings of the parent element automatically changes the styling of it’s child elements as well. That is, unless, the child component is directly given a value of it’s own.
This style inheritance mechanism also works between the component states, with the hover and active states inheriting values from the idle state. But in this case it works for all style properties.
Last but not the least, whenever you see the editor’s disc icon pulsating, you’ll know there are unsaved changes. Click the icon to save your table’s current state. Please remember to save your work often.
And that concludes this tutorial. Thank you for your time.
Detailed Tutorial Part 1 : Keys
Hey, WordPressaHolic here with a quick tutorial for the Accordion Tables WordPress plugin.
Creating a new table is very much like publishing a new post. The interface will be very familiar to you.
Click ‘Add New’ under Accordion Tables in your dashboard, and a page where you can start editing your new table opens up.
Let’s enter a title for our new table in the title input field. This title can be changed at any time, and is automatically saved when you click outside the title input field.
You can get the shortcode for the table from the top of the preview panel. Let’s copy this shortcode over to the front end of our website and continue editing over there.
As you hover over your cells you’ll find some colored dots appear, and hovering over them exposes a set of keys.
The blue dots bring up keys for editing individual cells, the orange dots, present in the cells of the first column of each row bring up keys related to row options, the red dots at the top of the columns are for individual column options, and finally, the single green key is for editing the overall table options.
Let’s begin with editing a cell with the blue cell key. You can copy or delete your cells with the trash and copy buttons. By clicking and dragging the move key you can shift the position of the cell in the same column or shift it to another column altogether. The settings button selects the cell and opens up the WPH Front-end Live Editor for you to make changes to the cell. Click it once more and the cell is deselected. You’ll also notice the editor disappears since there are no cells selected for editing.
You can select multiple cells together for editing by clicking their check icons. Clicking this icon a second time deselects the cell. To instantly deselect all the selected tiles just click the settings button of any cell in the selection.
Now let’s move onto the orange keys. They provide row options. You have the option of copying rows, deleting them, which triggers a conformation prompt, and shifting them vertically. Using the selection or check key you can selects multiple rows to affect them together. For example, to maintain a color patters you may want to copy two rows together. Similarly you can delete them, or even shift them. Keep in mind, while shifting rows upward, drop them on the row above which you want them shifted, similarly, while moving downwards, drop them on the row below which you want them shifted.
By this point you’ll find the red column keys and the green overall settings key self explanatory.
And that wraps up this tutorial. Please feel free to send in your queries and feedback to the support mail id on the screen. Thank you for watching.
Basics Tutorial Part 2: WPH Editor Menus
Hey, WordPressaHolic here with another Accordion Tables tutorial.
To start, let’s bring up the editor by clicking a cell’s settings key.
The first menu we’ll cover is the window options menu at the top right of the editor. Here you’ll find a save button with the floppy disc icon and a visibility button with an eye icon. The save icon will start pulsating whenever you make a change to the table you’re currently editing.
If at this point you switch to editing another table which has nothing new to save, the pulsating animation will stop. It will restart when you return to the previous table, letting you know that your progress
with this table is still unsaved.
Pressing the save button will initiate the save procedure and the button’s icon will be changed to an ajax icon. After a few moments, when the icon switches back, you’ll know your table has been successfully saved, else an error message will pop up.
The visibility button is used to temporarily hide the editor and all it’s keys so you may view your page without their intrusion.
Next let’s move on to the ‘Settings’ menu, again, at the top of the screen, to the left of the window ops. Through this menu, you can tell the editor which aspect of the selected elements you wish to modify. It starts with the ‘Style’ option selected by default, but for example you may want to click the ‘Content’ option if that’s the aspect you wish to edit.
Just below the ‘Settings’ menu lies the ‘Components’ menu. Via this menu you can select which component of the element you want to edit. For example, I may want to change the styling of the ‘Icon’ element so I’ll click on the button labelled ‘Icon’ in the components menu and you’ll find that the icon related style settings will be loaded to the editor, ready for customization.
The interface of the editor can change depending on the keys you used to bring it up. For example, clicking the table’s overall settings button brings up a significantly different view than clicking on a cell’s settings button.
Even among cells the component menu is going to differ as different cells have different components that can be edited.
In the coming tutorials of this series, we’re going to cover each of the settings options, which will help us edit different aspects of our tables.
Basics Tutorial Part 3: WPH Editor Styling Ops
Hi, WordPressaHolic here with another tut for Accordion Tables.
Let’s get started with editing the styling of our regular cells. This cell has 3 states – ‘idle’, which is the state our cell starts with, ‘hover’, which is triggered when you take your mouse over the cell, and ‘active’ which is triggered when the cell is clicked.
You can edit the styles of these 3 states individually by selecting the appropriate ‘state’ in the editor, then customizing it’s styling, before moving on to the next state.
You’ll notice that whenever a state is selected in the editor, it is also automatically triggered on the cell for instant preview.
You’ll also notice that even if you manually change the state of the selected cell, and then hover over the editor, the cell will again be returned to the state that is selected on the editor. This feature is in place so there is no mis-match between the state that you’re editing and the state that you’re previewing.
Let’s make some changes to the three states for the purpose of this demo.
Once we’re done, you’ll find that the cell will transition between the three states with a smooth animation.
The editor provides you with a large array of styling options conveniently divided into groups that you can access via their titles
on the left.
Numerically oriented properties such as font size, line height and margins can be set via sliders.
If the value you want to set for a property is beyond it’s slider’s range, you can still set it by entering the figure directly into the input field of the property.
Whenever you’re done changing a property value, it’s input field will receive a red border and a cancellation icon upon hover. Clicking it will return the input to it’s default value. For combined input entries such as padding or margins, you’ll also need to cancel the combined input field.
Now lets touch upon inheritance for those interested in advanced features. The WPH Editor supports a style inheritance mechanism for
your convenience. Due to this mechanism whenever you change the styling of the idle state of a cell, it’s hover and active states
automatically inherit those changes as well.
This will happen unless those states already have their own values set up for the concerned properties. So a state’s own values always overrides its inherited values.
Inheritance also works between components of a cell. Though in this case inheritance is limited only to font properties, as users won’t want border, margin and other properties annoyingly inherited by sub components.
So accordingly, sub components such as title text and icon will inherit their font size from parent elements such as Overall or Title Overall.
And that concludes this tutorial. Please subscribe to be notified when new tutorials are made available.