Οι καλύτεροι τρόποι δημιουργίας στηλών στο WordPress — Αποκαλύφθηκε

Μαθαίνοντας πώς να δημιουργείτε στήλες στο WordPress, μπορείτε να μεταδώσετε το μήνυμά σας πιο ξεκάθαρο και οι χρήστες σας να σαρώσουν εύκολα αυτά που προσφέρετε.

Μπορούν να αξιοποιηθούν πολλές μέθοδοι στο WordPress για τη δημιουργία μιας διάταξης πολλών στηλών.

Μερικά είναι εύκολα, άλλα είναι ανόητα και μερικά είναι βασικά HTML. Αυτά μπορεί να είναι αναγκαιότητα, ωστόσο, ανάλογα με την πλατφόρμα WordPress που χρησιμοποιείτε.

Μπορείτε να κάνετε περισσότερο στυλ σε ιστότοπους WordPress που φιλοξενούνται μόνοι σας. Ωστόσο, ακόμη και με δωρεάν προγράμματα στο WordPress.com, μπορείτε να επωφεληθείτε από τις στήλες.

Πώς να δημιουργήσετε στήλες στο WordPress

Η χρήση του επεξεργαστή μπλοκ είναι τόσο εύκολη όσο η προσθήκη ενός μπλοκ στήλης. Χρονοβόρο αλλά πολύ αποτελεσματικό για πολύπλοκες διατάξεις. Χρησιμοποιώντας το Classic Editor, το πρόσθετο Shortcodes Ultimate κάνει εύκολη την προσθήκη στηλών. Μια εναλλακτική είναι η χρήση HTML μόνο για στήλες ή πίνακες HTML για στήλες με περιθώρια.

Προσθέστε στήλες στο θέμα σας WP χρησιμοποιώντας CSS και HTML

Το εργαλείο προσαρμογής θέματος WP απλοποιεί την επεξεργασία του φύλλου στυλ θέματός σας.

Μεταβείτε στο μενού Εμφάνιση, επιλέξτε «προσαρμογή» και μετά «Πρόσθετο CSS».

Εισαγάγετε τα ακόλουθα:

.column-left {
float: left;
width: 33.333%;
}
.column-right {
float: right;
width: 33.333%;
}
.column-center {
display: inline-block;
width: 33.333%;
}

Στη συνέχεια, στο πρόγραμμα επεξεργασίας WP, χρησιμοποιήστε το πρόγραμμα επεξεργασίας κειμένου και επικολλήστε το ακόλουθο HTML…

<div class="container">
<div class="column-left">
<h2>Insert column title</h2>
Your content here.
</div>
<div class="column-center">
<h2>Insert column title</h2>
Your content here.
</div>
<div class="column-right">
<h2>insert column title</h2>
Type your text in here.
</div>
</div>

Το πρόγραμμα προσαρμογής CSS προσθέτει τον κώδικα στο φύλλο στυλ του θέματός σας. Αφού προστεθεί, χρησιμοποιήστε το HTML για να εισαγάγετε στήλες.

Δημιουργήστε σύνθετες διατάξεις στηλών με ευκολία χρησιμοποιώντας το πρόγραμμα επεξεργασίας μπλοκ WP

Υπάρχει ένα μπλοκ ομαδοποιημένο στο Gutenberg για τη δημιουργία διατάξεων στηλών.

Κάντε κλικ στο εικονίδιο +, πληκτρολογήστε 'στήλες' και, στη συνέχεια, επιλέξτε το μπλοκ στηλών. Στη συνέχεια, επιλέξτε τη διάταξη που θέλετε. Υπάρχουν πέντε επιλογές για χρήση έως και τριών στηλών, μόνο με διαφορετικά πλάτη.

Επόμενο είναι να ρυθμίσετε το περιεχόμενό σας μέσα στο μπλοκ.

Καθώς αυτός είναι ο επεξεργαστής μπλοκ, τα πάντα ελέγχονται από μπλοκ. Ο πιο γρήγορος τρόπος είναι να προσθέσετε το μπλοκ της παραγράφου, να γράψετε έντονη γραφή στον τίτλο της στήλης σας (αν χρησιμοποιείτε τίτλους) και μετά να πληκτρολογήσετε το περιεχόμενό σας για τη στήλη.

Εναλλακτικά, μπορείτε να δημιουργήσετε μπλοκ μέσα σε μπλοκ.

Προσθέστε ένα μπλοκ 'επικεφαλίδας', μετά ένα μπλοκ παραγράφου ή ένα μπλοκ κειμένου και εικόνας. Σχεδιάστε τις στήλες σας σύμφωνα με τις προτιμήσεις σας.

Για παράδειγμα, η παρακάτω διάταξη χρησιμοποιεί μια διάταξη δύο στηλών (70:30) για να εμφανίσει το περιεχόμενο σχετικά με εμάς στα αριστερά με τις εικόνες στοιχισμένες προς τα δεξιά.

Οι εικόνες εισάγονται στη δεύτερη στήλη με δύο στήλες 50:50 στοιβαγμένες δίπλα στο μπλοκ της παραγράφου.

Το πρόγραμμα επεξεργασίας μπλοκ διευκολύνει τον σχεδιασμό πολύπλοκων διατάξεων με στήλες.

Η δημιουργία μιας διάταξης όπως αυτή που φαίνεται παραπάνω θα ήταν χρονοβόρα για τον μη αυτόματο κώδικα με CSS και HTML.

Για περίπλοκες διατάξεις στηλών, θα σας βοηθήσει να χρησιμοποιήσετε το πρόγραμμα επεξεργασίας μπλοκ.

Χρησιμοποιήστε το WordPress Shortcodes Ultimate Συνδέω

Το πρόσθετο Ultimate Shortcodes είναι γεμάτο με επιλογές στυλ περιεχομένου. Αρκεί να πούμε ότι οι στήλες είναι μία από αυτές και μπορείτε να εμφανίσετε έως και πέντε στήλες σε μια οθόνη επιτραπέζιου υπολογιστή.

Μεταβείτε στη σελίδα των προσθηκών σας, κάντε κλικ στην προσθήκη νέου και αναζητήστε Shortcodes Ultimate.

Μόλις εγκατασταθεί και ενεργοποιηθεί, εμφανίζεται ένα νέο κουμπί στην οθόνη του προγράμματος επεξεργασίας WordPress δίπλα στο κουμπί 'προσθήκη πολυμέσων'. Κάνοντας κλικ σε αυτό θα φορτώσει μια οθόνη με όλους τους διαθέσιμους συντομότερους κωδικούς.

Οι στήλες είναι ένα δωρεάν χαρακτηριστικό. Οι σύντομοι κωδικοί με κόκκινο εικονίδιο είναι premium. Οι άλλοι είναι ελεύθεροι.

Επιλέξτε τις στήλες και, στη συνέχεια, ακολουθήστε τις οδηγίες για να τις διαμορφώσετε όπως θέλετε.

Χρησιμοποιώντας το προσαρμοσμένο CSS που παρέχουν στον ιστότοπό τους, μπορείτε να το προσθέσετε στο προσαρμοσμένο CSS στη σελίδα ρυθμίσεων για την προσθήκη και, στη συνέχεια, να προσθέσετε στήλες με κείμενο μέσα στα κουμπιά.

Τοποθέτησή του στο πρόγραμμα επεξεργασίας κειμένου…

<h2><span style="color: #ff0000;">Learn More</span></h2>
 About Us 
 Services 
 FAQs 
 Feedback
 Pricing 

Όπου το '1/5' είναι στους παραπάνω συντομότερους κωδικούς, αυτοί οι αριθμοί ελέγχουν πόσες στήλες έχουν εισαχθεί. Χρησιμοποιήστε το '1/3' για τρεις στήλες.

Και φυσικά, εάν χρησιμοποιείτε τα κουμπιά, μπορείτε να συνδέσετε το κείμενο για να μεταβείτε στις σελίδες στις οποίες θέλετε να μεταβούν οι επισκέπτες σας.

Καθώς είναι σύντομοι κωδικοί, αυτοί μπορούν να τοποθετηθούν οπουδήποτε στον ιστότοπό σας. Δεν απαιτείται ενασχόληση με το CSS.

Εάν δεν θέλετε να προσθέσετε προσθήκες ή να χρησιμοποιήσετε το πρόγραμμα επεξεργασίας μπλοκ ή εάν χρησιμοποιείτε το WordPress.com, μπορείτε να επωφεληθείτε από τις στήλες, απλώς με πολύ λιγότερο στυλ και προσαρμογή…

Πώς να δημιουργήσετε στήλες στο WordPress με HTML

Για χρήστες του WordPress.com χωρίς πρόσβαση στο πρόγραμμα προσαρμογής CSS, το HTML στο πρόγραμμα επεξεργασίας WordPress είναι ο μόνος τρόπος δημιουργίας στηλών.

Η HTML εξακολουθεί να είναι δημοφιλής παρά το γεγονός ότι είναι μια από τις πιο ώριμες γλώσσες υπολογιστών. Σας δίνει τα βασικά για μια διάταξη πολλών στηλών. Απλά χωρίς φανταχτερό styling.

Εάν είστε ικανοποιημένοι με το να έχετε στήλες χωρίς περιθώρια, φόντο ή πλαίσια περιεχομένου που περιβάλλουν μπλοκ κειμένου, η HTML είναι ο καλύτερος τρόπος.

Στο πρόγραμμα επεξεργασίας WP, κάντε κλικ στην καρτέλα κειμένου για να επεξεργαστείτε το περιεχόμενό σας με HTML και εισαγάγετε τα εξής:

<div style="width: 33.3%; padding: 20px; float: left;">

Τρία στοιχεία HTML ελέγχουν τη διάταξη της στήλης σας.

Το πρώτο είναι το πλάτος. Το μέγιστο πλάτος σε οποιοδήποτε θέμα είναι 100% για να καταλαμβάνει το πλήρες μέγεθος μιας οθόνης. Για επιτραπέζιους υπολογιστές, εάν θέλετε τέσσερις στήλες, θα αλλάζατε το πλάτος σε 25%. 25 επί 4 είναι 100, επομένως το 25% σας δίνει μια διάταξη τεσσάρων στηλών.

Η επένδυση είναι η απόσταση μεταξύ των στηλών. Διαφορετικά, θα ήταν δύσκολο να πούμε πού τελειώνει το ένα μπλοκ κειμένου και πού αρχίζει το επόμενο.

Το τελευταίο μέρος είναι το στοιχείο float. Αυτό χρησιμοποιείται για την κίνηση των στηλών στα αριστερά ή στα δεξιά της σελίδας.

Κάθε τμήμα μπορεί να αλλάξει στο μέγεθος των στηλών που χρειάζεστε. Για παράδειγμα, εάν θέλατε μόνο δύο στήλες, θα ρυθμίσετε το πλάτος στο 50%.

<div style="width: 50%; padding: 20px; float: left;">Your content here</div>
<div style="width: 50%; padding: 20px; float: left;">Your second column content here</div>

Δημιουργήστε έναν πίνακα HTML για να προσθέσετε στήλες με περιθώρια στο WordPress

Ένας άλλος τρόπος για να προσθέσετε στήλες χωρίς να απαιτούνται επεξεργασίες CSS είναι να δημιουργήσετε έναν πίνακα σε HTML.

Ο παρακάτω κώδικας HTML δημιουργεί έναν πίνακα δύο στηλών

<table style="width: 100%; height: 48px;" border="”5″" width="”1200″" cellspacing="”50″" cellpadding="”50″">
<tbody>
<tr style="background-color: #fff73f;">
<td style="text-align: center; height: 16px;"><strong>Column Title </strong></td>
<td style="text-align: center; height: 16px;"><strong>Next column title</strong></td>
</tr>
<tr style="height: 16px;">
<td style="height: 300px; text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra venenatis urna, sit amet venenatis erat sagittis sit amet. Donec sit amet sollicitudin elit. Cras ultricies hendrerit arcu, id blandit lacus feugiat non.</td>
<td style="height: 300px; text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra venenatis urna, sit amet venenatis erat sagittis sit amet. Donec sit amet sollicitudin elit. Cras ultricies hendrerit arcu, id blandit lacus feugiat non.</td>
</tr>
</tbody>
</table>

Παρόμοια με τη δημιουργία στηλών χωρίς περιθώρια σε HTML, το μέγεθος των πινάκων HTML μπορεί να προσαρμοστεί αλλάζοντας το πλάτος και το ύψος. Όπως και τα χρώματα φόντου.

Για να δημιουργήσετε έναν πίνακα σε HTML στο WordPress, ορίστε πρώτα το 'στυλ πίνακα' και μετά πείτε στο για να φορτώσετε το περιεχόμενο.

Το είναι για 'σειρά πίνακα'. Το είναι για 'λεπτομέρειες πίνακα'.

Οι τίτλοι στηλών ορίζονται στη σειρά. Χρησιμοποιήστε την περιοχή λεπτομερειών πίνακα για να εισαγάγετε παραγράφους περιεχομένου μέσα σε μια στήλη.