10 полезных советов и рекомендаций для редактора WordPress Gutenberg

Редактор Гутенберга изменил способ, которым люди используют WordPress. Это более визуально, на основе блоков и гибкий, чем старый классический редактор. Но если вы новичок в этом, или даже если вы использовали его какое -то время, некоторые вещи все равно могут показаться немного сложными.

Хорошие новости? Есть множество полезных советов и хитростей, которые могут сделать вещи быстрее, проще и веселее.

В этом посте мы делимся 10 практическими советами Гутенберга. Они помогут вам создать лучший контент и поработать без обычного разочарования.

Эволюция редактора WordPress Gutenberg

Гутенберг был впервые представлен в WordPress 5.0 еще в декабре 2018 года. Он заменил классический редактор, который существует в течение многих лет. Основная идея Гутенберга состояла в том, чтобы дать пользователям больше контроля над своим контентом, используя систему на основе блоков.

Сначала многие пользователи не были уверены в изменениях. Интерфейс чувствовал себя по -другому. Это потребовалось, чтобы привыкнуть. Но со временем Гутенберг значительно улучшился. Это стало быстрее, более стабильным и более гибким.

С каждым обновлением WordPress Гутенберг получил новые функции. Теперь вы можете создать целые макеты страниц с блоками. Вы можете повторно использовать пользовательские блоки. Вы даже можете разработать заголовки, нижние колонтитулы и шаблоны, используя редактор сайта (для блок -тем).

Сегодня Гутенберг не просто редактор контента. Это становится полноценным инструментом редактирования . И с каждым релизом становится лучше.

10 полезных советов и рекомендаций для редактора WordPress Gutenberg

Гутенберг предлагает гораздо больше, чем просто основные блоки контента. Как только вы узнаете несколько умных советов, вы можете работать быстрее и создавать более выглядящие страницы, не касаясь какого-либо кода.

Вот быстрый список полезных хитростей, которые могут выровнять ваш опыт Гутенберга:

1. Используйте команды SLASH, чтобы быстро вставить блоки
2. Превратить любой блок в многоразовый блок
3. Перетащите блоки для перестройки содержания
4. Используйте представление списка для легкой навигации по блоке
5. Групповые блоки, чтобы перемещать или стилировать их вместе
6. Блокировки, чтобы предотвратить случайные изменения
7. Используйте сочетания клавиш, чтобы сэкономить время
8. Используйте шаблоны для готовых макетов
9. Копировать и вставить блоки между страницами
10. Добавить пользовательские CSS в определенные блоки

Теперь давайте пойдем в детали!

01. Используйте команды SLASH, чтобы быстро вставить блоки

Допустим, вы пишете сообщение в блоге, и вы хотите добавить изображение сразу после абзаца. Вы двигаете курсор вниз, нажимаете клавишу Enter, а затем ... вы достигаете мыши, нажимаете значок Little Plus, прокрутите параметры блока и, наконец, выбираете блок изображения. Звучит знакомо?

Теперь давайте сделаем это умнее.

Вместо всего этого щелчка, просто введите линейку вперед сразу после нажатия Enter. В тот момент, когда вы это делаете, появляется список блоков. Введите /image и нажмите снова. Сделанный. Вы просто вставили блок изображения, даже не касаясь мыши.

Этот трюк не только для изображений. Попробуйте /heading , /quote , /table или даже /columns . Как только вы привыкнете к этому, вы почувствуете, что вводите команды в инструмент письма с наддувом.

Он быстрый, гладкий и поддерживает ваш поток письма живым. Нет больше разрыва фокусировки. Просто введите и построите по мере продвижения.

02. Включите любой блок в многоразовый блок

Вы когда-нибудь писали в действие Call-Action или в сфере регистрации, который вы хотите использовать по нескольким сообщениям? Скапируйте его каждый раз, не идеально. Вы настраиваете один, забудьте обновить другой, и бум - ваш сайт заканчивается пятью разными версиями одного и того же.

Вот где многоразовые блоки пригодятся.

Допустим, вы разработали идеальный раздел CTA. Может быть, это заголовок, короткое предложение и кнопка. Выберите все эти блоки, щелкните меню «Трехлеть» (⋮) и выберите «Добавить в многоразовые блоки». Дайте ему имя, например, «Post CTA CTA» и сохраните.

Теперь каждый раз, когда вы пишете новый пост, просто ищите этот многоразовый блок. Вставьте его за один щелчок. И вот лучшая часть - если вы когда -нибудь обновляете этот блок, он меняется везде, где вы его использовали.

Нет больше несоответствий. Больше нет потраченного впустую времени.

Это как иметь свой собственный шаблон, готовый, когда вам это нужно.

03. Перетащите блоки, чтобы изменить содержание

Иногда ваш контент просто не течет так, как вы думали.

Может быть, это изображение выглядит лучше над текстом. Может быть, цитата кажется более сильной ближе к концу. Перестановление контента в Гутенберге так же просто, как перетаскивание и падающие блоки.

Вот как это работает.

Наведите на любой блок. Вы увидите ручку с шестью точками с левой стороны. Возьмите его и перетащите блок, где захотите. Хотите переместить полный раздел из нескольких блоков? Сначала группируйте их, затем перетащите всю группу одним плавным движением.

Это дает вам полный контроль над макетом - без разрезания, вставки или работы с каким -либо грязным кодом.

Это похоже на работу со строительными блоками. Перемещайте вещи вокруг, пока все не подходит просто правильно.

Простой. Визуальный Мгновенный.

04. Используйте представление списка для легкой навигации по блоке

Вы когда -нибудь создавали длинный пост в блоге с множеством изображений, текста, кнопок и, может быть, нескольких столбцов? В какой -то момент прокрутка вверх и вниз, чтобы найти конкретный блок превращается в головную боль.

Вот где представление списка экономит день.

Нажмите на маленький значок с тремя сложенными линиями в верхнем левом углу редактора. Это открывает панель, показывающую каждый блок в вашем посте, в порядке. Вы увидите чистый, структурированный контур - просто как содержимое для ваших блоков контента.

Вы можете нажать на любой блок из списка, чтобы прыгнуть прямо к нему. Вы также можете перетаскивать блоки прямо из представления списка. Нужно выбрать блок, который находится внутри группы или столбца? Список просмотр позволяет вам найти его мгновенно, больше нет охоты.

Это особенно полезно при работе со сложными макетами или вложенными блоками.

05. Групповые блоки, чтобы перемещать или стилировать их вместе

Представьте, что вы построили раздел с заголовком, абзацем, кнопкой и, возможно, цветом фона. Выглядит великолепно. Но теперь вы хотите переместить все это на другое место на странице. Один квартал за раз? Неа. Слишком медленно.

Просто группируйте их.

Выберите все блоки, которые вы хотите сохранить вместе. Затем нажмите на меню «Трехлеть» и выберите «Группа». Теперь эти блоки обернуты в один контейнер.

Вы можете переместить их как единое целое. Добавьте фон в группу. Отрегулируйте заполнение. Изменить выравнивание. Даже дублировать весь раздел за один щелчок.

Группы делают сложные макеты простыми. Они также сохраняют организованные вещи, особенно когда вы работаете на целевых страницах или на заказ.

06. блоки блокировки, чтобы предотвратить случайные изменения

У вас есть ваш дизайн так, как вы этого хотите. Все отлично выстроено. Но затем, когда вы редактируете, вы случайно удаляете блок или меняете что -то неуместно. Раздражает, верно?

Вот исправление: заблокируйте свои блоки .

Нажмите на любой блок, откройте настройки (меню с тремя точками) и выберите «Замок». Вы можете предотвратить движение, предотвратить удаление или оба. Таким образом, никто, включая вас, не может испортить его, не разблокируя его в первую очередь.

Это очень полезно, когда вы работаете с многоразовыми макетами и общими страницами или просто хотите защитить свою собственную тяжелую работу.

07. Используйте сочетания клавиатуры, чтобы сэкономить время

Нажав на работу, но сочетания клавиш? Это эффективность следующего уровня.

Вместо того, чтобы перемещать мышь каждые несколько секунд, выучите несколько быстрых комбо, и вы пролетете через свой контент. Например:

• Ctrl + Shift + D (CMD на Mac): дублировать блок
• Ctrl + alt + t: вставьте блок выше
• Ctrl + alt + y: вставьте блок ниже
• Shift + alt + z: удалить блок
• / (Страмная Слэш): Мгновенно откройте вставку блока

Есть еще больше, но даже несколько могут сэкономить вам минуты, особенно если вы регулярно строите длинные посты или страницы.

Это как знать секретные чит -коды. И как только ваши пальцы запомнят их, вы задаетесь вопросом, как вы когда -либо работали без них.

08. Используйте шаблоны для готовых макетов

Проектирование страницы с нуля может показаться ошеломляющей. Вы знаете, что вы хотите, но добраясь туда Block Block требует времени. Вот куда появляются узоры .

Паттерны представляют собой предварительно разработанные макеты блоков. WordPress включает в себя кучу по умолчанию - как разделам героев, отзывы, CTA и многое другое. Вы просто выбираете один и бросаете его на свою страницу. Сделанный.

Нажмите значок Plus, чтобы добавить новый блок. Затем переключитесь на вкладку шаблонов . Вы найдете такие категории, как текст, изображения, столбцы, заголовки - вы называете это. Выберите один, и весь макет появляется мгновенно.

Вы можете отредактировать текст, заменить изображения и настраивать стили. Но структура уже есть.

Это похоже на то, чтобы получить дизайнерский руку вам стартовый комплект. Отличные секции. Нет стресса. Без пустой страницы тревоги.

09. Копировать и вставить блоки между страницами

Создал что -то хорошее на одной странице и хотите то же самое на другой? Не начинай с нуля. Просто скопируйте и вставьте блоки.

Это проще, чем вы думаете.

Нажмите на блок (или группу блоков), затем нажмите CTRL + C (или CMD + C на Mac). Перейдите на другую страницу или пост. Нажмите, куда вы хотите, чтобы это было уйти, и нажмите Ctrl + V. Бум - все это появляется, точно так же.

Все форматирование, стили, кнопки, изображения - все приходят.

И да, это даже работает на вкладках браузера. Таким образом, вы можете открыть две посты рядом и перемещать контент между ними за считанные секунды.

10. Добавьте пользовательские CSS в определенные блоки

Иногда встроенные стили просто не разрезают его. Вы хотите что -то более уникальное. Здесь вступает в игру пользовательский CSS .

Гутенберг позволяет применять пользовательские CSS к отдельным блокам, поэтому вы можете выделить определенные части вашего контента, не влияя на всю страницу.

Вот как это сделать:

• Выберите блок, который вы хотите настроить.
• В настройках блока справа найдите расширенный раздел.
• Под дополнительным классом CSS (ES) добавьте пользовательское имя класса (например, my-custom-style ).
• Затем перейдите к своему настройщику WordPress или на заказ в разделе CSS в вашей теме и добавьте стили .my-custom-style { color: red; } используя этот класс (например,.

Таким образом, вы не возитесь не с глобальными стилями, а скорее адаптируете его только для этого блока.

Это идеально, когда вы хотите, чтобы конкретная кнопка, заголовок или раздел имел другой вид, не влияя на остальную часть вашего контента.

Заключение

С этими советами и хитростями вы на пути к освоению редактора WordPress Gutenberg. От ускорения вашего рабочего процесса с легкостью добавления пользовательских стилей, Gutenberg предлагает кучу гибкости для создателей контента.

Помните, что ключ - экспериментировать и найти инструменты, которые лучше всего подходят для вашего стиля. Независимо от того, создаете ли вы простые сообщения или сложные макеты, эти функции помогут вам сэкономить время, оставаться организованными и добавить индивидуальный подход к вашему сайту.

Если вы хотите сравнить Гутенберг с Ementor, вы можете проверить наш пост в блоге на Elementor vs Gutenberg, чтобы узнать, кто ведет путь.

Хотите поделиться своими отзывами, связанными с этим сообщением в блоге? Пожалуйста, сделайте это, используя поле для комментариев ниже. Мы хотели бы узнать ваши отзывы. Заботиться!