24pin.tech
Introduction
24Pin.Tech is our main landing page for customers and the general public, built using the WordPress block editor and Elementor elements. It is important that this aspect of our public image is kept up to date with the latest information concerning events in 24PinTech such as SkillsUSA, Awards we win, and other honorable mentions of our technicians. Our staff pages and training pages are also housed on the site under a password protected form, any information that is fed down through the manager of the techs must be put onto their respective pages.
Logging In
To log into 24Pin.Tech you have to use a custom url instead of the default /wp-admin redirect with WordPress. This custom URL is located on the secret sauce.
Home Page
The home page consists of four major sections
- Service/HESK section and the Social Media sub section
- Group Forms Pages
- Hall of Fame and
- Technician/Training section
Service/HESK Section
This section is the first section you are greeted with when you first navigate to 24pin.tech, there isn't much to be managed about this section except for the " Submit a Service Request " button. It is important to remove the button and replace it with a countdown or message indicating when we are closed so customers don't put in work tickets while we cannot work on devices. If there is any event or inconvenience that customers need to know about it would be fitting to have an alert in this section.
Social Section
The social section is everything between the Hall of Fame block all the way down to the testimonials section. The information and news here is strictly for the customers and geared toward customers to interact with and lead to further engagement off the site, whether it be through more trust in our repairs or follows on our Instagram or TikTok. A good majority of this section goes mainly untouched as the social media aspect manages itself through the Smash Balloon Instagram Feed plugin and the information about us such as "Who Are We?" section and our repair statistics stay consistent throughout the years. However, keeping the testimonials fresh with feedback from customers gives off a sense of general popularity and known trust sources can advocate for us through their students, be consistent with any significant comments we may receive as a business and keep the testimonial section updated.
Smash Balloon Instagram Feed
The plugin we use to display and keep our Instagram feed updated as we post is called Smash Balloon Instagram Feed, or as it will appear in the WordPress dashboard Instagram Feed. The way the plugin works is through adding a html embed code generated through the plugin to a regular WordPress block to display your feed as you set it to be in the plugin menu.
Through the menu it is easy to see the general overview of the feeds that you have generated onto the site, how many times they are displayed onto your site, and what the name of the feeds are; for example our Instagram feed name is our handle 24Pin.Tech. If you ever need to reapply a feed to the site you can copy the embed code from the Shortcode section to your clipboard and copy it to the Wordpress block of your choice; adding copies of the feed to the site adds more places to the Instances section where you can view where these feeds are displayed from the admin menu. If you need to quickly edit, duplicate, or delete the feed you can use the 3 buttons under the Actions tab or click the name of the feed to instead go to a more detailed overview of how the feed appears through the embed.
Adding a feed
To add another feed to be used on the site you have to navigate to the Add New section on the admin menu, located next to the All fields title in orange. The process to add another feed is easy and can be boiled down to 3 easy steps that the plugin walks you through
- Select a source If you already have a source that you want to pull from again in a different style it will appear on the page for you to create a new feed through, if not select Add New
- Select Account Type The 24Pin.Tech Instagram is displayed through the Personal type, however the only difference between Personal and Business is a slight ease of access when it comes to displaying headers and bios automatically when selecting Business, which you can easily do manually on the Personal selection
- Log In The plugin should walk you through the rest of the steps to ensure everything is connected, through Instagram and on the plugin's side as well.
Editing an existing Feed
When it comes to editing a feed you can either click on the name of the feed or the edit button in the Actions tab aligning with the feed you would like to edit
Group Pages
The group pages are the individual pages assigned to the teams that exist within 24PinTech; the systems, cybersecurity/networking, and technician teams. Each page has information tailored to what documentation, procedures, and team information the managers of each respective team wants their team members to be able to view. When editing these pages, be aware that each page follows a preset theme;
Systems Team - Cyberpunk
Cybersecurity / Networking - The Matrix
Technicians - Minecraft
These themes can be changed at the unanimous request of the entire team, but be mindful of the color schemes of said themes when adding or taking out information on their pages.
Technicians Page
The techs page is the most important to have up to date with their information, as the technician role in 24PinTech is one of the more populated roles. The information for the technicians is more procedure based than documentation based, meaning that there can be some wiggle room between adding links to external documents ( make sure that the links shared can be viewed by both an account on the MUSD.20 domain and an account outside of the MUSD.20 domain ) and pasting the entirety of the documentation in a intractable block. For more clear cut and short step procedures, such as general questions / procedures for smaller processes ( ie. where to file documentation, where to find your documentation ) err towards pasting the documentation entirely on the website itself instead of linking the original document or if needed have a button to the collection of documentation if it all contains information on the same subject.
Cybersecurity / Networking Page
The cybersecurity / networking page is one of the smaller pages of this group branch, only slightly above the systems team in terms of content based solely on the site instead of links leading to pages off of the website. Information on this site should have more basic procedures and general information about applications ( such as Wazuh ) near the top of the page so those new to the team could skim through the information first and then proceed to the bigger more complex documents, possibly linked within those short blocks of information or delegated to its own individual division on the page. Be careful when linking information onto the site, as while the cybersecurity pages has access to what they need to access others in different teams should not; ask to make sure that sensitive information ( root passwords, logins, etc. ) is not present in the documents team members send you.
Systems Page
The systems page is very similar to the Cybersecurity / Networking page, as there is so much detailed documentation in the Systems team that a lot of it doesn't translate too well being pasted in full onto their page. Be mindful of not only how you present the smaller blocks of information but also how that will lead into the bigger pages to be linked under them, try to keep different subjects or topics within their own blocks and link documentation according to said blocks. As stated before, one thing you do have to be mindful about information on the systems page is being sure that sensitive information ( root passwords, logins, etc. ) are not directly accessible from this page; everyone in the systems team knows where they should be, others accessing their pages should not.
Hall of Fame
The hall of fame contains information concerning awards that students have won at SkillsUSA state level and national level; listing information about what competition they were in, what place they got, and what medal they won. Any other awards won by students go outside of this page, and can be put under their pictures on the front page or featured in the news slides next to the redirect button.
Adding an entrant
When it comes to adding those who have won metals onto this page, you have to design around the pictures provided. For the years before 2022, those featured on the site had their pictures reused from the headshots taken at the beginning of the year meaning that there wasn't much work to be done in terms of cropping and scaling. However, from 2022 forward there is the possibility that there are going to be multiple pictures both individual and group based depending on the competitions won meaning that the presentation should follow a consistent pattern
Pictures
You want to use a picture with the entrant and their medal alone, without the other competitors that won along with them, so if they choose to continue with or without their teammate their individual accomplishments can be on full display. Make sure that the picture has the person in question is facing forward, with their medal facing outwards and not backwards, and their face is as clear and visible as possible. When cropping the photos you want to try and make the cut just a little below the knee in relation to how much space is above their head. For example, if the person has a lot of space above their head, trim the picture to remove the space above them and remove a little space from the bottom to compensate. The ultimate goal of cropping the pictures is to center the people in the frame while also making sure they don't look taller or shorter than they actually are.
Captions
The captions of the pictures shouldn't be too complicated, some competitions can be shortened down for the sake of space especially when the entrant won multiple awards within that year. When it comes to competitions such as Career Pathway Showcase: Business Management, this can be shortened down to just Career Pathway Showcase. Make sure that when you are shortening the names of competitions that you don't lose the essential parts of the competition.