{"id":3815,"date":"2023-08-09T04:24:28","date_gmt":"2023-08-09T01:24:28","guid":{"rendered":"https:\/\/trainingsite.ro\/breakdance\/?post_type=ghiduri&#038;p=3815"},"modified":"2023-08-11T15:40:24","modified_gmt":"2023-08-11T12:40:24","slug":"gutenberg-ghid-utilizare-editor","status":"publish","type":"ghiduri","link":"https:\/\/trainingsite.ro\/breakdance\/ghiduri\/gutenberg-ghid-utilizare-editor\/","title":{"rendered":"Gutenberg: Ghid utilizare editor"},"content":{"rendered":"<main class=\"bde-section-3815-100 bde-section\">\n  \n\t\n\n\n\n        <div class=\"section-shape-divider-wrapper section-shape-divider-wrapper--1\">\n          <span class=\"section-shape-divider\">\n                      <svg\n                xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n                viewBox=\"0 0 1440 320\"\n                preserveAspectRatio=\"none\"\n            >\n              <path fill=\"currentColor\" fill-opacity=\"1\" d=\"M0,96L30,106.7C60,117,120,139,180,133.3C240,128,300,96,360,80C420,64,480,64,540,101.3C600,139,660,213,720,240C780,267,840,245,900,245.3C960,245,1020,267,1080,250.7C1140,235,1200,181,1260,176C1320,171,1380,213,1410,234.7L1440,256L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z\"><\/path>\n            <\/svg>\n                    <\/span>\n      <\/div>\n  <div class=\"section-container\"><div class=\"bde-div-3815-101 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-columns-3815-102 bde-columns\"><div class=\"bde-column-3815-103 bde-column\">\n  \n\t\n\n\n\n<div class=\"bde-text-3815-104 bde-text\">\nEditare site WordPress\n<\/div><h1 class=\"bde-heading-3815-105 bde-heading\">\nGhidul \u00eencep\u0103torului pentru utilizarea editorului Gutenberg\n<\/h1><div class=\"bde-text-3815-106 bde-text\">\nVrei s\u0103 editezi u\u0219or articole \u0219i pagini \u00een WordPress? Cite\u0219te ghidul \u0219i vei afla cum func\u021bioneaz\u0103 editorul \u0219i c\u00e2t de u\u0219or adaugi text, imagini, video. Mai mult de at\u00e2t, acum po\u021bi edita tot site-ul cu ajutorul blocurilor.\n<\/div><div class=\"bde-form-builder-3815-107 bde-form-builder\">\n\n\n<form id=\"ghid-gutenberg-newsletter107\" class=\"breakdance-form breakdance-form--horizontal \" data-options=\"{&quot;slug&quot;:&quot;custom&quot;,&quot;name&quot;:&quot;Ghid Gutenberg newsletter&quot;,&quot;ajaxUrl&quot;:&quot;https:\\\/\\\/trainingsite.ro\\\/breakdance\\\/wp-admin\\\/admin-ajax.php&quot;,&quot;clearOnSuccess&quot;:true,&quot;hideOnSuccess&quot;:false,&quot;successMessage&quot;:&quot;Te-ai \\u00eenscris cu succes!&quot;,&quot;errorMessage&quot;:&quot;Ceva nu e \\u00een ordine. \\u00cencearc\\u0103 mai t\\u00e2rziu.&quot;,&quot;redirect&quot;:false,&quot;redirectUrl&quot;:&quot;&quot;,&quot;customJavaScript&quot;:&quot;&quot;,&quot;recaptcha&quot;:{&quot;key&quot;:&quot;&quot;,&quot;enabled&quot;:false},&quot;honeypot_enabled&quot;:true,&quot;popupsOnSuccess&quot;:[],&quot;popupsOnError&quot;:[]}\" data-steps=\"0\" >\n  \n  \n  \n<div class=\"breakdance-form-field breakdance-form-field--email\" >\n    \n    \n    \n    <input\n    class=\"breakdance-form-field__input\"\n    id=\"email\"\n    aria-describedby=\"email\"\n    type=\"email\"\n    name=\"fields[email]\"\n    placeholder=\"Email*\"\n    value=\"\"\n                \n        \n        \n    required\n    \n    \n>\n\n\n    \n    \n<\/div>\n\n\n<div class=\"breakdance-form-field breakdance-form-field--hpinput\" >\n    \n    \n            <label class=\"breakdance-form-field__label\" for=\"hpname\">\n            HP Name\n        <\/label>\n    \n    <input\n    class=\"breakdance-form-field__input\"\n    id=\"hpname\"\n    aria-describedby=\"hpname\"\n    type=\"hpinput\"\n    name=\"fields[hpname]\"\n    placeholder=\"\"\n    value=\"\"\n                \n        \n        \n    \n    autocomplete=\"off\"\n    tabindex=-1\n>\n\n\n    \n    \n<\/div>\n\n\n  \n\n<div class=\"breakdance-form-field breakdance-form-footer\">\n    \n    \n                                    \n    \n    \n    \n    \n            \n            <button type=\"submit\" class=\"button-atom button-atom--primary breakdance-form-button breakdance-form-button__submit\"  >\n    \n        <span class=\"button-atom__text\">Aboneaz\u0103-te la newsletter<\/span>\n\n        \n        \n            <\/button>\n    \n    <input type=\"hidden\" name=\"form_id\" value=\"107\">\n    <input type=\"hidden\" name=\"post_id\" value=\"3815\">\n<\/div>\n\n  \n<\/form>\n\n\n\n<\/div><div class=\"bde-text-3815-108 bde-text\">\n\u00censcrie-te \u0219i prime\u0219ti un cupon de 10% reducere la cursurile premium.\n<\/div>\n<\/div><div class=\"bde-column-3815-109 bde-column\">\n  \n\t\n\n\n\n<div class=\"bde-image-3815-110 bde-image\">\n<figure class=\"breakdance-image breakdance-image--786\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/Inserare-blocuri.svg\" width=\"\" height=\"\"><\/div>\n\t<\/div><\/figure>\n\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n<\/main><section class=\"bde-section-3815-111 bde-section\">\n  \n\t\n\n\n\n        <div class=\"section-shape-divider-wrapper section-shape-divider-wrapper--1\">\n          <span class=\"section-shape-divider\">\n                      <svg\n                xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n                viewBox=\"0 0 1440 320\"\n                preserveAspectRatio=\"none\"\n            >\n              <path fill=\"currentColor\" fill-opacity=\"1\" d=\"M0,288L1440,0L1440,320L0,320Z\"><\/path>\n            <\/svg>\n                    <\/span>\n      <\/div>\n  <div class=\"section-container\"><h2 class=\"bde-heading-3815-112 bde-heading\">\nCE ESTE EDITORUL WORDPRESS - GUTENBERG?\n<\/h2><div class=\"bde-text-3815-113 bde-text\">\nLansat la sf\u00e2r\u0219itul anului 2018, Gutenberg \u00eenlocuie\u0219te editorul platformei WordPress. Nu este nevoie s\u0103 instalezi un plugin, versiunile de la 5.x au Gutenberg integrat.<br>Pe pagina dedicat\u0103 Gutenberg ai urm\u0103toarea descriere:\n<\/div><div class=\"bde-blockquote-3815-114 bde-blockquote\">\n      <p class=\"above-text_blockquote-icon\"><span class=\"blockquote-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"icon-quotes-left\" viewBox=\"0 0 32 32\">\r\n<path d=\"M7.031 14c3.866 0 7 3.134 7 7s-3.134 7-7 7-7-3.134-7-7l-0.031-1c0-7.732 6.268-14 14-14v4c-2.671 0-5.182 1.040-7.071 2.929-0.364 0.364-0.695 0.751-0.995 1.157 0.357-0.056 0.724-0.086 1.097-0.086zM25.031 14c3.866 0 7 3.134 7 7s-3.134 7-7 7-7-3.134-7-7l-0.031-1c0-7.732 6.268-14 14-14v4c-2.671 0-5.182 1.040-7.071 2.929-0.364 0.364-0.695 0.751-0.995 1.157 0.358-0.056 0.724-0.086 1.097-0.086z\"\/>\r\n<\/svg><\/span><\/p>\n    <p >\u201eGutenberg\u201d este un nume de cod pentru o nou\u0103 paradigm\u0103 de creare cu WordPress, care \u00ee\u0219i propune s\u0103 revolu\u021bioneze \u00eentreaga experien\u021b\u0103 de publicare la fel de mult cum a f\u0103cut Johannes Gutenberg cuv\u00e2ntul tip\u0103rit. Proiectul urmeaz\u0103 un proces \u00een patru faze care va atinge p\u0103r\u021bi majore ale WordPress - Editare, Personalizare, Colaborare \u0219i Multilingv.<\/p>\n  \n<\/div><h2 class=\"bde-heading-3815-115 bde-heading\">\nFazele proiectului Gutenberg\n<\/h2><div class=\"bde-image-3815-116 bde-image\">\n<figure class=\"breakdance-image breakdance-image--826\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/Faze-proiect.svg\" width=\"\" height=\"\"><\/div>\n\t<\/div><\/figure>\n\n<\/div><div class=\"bde-text-3815-117 bde-text\">\nWordPress este o platform\u0103 cu vechime, iar din 2003 \u0219i p\u00e2n\u0103 \u00een 2018 editorul s\u0103u a fost cam acela\u0219i. \u00cen timp, au ap\u0103rut alte platforme cu tehnologie modern\u0103. \u0218i WordPress a sim\u021bit nevoia s\u0103 mearg\u0103 \u00eenainte \u0219i a\u0219a a ap\u0103rut proiectul Gutenberg. Dar pentru c\u0103 editorul clasic a existat foarte mult timp, iar utilizatorii sunt rezisten\u021bi la schimbare, proiectul nu a fost bine primit. Au fost voci contra, mai ales din partea dezvoltatorilor de teme \u0219i pluginuri, care s-au trezit c\u0103 e nevoie s\u0103 modifice codul sau s\u0103 refac\u0103 cu totul produsele lor software.<br><br>Dar iat\u0103 c\u0103 a trecut timpul \u0219i noul editor WordPress, care nu mai are bug-urile din trecut, a fost \u00eembr\u0103\u021bi\u0219at de mul\u021bi utilizatori. \u00cenc\u0103 mai sunt cei care nu vor s\u0103 adopte noul editor \u0219i de aceea WordPress pune la dispozi\u021bie pluginul Classic Editor. <br><br>Uite care sunt cele 4 faze, finalizate \u0219i nefinalizate, ale proiectului Gutenberg:\n<\/div><div class=\"bde-checkmark-list-3815-118 bde-checkmark-list\">\n<ul>\n  \n              \n              \n    <li>\n      <span class='bde-checkmark-list__icon bde-checkmark-list__icon_yes '>\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"icon-checkmark\" viewBox=\"0 0 32 32\">\n<path d=\"M27 4l-15 15-7-7-5 5 12 12 20-20z\"\/>\n<\/svg>\n              <\/span>\n      <div >\n        <strong>1. Editarea<\/strong> a introdus blocurile. Fiecare element HTML dintr-o pagin\u0103 web, \u00een editor este un bloc. Astfel ai blocuri pentru titluri, paragrafe, imagini, video \u0219i blocuri complexe care te ajut\u0103 s\u0103 ai un con\u021binut bogat \u00een articole \u0219i pagini.\u00a0\n      <\/div>\n\n    <\/li>\n\n  \n              \n              \n    <li>\n      <span class='bde-checkmark-list__icon bde-checkmark-list__icon_yes '>\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"icon-checkmark\" viewBox=\"0 0 32 32\">\n<path d=\"M27 4l-15 15-7-7-5 5 12 12 20-20z\"\/>\n<\/svg>\n              <\/span>\n      <div >\n        <strong>2. Personalizarea<\/strong> introduce Editarea \u00eentregului site - Full Site Editor (FSE), \u0219abloane de blocuri, directorul de blocuri \u0219i teme bazate pe blocuri. Acum proiectul este \u00een aceast\u0103 faz\u0103 \u0219i po\u021bi creea templates cu blocuri pentru toate p\u0103r\u021bile unui site.\n      <\/div>\n\n    <\/li>\n\n  \n              \n              \n    <li>\n      <span class='bde-checkmark-list__icon bde-checkmark-list__icon_no '>\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"icon-cancel-circle\" viewBox=\"0 0 32 32\">\n<path d=\"M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13z\"\/>\n<path d=\"M21 8l-5 5-5-5-3 3 5 5-5 5 3 3 5-5 5 5 3-3-5-5 5-5z\"\/>\n<\/svg>\n              <\/span>\n      <div >\n        <strong>3. Colaborarea <\/strong> multiautor va permite editarea simultan\u0103 a con\u021binutului site-ului. \n      <\/div>\n\n    <\/li>\n\n  \n              \n              \n    <li>\n      <span class='bde-checkmark-list__icon bde-checkmark-list__icon_no '>\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"icon-cancel-circle\" viewBox=\"0 0 32 32\">\n<path d=\"M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13z\"\/>\n<path d=\"M21 8l-5 5-5-5-3 3 5 5-5 5 3 3 5-5 5 5 3-3-5-5 5-5z\"\/>\n<\/svg>\n              <\/span>\n      <div >\n        <strong>4. Suportul Multilingv<\/strong> va fi nativ WordPress \u0219i nu va mai necesita instalarea unui plugin. Astfel va fi u\u0219or s\u0103-\u021bi construie\u0219ti un site \u00een mai multe limbi.\n      <\/div>\n\n    <\/li>\n\n  <\/ul>\n\n<\/div><div class=\"bde-text-3815-119 bde-text\">\nNu uita c\u0103 WordPress este \u00een continu\u0103 dezvoltare, a\u0219a c\u0103 \u00ee\u021bi recomand s\u0103 \u00eencerci s\u0103 te adaptezi noilor modific\u0103ri. WordPress.org dore\u0219te s\u0103 fie competitiv pe pia\u021ba platformelor de management al con\u021binutului pe care are o cot\u0103 mare de pia\u021b\u0103.\n<\/div><h2 class=\"bde-heading-3815-120 bde-heading\">\nCum \u00eencepi cu editorul Gutenberg\n<\/h2><div class=\"bde-rich-text-3815-121 bde-rich-text breakdance-rich-text-styles\">\n<p>Dac\u0103 ai o instalare nou\u0103 de WordPress (de la 5.x), vei beneficia de editorul Gutenberg direct \u00een articole \u0219i pagini. \u00ce\u021bi recomand s\u0103 aduci la zi <a target=\"_self\" rel=\"follow\" href=\"https:\/\/trainingsite.ro\/breakdance\/c\/versiuni-wordpress\/\">versiunea de WordPress<\/a> ca s\u0103 beneficiezi de toate \u00eembun\u0103t\u0103\u021birile aduse de-a lungul timpului. Apoi s\u0103 te asiguri c\u0103 po\u021bi folosi blocurile.<\/p>\n<\/div><div class=\"bde-columns-3815-122 bde-columns\"><div class=\"bde-column-3815-123 bde-column\">\n  \n\t\n\n\n\n<h3 class=\"bde-heading-3815-124 bde-heading\">\n1.Tem\u0103 compatibil\u0103\n<\/h3><div class=\"bde-image-hover-card-3815-125 bde-image-hover-card\">\n<figure class=\"ee-imagehover c4-izmir c4-border-bottom c4-image-pan-down\">\n    <img loading=\"lazy\" decoding=\"async\" class=\"breakdance-image-object\" src=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/tema-compatibila-blocuri.jpg\" width=\"600\" height=\"600\" srcset=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/tema-compatibila-blocuri.jpg 600w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/tema-compatibila-blocuri-300x300.jpg 300w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/tema-compatibila-blocuri-150x150.jpg 150w\" sizes=\"(max-width: 600px) 100vw, 600px\">\n  <figcaption class=\"c4-layout-center-left\">\n                <div class=\"c4-reveal-right c4-delay-200\">\n              <div><strong>Alege un design modern<\/strong><\/div>\n      <\/div>\n                <div class=\"c4-reveal-right c4-delay-400\">\n              <div>Tema, pe l\u00e2ng\u0103 design, asigur\u0103 \u0219i o parte din func\u021bionalitatea site-ului. Acum majoritatea temelor sunt compatibile cu editorul Gutenberg, dar exist\u0103 \u0219i teme compatibile FSE.<\/div>\n      <\/div>\n      <\/figcaption>\n<\/figure>\n<\/div>\n<\/div><div class=\"bde-column-3815-126 bde-column\">\n  \n\t\n\n\n\n<h3 class=\"bde-heading-3815-127 bde-heading\">\n2.Exploreaz\u0103 blocurile\n<\/h3><div class=\"bde-image-hover-card-3815-128 bde-image-hover-card\">\n<figure class=\"ee-imagehover c4-izmir c4-border-bottom c4-image-pan-down\">\n    <img loading=\"lazy\" decoding=\"async\" class=\"breakdance-image-object\" src=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/Blocuri-in-articole-si-pagini.jpg\" width=\"600\" height=\"600\" srcset=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/Blocuri-in-articole-si-pagini.jpg 600w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/Blocuri-in-articole-si-pagini-300x300.jpg 300w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/Blocuri-in-articole-si-pagini-150x150.jpg 150w\" sizes=\"(max-width: 600px) 100vw, 600px\">\n  <figcaption class=\"c4-layout-center-left\">\n                <div class=\"c4-reveal-right c4-delay-200\">\n              <div><strong>Scrie primul articol <\/strong><\/div>\n      <\/div>\n                <div class=\"c4-reveal-right c4-delay-400\">\n              <div>Folose\u0219te blocurile simple la \u00eenceput: paragraf, titlu, imagine. Fiecare bloc vine cu o bar\u0103 de editare, cu func\u021bii comune \u0219i func\u021bii specifice. Apoi \u00eencearc\u0103 mai multe blocuri, ca s\u0103-\u021bi faci o idee.<\/div>\n      <\/div>\n      <\/figcaption>\n<\/figure>\n<\/div>\n<\/div><div class=\"bde-column-3815-129 bde-column\">\n  \n\t\n\n\n\n<h3 class=\"bde-heading-3815-130 bde-heading\">\n3.Caut\u0103 blocuri noi\n<\/h3><div class=\"bde-image-hover-card-3815-131 bde-image-hover-card\">\n<figure class=\"ee-imagehover c4-izmir c4-border-bottom c4-image-pan-down\">\n    <img loading=\"lazy\" decoding=\"async\" class=\"breakdance-image-object\" src=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/Extindere-blocuri-personalizate.jpg\" width=\"600\" height=\"600\" srcset=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/Extindere-blocuri-personalizate.jpg 600w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/Extindere-blocuri-personalizate-300x300.jpg 300w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/Extindere-blocuri-personalizate-150x150.jpg 150w\" sizes=\"(max-width: 600px) 100vw, 600px\">\n  <figcaption class=\"c4-layout-center-left\">\n                <div class=\"c4-reveal-right c4-delay-200\">\n              <div><strong>Extinde gama de blocuri<\/strong><\/div>\n      <\/div>\n                <div class=\"c4-reveal-right c4-delay-400\">\n              <div>Dac\u0103 ai nevoie de un bloc specific, cum ar fi un slider sau un formular, le vei g\u0103si ca pluginuri. Caut\u0103-le \u00een Module cu blocuri activate din wordpress.org\/plugins.<\/div>\n      <\/div>\n      <\/figcaption>\n<\/figure>\n<\/div>\n<\/div><\/div><\/div>\n<\/section><section id=\"my_toc_content_gt\" class=\"bde-section-3815-132 bde-section\">\n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-columns-3815-133 bde-columns\"><div class=\"bde-column-3815-134 bde-column\">\n  \n\t\n\n\n\n<h2 class=\"bde-heading-3815-135 bde-heading\">\nCum utilizezi blocurile\n<\/h2><div class=\"bde-image-3815-136 bde-image\">\n<figure class=\"breakdance-image breakdance-image--831\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/Lucrul-cu-blocuri.svg\" width=\"\" height=\"\"><\/div>\n\t<\/div><\/figure>\n\n<\/div><div class=\"bde-rich-text-3815-137 bde-rich-text list breakdance-rich-text-styles\">\n<p><strong>Blocurile pentru elementele obi\u0219nuite dintr-o pagin\u0103 web sunt u\u0219or de folosit. Dar sunt \u0219i blocuri pe care trebuie s\u0103 le \u00een\u021belegi func\u021bionalitatea, de exemplu, coloanele grupate. Cite\u0219te mai departe \u0219i vei afla detalii despre blocuri.<\/strong><\/p>\n<\/div><h3 class=\"bde-heading-3815-138 bde-heading\">\nEcranul editorului Gutenberg\n<\/h3><div class=\"bde-image-3815-139 bde-image\">\n<figure class=\"breakdance-image breakdance-image--845\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><a class=\"breakdance-image-link breakdance-image-link--lightbox\" href=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/ecran-editor-wordpress-Gutenberg-1024x487.png\" target=\"_self\" rel=\"noopener\" data-sub-html=\"Editor WordPress de la versiunea 5.0\" data-lg-size=\"1024-487\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/ecran-editor-wordpress-Gutenberg.png\" width=\"1920\" height=\"913\" srcset=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/ecran-editor-wordpress-Gutenberg.png 1920w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/ecran-editor-wordpress-Gutenberg-300x143.png 300w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/ecran-editor-wordpress-Gutenberg-1024x487.png 1024w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/ecran-editor-wordpress-Gutenberg-768x365.png 768w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/ecran-editor-wordpress-Gutenberg-1536x730.png 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" loading=\"lazy\"><\/a><\/div>\n\t<\/div><figcaption class=\"breakdance-image__caption\">Editor WordPress de la versiunea 5.0<\/figcaption><\/figure>\n\n<\/div><div class=\"bde-rich-text-3815-140 bde-rich-text list breakdance-rich-text-styles\">\n<p>Dup\u0103 cum vezi \u00een imaginea de mai sus, ecranul con\u021bine 3 elemente:<\/p><ul><li><p>bara de instrumente de sus,<\/p><\/li><li><p>zona central\u0103 care va fi populat\u0103 cu blocuri,<\/p><\/li><li><p>bara din dreapta ce con\u021bine elementele articolului \u0219i a blocurilor.<\/p><\/li><\/ul><p>\u00cenainte de a insera primul bloc, adaug\u0103 titlul. \u00cel po\u021bi modifica mai t\u00e2rziu, dac\u0103 te r\u0103zg\u00e2nde\u0219ti.<\/p><p>Apoi adaug\u0103 un bloc paragraf. Pur \u0219i simplu \u00eencepi s\u0103 scrii sub titlu.<\/p><p>Dac\u0103 vrei s\u0103 adaugi alt tip de bloc, de exemplu un subtitlu, o po\u021bi face \u00een mai multe moduri:<\/p><ul><li><p>tasteaz\u0103 caracterul \/ \u0219i se va deschide o fereastr\u0103 cu cele mai uzuale blocuri de unde po\u021bi alege,<\/p><\/li><li><p>d\u0103 click pe plusul pe fond negru din dreapta \u0219i se va deschide o fereastr\u0103 cu un c\u00e2mp de c\u0103utare de unde po\u021bi g\u0103si blocuri,<\/p><\/li><li><p>la \u00eenceput, p\u00e2n\u0103 cuno\u0219ti blocurile, este bine s\u0103 le aduci din bara de instrumente de sus; d\u0103 click pe plusul pe fond albastru \u0219i se va deschide o coloan\u0103 cu toate blocurile \u0219i modelele existente \u00een editor.<\/p><\/li><\/ul><p>Modelele sunt grupuri de blocuri create pentru a m\u0103ri viteza de construire a unei pagini. D\u0103 click pe Modele, alege unul \u0219i apoi d\u0103 click pe el pentru a se insera \u00een pagin\u0103. Dup\u0103 aceea modific\u0103 textele, imaginile \u0219i culorile \u00een func\u021bie de cerin\u021bele site-ului t\u0103u.<\/p>\n<\/div><div class=\"bde-image-3815-141 bde-image\">\n<figure class=\"breakdance-image breakdance-image--857\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><a class=\"breakdance-image-link breakdance-image-link--lightbox\" href=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/blocuri-editor-wordpress-Gutenberg-1024x488.jpg\" target=\"_self\" rel=\"noopener\" data-sub-html=\"Blocuri Editor WordPress de la versiunea 5.0\" data-lg-size=\"1024-488\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/blocuri-editor-wordpress-Gutenberg.jpg\" width=\"1920\" height=\"915\" srcset=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/blocuri-editor-wordpress-Gutenberg.jpg 1920w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/blocuri-editor-wordpress-Gutenberg-300x143.jpg 300w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/blocuri-editor-wordpress-Gutenberg-1024x488.jpg 1024w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/blocuri-editor-wordpress-Gutenberg-768x366.jpg 768w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/blocuri-editor-wordpress-Gutenberg-1536x732.jpg 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" loading=\"lazy\"><\/a><\/div>\n\t<\/div><figcaption class=\"breakdance-image__caption\">Blocuri Editor WordPress de la versiunea 5.0<\/figcaption><\/figure>\n\n<\/div><h3 class=\"bde-heading-3815-142 bde-heading\">\nMeniul contextual al unui bloc\n<\/h3><div class=\"bde-text-3815-143 bde-text\">\nPuterea blocurilor const\u0103 \u00een set\u0103rile din meniul contextual care apare c\u00e2nd selectezi un bloc.  Descoperi mai multe func\u021bii dup\u0103 ce dai click pe cele 3 puncte verticale.\n<\/div><div class=\"bde-image-3815-144 bde-image\">\n<figure class=\"breakdance-image breakdance-image--863\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><a class=\"breakdance-image-link breakdance-image-link--lightbox\" href=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/meniu-contextual-bloc-paragraf.png\" target=\"_self\" rel=\"noopener\" data-sub-html=\"Meniu contextual bloc paragraf\" data-lg-size=\"-\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/meniu-contextual-bloc-paragraf.png\" width=\"892\" height=\"783\" srcset=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/meniu-contextual-bloc-paragraf.png 892w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/meniu-contextual-bloc-paragraf-300x263.png 300w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/meniu-contextual-bloc-paragraf-768x674.png 768w\" sizes=\"(max-width: 892px) 100vw, 892px\" loading=\"lazy\"><\/a><\/div>\n\t<\/div><figcaption class=\"breakdance-image__caption\">Meniu contextual bloc paragraf<\/figcaption><\/figure>\n\n<\/div><div class=\"bde-rich-text-3815-145 bde-rich-text list breakdance-rich-text-styles\">\n<p>Iau ca exemplu <strong>meniul contextual <\/strong>al blocului paragraf.<\/p><ol><li><p>prima iconi\u021b\u0103 ne spune ce bloc este \u0219i ne permite s\u0103 modific\u0103m tipul de bloc,<\/p><\/li><li><p>a doua iconi\u021b\u0103 este un m\u00e2ner de care tragi blocul pentru a-l muta \u00een alt\u0103 loca\u021bie<\/p><\/li><li><p>S\u0103ge\u021bile sus-jos permit mutarea \u00een sus sau \u00een jos a blocului, s\u0103rind peste blocurile de deasupra sau dedesubt<\/p><\/li><li><p>a patra iconi\u021b\u0103 permite alinerea textului la st\u00e2nga, pe centru sau la dreapta<\/p><\/li><li><p>B - bold sau aldin, permite \u00eengro\u0219area textului selectat (CTRL+B)<\/p><\/li><li><p>I - italic sau cursiv, permite \u00eenclinarea textului selectat (CTRL+I)<\/p><\/li><li><p>urm\u0103toarea iconi\u021b\u0103 permite inserarea unui link pe o selec\u021bia de text (CTRL+K); dup\u0103 ce se deschide fereastra, adaug\u0103 link-ul \u0219i apas\u0103 s\u0103geata din dreapta, <\/p><\/li><li><p>s\u0103geat\u0103 \u00een jos - afi\u0219eaz\u0103 mai multe unelte pentru blocuri; pentru paragraf sunt 8, te las s\u0103 le descoperi,<\/p><\/li><li><p>ultima iconi\u021b\u0103, reprezentat\u0103 de cele 3 puncte verticale, are diverse func\u021bii comune tuturor blocurilor. Vezi \u00een imaginea de mai sus ce func\u021bii con\u021bine fereastra deschis\u0103.<\/p><\/li><\/ol><p><\/p>\n<\/div><h3 class=\"bde-heading-3815-146 bde-heading\">\nAtributele blocului\n<\/h3><div class=\"bde-image-3815-147 bde-image\">\n<figure class=\"breakdance-image breakdance-image--867\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><a class=\"breakdance-image-link breakdance-image-link--lightbox\" href=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/modificari-atribute-bloc.png\" target=\"_self\" rel=\"noopener\" data-sub-html=\"Atribute bloc paragraf\" data-lg-size=\"-\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/modificari-atribute-bloc.png\" width=\"1697\" height=\"834\" srcset=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/modificari-atribute-bloc.png 1697w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/modificari-atribute-bloc-300x147.png 300w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/modificari-atribute-bloc-1024x503.png 1024w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/modificari-atribute-bloc-768x377.png 768w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/modificari-atribute-bloc-1536x755.png 1536w\" sizes=\"(max-width: 1697px) 100vw, 1697px\" loading=\"lazy\"><\/a><\/div>\n\t<\/div><figcaption class=\"breakdance-image__caption\">Atribute bloc paragraf<\/figcaption><\/figure>\n\n<\/div><div class=\"bde-rich-text-3815-148 bde-rich-text list breakdance-rich-text-styles\">\n<p>Din partea dreapt\u0103 a ecranului putem accesa elemente ce \u021bin de articol: stare \u0219i vizibilitate, autor, leg\u0103tur\u0103 permanent\u0103, categorii, etichete, imagine reprezentativ\u0103, rezumat \u0219i discu\u021bii. Tot de aici se acceseaz\u0103 elementele \u0219i atributele unui bloc. \u00cen cazul blocului paragraf acestea sunt:<\/p><ul><li><p><strong>Paragraf <\/strong>- tipul de bloc cu textul \"\u00eencepe cu blocul de baz\u0103 pentru construirea \u00eentregii nara\u021biuni\".<\/p><\/li><li><p><strong>Culoare <\/strong>- modificarea culorii textului \u0219i a fundalului. Pentru fundal se poate aplica un gradient creat din mai multe culori.<\/p><\/li><li><p><strong>Tipografice <\/strong>- dac\u0103 dai click pe func\u021biile de acolo, acestea se vor bifa, iar mai jos vei vedea ce s\u0103 alegi.<\/p><\/li><li><p><strong>Dimensiune implicit\u0103 \/ personalizat\u0103 <\/strong>- de aici alegi o dimensiune implicit\u0103 a fontului selec\u021biei text, iar dac\u0103 dai click pe iconi\u021ba din dreapta, po\u021bi s\u0103 introduci tu o cifr\u0103 a dimensiunii cu unitate de m\u0103sur\u0103 px, em, rem. Ca s\u0103 schimbi unitatea d\u0103 click pe px.<\/p><\/li><\/ul><p>Fiecare bloc are atributele sale, le vei descoperi pe m\u0103sur\u0103 ce le folose\u0219ti.<\/p>\n<\/div><h2 class=\"bde-heading-3815-149 bde-heading\">\nEditarea \u00eentregului site\n<\/h2><div class=\"bde-image-3815-150 bde-image\">\n<figure class=\"breakdance-image breakdance-image--887\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/Editare-site-FSE.svg\" width=\"\" height=\"\"><\/div>\n\t<\/div><\/figure>\n\n<\/div><div class=\"bde-rich-text-3815-151 bde-rich-text list breakdance-rich-text-styles\">\n<p>\u00cen a doua faz\u0103 a proiectului Gutenberg, se folosesc blocurile pentru a crea elementele paginii web:<\/p><ul><li><p>header cu logo, meniu de navigare, c\u00e2mp c\u0103utare<\/p><\/li><li><p>footer - simplu doar cu copyright sau complex cu coloane \u0219i link-uri utile, sigle etc.<\/p><\/li><li><p>prima pagin\u0103, pagina de c\u0103utare, pagina 404, pagin\u0103 arhive, pagin\u0103 articol<\/p><\/li><\/ul><p>Pentru a modifica toate acestea, trebuie s\u0103 instalezi o tem\u0103 compatibil\u0103 cu editarea \u00eentregului site (Full Site Edit).<\/p><p>Temele implicite Twenty Twenty-Two \u0219i Twenty Twenty-Three sunt compatibile FSE. Dac\u0103 activezi una din ele, vei avea surpriza s\u0103 nu mai g\u0103se\u0219ti meniul \u00een Aspect \u0219i nici Piesele. Asta pentru c\u0103 meniul \u00eel po\u021bi crea din Editare cu ajutorul unui bloc. Iar piesele sunt \u00eenlocuite tot cu blocuri.<\/p><p><\/p>\n<\/div><div class=\"bde-image-3815-152 bde-image\">\n<figure class=\"breakdance-image breakdance-image--885\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><a class=\"breakdance-image-link breakdance-image-link--lightbox\" href=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/meniu-tema-FSE.jpg\" target=\"_self\" rel=\"noopener\" data-sub-html=\"Temele FSE nu au meniu \u0219i piese\" data-lg-size=\"-\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/meniu-tema-FSE.jpg\" width=\"960\" height=\"360\" srcset=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/meniu-tema-FSE.jpg 960w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/meniu-tema-FSE-300x113.jpg 300w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/meniu-tema-FSE-768x288.jpg 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" loading=\"lazy\"><\/a><\/div>\n\t<\/div><figcaption class=\"breakdance-image__caption\">Temele FSE nu au meniu \u0219i piese<\/figcaption><\/figure>\n\n<\/div><div class=\"bde-rich-text-3815-153 bde-rich-text list breakdance-rich-text-styles\">\n<p>Deocamdat\u0103, FSE mai are probleme, chiar este o etichet\u0103 ro\u0219ie cu textul beta pe link-ul Edit. Editarea complet\u0103 a site-ului reprezint\u0103 noua viziune a WordPress, una care are poten\u021bialul de a-l face chiar mai cunoscut dec\u00e2t este deja. Totu\u0219i nu cred c\u0103 va fi adoptat \u00een mas\u0103 rapid. Au trecut deja 4 ani \u0219i blocurile nu sunt agreate \u00een totalitate.<\/p><p>Dac\u0103 e\u0219ti nou \u00een ecosistemul WordPress \u00ee\u021bi recomand s\u0103 \u00eencerci <a target=\"_blank\" href=\"https:\/\/wordpress.org\/themes\/tags\/full-site-editing\/\">temele compatibile FSE<\/a>, ca s\u0103 te familiarizezi cu ele. Pe site-ul wordpress.org sunt peste 320 de teme compatibile FSE.<\/p>\n<\/div><h2 class=\"bde-heading-3815-154 bde-heading\">\nCe este pluginul Gutenberg\n<\/h2><div class=\"bde-rich-text-3815-155 bde-rich-text breakdance-rich-text-styles\">\n<p>\u00cen libr\u0103ria wordpress.org, la pluginuri beta, g\u0103se\u0219ti pluginul Gutenberg. Toate \u00eembun\u0103t\u0103\u021birile se fac pe acest plugin \u0219i dup\u0103 ce se testeaz\u0103 \u00een comunitate, se integreaz\u0103 \u00een codul WordPress. Fiecare versiune nou\u0103 a platformei con\u021bine cod \u00eembun\u0103t\u0103\u021bit.<\/p><p>Nu este nevoie s\u0103 instalezi pluginul, dar dac\u0103 vrei s\u0103 testezi ultimele modific\u0103ri, atunci \u00eel po\u021bi instala pe un site de test.<\/p>\n<\/div><div class=\"bde-image-3815-156 bde-image\">\n<figure class=\"breakdance-image breakdance-image--879\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><a class=\"breakdance-image-link breakdance-image-link--lightbox\" href=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/editor-gutenberg-1024x487.png\" target=\"_self\" rel=\"noopener\" data-sub-html=\"Plugin Gutenberg - \u0219abloane\" data-lg-size=\"1024-487\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/editor-gutenberg-1024x487.png\" width=\"1024\" height=\"487\" srcset=\"https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/editor-gutenberg.png 1920w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/editor-gutenberg-300x143.png 300w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/editor-gutenberg-1024x487.png 1024w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/editor-gutenberg-768x365.png 768w, https:\/\/trainingsite.ro\/breakdance\/wp-content\/uploads\/2022\/09\/editor-gutenberg-1536x730.png 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" loading=\"lazy\"><\/a><\/div>\n\t<\/div><figcaption class=\"breakdance-image__caption\">Plugin Gutenberg - \u0219abloane<\/figcaption><\/figure>\n\n<\/div><div class=\"bde-rich-text-3815-157 bde-rich-text breakdance-rich-text-styles\">\n<p>\u00cen imaginea de mai sus vezi editorul pentru \u0219abloanele din site. \u0218abloanele \u00een versiunile clasice exist\u0103 \u00een tema activ\u0103 \u0219i necesit\u0103 programare ca s\u0103 le creezi.<\/p><p>Cu editorul Gutenberg \u0219i cu o tem\u0103 compatibil\u0103 FSE, creezi aceste \u0219abloane prin intermediul blocurilor. Deja po\u021bi face asta, dar te aten\u021bionez c\u0103 \u00eenc\u0103 nu este un proces lin. Mai sunt lucruri de \u00eembun\u0103t\u0103\u021bit.<\/p>\n<\/div><h2 class=\"bde-heading-3815-158 bde-heading\">\nTeme \u0219i pluginuri compatibile Gutenberg\n<\/h2><div class=\"bde-rich-text-3815-159 bde-rich-text list breakdance-rich-text-styles\">\n<p>Ca de fiecare dat\u0103 c\u00e2nd apare ceva nou \u00een WordPress, a\u0219a \u0219i acum au \u00eenceput s\u0103 apar\u0103 teme \u0219i pluginuri compatibile cu Gutenberg. Unele teme nu sunt compatibile FSE, altele sunt.<\/p><p>Cele mai multe sunt pluginurile care suplinesc limit\u0103rile blocurilor native. Aceste pluginuri vin adesea \u0219i cu \u0219abloane foarte bine create ca design. Deoarece Gutenberg este creat cu tehnologii moderne (REACT), pagina se \u00eencarc\u0103 foarte repede. Iar asta conteaz\u0103 foarte mult pentru utilizatori dar \u0219i pentru indexarea \u0219i pozi\u021bionarea \u00een motoarele de c\u0103utare.<\/p><p>Hai s\u0103 vedem c\u00e2teva din temele \u0219i pluginurile compatibile FSE.<\/p><p><strong>Teme<\/strong><\/p><ul><li><p><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https:\/\/wordpress.org\/themes\/twentytwentythree\/\">Twenty Twenty-Three<\/a> - tema implicit\u0103 WordPress de la versiunea 6.1. Este ca o p\u00e2nz\u0103 alb\u0103 ce a\u0219teapt\u0103 s\u0103 fie pictat\u0103 \u0219i este potrivit\u0103 pentru orice tip de site. Include 10 varia\u021bii diverse de stil create de membrii comunit\u0103\u021bii WordPress.<\/p><\/li><li><p><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https:\/\/wordpress.org\/themes\/twentytwentytwo\/\">Twenty Twenty-Two<\/a> - tema implicit\u0103 WordPress de la versiunea 5.9. Are un stil unic, cu culori din natur\u0103 \u0219i este potrivit\u0103 pentru orice tip de site. Vine cu foarte multe modele ce permit crearea de pagini cu structuri complexe.<\/p><\/li><li><p><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https:\/\/wordpress.org\/themes\/tove\/\">Tove <\/a>- este o tem\u0103 multifunc\u021bional\u0103 plin\u0103 de culoare, construit\u0103 \u00een \u00eentregime \u00een jurul Edit\u0103rii complete a site-ului. Este proiectat \u021bin\u00e2nd cont de cafenele \u0219i restaurante, dar se poate adapta cu u\u0219urin\u021b\u0103 pentru orice tip de site web. Tove reune\u0219te peste 40 de modele de bloc, inclusiv \u0219ase modele diferite de antet \u0219i \u0219apte modele diferite de subsol. Este printre primele teme FSE.<\/p><\/li><li><p><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https:\/\/wordpress.org\/themes\/zeever\/\">Zeever <\/a>- o tem\u0103 gratuit\u0103, responsiv\u0103, cu un stil interesant, de culoare \u00eenchis\u0103, compatibil\u0103 cu pluginul Gutenverse.<\/p><\/li><li><p><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https:\/\/wordpress.org\/themes\/smartcube\/\">Smartcube <\/a>- tem\u0103 creat\u0103 pentru site de \u0219tiri sau revist\u0103 online. Are mai multe modele de blocuri cu care creezi u\u0219or paginile a\u0219a cum le dore\u0219ti.<\/p><\/li><li><p><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https:\/\/wordpress.org\/themes\/bricksy\/\">Bricsy <\/a>- o tem\u0103 gratuit\u0103, pentru a crea un blog, cu 51 de modele. Are \u0219i o variant\u0103 premium, fiind creat\u0103 de Anariel Design, ca \u0219i tema Basti.<\/p><\/li><li><p><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https:\/\/www.anarieldesign.com\/themes\/basti\/\">Basti <\/a>- o tem\u0103 premium creat\u0103 pentru WooCommerce. Are 4 stiluri \u0219i diverse block patterns pe care le po\u021bi folosi \u00een toate paginile site-ului, nu numai \u00een magazinul online.<\/p><\/li><\/ul><p><strong>Pluginuri<\/strong><\/p><ul><li><p><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https:\/\/wordpress.org\/plugins\/extendify\/\">Extendify <\/a>- este o platform\u0103 de instrumente de design \u0219i creare a site-urilor, cu o bibliotec\u0103 de modele \u0219i machete de pagin\u0103 complet\u0103 pentru editorul de blocuri Gutenberg. Vine \u00een versiunea gratuit\u0103, c\u00e2t \u0219i \u00een versiunea premium. Blocurile \u0219i machetele de pagin\u0103 te ajut\u0103 s\u0103 creezi rapid un site, f\u0103r\u0103 s\u0103 \u0219tii programare sau design.<\/p><\/li><li><p><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https:\/\/wordpress.org\/plugins\/block-options\/\">EditorsKit <\/a>- ofer\u0103 un set de op\u021biuni de bloc de construc\u021bie a paginii \u0219i un set de instrumente pentru noul editor Gutenberg. Blocurile au formate de text, stil \u0219i flux de lucru prin simpla utilizare a instrumentelor furnizate de pluginul EditorsKit.<\/p><\/li><li><p><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https:\/\/wordpress.org\/plugins\/generateblocks\/\">GenerateBlocks<\/a> - func\u021bioneaz\u0103 m\u00e2n\u0103 \u00een m\u00e2n\u0103 cu tema GeneratePress, dar autorul afirm\u0103 c\u0103 orice tem\u0103 este instalat\u0103 pe site va fi compatibil\u0103 cu acest plugin. Aceasta este varianta gratuit\u0103 dar exist\u0103 \u0219i varianta PRO.<\/p><\/li><li><p><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https:\/\/wordpress.org\/plugins\/kadence-blocks\/\">Kadence Blocks<\/a> - func\u021bioneaz\u0103 cel mai bine cu tema KadenceWP gratuit\u0103, dar poate fi utilizat \u0219i dac\u0103 site-ul are alt\u0103 tem\u0103 instalat\u0103. Extinde editorul Gutenberg cu blocuri bine create ca design, dar \u0219i ca performan\u021b\u0103 \u0219i accesibilitate. \u00cencarc\u0103 doar fi\u0219ierele necesare blocurilor utilizate \u00een pagin\u0103, astfel ca pagina s\u0103 se \u00eencarce c\u00e2t mai rapid. Am apreciat c\u0103 unul din blocuri este tip formular, a\u0219a c\u0103 nu ai nevoie de alt plugin pentru formularul de contact. Pentru unele site-uri am creat \u0219i formulare complexe cu acest bloc.<\/p><\/li><\/ul><p><\/p>\n<\/div><h2 class=\"bde-heading-3815-160 bde-heading\">\nEste timpul s\u0103 trec la teme Full Site Editing?\n<\/h2><div class=\"bde-rich-text-3815-161 bde-rich-text list breakdance-rich-text-styles\">\n<p>Dac\u0103 e\u0219ti la \u00eenceput cu WordPress sau doar utilizator ocazional, cred c\u0103 nu e timpul s\u0103 treci la editarea \u00eentregului site cu Gutenberg. Cel mai bine este s\u0103 folose\u0219ti teme care suport\u0103 editorul Gutenberg dar \u0219i meniul clasic.<\/p><p>Po\u021bi s\u0103 faci trecerea la FSE dac\u0103 vrei s\u0103 ai un site simplu sau un blog \u0219i e\u0219ti o persoan\u0103 pu\u021bin mai tehnic\u0103. Sau \u00eenarmeaz\u0103-te cu mult\u0103 r\u0103bdare \u0219i \u00eencearc\u0103 s\u0103 \u00een\u021belegi noua paradigm\u0103 de creare site-uri cu temele FSE.<\/p><p>Dac\u0103 ai nevoie s\u0103 \u00een\u021belegi Gutenberg, am creat un curs premium pentru utilizarea sa \u00een mod creativ. \u00cen prima parte din curs \u00ee\u021bi explic Gutenberg \u0219i cum s\u0103 creezi pagini de blog cu mai multe elemente care eviden\u021biaz\u0103 mesajul. \u00cen a doua parte, voi crea un site de prezentare cu pagini complexe create doar cu Gutenberg \u0219i o tem\u0103 clasic\u0103. \u00cen ultima parte \u00ee\u021bi ar\u0103t cum folose\u0219ti ultima tem\u0103 implicit\u0103 Twenty Twenty-Three.<\/p><p><a target=\"_self\" rel=\"noopener noreferrer nofollow\" href=\"https:\/\/trainingsite.ro\/breakdance\/cursuri\">D\u0103 click pe link \u0219i \u00eenscrie-te la curs.<\/a><\/p><p><\/p>\n<\/div>\n<\/div><div class=\"bde-column-3815-162 bde-column\">\n  \n\t\n\n\n\n<div class=\"bde-table-of-contents-3815-163 bde-table-of-contents\">\n<div class=\"bde-table-of-contents__wrapper\">\n  <header class=\"bde-table-of-contents__header\">\n        <h3 class=\"bde-table-of-contents__title toc-ignore\">Cuprinsul Ghidului<\/h3>\n           <\/header>\n  \n  <div class=\"bde-table-of-contents__list\">\n    <nav id=\"bde-toc\" class=\"toc js-breakdance-toc\" aria-label=\"Cuprinsul Ghidului\">There are no headings in this document.<\/nav>\n  <\/div>\n<\/div>\n\n\n<\/div>\n<\/div><\/div><\/div>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Editare site WordPress Ghidul \u00eencep\u0103torului pentru utilizarea editorului Gutenberg Vrei s\u0103 editezi u\u0219or articole \u0219i pagini \u00een WordPress? Cite\u0219te ghidul \u0219i vei afla cum func\u021bioneaz\u0103 editorul \u0219i c\u00e2t de u\u0219or adaugi text, imagini, video. Mai mult de at\u00e2t, acum po\u021bi edita tot site-ul cu ajutorul blocurilor. HP Name Aboneaz\u0103-te la newsletter \u00censcrie-te \u0219i prime\u0219ti un [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"template":"","class_list":["post-3815","ghiduri","type-ghiduri","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Gutenberg: Ghid utilizare editor - WebSkills<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"ro_RO\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gutenberg: Ghid utilizare editor - WebSkills\" \/>\n<meta property=\"og:description\" content=\"Editare site WordPress Ghidul \u00eencep\u0103torului pentru utilizarea editorului Gutenberg Vrei s\u0103 editezi u\u0219or articole \u0219i pagini \u00een WordPress? Cite\u0219te ghidul \u0219i vei afla cum func\u021bioneaz\u0103 editorul \u0219i c\u00e2t de u\u0219or adaugi text, imagini, video. Mai mult de at\u00e2t, acum po\u021bi edita tot site-ul cu ajutorul blocurilor. HP Name Aboneaz\u0103-te la newsletter \u00censcrie-te \u0219i prime\u0219ti un [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/trainingsite.ro\/breakdance\/ghiduri\/gutenberg-ghid-utilizare-editor\/\" \/>\n<meta property=\"og:site_name\" content=\"WebSkills\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-11T12:40:24+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/trainingsite.ro\/breakdance\/ghiduri\/gutenberg-ghid-utilizare-editor\/\",\"url\":\"https:\/\/trainingsite.ro\/breakdance\/ghiduri\/gutenberg-ghid-utilizare-editor\/\",\"name\":\"Gutenberg: Ghid utilizare editor - WebSkills\",\"isPartOf\":{\"@id\":\"https:\/\/trainingsite.ro\/breakdance\/#website\"},\"datePublished\":\"2023-08-09T01:24:28+00:00\",\"dateModified\":\"2023-08-11T12:40:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/trainingsite.ro\/breakdance\/ghiduri\/gutenberg-ghid-utilizare-editor\/#breadcrumb\"},\"inLanguage\":\"ro-RO\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/trainingsite.ro\/breakdance\/ghiduri\/gutenberg-ghid-utilizare-editor\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/trainingsite.ro\/breakdance\/ghiduri\/gutenberg-ghid-utilizare-editor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Prima pagin\u0103\",\"item\":\"https:\/\/trainingsite.ro\/breakdance\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gutenberg: Ghid utilizare editor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/trainingsite.ro\/breakdance\/#website\",\"url\":\"https:\/\/trainingsite.ro\/breakdance\/\",\"name\":\"WebSkills\",\"description\":\"Dezvolt\u0103-\u021bi abilit\u0103\u021bile digitale\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/trainingsite.ro\/breakdance\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"ro-RO\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gutenberg: Ghid utilizare editor - WebSkills","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"ro_RO","og_type":"article","og_title":"Gutenberg: Ghid utilizare editor - WebSkills","og_description":"Editare site WordPress Ghidul \u00eencep\u0103torului pentru utilizarea editorului Gutenberg Vrei s\u0103 editezi u\u0219or articole \u0219i pagini \u00een WordPress? Cite\u0219te ghidul \u0219i vei afla cum func\u021bioneaz\u0103 editorul \u0219i c\u00e2t de u\u0219or adaugi text, imagini, video. Mai mult de at\u00e2t, acum po\u021bi edita tot site-ul cu ajutorul blocurilor. HP Name Aboneaz\u0103-te la newsletter \u00censcrie-te \u0219i prime\u0219ti un [&hellip;]","og_url":"https:\/\/trainingsite.ro\/breakdance\/ghiduri\/gutenberg-ghid-utilizare-editor\/","og_site_name":"WebSkills","article_modified_time":"2023-08-11T12:40:24+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/trainingsite.ro\/breakdance\/ghiduri\/gutenberg-ghid-utilizare-editor\/","url":"https:\/\/trainingsite.ro\/breakdance\/ghiduri\/gutenberg-ghid-utilizare-editor\/","name":"Gutenberg: Ghid utilizare editor - WebSkills","isPartOf":{"@id":"https:\/\/trainingsite.ro\/breakdance\/#website"},"datePublished":"2023-08-09T01:24:28+00:00","dateModified":"2023-08-11T12:40:24+00:00","breadcrumb":{"@id":"https:\/\/trainingsite.ro\/breakdance\/ghiduri\/gutenberg-ghid-utilizare-editor\/#breadcrumb"},"inLanguage":"ro-RO","potentialAction":[{"@type":"ReadAction","target":["https:\/\/trainingsite.ro\/breakdance\/ghiduri\/gutenberg-ghid-utilizare-editor\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/trainingsite.ro\/breakdance\/ghiduri\/gutenberg-ghid-utilizare-editor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Prima pagin\u0103","item":"https:\/\/trainingsite.ro\/breakdance\/"},{"@type":"ListItem","position":2,"name":"Gutenberg: Ghid utilizare editor"}]},{"@type":"WebSite","@id":"https:\/\/trainingsite.ro\/breakdance\/#website","url":"https:\/\/trainingsite.ro\/breakdance\/","name":"WebSkills","description":"Dezvolt\u0103-\u021bi abilit\u0103\u021bile digitale","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/trainingsite.ro\/breakdance\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"ro-RO"}]}},"_links":{"self":[{"href":"https:\/\/trainingsite.ro\/breakdance\/wp-json\/wp\/v2\/ghiduri\/3815"}],"collection":[{"href":"https:\/\/trainingsite.ro\/breakdance\/wp-json\/wp\/v2\/ghiduri"}],"about":[{"href":"https:\/\/trainingsite.ro\/breakdance\/wp-json\/wp\/v2\/types\/ghiduri"}],"author":[{"embeddable":true,"href":"https:\/\/trainingsite.ro\/breakdance\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":3,"href":"https:\/\/trainingsite.ro\/breakdance\/wp-json\/wp\/v2\/ghiduri\/3815\/revisions"}],"predecessor-version":[{"id":4047,"href":"https:\/\/trainingsite.ro\/breakdance\/wp-json\/wp\/v2\/ghiduri\/3815\/revisions\/4047"}],"wp:attachment":[{"href":"https:\/\/trainingsite.ro\/breakdance\/wp-json\/wp\/v2\/media?parent=3815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}